dibk-design 7.2.2 → 7.4.0

package/dist/components/PDF.scss

@@ -24,6 +24,10 @@ $width-checkbox: 22px;
 $heading-logo-width: 100px;
 $heading-logo-margin-left: 15px;
 
+$margin-sm: 12px;
+$margin-md: 24px;
+$margin-lg: 36px;
+
 $margin-top-h1: 5px;
 $margin-top-h2: 22px;
 $margin-bottom-h2: 2px;
@@ -47,6 +51,8 @@ $min-height-blockquote: 36px;
 
 $margin-vertical-description-list: 3px;
 
+$hierarchy-indent-list: 24px;
+
 $margin-top-checkbox-container: 10px;
 $margin-bottom-checkbox-container: 10px;
 
@@ -223,6 +229,12 @@ body {
         margin-bottom: $margin-bottom-paragraph;
     }
 
+    ul {
+        margin-top: $margin-top-list;
+        margin-bottom: $margin-bottom-list;
+        padding-inline-start: $hierarchy-indent-list;
+    }
+
     dl {
         margin-top: $margin-top-list;
         margin-bottom: $margin-bottom-list;
@@ -234,20 +246,20 @@ body {
         dt {
             font-weight: bold;
         }
-        dd {
-            ul {
-                padding: 0;
-                margin: 0;
-                list-style: none;
-            }
-        }
         &[style*="--display-type:inline"],
         &[style*="--display-type: inline"],
         &:not([style*="--display-type"]) {
+            dd {
+                ul {
+                    padding: 0;
+                    margin: 0;
+                    list-style: none;
+                }
+            }
             &[style*="--title-width"] {
                 display: flex;
                 flex-flow: row wrap;
-                align-items: end;
+                align-items: start;
                 dt {
                     width: var(--title-width);
                 }
@@ -270,6 +282,10 @@ body {
                 }
                 dd {
                     display: inline;
+                    ul {
+                        display: inline-block;
+                        vertical-align: text-top;
+                    }
                 }
             }
         }
@@ -442,6 +458,72 @@ body {
         line-height: 1.2em;
         flex: none;
     }
+
+    //Margins
+    *[style*="--mt:none"],
+    *[style*="--mt: none"] {
+        margin-top: 0;
+    }
+    *[style*="--mb:none"],
+    *[style*="--mb: none"] {
+        margin-bottom: 0;
+    }
+    *[style*="--ml:none"],
+    *[style*="--ml: none"] {
+        margin-left: 0;
+    }
+    *[style*="--mr:none"],
+    *[style*="--mr: none"] {
+        margin-right: 0;
+    }
+    *[style*="--mt:sm"],
+    *[style*="--mt: sm"] {
+        margin-top: $margin-sm;
+    }
+    *[style*="--mb:sm"],
+    *[style*="--mb: sm"] {
+        margin-bottom: $margin-sm;
+    }
+    *[style*="--ml:sm"],
+    *[style*="--ml: sm"] {
+        margin-left: $margin-sm;
+    }
+    *[style*="--mr:sm"],
+    *[style*="--mr: sm"] {
+        margin-right: $margin-sm;
+    }
+    *[style*="--mt:md"],
+    *[style*="--mt: md"] {
+        margin-top: $margin-md;
+    }
+    *[style*="--mb:md"],
+    *[style*="--mb: md"] {
+        margin-bottom: $margin-md;
+    }
+    *[style*="--ml:md"],
+    *[style*="--ml: md"] {
+        margin-left: $margin-md;
+    }
+    *[style*="--mr:md"],
+    *[style*="--mr: md"] {
+        margin-right: $margin-md;
+    }
+    *[style*="--mt:lg"],
+    *[style*="--mt: lg"] {
+        margin-top: $margin-lg;
+    }
+    *[style*="--mb:lg"],
+    *[style*="--mb: lg"] {
+        margin-bottom: $margin-lg;
+    }
+    *[style*="--ml:lg"],
+    *[style*="--ml: lg"] {
+        margin-left: $margin-lg;
+    }
+    *[style*="--mr:lg"],
+    *[style*="--mr: lg"] {
+        margin-right: $margin-lg;
+    }
 }
 
 // For signed documents
@@ -509,6 +591,11 @@ body {
             margin-top: calc($margin-top-paragraph * $scaling-for-signed-documents);
             margin-bottom: calc($margin-bottom-paragraph * $scaling-for-signed-documents);
         }
+        ul {
+            margin-top: calc($margin-top-list * $scaling-for-signed-documents);
+            margin-bottom: calc($margin-bottom-list * $scaling-for-signed-documents);
+            padding-inline-start: calc($hierarchy-indent-list * $scaling-for-signed-documents);
+        }
         dl {
             margin-top: calc($margin-top-list * $scaling-for-signed-documents);
             margin-bottom: calc($margin-bottom-list * $scaling-for-signed-documents);
@@ -605,6 +692,55 @@ body {
             }
         }
     }
+    //Margins
+    *[style*="--mt:sm"],
+    *[style*="--mt: sm"] {
+        margin-top: calc($margin-sm * $scaling-for-signed-documents);
+    }
+    *[style*="--mb:sm"],
+    *[style*="--mb: sm"] {
+        margin-bottom: calc($margin-sm * $scaling-for-signed-documents);
+    }
+    *[style*="--ml:sm"],
+    *[style*="--ml: sm"] {
+        margin-left: calc($margin-sm * $scaling-for-signed-documents);
+    }
+    *[style*="--mr:sm"],
+    *[style*="--mr: sm"] {
+        margin-right: calc($margin-sm * $scaling-for-signed-documents);
+    }
+    *[style*="--mt:md"],
+    *[style*="--mt: md"] {
+        margin-top: calc($margin-md * $scaling-for-signed-documents);
+    }
+    *[style*="--mb:md"],
+    *[style*="--mb: md"] {
+        margin-bottom: calc($margin-md * $scaling-for-signed-documents);
+    }
+    *[style*="--ml:md"],
+    *[style*="--ml: md"] {
+        margin-left: calc($margin-md * $scaling-for-signed-documents);
+    }
+    *[style*="--mr:md"],
+    *[style*="--mr: md"] {
+        margin-right: calc($margin-md * $scaling-for-signed-documents);
+    }
+    *[style*="--mt:lg"],
+    *[style*="--mt: lg"] {
+        margin-top: calc($margin-lg * $scaling-for-signed-documents);
+    }
+    *[style*="--mb:lg"],
+    *[style*="--mb: lg"] {
+        margin-bottom: calc($margin-lg * $scaling-for-signed-documents);
+    }
+    *[style*="--ml:lg"],
+    *[style*="--ml: lg"] {
+        margin-left: calc($margin-lg * $scaling-for-signed-documents);
+    }
+    *[style*="--mr:lg"],
+    *[style*="--mr: lg"] {
+        margin-right: calc($margin-lg * $scaling-for-signed-documents);
+    }
 }
 @media print {
     .page.signed-document {

package/dist/components/Paper.js

@@ -10,7 +10,7 @@ var _PaperModule = _interopRequireDefault(require("./Paper.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Paper = props => {
   return _react.default.createElement("div", {
-    className: `${_PaperModule.default.paper} ${props.noMargin ? _PaperModule.default.noMargin : ""} ${props.noPadding ? _PaperModule.default.noPadding : ""}`
+    className: "".concat(_PaperModule.default.paper, " ").concat(props.noMargin ? _PaperModule.default.noMargin : "", " ").concat(props.noPadding ? _PaperModule.default.noPadding : "")
   }, props.children);
 };
 Paper.propTypes = {

package/dist/components/ProgressBar.js

@@ -11,7 +11,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const ProgressBar = props => {
   const scssValueProperty = "--value";
   return _react.default.createElement("div", {
-    className: `${_ProgressBarModule.default.progressBar} ${props.hasErrors ? _ProgressBarModule.default.hasErrors : ""}`,
+    className: "".concat(_ProgressBarModule.default.progressBar, " ").concat(props.hasErrors ? _ProgressBarModule.default.hasErrors : ""),
     role: "progressbar",
     "aria-valuenow": props.progress || 0,
     "aria-valuemin": "0",

package/dist/components/RadioButtonIcon.js

@@ -14,7 +14,7 @@ const RadioButtonIcon = props => {
     width: props.size
   };
   const radioButtonIconProps = {
-    className: `${_RadioButtonIconModule.default.radioButtonIcon} ${props.checked ? _RadioButtonIconModule.default.checked : ""} ${props.disabled ? _RadioButtonIconModule.default.disabled : ""} ${props.hasErrors ? _RadioButtonIconModule.default.hasErrors : ""}`,
+    className: "".concat(_RadioButtonIconModule.default.radioButtonIcon, " ").concat(props.checked ? _RadioButtonIconModule.default.checked : "", " ").concat(props.disabled ? _RadioButtonIconModule.default.disabled : "", " ").concat(props.hasErrors ? _RadioButtonIconModule.default.hasErrors : ""),
     style: inlineStyle
   };
   return _react.default.createElement("span", radioButtonIconProps);

package/dist/components/RadioButtonInput.js

@@ -12,7 +12,7 @@ var _RadioButtonInputModule = _interopRequireDefault(require("./RadioButtonInput
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const RadioButtonInput = props => {
   const labelProps = {
-    className: `${_RadioButtonInputModule.default.radioButtonInput} ${props.checked ? _RadioButtonInputModule.default.checked : ""} ${props.disabled ? _RadioButtonInputModule.default.disabled : ""} ${props.hasErrors ? _RadioButtonInputModule.default.hasErrors : ""}`,
+    className: "".concat(_RadioButtonInputModule.default.radioButtonInput, " ").concat(props.checked ? _RadioButtonInputModule.default.checked : "", " ").concat(props.disabled ? _RadioButtonInputModule.default.disabled : "", " ").concat(props.hasErrors ? _RadioButtonInputModule.default.hasErrors : ""),
     htmlFor: props.id
   };
   const iconProps = {

package/dist/components/RadioButtonList.js

@@ -22,12 +22,13 @@ const RadioButtonList = _ref => {
   const renderChildElements = childElements => {
     const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
     return childElementsthroughFragments.map((childElement, index) => {
-      const isRadioButtonListItem = childElement?.props?.type === "RadioButtonListItem";
+      var _childElement$props;
+      const isRadioButtonListItem = (childElement === null || childElement === void 0 || (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : _childElement$props.type) === "RadioButtonListItem";
       if (isRadioButtonListItem) {
         const childElementCopy = _react.default.cloneElement(childElement, {
           requiredGroup: required,
           compact: compact,
-          key: `radioButtonListItem-${index}`
+          key: "radioButtonListItem-".concat(index)
         });
         return childElementCopy;
       } else {
@@ -37,7 +38,7 @@ const RadioButtonList = _ref => {
   };
   return _react.default.createElement("fieldset", {
     className: _RadioButtonListModule.default.radioButtonList
-  }, !!legend?.length ? _react.default.createElement("legend", null, legendSize ? _react.default.createElement(_Header.default, {
+  }, !!(legend !== null && legend !== void 0 && legend.length) ? _react.default.createElement("legend", null, legendSize ? _react.default.createElement(_Header.default, {
     size: legendSize
   }, legend) : legend, required && _react.default.createElement("img", {
     src: _asterisk.default,

package/dist/components/Select.js

@@ -17,6 +17,11 @@ var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const Select = props => {
   const [showDropdownList, setShowDropdownList] = (0, _react.useState)(false);
   const dropdownRef = (0, _react.useRef)();
@@ -39,7 +44,7 @@ const Select = props => {
       }
     };
     const handleClickOutside = event => {
-      if (dropdownRef?.current && !dropdownRef.current.contains(event.target)) {
+      if (dropdownRef !== null && dropdownRef !== void 0 && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         hideDropdownList();
       }
     };
@@ -77,7 +82,7 @@ const Select = props => {
   };
   const renderSelectedValues = (options, selectElementProps) => {
     const selectedValues = selectElementProps.defaultValue || selectElementProps.value;
-    return selectedValues?.length ? selectedValues.map(value => {
+    return selectedValues !== null && selectedValues !== void 0 && selectedValues.length ? selectedValues.map(value => {
       const keyForValue = getKeyByValue(value, options);
       return keyForValue;
     }).join(", ") : null;
@@ -89,7 +94,7 @@ const Select = props => {
       const isSelected = selectedValues && selectedValues.length && selectedValues.includes(optionObject.value);
       return _react.default.createElement(_CheckBoxListItem.default, {
         key: index,
-        id: `${props.id}-${index}`,
+        id: "".concat(props.id, "-").concat(index),
         value: optionObject.value,
         checked: isSelected,
         onChange: () => selectElementProps.onChange(optionObject.value)
@@ -112,7 +117,7 @@ const Select = props => {
     }, placeholder) : "";
   };
   const getErrorElementId = () => {
-    return `${props.id}-errorMessage`;
+    return "".concat(props.id, "-errorMessage");
   };
   if (props.contentOnly) {
     const value = props.defaultValue ? props.defaultValue : props.value || null;
@@ -122,12 +127,11 @@ const Select = props => {
       htmlFor: props.id
     }, props.label), _react.default.createElement("span", null, value ? props.keyAsContent ? getKeyByValue(value, props.options) : value : props.defaultContent));
   } else {
+    var _props$width, _props$errorMessage, _props$ariaDescribed, _props$width2;
     const defaultValue = !props.value && props.defaultValue ? props.defaultValue : false;
-    const styleRules = {
-      ...(props.width?.length && {
-        maxWidth: props.width
-      })
-    };
+    const styleRules = _objectSpread({}, ((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
+      maxWidth: props.width
+    });
     const className = (0, _helpers.classNameArrayToClassNameString)([props.hasErrors && _SelectModule.default.hasErrors, props.multiple && _SelectModule.default.multiple]);
     const selectElementProps = {
       name: props.name,
@@ -138,9 +142,9 @@ const Select = props => {
       onChange: props.onChange,
       id: props.id,
       role: props.role,
-      key: `${props.id}-${(0, _generators.generateRandomString)(6)}`,
+      key: "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
       className,
-      "aria-describedby": props.hasErrors && !!props.errorMessage?.length ? getErrorElementId() : !!props["aria-describedby"]?.length ? props["aria-describedby"] : null,
+      "aria-describedby": props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null,
       "aria-invalid": props.hasErrors ? "true" : null,
       style: styleRules
     };
@@ -154,11 +158,9 @@ const Select = props => {
       className: _SelectModule.default.requiredSymbol
     })), _react.default.createElement("div", {
       className: _SelectModule.default.selectContainer,
-      style: {
-        ...(props.width?.length && {
-          maxWidth: props.width
-        })
-      }
+      style: _objectSpread({}, ((_props$width2 = props.width) === null || _props$width2 === void 0 ? void 0 : _props$width2.length) && {
+        maxWidth: props.width
+      })
     }, _react.default.createElement("span", {
       className: _SelectModule.default.selectListArrow
     }), props.multiple ? _react.default.createElement("div", {

package/dist/components/Table.js

@@ -12,12 +12,12 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const getCaptionAlignClass = captionAlign => {
   const defaultValue = "left";
   const availableValues = ["left", "center", "right"];
-  return captionAlign?.length && availableValues.includes(captionAlign) ? _TableModule.default[`captionAlign-${captionAlign}`] : _TableModule.default[`captionAlign-${defaultValue}`];
+  return captionAlign !== null && captionAlign !== void 0 && captionAlign.length && availableValues.includes(captionAlign) ? _TableModule.default["captionAlign-".concat(captionAlign)] : _TableModule.default["captionAlign-".concat(defaultValue)];
 };
 const getCaptionSideClass = captionSide => {
   const defaultValue = "top";
   const availableValues = ["top", "bottom"];
-  return captionSide?.length && availableValues.includes(captionSide) ? _TableModule.default[`captionSide-${captionSide}`] : _TableModule.default[`captionSide-${defaultValue}`];
+  return captionSide !== null && captionSide !== void 0 && captionSide.length && availableValues.includes(captionSide) ? _TableModule.default["captionSide-".concat(captionSide)] : _TableModule.default["captionSide-".concat(defaultValue)];
 };
 const Table = props => {
   return _react.default.createElement("table", {

package/dist/components/Textarea.js

@@ -12,24 +12,27 @@ var _generators = require("../functions/generators");
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const Textarea = props => {
   const renderValueAsText = (value, defaultContent) => {
     return value ? value : defaultContent;
   };
   const getErrorElementId = () => {
-    return `${props.id}-errorMessage`;
+    return "".concat(props.id, "-errorMessage");
   };
   const renderInputField = () => {
-    const defaultValue = !props.value?.length && props.defaultValue?.length ? props.defaultValue : false;
+    var _props$value, _props$defaultValue, _props$width, _props$resize, _props$errorMessage, _props$ariaDescribed;
+    const defaultValue = !((_props$value = props.value) !== null && _props$value !== void 0 && _props$value.length) && (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 && _props$defaultValue.length ? props.defaultValue : false;
     const defaultKey = props.elementKey || null;
-    const styleRules = {
-      ...(props.width?.length && {
-        maxWidth: props.width
-      }),
-      ...(props.resize?.length && {
-        resize: props.resize
-      })
-    };
+    const styleRules = _objectSpread(_objectSpread({}, ((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
+      maxWidth: props.width
+    }), ((_props$resize = props.resize) === null || _props$resize === void 0 ? void 0 : _props$resize.length) && {
+      resize: props.resize
+    });
     const textareaElementProps = {
       name: props.name,
       readOnly: props.readOnly,
@@ -37,14 +40,14 @@ const Textarea = props => {
       required: props.required,
       type: props.type,
       id: props.id,
-      key: defaultKey || `${props.id}-${(0, _generators.generateRandomString)(6)}`,
+      key: defaultKey || "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
       onChange: props.onChange,
       onBlur: props.onBlur,
       [defaultValue ? "defaultValue" : "value"]: defaultValue || props.value,
       placeholder: props.placeholder,
       rows: props.rows,
       className: props.hasErrors ? _TextareaModule.default.hasErrors : "",
-      "aria-describedby": props.hasErrors && !!props.errorMessage?.length ? getErrorElementId() : !!props["aria-describedby"]?.length ? props["aria-describedby"] : null,
+      "aria-describedby": props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null,
       "aria-invalid": props.hasErrors ? "true" : null,
       style: styleRules
     };

package/dist/components/Theme.js

@@ -35,7 +35,7 @@ const Theme = _ref => {
       return _react.default.createElement(_react.Fragment, {
         key: color
       }, _react.default.createElement("div", null, color), _react.default.createElement("div", {
-        className: `${_ThemeModule.default.color} ${colorClassName}`
+        className: "".concat(_ThemeModule.default.color, " ").concat(colorClassName)
       }));
     });
   };

package/dist/components/ThemeProvider.js

@@ -15,7 +15,7 @@ const ThemeProvider = _ref => {
   } = _ref;
   const cssVariablesFromTheme = (0, _helpers.getCssVariablesFromTheme)(theme);
   const cssColorVariablesString = (0, _helpers.stringifyCssColorVariables)(cssVariablesFromTheme);
-  (0, _helpers.addGlobalStylesheet)("theme-provider", `:root {${cssColorVariablesString}} ${_ThemeProviderModule.default}`);
+  (0, _helpers.addGlobalStylesheet)("theme-provider", ":root {".concat(cssColorVariablesString, "} ").concat(_ThemeProviderModule.default));
   return children;
 };
 ThemeProvider.propTypes = {

package/dist/components/ToggleNavigationButton.js

@@ -8,6 +8,11 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ToggleNavigationButtonModule = _interopRequireDefault(require("./ToggleNavigationButton.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const ToggleNavigationButton = _ref => {
   let {
     id,
@@ -18,11 +23,10 @@ const ToggleNavigationButton = _ref => {
     isOpen
   } = _ref;
   const elementClass = _ToggleNavigationButtonModule.default.toggleNavigationButton;
-  let element = _react.default.createElement(htmlTag, {
-    ...buttonProps,
+  let element = _react.default.createElement(htmlTag, _objectSpread(_objectSpread({}, buttonProps), {}, {
     className: elementClass,
     id: id || null
-  }, isOpen ? hideText : showText);
+  }), isOpen ? hideText : showText);
   return element;
 };
 ToggleNavigationButton.propTypes = {

package/dist/components/WizardNavigation.js

@@ -11,6 +11,7 @@ var _helpers = require("../functions/helpers");
 var _WizardNavigationModule = _interopRequireDefault(require("./WizardNavigation.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const WizardNavigation = props => {
+  var _Object$keys, _props$ariaLabel;
   const renderSteps = (steps, activeStepId) => {
     const hasSteps = steps && Object.keys(steps).length;
     return hasSteps ? Object.keys(steps).map((stepKey, stepIndex) => {
@@ -24,9 +25,9 @@ const WizardNavigation = props => {
       });
     }) : null;
   };
-  const amountOfSteps = props.steps && Object.keys(props.steps)?.length ? Object.keys(props.steps).length : 0;
-  const defaultAriaLabel = `I dette skjemaet er det totalt ${amountOfSteps} steg som du skal gå igjennom`;
-  const ariaLabel = props["aria-label"]?.length ? props["aria-label"] : defaultAriaLabel;
+  const amountOfSteps = props.steps && (_Object$keys = Object.keys(props.steps)) !== null && _Object$keys !== void 0 && _Object$keys.length ? Object.keys(props.steps).length : 0;
+  const defaultAriaLabel = "I dette skjemaet er det totalt ".concat(amountOfSteps, " steg som du skal g\xE5 igjennom");
+  const ariaLabel = (_props$ariaLabel = props["aria-label"]) !== null && _props$ariaLabel !== void 0 && _props$ariaLabel.length ? props["aria-label"] : defaultAriaLabel;
   return _react.default.createElement("nav", {
     "aria-label": ariaLabel,
     className: (0, _helpers.classNameArrayToClassNameString)([_WizardNavigationModule.default.wizardTopnavContainer, _WizardNavigationModule.default[props.direction]])

package/dist/functions/helpers.js

@@ -5,8 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.stringifyCssColorVariables = exports.setFocusToElement = exports.getFocusableElementsInsideElement = exports.getCssVariablesFromTheme = exports.getCssSizeVariablesFromTheme = exports.getCssColorVariablesFromTheme = exports.cloneThroughFragments = exports.classNameArrayToClassNameString = exports.camelCaseToKebabCase = exports.addGlobalStylesheet = exports.addFocusTrapInsideElement = void 0;
 var _react = require("react");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const classNameArrayToClassNameString = classNameArray => {
-  return classNameArray?.filter(className => className)?.join(" ") || "";
+  var _classNameArray$filte;
+  return (classNameArray === null || classNameArray === void 0 || (_classNameArray$filte = classNameArray.filter(className => className)) === null || _classNameArray$filte === void 0 ? void 0 : _classNameArray$filte.join(" ")) || "";
 };
 exports.classNameArrayToClassNameString = classNameArrayToClassNameString;
 const camelCaseToKebabCase = string => {
@@ -14,43 +20,43 @@ const camelCaseToKebabCase = string => {
 };
 exports.camelCaseToKebabCase = camelCaseToKebabCase;
 const getCssColorVariablesFromTheme = theme => {
-  return !!theme?.colors && !!Object.entries(theme?.colors)?.length && Object.entries(theme?.colors).reduce((acc, _ref) => {
+  var _Object$entries;
+  return !!(theme !== null && theme !== void 0 && theme.colors) && !!((_Object$entries = Object.entries(theme === null || theme === void 0 ? void 0 : theme.colors)) !== null && _Object$entries !== void 0 && _Object$entries.length) && Object.entries(theme === null || theme === void 0 ? void 0 : theme.colors).reduce((acc, _ref) => {
     let [key, value] = _ref;
-    if (key?.length && value?.length) {
-      acc[`--color-${camelCaseToKebabCase(key)}`] = value;
+    if (key !== null && key !== void 0 && key.length && value !== null && value !== void 0 && value.length) {
+      acc["--color-".concat(camelCaseToKebabCase(key))] = value;
     }
     return acc;
   }, {});
 };
 exports.getCssColorVariablesFromTheme = getCssColorVariablesFromTheme;
 const getCssSizeVariablesFromTheme = theme => {
-  return !!theme?.sizes && !!Object.entries(theme?.sizes)?.length && Object.entries(theme?.sizes).reduce((acc, _ref2) => {
+  var _Object$entries2;
+  return !!(theme !== null && theme !== void 0 && theme.sizes) && !!((_Object$entries2 = Object.entries(theme === null || theme === void 0 ? void 0 : theme.sizes)) !== null && _Object$entries2 !== void 0 && _Object$entries2.length) && Object.entries(theme === null || theme === void 0 ? void 0 : theme.sizes).reduce((acc, _ref2) => {
     let [key, value] = _ref2;
-    if (key?.length && value?.length) {
-      acc[`--size-${camelCaseToKebabCase(key)}`] = value;
+    if (key !== null && key !== void 0 && key.length && value !== null && value !== void 0 && value.length) {
+      acc["--size-".concat(camelCaseToKebabCase(key))] = value;
     }
     return acc;
   }, {});
 };
 exports.getCssSizeVariablesFromTheme = getCssSizeVariablesFromTheme;
 const getCssVariablesFromTheme = theme => {
-  return {
-    ...getCssColorVariablesFromTheme(theme),
-    ...getCssSizeVariablesFromTheme(theme)
-  };
+  return _objectSpread(_objectSpread({}, getCssColorVariablesFromTheme(theme)), getCssSizeVariablesFromTheme(theme));
 };
 exports.getCssVariablesFromTheme = getCssVariablesFromTheme;
 const addGlobalStylesheet = (styleElementId, styles) => {
+  var _document$getElementB;
   const style = document.createElement("style");
   style.setAttribute("id", styleElementId);
   style.textContent = styles;
-  document.getElementById(styleElementId)?.remove();
+  (_document$getElementB = document.getElementById(styleElementId)) === null || _document$getElementB === void 0 || _document$getElementB.remove();
   document.head.appendChild(style);
 };
 exports.addGlobalStylesheet = addGlobalStylesheet;
 const stringifyCssColorVariables = colorVariables => {
   return Object.keys(colorVariables).reduce((css, key) => {
-    return `${css}${key}: ${colorVariables[key]};`;
+    return "".concat(css).concat(key, ": ").concat(colorVariables[key], ";");
   }, "");
 };
 exports.stringifyCssColorVariables = stringifyCssColorVariables;
@@ -60,9 +66,7 @@ const cloneThroughFragments = children => {
       if (c.type === _react.Fragment) {
         return cloneThroughFragments(c.props.children);
       }
-      return (0, _react.cloneElement)(c, {
-        ...c.props
-      });
+      return (0, _react.cloneElement)(c, _objectSpread({}, c.props));
     }
     return c;
   });
@@ -84,8 +88,8 @@ exports.getFocusableElementsInsideElement = getFocusableElementsInsideElement;
 const addFocusTrapInsideElement = element => {
   setFocusToElement(element);
   const focusableElements = getFocusableElementsInsideElement(element);
-  const firstFocusableElement = focusableElements?.length ? focusableElements[0] : null;
-  const lastFocusableElement = focusableElements?.length > 1 ? focusableElements[focusableElements.length - 1] : firstFocusableElement;
+  const firstFocusableElement = focusableElements !== null && focusableElements !== void 0 && focusableElements.length ? focusableElements[0] : null;
+  const lastFocusableElement = (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) > 1 ? focusableElements[focusableElements.length - 1] : firstFocusableElement;
   if (firstFocusableElement) {
     firstFocusableElement.onkeydown = event => {
       if (event.keyCode === 9 && event.shiftKey) {

package/dist/functions/theme.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getThemeLogoPadding = exports.getThemeLogo = exports.getThemeAppName = void 0;
 const getThemeLogo = theme => {
-  return theme?.logo || null;
+  return (theme === null || theme === void 0 ? void 0 : theme.logo) || null;
 };
 exports.getThemeLogo = getThemeLogo;
 const getThemeLogoPadding = theme => {
-  return theme?.logoPadding || null;
+  return (theme === null || theme === void 0 ? void 0 : theme.logoPadding) || null;
 };
 exports.getThemeLogoPadding = getThemeLogoPadding;
 const getThemeAppName = theme => {
-  return theme?.appName || null;
+  return (theme === null || theme === void 0 ? void 0 : theme.appName) || null;
 };
 exports.getThemeAppName = getThemeAppName;