dibk-design 2.1.10 → 2.3.0

package/dist/assets/svg/asterisk.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32.275" height="30.469" focusable="false"><path fill="#9d2024" d="m0 14.355 2.246-6.933c5.176 1.823 8.936 3.402 11.28 4.736-.62-5.892-.945-9.944-.977-12.158h7.08c-.098 3.223-.472 7.26-1.123 12.11 3.353-1.693 7.194-3.256 11.523-4.688l2.246 6.933c-4.134 1.368-8.186 2.28-12.158 2.735 1.986 1.725 4.785 4.801 8.399 9.228l-5.86 4.15c-1.888-2.57-4.118-6.07-6.69-10.497-2.408 4.59-4.524 8.089-6.347 10.498l-5.762-4.15c3.776-4.656 6.478-7.732 8.106-9.23-4.2-.813-8.187-1.724-11.963-2.734"/></svg>

package/dist/components/Accordion.js

@@ -14,8 +14,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var Accordion = function Accordion(props) {
   var _useState = (0, _react.useState)(props.expanded),

package/dist/components/CheckBoxInput.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CheckBoxIcon = _interopRequireDefault(require("./CheckBoxIcon"));
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _CheckBoxInputModule = _interopRequireDefault(require("./CheckBoxInput.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var CheckBoxInput = function CheckBoxInput(props) {
@@ -35,9 +36,11 @@ var CheckBoxInput = function CheckBoxInput(props) {
     "aria-invalid": props.hasErrors ? "true" : null,
     "aria-describedby": props["aria-describedby"]
   };
-  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("span", {
+  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _CheckBoxInputModule.default.requiredSymbol
-  }, "*")));
+  })));
 };
 CheckBoxInput.propTypes = {
   checked: _propTypes.default.bool,

package/dist/components/CheckBoxInput.module.scss

@@ -6,9 +6,11 @@
     border: 1px solid transparent;
 
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
 
     &:not(.contentOnly):not(.disabled) {

package/dist/components/CheckBoxList.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _CheckBoxListModule = _interopRequireDefault(require("./CheckBoxList.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var CheckBoxList = function CheckBoxList(props) {
@@ -24,9 +25,11 @@ var CheckBoxList = function CheckBoxList(props) {
   };
   return _react.default.createElement("fieldset", {
     className: _CheckBoxListModule.default.checkBoxList
-  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend, props.required && _react.default.createElement("span", {
+  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _CheckBoxListModule.default.requiredSymbol
-  }, "*")) : null, renderChildElements(_react.default.Children.toArray(props.children)));
+  })) : null, renderChildElements(_react.default.Children.toArray(props.children)));
 };
 CheckBoxList.propTypes = {
   legend: _propTypes.default.string,

package/dist/components/CheckBoxList.module.scss

@@ -14,9 +14,11 @@ fieldset.checkBoxList {
         font-family: $default-font;
         overflow-wrap: break-word;
         .requiredSymbol {
-            color: $color-error;
-            font-size: 0.8em;
+            width: 1em;
+            height: 1em;
+            font-size: 0.4em;
             vertical-align: top;
+            margin-top: 2px;
         }
     }
 }

package/dist/components/DragAndDropFileInput.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = _interopRequireDefault(require("./Button"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _Label = _interopRequireDefault(require("./Label"));
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _DragAndDropFileInputModule = _interopRequireDefault(require("./DragAndDropFileInput.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -18,8 +19,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var DragAndDropFileInput = function DragAndDropFileInput(props) {
   var _props$errorMessage, _props$ariaDescribed;
@@ -85,9 +86,11 @@ var DragAndDropFileInput = function DragAndDropFileInput(props) {
     className: _DragAndDropFileInputModule.default.dragAndDropFileInput
   }, _react.default.createElement(_Label.default, {
     htmlFor: props.id
-  }, props.label, props.required && _react.default.createElement("span", {
+  }, props.label, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _DragAndDropFileInputModule.default.requiredSymbol
-  }, "*")), _react.default.createElement("div", null, props.children), !props.contentOnly ? _react.default.createElement("div", {
+  })), _react.default.createElement("div", null, props.children), !props.contentOnly ? _react.default.createElement("div", {
     ref: containerElementRef,
     className: "".concat(_DragAndDropFileInputModule.default.dragAndDropContainer, " ").concat(highlight ? _DragAndDropFileInputModule.default.highlighted : "")
   }, props.selectedFileName ? _react.default.createElement("div", null, _react.default.createElement("span", null, _react.default.createElement("b", null, "Valgt fil:"), " ", props.selectedFileName)) : _react.default.createElement("div", null, "Slipp fil her"), _react.default.createElement("input", _extends({}, inputElementProps, {

package/dist/components/DragAndDropFileInput.module.scss

@@ -2,9 +2,11 @@
 
 .dragAndDropFileInput {
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
 
     .dragAndDropContainer {

package/dist/components/ErrorMessage.js

@@ -9,6 +9,7 @@ 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 _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); }
 var ErrorMessage = function ErrorMessage(props) {
   var getThemeErrorMessageStyle = function getThemeErrorMessageStyle(theme) {
     return {
@@ -23,7 +24,9 @@ var ErrorMessage = function ErrorMessage(props) {
       style: getThemeErrorMessageStyle(props.theme)
     };
   };
-  return _react.default.createElement("span", getErrorElementProps(), props.content ? props.content : "");
+  return _react.default.createElement("span", _extends({
+    role: "alert"
+  }, getErrorElementProps()), props.content ? props.content : "");
 };
 ErrorMessage.propTypes = {
   id: _propTypes.default.string,

package/dist/components/InputField.js

@@ -11,6 +11,7 @@ var _Label = _interopRequireDefault(require("./Label"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _theme = require("../functions/theme");
 var _generators = require("../functions/generators");
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _InputFieldModule = _interopRequireDefault(require("./InputField.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -69,9 +70,11 @@ var InputField = function InputField(props) {
     className: "".concat(_InputFieldModule.default.inputField, " ").concat(_InputFieldModule.default[props.type])
   }, _react.default.createElement(_Label.default, {
     htmlFor: props.id
-  }, props.label, props.required && _react.default.createElement("span", {
+  }, props.label, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _InputFieldModule.default.requiredSymbol
-  }, "*"), props.type === "file" ? _react.default.createElement("div", {
+  }), props.type === "file" ? _react.default.createElement("div", {
     className: _InputFieldModule.default.fileInputContainer
   }, _react.default.createElement("span", {
     className: _InputFieldModule.default.input

package/dist/components/InputField.module.scss

@@ -9,9 +9,11 @@
         display: block;
     }
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
     input,
     &.file span.input {

package/dist/components/NavigationBar.js

@@ -18,8 +18,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var NavigationBar = function NavigationBar(props) {
   var _props$primaryListIte, _props$secondaryListI;

package/dist/components/RadioButtonInput.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RadioButtonIcon = _interopRequireDefault(require("./RadioButtonIcon"));
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _RadioButtonInputModule = _interopRequireDefault(require("./RadioButtonInput.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var RadioButtonInput = function RadioButtonInput(props) {
@@ -34,9 +35,11 @@ var RadioButtonInput = function RadioButtonInput(props) {
     "aria-invalid": props.hasErrors ? "true" : null,
     "aria-describedby": props["aria-describedby"]
   };
-  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_RadioButtonIcon.default, iconProps), _react.default.createElement("input", inputProps)) : null, _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("span", {
+  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_RadioButtonIcon.default, iconProps), _react.default.createElement("input", inputProps)) : null, _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _RadioButtonInputModule.default.requiredSymbol
-  }, "*")));
+  })));
 };
 RadioButtonInput.propTypes = {
   checked: _propTypes.default.bool,

package/dist/components/RadioButtonInput.module.scss

@@ -6,9 +6,11 @@
     border: 1px solid transparent;
 
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
 
     &:not(.contentOnly):not(.disabled) {

package/dist/components/RadioButtonList.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _RadioButtonListModule = _interopRequireDefault(require("./RadioButtonList.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var RadioButtonList = function RadioButtonList(props) {
@@ -24,9 +25,11 @@ var RadioButtonList = function RadioButtonList(props) {
   };
   return _react.default.createElement("fieldset", {
     className: _RadioButtonListModule.default.radioButtonList
-  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend, props.required && _react.default.createElement("span", {
+  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _RadioButtonListModule.default.requiredSymbol
-  }, "*")) : null, renderChildElements(_react.default.Children.toArray(props.children)));
+  })) : null, renderChildElements(_react.default.Children.toArray(props.children)));
 };
 RadioButtonList.propTypes = {
   legend: _propTypes.default.string,

package/dist/components/RadioButtonList.module.scss

@@ -14,9 +14,11 @@ fieldset.radioButtonList {
         font-family: $default-font;
         overflow-wrap: break-word;
         .requiredSymbol {
-            color: $color-error;
-            font-size: 0.8em;
+            width: 1em;
+            height: 1em;
+            font-size: 0.4em;
             vertical-align: top;
+            margin-top: 2px;
         }
     }
 }

package/dist/components/Select.js

@@ -10,6 +10,7 @@ var _Label = _interopRequireDefault(require("./Label"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _theme = require("../functions/theme");
 var _generators = require("../functions/generators");
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -98,9 +99,11 @@ var Select = function Select(props) {
       className: _SelectModule.default.select
     }, _react.default.createElement(_Label.default, {
       htmlFor: props.id
-    }, props.label, props.required && _react.default.createElement("span", {
+    }, props.label, props.required && _react.default.createElement("img", {
+      src: _asterisk.default,
+      alt: "",
       className: _SelectModule.default.requiredSymbol
-    }, "*")), _react.default.createElement("div", {
+    })), _react.default.createElement("div", {
       className: _SelectModule.default.selectContainer,
       style: _objectSpread({}, ((_props$width2 = props.width) === null || _props$width2 === void 0 ? void 0 : _props$width2.length) && {
         maxWidth: props.width

package/dist/components/Select.module.scss

@@ -2,9 +2,11 @@
 
 .select {
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
     .selectContainer {
         position: relative;

package/dist/components/Textarea.js

@@ -10,6 +10,7 @@ var _Label = _interopRequireDefault(require("./Label"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _theme = require("../functions/theme");
 var _generators = require("../functions/generators");
+var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -57,9 +58,11 @@ var Textarea = function Textarea(props) {
     className: _TextareaModule.default.textarea
   }, _react.default.createElement(_Label.default, {
     htmlFor: props.id
-  }, props.label, props.required && _react.default.createElement("span", {
+  }, props.label, props.required && _react.default.createElement("img", {
+    src: _asterisk.default,
+    alt: "",
     className: _TextareaModule.default.requiredSymbol
-  }, "*")), !props.contentOnly ? renderInputField() : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
+  })), !props.contentOnly ? renderInputField() : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
     id: getErrorElementId(),
     content: props.errorMessage,
     theme: props.theme

package/dist/components/Textarea.module.scss

@@ -5,9 +5,11 @@
         display: block;
     }
     .requiredSymbol {
-        color: $color-error;
-        font-size: 0.8em;
+        width: 1em;
+        height: 1em;
+        font-size: 0.4em;
         vertical-align: top;
+        margin-top: 2px;
     }
     textarea {
         @include appearance(none);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dibk-design",
-    "version": "2.1.10",
+    "version": "2.3.0",
     "private": false,
     "main": "dist/index.js",
     "module": "dist/index.js",