Build package

dist/components/CheckBoxInput.module.scss

@@ -21,6 +21,8 @@
     }
 
     .labelText {
+        font-size: 16px;
+        line-height: 24px;
         color: $color-primary;
     }
 

dist/components/CheckBoxListItem.module.scss

@@ -15,7 +15,8 @@
     cursor: pointer;
     font-family: $default-font;
     position: relative;
-    font-size: 17px;
+    font-size: 16px;
+    line-height: 24px;
     color: #000;
 
     &:not(.contentOnly):not(.compact) {

dist/components/DragAndDropFileInput.module.scss

@@ -11,11 +11,12 @@
 
     .dragAndDropContainer {
         @include transition(all 0.1s ease-in-out);
-        border: 2px dashed #ccc;
+        border: 2px dashed $color-secondary-light;
         border-radius: 20px;
         width: 100%;
         padding: 20px;
         text-align: center;
+        background-color: #fff;
 
         input {
             display: none;
@@ -26,7 +27,7 @@
         }
 
         &.highlighted {
-            background: $color-default-background;
+            background: $color-secondary-x-light;
             border-color: $color-primary;
         }
     }

dist/components/ErrorMessage.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _theme = require("../functions/theme");
 var _ErrorMessageModule = _interopRequireDefault(require("./ErrorMessage.module.scss"));
+var _errorSign = _interopRequireDefault(require("../assets/svg/error-sign.svg?url"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const ErrorMessage = props => {
@@ -26,7 +27,11 @@ const ErrorMessage = props => {
   };
   return _react.default.createElement("span", _extends({
     "aria-live": "polite"
-  }, getErrorElementProps()), props.content ? props.content : "");
+  }, getErrorElementProps()), _react.default.createElement("img", {
+    src: _errorSign.default,
+    alt: "",
+    className: _ErrorMessageModule.default.errorSign
+  }), props.content ? props.content : "");
 };
 ErrorMessage.propTypes = {
   id: _propTypes.default.string,

dist/components/ErrorMessage.module.scss

@@ -1,16 +1,28 @@
 @import "../style/global.scss";
 
+@keyframes messageIn {
+    0% {
+        opacity: 0;
+        transform: translateX(2em);
+    }
+}
+
 .errorMessage {
-    display: block;
-    color: $color-error;
+    display: flex;
+    align-items: center;
+    font-family: $default-font;
     font-size: 16px;
     font-weight: 400;
-    line-height: 1.2;
-    margin: 4px 0;
-    font-family: $default-font;
-    font-style: italic;
-    overflow-wrap: break-word;
-    @media only screen and (min-width: $screen-sm) {
-        font-size: 19px;
+    line-height: 24px;
+    letter-spacing: 0.01em;
+    color: $color-error;
+    margin: 12px 0 0;
+    animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
+    .errorSign {
+        width: 20px;
+        height: 20px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 0.5em;
     }
 }

dist/components/RadioButtonInput.module.scss

@@ -21,6 +21,8 @@
     }
 
     .labelText {
+        font-size: 16px;
+        line-height: 24px;
         color: $color-primary;
     }
 

dist/components/RadioButtonListItem.module.scss

@@ -15,7 +15,8 @@
   cursor: pointer;
   font-family: $default-font;
   position: relative;
-  font-size: 17px;
+  font-size: 16px;
+  line-height: 24px;
   color: #000;
 
   &:not(.contentOnly):not(.compact) {