dibk-design 5.0.1 → 6.0.0

package/dist/components/Accordion.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AccordionModule = _interopRequireDefault(require("./Accordion.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 _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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Accordion = props => {
   const [expanded, setExpanded] = (0, _react.useState)(props.expanded);

package/dist/components/Button.js

@@ -11,7 +11,7 @@ var _helpers = require("../functions/helpers");
 var _ButtonModule = _interopRequireDefault(require("./Button.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 _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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Button = props => {
   var _props$href, _props$href2, _props$children;

package/dist/components/CheckBoxIcon.module.scss

@@ -20,7 +20,7 @@
         margin-top: 2px;
         background: white;
         &:not(.hasErrors) {
-            @include box-shadow(0 0 0 1px var(--color-primary, $color-primary));
+            @include box-shadow(0 0 0 1px var(--color-form-element, $color-form-element));
         }
         &.hasErrors {
             @include box-shadow(0 0 0 1px var(--color-error, $color-error));
@@ -36,7 +36,7 @@
         }
         &.showBox {
             &:not(.hasErrors) {
-                @include box-shadow(0 0 0 1px var(--color-primary, $color-primary));
+                @include box-shadow(0 0 0 1px var(--color-form-element, $color-form-element));
             }
             &.hasErrors {
                 @include box-shadow(0 0 0 1px var(--color-error, $color-error));

package/dist/components/CheckBoxInput.module.scss

@@ -23,7 +23,7 @@
     .labelText {
         font-size: 16px;
         line-height: 24px;
-        color: var(--color-primary, $color-primary);
+        color: var(--color-form-element, $color-form-element);
     }
 
     &.disabled {
@@ -40,7 +40,7 @@
 
     &:focus-within {
         outline-width: 2px;
-        outline-color: var(--color-primary, $color-primary);
+        outline-color: var(--color-focus, $color-focus);
         outline-style: auto;
         outline-offset: 1px;
     }

package/dist/components/CheckBoxListItem.module.scss

@@ -42,11 +42,11 @@
         }
     }
 
-    &.checked:not(.contentOnly):not(.compact):not(.disabled):not(.hasTheme) {
+    &.checked:not(.contentOnly):not(.compact):not(.disabled) {
         background-color: var(--color-secondary-light, $color-secondary-light);
     }
 
-    &:not(.checked):not(.contentOnly):not(.compact):not(.disabled):not(.hasTheme) {
+    &:not(.checked):not(.contentOnly):not(.compact):not(.disabled) {
         &:hover {
             background-color: var(--color-secondary-x-light, $color-secondary-x-light);
         }

package/dist/components/Dialog.js

@@ -11,13 +11,16 @@ var _DialogModule = _interopRequireDefault(require("./Dialog.module.scss"));
 var _helpers = require("../functions/helpers");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 _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; }
 const Dialog = props => {
+  var _props$attachTo, _props$maxWidth;
   const dialogRef = (0, _react.useRef)();
-  const wrapperRef = (0, _react.useCallback)(element => {
+  const dialogContainerRef = (0, _react.useRef)();
+  const dialogContentRef = (0, _react.useCallback)(element => {
     if (!!element) {
       (0, _helpers.addFocusTrapInsideElement)(element);
     }
+    return element;
   }, []);
   (0, _react.useEffect)(() => {
     const keyDownFunction = event => {
@@ -30,22 +33,33 @@ const Dialog = props => {
       }
     };
     const handleClickOutside = event => {
-      if (dialogRef !== null && dialogRef !== void 0 && dialogRef.current && !dialogRef.current.contains(event.target)) {
+      if (dialogContainerRef !== null && dialogContainerRef !== void 0 && dialogContainerRef.current && !dialogContainerRef.current.contains(event.target)) {
         props.onClickOutside();
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", keyDownFunction, false);
-  }, [props, wrapperRef]);
-  return _react.default.createElement("div", {
-    className: "".concat(_DialogModule.default.dialogOverlay, " ").concat(props.hidden && _DialogModule.default.hidden),
-    ref: wrapperRef
-  }, _react.default.createElement("div", {
-    ref: dialogRef,
-    className: "".concat(_DialogModule.default.dialogContent, " ").concat(props.noPadding ? _DialogModule.default.noPadding : ""),
-    style: {
-      maxWidth: props.maxWidth
+  }, [props, dialogContainerRef]);
+  (0, _react.useEffect)(() => {
+    dialogRef.current.close();
+    if (!props.hidden) {
+      props.modal ? dialogRef.current.showModal() : dialogRef.current.show();
     }
+  }, [dialogRef, props.hidden, props.modal]);
+  const sideBarClassNames = ((_props$attachTo = props.attachTo) === null || _props$attachTo === void 0 ? void 0 : _props$attachTo.length) && (0, _helpers.classNameArrayToClassNameString)([_DialogModule.default.isSidebar, _DialogModule.default[props.attachTo]]);
+  const dialogContentStyleProps = {
+    "--max-width": (props === null || props === void 0 || (_props$maxWidth = props.maxWidth) === null || _props$maxWidth === void 0 ? void 0 : _props$maxWidth.length) && props.maxWidth
+  };
+  return _react.default.createElement("dialog", {
+    className: (0, _helpers.classNameArrayToClassNameString)([_DialogModule.default.dialog, sideBarClassNames]),
+    ref: dialogRef
+  }, _react.default.createElement("div", {
+    ref: dialogContainerRef,
+    className: _DialogModule.default.dialogContainer,
+    style: dialogContentStyleProps
+  }, _react.default.createElement("div", {
+    ref: dialogContentRef,
+    className: (0, _helpers.classNameArrayToClassNameString)([_DialogModule.default.dialogContent, props.noPadding && _DialogModule.default.noPadding])
   }, props.closeButton ? _react.default.createElement("button", {
     "aria-label": "Lukk dialog",
     onClick: props.onClickOutside,
@@ -56,15 +70,17 @@ const Dialog = props => {
   })) : null, _react.default.createElement("div", {
     "aria-live": "assertive",
     role: "dialog"
-  }, props.children)));
+  }, props.children))));
 };
 Dialog.propTypes = {
   maxWidth: _propTypes.default.string,
   noPadding: _propTypes.default.bool,
   closeButton: _propTypes.default.bool,
-  onClickOutside: _propTypes.default.func.isRequired
+  onClickOutside: _propTypes.default.func.isRequired,
+  modal: _propTypes.default.bool
 };
 Dialog.defaultProps = {
-  maxWidth: "none"
+  maxWidth: "none",
+  modal: false
 };
 var _default = exports.default = Dialog;

package/dist/components/Dialog.module.scss

@@ -1,79 +1,151 @@
 @import "../style/global.scss";
 
-@keyframes modalIn {
+@keyframes modalInVertical {
     0% {
         opacity: 0;
         transform: translateY(2em);
     }
 }
 
-.dialogOverlay {
-    display: flex;
-    flex-wrap: wrap;
-    position: fixed;
-    width: 100%;
-    background: rgba(0, 48, 69, 0.4);
-    height: 100%;
-    top: 0;
-    left: 0;
-    align-content: center;
-    padding: 8px 28px;
-    z-index: 2;
-    justify-content: center;
-    @media (min-width: $screen-md) {
-        padding: 36px;
+@keyframes modalInHorizontalRight {
+    0% {
+        opacity: 0;
+        transform: translateX(2em);
+    }
+}
+
+@keyframes modalInHorizontalLeft {
+    0% {
+        opacity: 0;
+        transform: translateX(-2em);
     }
+}
 
-    &.hidden,
-    .hidden {
-        width: 0;
-        height: 0;
+.dialog {
+    &::backdrop {
+        background: color-mix(in srgb, var(--color-primary, $color-primary), transparent 60%);
+    }
+    &[open] {
         border: none;
-        position: absolute;
-        padding: 0;
-        overflow: hidden;
+        background: none;
+        display: flex;
+        max-height: none;
+        max-width: none;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        position: fixed;
+        .dialogContainer {
+            display: flex;
+            flex-wrap: wrap;
+            background-color: #fff;
+            .dialogContent {
+                &:not(.noPadding) {
+                    padding: 30px 15px;
+                    @media only screen and (min-width: $screen-sm) {
+                        padding: 60px 40px;
+                    }
+                }
+            }
+            .dialogContent {
+                position: relative;
+            }
+            .closeButton {
+                background: none;
+                border: none;
+                color: var(--color-primary, $color-primary);
+                display: inline-block;
+                position: absolute;
+                right: 7px;
+                top: 4px;
+                text-decoration: underline;
+                font-size: 19px;
+                cursor: pointer;
+                @media only screen and (min-width: $screen-sm) {
+                    right: 15px;
+                    top: 10px;
+                }
+                &:hover {
+                    text-decoration: none;
+                }
+                img {
+                    width: 17px;
+                    height: 17px;
+                }
+            }
+        }
+        &:not(.isSidebar) {
+            align-items: center;
+            justify-content: center;
+            padding: 8px 28px;
+            @media (min-width: $screen-md) {
+                padding: 36px;
+            }
+            .dialogContainer {
+                animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running modalInVertical;
+            }
+        }
+        &.isSidebar {
+            padding: 0;
+            height: 100vh;
+            .dialogContainer {
+                height: 100%;
+                width: var(--max-width, auto);
+            }
+            &.left {
+                margin: 0 auto 0 0;
+                .dialogContainer {
+                    justify-content: left;
+                    animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running modalInHorizontalLeft;
+                }
+            }
+            &.right {
+                margin: 0 0 0 auto;
+                .dialogContainer {
+                    justify-content: right;
+                    animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running modalInHorizontalRight;
+                }
+            }
+        }
     }
+}
 
-    .dialogContent {
-        @include calc("max-height", "100% - 128px");
-        max-width: 540px;
+.dialogOverlay {
+    width: 0;
+    height: 0;
+    border: none;
+    position: absolute;
+    padding: 0;
+    overflow: hidden;
+
+    &[open] {
+        position: fixed;
         width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+    }
+
+    &:not(.isSidebar) {
+        align-content: center;
+        justify-content: center;
+
+        .dialogContent {
+            @include calc("max-height", "100% - 128px");
+            width: 100%;
+            max-width: var(--max-width, 540px);
+        }
+    }
+
+    .dialogContent {
         background-color: #fff;
         overflow: auto;
         position: relative;
-        animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running modalIn;
-        &:not(.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");
             max-height: 100%;
         }
-        .closeButton {
-            background: none;
-            border: none;
-            color: var(--color-primary, $color-primary);
-            display: inline-block;
-            position: absolute;
-            right: 7px;
-            top: 4px;
-            text-decoration: underline;
-            font-size: 19px;
-            cursor: pointer;
-            @media only screen and (min-width: $screen-sm) {
-                right: 15px;
-                top: 10px;
-            }
-            &:hover {
-                text-decoration: none;
-            }
-            img {
-                width: 17px;
-                height: 17px;
-            }
-        }
     }
 }

package/dist/components/DragAndDropFileInput.js

@@ -13,7 +13,7 @@ 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(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 && Object.prototype.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 _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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const DragAndDropFileInput = props => {
   var _props$errorMessage, _props$ariaDescribed;

package/dist/components/NavigationBar.js

@@ -14,7 +14,7 @@ var _NavigationBarModule = _interopRequireDefault(require("./NavigationBar.modul
 var _helpers = require("../functions/helpers");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 _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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const NavigationBar = props => {
   var _props$primaryListIte, _props$secondaryListI, _props$mainContentId;

package/dist/components/PDF.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 require("./PDF.scss");
 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 && Object.prototype.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 _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; }
 const PDF = props => {
   return _react.default.createElement(_react.Fragment, null, props.children);
 };

package/dist/components/PDF.scss

@@ -327,7 +327,7 @@ body {
 
     blockquote {
         background: var(--color-secondary-x-light, $color-secondary-x-light);
-        border-left: $border-left-width-blockquote solid var(--color-secondary-text, $color-secondary-text);
+        border-left: $border-left-width-blockquote solid var(--color-border, $color-border);
         margin: $margin-vertical-blockquote $margin-horizontal-blockquote;
         padding: 0.5em $padding-horizontal-blockquote;
         min-height: $min-height-blockquote;
@@ -515,7 +515,7 @@ body {
         blockquote {
             background: var(--color-secondary-x-light, $color-secondary-x-light);
             border-left: calc($border-left-width-blockquote * $scaling-for-signed-documents) solid
-                var(--color-secondary-text, $color-secondary-text);
+                var(--color-border, $color-border);
             margin: calc($margin-vertical-blockquote * $scaling-for-signed-documents)
                 calc($margin-horizontal-blockquote * $scaling-for-signed-documents);
             padding: 0.5em calc($padding-horizontal-blockquote * $scaling-for-signed-documents);

package/dist/components/RadioButtonIcon.module.scss

@@ -16,7 +16,7 @@
     cursor: pointer;
 
     &:not(.hasErrors) {
-        @include box-shadow(0 0 0 1px var(--color-primary, $color-primary));
+        @include box-shadow(0 0 0 1px var(--color-form-element, $color-form-element));
     }
     &.hasErrors {
         @include box-shadow(0 0 0 1px var(--color-error, $color-error));
@@ -28,7 +28,7 @@
             background: var(--color-error, $color-error);
         }
         &:not(.hasErrors) {
-            @include box-shadow(0 0 0 1px var(--color-primary, $color-primary));
+            @include box-shadow(0 0 0 1px var(--color-form-element, $color-form-element));
         }
         &.hasErrors {
             @include box-shadow(0 0 0 1px var(--color-error, $color-error));

package/dist/components/RadioButtonInput.module.scss

@@ -23,7 +23,7 @@
     .labelText {
         font-size: 16px;
         line-height: 24px;
-        color: var(--color-primary, $color-primary);
+        color: var(--color-form-element, $color-form-element);
     }
 
     &.disabled {
@@ -40,7 +40,7 @@
 
     &:focus-within {
         outline-width: 2px;
-        outline-color: var(--color-primary, $color-primary);
+        outline-color: var(--color-focus, $color-focus);
         outline-style: auto;
         outline-offset: 1px;
     }

package/dist/components/RadioButtonListItem.module.scss

@@ -46,7 +46,7 @@
     background-color: var(--color-secondary-light, $color-secondary-light);
   }
 
-  &:not(.checked):not(.contentOnly):not(.compact):not(.disabled):hover {
+  &:not(.checked):not(.contentOnly):not(.compact):not(.disabled) {
     &:hover {
       background-color: var(--color-secondary-x-light, $color-secondary-x-light);
     }

package/dist/components/Select.js

@@ -16,7 +16,7 @@ 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 _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 && Object.prototype.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 _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; }
 const Select = props => {
   const [showDropdownList, setShowDropdownList] = (0, _react.useState)(false);
   const dropdownRef = (0, _react.useRef)();

package/dist/components/Table.module.scss

@@ -42,7 +42,7 @@
     thead {
         tr {
             background-color: var(--color-default-background, $color-default-background);
-            border: 1px solid var(--color-secondary-text, $color-secondary-text);
+            border: 1px solid var(--color-border, $color-border);
             th {
                 text-align: left;
                 font-size: 16px;
@@ -53,7 +53,7 @@
     tbody {
         tr {
             background-color: var(--color-default-background, $color-default-background);
-            border: 1px solid var(--color-secondary-text, $color-secondary-text);
+            border: 1px solid var(--color-border, $color-border);
             td {
                 padding: 10px;
                 font-size: 16px;

package/dist/components/Theme.js

@@ -19,7 +19,7 @@ var _RadioButtonListItem = _interopRequireDefault(require("./RadioButtonListItem
 var _ThemeModule = _interopRequireDefault(require("./Theme.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 _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; }
 const Theme = _ref => {
   let {
     theme

package/dist/components/Theme.module.scss

@@ -35,7 +35,7 @@ section:last-of-type {
       background-color: var(--color-primary-text, $color-primary-text);
     }
     &.secondaryText {
-      background-color: var(--color-secondary-text, $color-secondary-text);
+      background-color: var(--color-border, $color-border);
     }
     &.primary {
       background-color: var(--color-primary, $color-primary);

package/dist/components/WizardNavigation/Step.js

@@ -11,7 +11,7 @@ var _helpers = require("../../functions/helpers");
 var _StepModule = _interopRequireDefault(require("./Step.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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 _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; }
 const Step = props => {
   const getActiveClass = step => {
     return props.activeStepId === step.id ? _StepModule.default.active : "";

package/dist/style/abstracts/variables/_colors.scss

@@ -2,7 +2,6 @@ $color-body-background: #ebf4fa;
 $color-default-text: #202020;
 $color-heading-text: #003045;
 $color-primary-text: #005275;
-$color-secondary-text: #89bad6;
 
 $color-primary: #003045;
 $color-primary-light: #264f61;
@@ -14,6 +13,8 @@ $color-secondary-light: #c7e0f2;
 $color-secondary-x-light: #ebf4fa;
 $color-secondary-contrast: #005275;
 
+$color-border: #89bad6;
+$color-form-element: #003045;
 $color-focus: rgba(0, 92, 173, 0.4);
 
 $color-default-background: #f1fae3;

package/dist/style/pdf.css

@@ -245,7 +245,7 @@ body {
 }
 .page blockquote {
   background: var(--color-secondary-x-light, #ebf4fa);
-  border-left: 4px solid var(--color-secondary-text, #89bad6);
+  border-left: 4px solid var(--color-border, #89bad6);
   margin: 5px 10px;
   padding: 0.5em 10px;
   min-height: 36px;
@@ -408,7 +408,7 @@ body {
 }
 .page.signed-document div.content-container blockquote {
   background: var(--color-secondary-x-light, #ebf4fa);
-  border-left: 4.43208px solid var(--color-secondary-text, #89bad6);
+  border-left: 4.43208px solid var(--color-border, #89bad6);
   margin: 5.5401px 11.0802px;
   padding: 0.5em 11.0802px;
   min-height: 39.88872px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "5.0.1",
+  "version": "6.0.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [
@@ -8,6 +8,7 @@
     "README.md"
   ],
   "dependencies": {
+    "@storybook/test": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -28,8 +29,8 @@
     "build-assets": "NODE_ENV=production babel src/assets --out-dir dist/assets --copy-files --no-copy-ignored",
     "build": "rm -rf dist && yarn build-components && yarn build-functions && yarn build-index && yarn build-style && yarn build-assets && yarn build-pdf-style",
     "eject": "react-scripts eject",
-    "storybook": "storybook dev -p 6006 -s public",
-    "build-storybook": "storybook build -s public -o docs"
+    "storybook": "storybook dev",
+    "build-storybook": "storybook build -o docs"
   },
   "eslintConfig": {
     "extends": [
@@ -61,24 +62,23 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.18.10",
-    "@storybook/addon-a11y": "^7.0.4",
-    "@storybook/addon-actions": "^7.0.4",
-    "@storybook/addon-essentials": "^7.0.4",
-    "@storybook/addon-interactions": "^7.0.4",
-    "@storybook/addon-links": "^7.0.4",
-    "@storybook/addon-mdx-gfm": "^7.0.4",
-    "@storybook/addons": "^7.0.4",
-    "@storybook/node-logger": "^7.0.4",
-    "@storybook/preset-create-react-app": "^7.0.4",
-    "@storybook/react": "^7.0.4",
-    "@storybook/react-webpack5": "^7.0.4",
-    "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.4",
+    "@storybook/addon-a11y": "^8.0.2",
+    "@storybook/addon-actions": "^8.0.2",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-interactions": "^8.0.2",
+    "@storybook/addon-links": "^8.0.2",
+    "@storybook/addon-mdx-gfm": "^8.0.2",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/node-logger": "^8.0.2",
+    "@storybook/preset-create-react-app": "^8.0.2",
+    "@storybook/react": "^8.0.2",
+    "@storybook/react-webpack5": "^8.0.2",
+    "@storybook/theming": "^8.0.2",
     "babel-plugin-named-exports-order": "^0.0.2",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "prop-types": "^15.8.1",
     "react-router-dom": "^6.4.2",
-    "storybook": "^7.0.4",
+    "storybook": "^8.0.2",
     "url-loader": "^4.1.1",
     "webpack": "^5.74.0"
   }