dibk-design 0.4.43 → 0.4.46

package/dist/components/Button.module.scss

@@ -47,8 +47,11 @@
   display: inline-block;
   margin-right: 5px;
   margin-bottom: 5px;
-  font-size: 20px;
+  font-size: 17px;
   font-weight: 500;
+  @media only screen and (min-width: $screen-sm) {
+    font-size: 20px;
+  }
 
   &:local(.hasTheme) {
     &:hover,
@@ -62,13 +65,20 @@
   }
 
   &:local(.regular) {
-    padding: 17px 32px;
+    padding: 14px 24px;
+    @media only screen and (min-width: $screen-sm) {
+      padding: 17px 32px;
+    }
   }
 
   &:local(.small) {
-    padding: 6px 32px;
+    padding: 6px 24px;
     min-width: 80px;
-    line-height: 21px;;
+    line-height: 18px;
+    @media only screen and (min-width: $screen-sm) {
+      line-height: 21px;
+      padding: 6px 32px;
+    }
   }
 
   &:local(.default) {
@@ -157,25 +167,28 @@
     }
   }
 
-  &:local(.rounded){
+  &:local(.rounded) {
     border-radius: 20px;
   }
 
   &:local(.hasArrowLeft) {
     &:before {
       @include transform(rotate(-135deg));
-      @include calc("top", "50% - 0.3rem");
+      @include calc("top", "50% - 0.4rem");
       content: " ";
       display: inline-block;
       position: absolute;
-      left: 1em;
       right: auto;
+      left: 0.55em;
       width: 0.5rem;
       height: 0.5rem;
       vertical-align: middle;
       border: 2px solid white;
       border-width: 2px 2px 0 0;
       margin-right: 1em;
+      @media only screen and (min-width: $screen-sm) {
+        left: 1em;
+      }
     }
 
     &:hover {
@@ -193,18 +206,21 @@
   &:local(.hasArrowRight) {
     &:after {
       @include transform(rotate(45deg));
-      @include calc("top", "50% - 0.3rem");
+      @include calc("top", "50% - 0.4rem");
       content: " ";
       display: inline-block;
       position: absolute;
       left: auto;
-      right: 1em;
+      right: 0.55em;
       width: 0.5rem;
       height: 0.5rem;
       vertical-align: middle;
       border: 2px solid white;
       border-width: 2px 2px 0 0;
       margin-left: 1em;
+      @media only screen and (min-width: $screen-sm) {
+        right: 1em;
+      }
     }
 
     &:hover {

package/dist/components/CheckBoxIcon.js

@@ -71,10 +71,14 @@ var CheckBoxIcon = /*#__PURE__*/function (_React$Component) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement("span", {
+      var ariaExpandedIndex = "aria-expanded";
+
+      var props = _defineProperty({
         className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(this.props.checked ? _CheckBoxIconModule.default.checked : '', " ").concat(this.props.disabled ? _CheckBoxIconModule.default.disabled : '', " ").concat(this.props.showBox ? _CheckBoxIconModule.default.showBox : '', " ").concat(this.props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ''),
         style: inlineStyle
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      }, ariaExpandedIndex, this.props.expandable ? this.props.checked.toString() : null);
+
+      return /*#__PURE__*/_react.default.createElement("span", props, /*#__PURE__*/_react.default.createElement("span", {
         className: _CheckBoxIconModule.default.checkmark
       }, this.props.checked ? this.props.checkmarkCharacter : ''));
     }
@@ -90,7 +94,8 @@ CheckBoxIcon.propTypes = {
   showBox: _propTypes.default.bool,
   theme: _propTypes.default.object,
   hasErrors: _propTypes.default.bool,
-  checkmarkCharacter: _propTypes.default.string
+  checkmarkCharacter: _propTypes.default.string,
+  expandable: _propTypes.default.bool
 };
 CheckBoxIcon.defaultProps = {
   size: '20px',
@@ -98,7 +103,8 @@ CheckBoxIcon.defaultProps = {
   disabled: false,
   showBox: true,
   hasErrors: false,
-  checkmarkCharacter: '✔'
+  checkmarkCharacter: '✔',
+  expandable: false
 };
 var _default = CheckBoxIcon;
 exports.default = _default;

package/dist/components/CheckBoxInput.js

@@ -59,7 +59,8 @@ var CheckBoxInput = /*#__PURE__*/function (_React$Component) {
         disabled: this.props.disabled,
         theme: this.props.theme,
         hasErrors: this.props.hasErrors,
-        checkmarkCharacter: this.props.checkmarkCharacter
+        checkmarkCharacter: this.props.checkmarkCharacter,
+        expandable: this.props.expandable
       }), /*#__PURE__*/_react.default.createElement("input", {
         onChange: this.props.onChange,
         type: "checkbox",
@@ -88,7 +89,8 @@ CheckBoxInput.propTypes = {
   contentOnly: _propTypes.default.bool,
   hasErrors: _propTypes.default.bool,
   theme: _propTypes.default.object,
-  checkmarkCharacter: _propTypes.default.string
+  checkmarkCharacter: _propTypes.default.string,
+  expandable: _propTypes.default.bool
 };
 CheckBoxInput.defaultProps = {
   checked: false,
@@ -96,7 +98,8 @@ CheckBoxInput.defaultProps = {
   name: '',
   contentOnly: false,
   hasErrors: false,
-  checkmarkCharacter: '✔'
+  checkmarkCharacter: '✔',
+  expandable: false
 };
 var _default = CheckBoxInput;
 exports.default = _default;

package/dist/components/CheckBoxInput.md

@@ -20,6 +20,13 @@ Checkbox input example:
 <CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-6" checked={true} checkmarkCharacter="✕">
   <span>Label for checked checkbox with custom checkmark</span>
 </CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-7" checked={true} checkmarkCharacter="✕" expandable={true}>
+  <span>Label for checkbox with aria-expanded true</span>
+</CheckBoxInput>
+<CheckBoxInput onChange={()=>{console.log('onchange')}} name="checkbox" id="checkBoxInput-8" checked={false} checkmarkCharacter="✕" expandable={true}>
+  <span>Label for checkbox with aria-expanded false</span>
+</CheckBoxInput>
+
 </div>
 ```
 

package/dist/components/Dialog.module.scss

@@ -37,8 +37,11 @@
         background-color: #fff;
         overflow: auto;
         position: relative;
-        &:not(:local(.noPadding)){
-            padding: 60px 40px;
+        &:not(:local(.noPadding)) {
+            padding: 30px 15px;
+            @media only screen and (min-width: $screen-sm) {
+                padding: 60px 40px;
+            }
         }
         @media (min-width: $screen-md) {
             @include calc("width", "100% - 128px");
@@ -50,12 +53,16 @@
             color: $color-primary;
             display: inline-block;
             position: absolute;
-            right: 15px;
-            top: 10px;
+            right: 7px;
+            top: 4px;
             text-decoration: underline;
             font-size: 19px;
             cursor: pointer;
-            &:hover{
+            @media only screen and (min-width: $screen-sm) {
+                right: 15px;
+                top: 10px;
+            }
+            &:hover {
                 text-decoration: none;
             }
             &::after {

package/dist/components/DragAndDropFileInput.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Button = _interopRequireDefault(require("./Button"));
 
+var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
+
 var _DragAndDropFileInputModule = _interopRequireDefault(require("./DragAndDropFileInput.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -167,9 +169,10 @@ var DragAndDropFileInput = /*#__PURE__*/function (_React$Component) {
           return _this2.handleAddButtonOnClick();
         },
         content: buttonContent
-      })) : '') : ''), this.props.contentOnly ? /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.selectedFileName, this.props.defaultContent)) : '', /*#__PURE__*/_react.default.createElement("span", {
-        className: _DragAndDropFileInputModule.default.errorMessage
-      }, this.props.errorMessage ? this.props.errorMessage : ''));
+      })) : '') : ''), this.props.contentOnly ? /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.selectedFileName, this.props.defaultContent)) : '', /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
+        content: this.props.errorMessage,
+        theme: this.props.theme
+      }));
     }
   }]);
 
@@ -190,7 +193,8 @@ DragAndDropFileInput.propTypes = {
   defaultContent: _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
-  mandatory: _propTypes.default.bool
+  mandatory: _propTypes.default.bool,
+  theme: _propTypes.default.object
 };
 DragAndDropFileInput.defaultProps = {
   label: '',

package/dist/components/DragAndDropFileInput.module.scss

@@ -33,13 +33,4 @@
       border-color: $color-dark-blue;
     }
   }
-  :local(.errorMessage) {
-    color: $color-error-text;
-    font-size: 19px;
-    font-weight: 400;
-    line-height: 1.6;
-    font-family: "Open Sans", sans-serif;
-    font-style: italic;
-    overflow-wrap: break-word;
-  }
 }

package/dist/components/ErrorMessage.js

@@ -0,0 +1,80 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _theme = require("../functions/theme");
+
+var _ErrorMessageModule = _interopRequireDefault(require("./ErrorMessage.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var ErrorMessage = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorMessage, _React$Component);
+
+  var _super = _createSuper(ErrorMessage);
+
+  function ErrorMessage() {
+    _classCallCheck(this, ErrorMessage);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(ErrorMessage, [{
+    key: "getThemeErrorMessageStyle",
+    value: function getThemeErrorMessageStyle(theme) {
+      return {
+        color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: _ErrorMessageModule.default.errorMessage,
+        style: this.getThemeErrorMessageStyle(this.props.theme)
+      }, this.props.content ? this.props.content : '');
+    }
+  }]);
+
+  return ErrorMessage;
+}(_react.default.Component);
+
+ErrorMessage.propTypes = {
+  /** Text content inside error message */
+  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
+  theme: _propTypes.default.object
+};
+ErrorMessage.defaultProps = {
+  content: ''
+};
+var _default = ErrorMessage;
+exports.default = _default;

package/dist/components/ErrorMessage.md

@@ -0,0 +1,15 @@
+Error message example:
+
+```js
+<ErrorMessage content="Wrong value" />
+```
+
+
+Themed error message example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+    <ErrorMessage content="Wrong value" theme={customTheme} />
+</React.Fragment>
+```

package/dist/components/ErrorMessage.module.scss

@@ -0,0 +1,16 @@
+@import "../style/global.scss";
+
+:local(.errorMessage) {
+    display: block;
+    color: $color-error-text;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.2;
+    margin: 4px 0;
+    font-family: "Open Sans", sans-serif;
+    font-style: italic;
+    overflow-wrap: break-word;
+    @media only screen and (min-width: $screen-sm) {
+        font-size: 19px;
+    }
+}

package/dist/components/InputField.js

@@ -21,6 +21,8 @@ var _Button = _interopRequireDefault(require("./Button"));
 
 var _Label = _interopRequireDefault(require("./Label"));
 
+var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
+
 var _theme = require("../functions/theme");
 
 var _generators = require("../functions/generators");
@@ -82,13 +84,6 @@ var InputField = /*#__PURE__*/function (_React$Component) {
         borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
       };
     }
-  }, {
-    key: "getThemeErrorMessageStyle",
-    value: function getThemeErrorMessageStyle(theme) {
-      return {
-        color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
-      };
-    }
   }, {
     key: "convertDateToString",
     value: function convertDateToString(date) {
@@ -177,10 +172,10 @@ var InputField = /*#__PURE__*/function (_React$Component) {
         theme: this.props.theme
       }) : '') : ''), !this.props.contentOnly ? this.props.type === 'date' ? /*#__PURE__*/_react.default.createElement("div", {
         style: styleRules
-      }, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, this.getDatePickerElementProps(defaultValue, defaultKey))) : /*#__PURE__*/_react.default.createElement("input", this.getInputElementProps(defaultValue, defaultKey, styleRules)) : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
-        className: _InputFieldModule.default.errorMessage,
-        style: this.getThemeErrorMessageStyle(this.props.theme)
-      }, this.props.errorMessage ? this.props.errorMessage : ''));
+      }, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, this.getDatePickerElementProps(defaultValue, defaultKey))) : /*#__PURE__*/_react.default.createElement("input", this.getInputElementProps(defaultValue, defaultKey, styleRules)) : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
+        content: this.props.errorMessage,
+        theme: this.props.theme
+      }));
     }
   }]);
 

package/dist/components/InputField.module.scss

@@ -1,7 +1,10 @@
 @import "../style/global.scss";
 
 :local(.inputField) {
-  font-size: 19px;
+  font-size: 16px;
+  @media only screen and (min-width: $screen-sm) {
+    font-size: 19px;
+  }
   > div {
     display: block;
   }
@@ -11,7 +14,7 @@
     @include transition(border-color 0.15s linear, background 0.15s linear);
     @include border-radius(0);
     @include box-shadow(none);
-    height: 56px;
+    height: 47px;
     width: 100%;
     display: block;
     padding: 10px;
@@ -21,9 +24,13 @@
     box-shadow: none;
     color: rgba(0, 0, 0, 0.75);
     font-family: inherit;
-    font-size: 19px;
+    font-size: 16px;
     box-sizing: border-box;
     border: 1px solid #afaba8;
+    @media only screen and (min-width: $screen-sm) {
+      font-size: 19px;
+      height: 56px;
+    }
 
     &:hover {
       border-color: $color-dark-blue;
@@ -71,13 +78,4 @@
       margin: 0 8px;
     }
   }
-  :local(.errorMessage) {
-    color: $color-error-text;
-    font-size: 19px;
-    font-weight: 400;
-    line-height: 1.6;
-    font-family: "Open Sans", sans-serif;
-    font-style: italic;
-    overflow-wrap: break-word;
-  }
 }

package/dist/components/Label.module.scss

@@ -3,8 +3,8 @@
     display: block;
     font-size: 1rem;
     font-weight: bold;
-    line-height: 1.5;
-    margin-bottom: 0;
+    line-height: 1.2;
+    margin-bottom: 2px;
     font-family: "Open Sans", sans-serif;
     overflow-wrap: break-word;
     &:local(.inline) {

package/dist/components/RadioButtonIcon.js

@@ -69,10 +69,14 @@ var RadioButtonIcon = /*#__PURE__*/function (_React$Component) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement("span", {
+      var ariaExpandedIndex = "aria-expanded";
+
+      var props = _defineProperty({
         className: "".concat(_RadioButtonIconModule.default.radioButtonIcon, " ").concat(this.props.checked ? _RadioButtonIconModule.default.checked : '', " ").concat(this.props.disabled ? _RadioButtonIconModule.default.disabled : '', " ").concat(this.props.hasErrors ? _RadioButtonIconModule.default.hasErrors : ''),
         style: inlineStyle
-      });
+      }, ariaExpandedIndex, this.props.expandable ? this.props.checked.toString() : null);
+
+      return /*#__PURE__*/_react.default.createElement("span", props);
     }
   }]);
 
@@ -84,13 +88,15 @@ RadioButtonIcon.propTypes = {
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   theme: _propTypes.default.object,
-  hasErrors: _propTypes.default.bool
+  hasErrors: _propTypes.default.bool,
+  expandable: _propTypes.default.bool
 };
 RadioButtonIcon.defaultProps = {
   size: '10px',
   checked: false,
   disabled: false,
-  hasErrors: false
+  hasErrors: false,
+  expandable: false
 };
 var _default = RadioButtonIcon;
 exports.default = _default;

package/dist/components/RadioButtonInput.js

@@ -58,7 +58,8 @@ var RadioButtonInput = /*#__PURE__*/function (_React$Component) {
         checked: this.props.checked,
         disabled: this.props.disabled,
         theme: this.props.theme,
-        hasErrors: this.props.hasErrors
+        hasErrors: this.props.hasErrors,
+        expandable: this.props.expandable
       }), /*#__PURE__*/_react.default.createElement("input", {
         type: "radio",
         onChange: this.props.onChange,
@@ -82,14 +83,16 @@ RadioButtonInput.propTypes = {
   onChange: _propTypes.default.func,
   contentOnly: _propTypes.default.bool,
   theme: _propTypes.default.object,
-  hasErrors: _propTypes.default.bool
+  hasErrors: _propTypes.default.bool,
+  expandable: _propTypes.default.bool
 };
 RadioButtonInput.defaultProps = {
   name: '',
   checked: false,
   disabled: false,
   contentOnly: false,
-  hasErrors: false
+  hasErrors: false,
+  expandable: false
 };
 var _default = RadioButtonInput;
 exports.default = _default;

package/dist/components/RadioButtonInput.md

@@ -6,6 +6,8 @@ Radio button input example:
 <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-2"><span>Unchecked radio button</span></RadioButtonInput>
 <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-input" id="radio-button-input-3" checked={true} disabled={true}><span>Checked disabled radio button</span></RadioButtonInput>
 <RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-4" disabled={true}><span>Unchecked disabled radio button</span></RadioButtonInput>
+<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-4" checked={false} expandable={true}><span>Unchecked expandable radio button </span></RadioButtonInput>
+<RadioButtonInput onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-input" id="radio-button-input-4" checked={true} expandable={true}><span>Checked expandable radio button </span></RadioButtonInput>
 </div>
 ```
 

package/dist/components/Select.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Label = _interopRequireDefault(require("./Label"));
 
+var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
+
 var _theme = require("../functions/theme");
 
 var _generators = require("../functions/generators");
@@ -66,13 +68,6 @@ var Select = /*#__PURE__*/function (_React$Component) {
         borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
       };
     }
-  }, {
-    key: "getThemeErrorMessageStyle",
-    value: function getThemeErrorMessageStyle(theme) {
-      return {
-        color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
-      };
-    }
   }, {
     key: "getThemeArrowStyle",
     value: function getThemeArrowStyle(theme) {
@@ -166,10 +161,10 @@ var Select = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/_react.default.createElement("span", {
           className: _SelectModule.default.selectListArrow,
           style: this.getThemeArrowStyle(this.props.theme)
-        }), /*#__PURE__*/_react.default.createElement("select", props, this.renderPlaceholderOption(this.props.placeholder, this.props.placeholderValue), this.renderOptionElements(this.props.options))), /*#__PURE__*/_react.default.createElement("span", {
-          className: _SelectModule.default.errorMessage,
-          style: this.getThemeErrorMessageStyle(this.props.theme)
-        }, this.props.errorMessage ? this.props.errorMessage : ''));
+        }), /*#__PURE__*/_react.default.createElement("select", props, this.renderPlaceholderOption(this.props.placeholder, this.props.placeholderValue), this.renderOptionElements(this.props.options))), /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
+          content: this.props.errorMessage,
+          theme: this.props.theme
+        }));
       }
     }
   }]);

package/dist/components/Select.module.scss

@@ -4,29 +4,19 @@
 	:local(.selectContainer) {
 		position: relative;
 
-		:local(.selectListArrow_old) {
-			position: absolute;
-			display: block;
-			content: "";
-			top: 14px;
-			right: 14px;
-			height: 0;
-			width: 0;
-			border-left: 6px solid transparent;
-			border-right: 6px solid transparent;
-			border-top: 12px solid $color-primary;
-			pointer-events: none;
-		}
-
 		:local(.selectListArrow) {
 			box-sizing: border-box;
 			position: absolute;
-			top: 20px;
-			right: 20px;
+			top: 15px;
+			right: 15px;
 			display: block;
 			width: 12px;
 			height: 12px;
 			border-radius: 100px;
+			@media only screen and (min-width: $screen-sm) {
+				top: 20px;
+				right: 20px;
+			}
 
 			&::after {
 				content: "";
@@ -47,17 +37,21 @@
 			@include transition(border-color 0.15s linear);
 			@include appearance(none);
 			@include box-shadow(none);
-			height: 56px;
+			height: 47px;
 			color: rgba(0, 0, 0, 0.75);
 			width: 100%;
 			font-family: inherit;
-			font-size: 19px;
+			font-size: 16px;
 			padding: 10px 40px 10px 10px;
 			border: 1px solid #afaba8;
 			border-radius: 0;
 			line-height: normal;
 			background: white;
 			cursor: pointer;
+			@media only screen and (min-width: $screen-sm) {
+				font-size: 19px;
+				height: 56px;
+			}
 
 			&:hover {
 				border-color: $color-dark-blue;
@@ -89,13 +83,4 @@
 			}
 		}
 	}
-	:local(.errorMessage) {
-		color: $color-error-text;
-		font-size: 19px;
-		font-weight: 400;
-		line-height: 1.6;
-		font-family: "Open Sans", sans-serif;
-		font-style: italic;
-		overflow-wrap: break-word;
-	}
 }

package/dist/components/Textarea.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Label = _interopRequireDefault(require("./Label"));
 
+var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
+
 var _theme = require("../functions/theme");
 
 var _generators = require("../functions/generators");
@@ -66,13 +68,6 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
       };
     }
-  }, {
-    key: "getThemeErrorMessageStyle",
-    value: function getThemeErrorMessageStyle(theme) {
-      return {
-        color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
-      };
-    }
   }, {
     key: "renderValueAsText",
     value: function renderValueAsText(value, defaultContent) {
@@ -111,10 +106,10 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         className: _TextareaModule.default.textarea
       }, /*#__PURE__*/_react.default.createElement(_Label.default, {
         htmlFor: this.props.id
-      }, this.props.label), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
-        className: _TextareaModule.default.errorMessage,
-        style: this.getThemeErrorMessageStyle(this.props.theme)
-      }, this.props.errorMessage ? this.props.errorMessage : ''));
+      }, this.props.label), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
+        content: this.props.errorMessage,
+        theme: this.props.theme
+      }));
     }
   }]);
 

package/dist/components/Textarea.module.scss

@@ -19,9 +19,12 @@
         box-shadow: none;
         color: rgba(0, 0, 0, 0.75);
         font-family: inherit;
-        font-size: 19px;
+        font-size: 16px;
         box-sizing: border-box;
         border: 1px solid #afaba8;
+        @media only screen and (min-width: $screen-sm) {
+            font-size: 19px;
+        }
 
         &:hover {
             border-color: $color-dark-blue;
@@ -52,13 +55,4 @@
             }
         }
     }
-    :local(.errorMessage) {
-        color: $color-error-text;
-        font-size: 19px;
-        font-weight: 400;
-        line-height: 1.6;
-        font-family: "Open Sans", sans-serif;
-        font-style: italic;
-        overflow-wrap: break-word;
-    }
 }

package/dist/index.js

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "DragAndDropFileInput", {
     return _DragAndDropFileInput.default;
   }
 });
+Object.defineProperty(exports, "ErrorMessage", {
+  enumerable: true,
+  get: function get() {
+    return _ErrorMessage.default;
+  }
+});
 Object.defineProperty(exports, "Footer", {
   enumerable: true,
   get: function get() {
@@ -164,6 +170,8 @@ var _Dialog = _interopRequireDefault(require("./components/Dialog"));
 
 var _DragAndDropFileInput = _interopRequireDefault(require("./components/DragAndDropFileInput"));
 
+var _ErrorMessage = _interopRequireDefault(require("./components/ErrorMessage"));
+
 var _Footer = _interopRequireDefault(require("./components/Footer"));
 
 var _Header = _interopRequireDefault(require("./components/Header"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "0.4.43",
+  "version": "0.4.46",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -19,10 +19,11 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
-    "windows-build": "rm -rf dist && SET NODE_ENV=production&& babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
+    "windows-build": "rd /s dist && SET NODE_ENV=production&& babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "styleguide": "FAST_REFRESH=false styleguidist server",
+    "windows-styleguide": "SET FAST_REFRESH=false && styleguidist server",
     "styleguide:build": "styleguidist build"
   },
   "eslintConfig": {