dibk-design 6.5.2 → 7.0.0

package/dist/components/CheckBoxInput.module.scss

@@ -1,4 +1,5 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
 
 .checkBoxInput {
     display: flex;
@@ -23,7 +24,7 @@
     .labelText {
         font-size: 16px;
         line-height: 24px;
-        color: var(--color-form-element, $color-form-element);
+        color: var(--color-form-element, colors.$color-form-element);
     }
 
     &.disabled {
@@ -34,13 +35,13 @@
 
     &.hasErrors {
         span {
-            color: var(--color-error, $color-error);
+            color: var(--color-error, colors.$color-error);
         }
     }
 
     &:focus-within {
         outline-width: 2px;
-        outline-color: var(--color-focus, $color-focus);
+        outline-color: var(--color-focus, colors.$color-focus);
         outline-style: auto;
         outline-offset: 1px;
     }

package/dist/components/CheckBoxList.js

@@ -10,7 +10,7 @@ var _helpers = require("../functions/helpers");
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _CheckBoxListModule = _interopRequireDefault(require("./CheckBoxList.module.scss"));
 var _Header = _interopRequireDefault(require("./Header"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CheckBoxList = _ref => {
   let {
     required,
@@ -22,13 +22,12 @@ const CheckBoxList = _ref => {
   const renderChildElements = childElements => {
     const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
     return childElementsthroughFragments.map((childElement, index) => {
-      var _childElement$props;
-      const isCheckBoxListItem = (childElement === null || childElement === void 0 || (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : _childElement$props.type) === "CheckBoxListItem";
+      const isCheckBoxListItem = childElement?.props?.type === "CheckBoxListItem";
       if (isCheckBoxListItem) {
         const childElementCopy = _react.default.cloneElement(childElement, {
           requiredGroup: required,
           compact: compact,
-          key: "checkboxListItem-".concat(index)
+          key: `checkboxListItem-${index}`
         });
         return childElementCopy;
       } else {
@@ -38,7 +37,7 @@ const CheckBoxList = _ref => {
   };
   return _react.default.createElement("fieldset", {
     className: _CheckBoxListModule.default.checkBoxList
-  }, !!(legend !== null && legend !== void 0 && legend.length) ? _react.default.createElement("legend", null, legendSize ? _react.default.createElement(_Header.default, {
+  }, !!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/CheckBoxList.module.scss

@@ -1,4 +1,5 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/typography";
 
 fieldset.checkBoxList {
     margin: 0;
@@ -11,7 +12,7 @@ fieldset.checkBoxList {
         font-weight: bold;
         line-height: 1.2;
         margin-bottom: 2px;
-        font-family: $default-font;
+        font-family: typography.$default-font;
         overflow-wrap: break-word;
         .requiredSymbol {
             width: 1em;

package/dist/components/CheckBoxListItem.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CheckBoxInput = _interopRequireDefault(require("./CheckBoxInput"));
 var _helpers = require("../functions/helpers");
 var _CheckBoxListItemModule = _interopRequireDefault(require("./CheckBoxListItem.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CheckBoxListItem = props => {
   const listItemClassNameArray = [_CheckBoxListItemModule.default.checkBoxListItem, props.checked ? _CheckBoxListItemModule.default.checked : null, props.disabled ? _CheckBoxListItemModule.default.disabled : null, props.compact ? _CheckBoxListItemModule.default.compact : null, props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : null, props.hasErrors ? _CheckBoxListItemModule.default.hasErrors : null];
   const listItemClassNameString = (0, _helpers.classNameArrayToClassNameString)(listItemClassNameArray);

package/dist/components/CheckBoxListItem.module.scss

@@ -1,9 +1,17 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/border-radius";
+@use "../style/abstracts/mixins/box-sizing";
+@use "../style/abstracts/mixins/transition";
+
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/transitions";
+@use "../style/abstracts/variables/typography";
 
 .checkBoxListItem {
-    @include box-sizing(content-box);
-    @include border-radius(0);
-    @include transition(all $default-transition);
+    @include box-sizing.box-sizing(content-box);
+    @include border-radius.border-radius(0);
+    @include transition.transition(all transitions.$default-transition);
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -13,14 +21,14 @@
     -ms-flex-align: flex-start;
     align-items: flex-start;
     cursor: pointer;
-    font-family: $default-font;
+    font-family: typography.$default-font;
     position: relative;
     font-size: 16px;
     line-height: 24px;
     color: #000;
 
     &:not(.contentOnly):not(.compact) {
-        border: 1px solid var(--color-secondary-light, $color-secondary-light);
+        border: 1px solid var(--color-secondary-light, colors.$color-secondary-light);
         background: white;
         margin-bottom: 8px;
         label {
@@ -43,15 +51,15 @@
     }
 
     &.checked:not(.contentOnly):not(.compact):not(.disabled) {
-        background-color: var(--color-secondary-light, $color-secondary-light);
+        background-color: var(--color-secondary-light, colors.$color-secondary-light);
     }
 
     &:not(.checked):not(.contentOnly):not(.compact):not(.disabled) {
         &:hover {
-            background-color: var(--color-secondary-x-light, $color-secondary-x-light);
+            background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
         }
         &:focus-within {
-            background-color: var(--color-secondary-x-light, $color-secondary-x-light);
+            background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
         }
     }
 

package/dist/components/Container.js

@@ -7,11 +7,10 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ContainerModule = _interopRequireDefault(require("./Container.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Container = props => {
-  var _props$maxWidth;
   const styleProps = {
-    "--max-width": (props === null || props === void 0 || (_props$maxWidth = props.maxWidth) === null || _props$maxWidth === void 0 ? void 0 : _props$maxWidth.length) && props.maxWidth
+    "--max-width": props?.maxWidth?.length && props.maxWidth
   };
   return _react.default.createElement("div", {
     className: _ContainerModule.default.container,

package/dist/components/Container.module.scss

@@ -1,11 +1,13 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/sizes";
+@use "../style/abstracts/variables/viewports";
 
 .container {
     margin: auto;
     padding: 8px;
-    @media (min-width: $screen-sm) {
+    @media (min-width: viewports.$screen-sm) {
         padding: 20px;
-        max-width: $content-width;
+        max-width: sizes.$content-width;
         &[style*="--max-width"] {
             max-width: var(--max-width);
         }

package/dist/components/ContentBox.js

@@ -7,9 +7,8 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ContentBoxModule = _interopRequireDefault(require("./ContentBox.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ContentBox = props => {
-  var _props$content;
   const renderTitle = () => {
     let className = _ContentBoxModule.default.title + " " + _ContentBoxModule.default[props.titleSize];
     if (props.title) {
@@ -23,7 +22,7 @@ const ContentBox = props => {
   let colorClass = " " + _ContentBoxModule.default[props.color];
   let linkClass = props.href ? " " + _ContentBoxModule.default.link : "";
   let className = _ContentBoxModule.default.contentBox + colorClass + linkClass;
-  const bodyContent = (_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length ? props.content : props.children;
+  const bodyContent = props.content?.length ? props.content : props.children;
   if (props.href) {
     return _react.default.createElement("a", {
       href: props.href,

package/dist/components/ContentBox.module.scss

@@ -1,14 +1,19 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/transition";
+
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/typography";
 
 .contentBox {
-    font-family: $default-font;
+    font-family: typography.$default-font;
     text-decoration: none;
     padding: 20px;
     width: 100%;
     display: block;
     &.link {
-        color: var(--color-primary, $color-primary);
-        @include transition(filter 0.3s);
+        color: var(--color-primary, colors.$color-primary);
+        @include transition.transition(filter 0.3s);
         &:hover,
         &:focus {
             filter: brightness(90%);
@@ -18,24 +23,24 @@
         }
     }
     &.default {
-        background-color: var(--color-default-background, $color-default-background);
+        background-color: var(--color-default-background, colors.$color-default-background);
         .content,
         .title {
-            color: $color-default-text;
+            color: colors.$color-default-text;
         }
     }
     &.secondary {
-        background-color: var(--color-secondary-background, $color-secondary-background);
-        color: var(--color-default-text, $color-default-text);
+        background-color: var(--color-secondary-background, colors.$color-secondary-background);
+        color: var(--color-default-text, colors.$color-default-text);
         .content,
         .title {
-            color: var(--color-default-text, $color-default-text);
+            color: var(--color-default-text, colors.$color-default-text);
         }
     }
 
     .title {
         &.regular {
-            font-family: $default-font;
+            font-family: typography.$default-font;
             font-weight: bold;
             font-size: 21px;
             font-style: normal;
@@ -44,7 +49,7 @@
             border-bottom: 1px solid rgba(0, 0, 0, 0.075);
         }
         &.large {
-            font-family: $default-font;
+            font-family: typography.$default-font;
             font-weight: normal;
             font-size: 24px;
             margin: 0;

package/dist/components/DescriptionDetails.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
 var _DescriptionDetailsModule = _interopRequireDefault(require("./DescriptionDetails.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DescriptionDetails = _ref => {
   let {
     compact,

package/dist/components/DescriptionDetails.module.scss

@@ -1,9 +1,10 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
 
 .descriptionDetails {
     font-size: 16px;
     list-style: var(--listStyle);
-    color: var(--color-primary, $color-primary);
+    color: var(--color-primary, colors.$color-primary);
     margin: 0;
     &:not(.compact) {
         line-height: 1.6;

package/dist/components/DescriptionList.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _DescriptionListModule = _interopRequireDefault(require("./DescriptionList.module.scss"));
 var _helpers = require("../functions/helpers");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DescriptionList = _ref => {
   let {
     compact,
@@ -21,7 +21,7 @@ const DescriptionList = _ref => {
       const childElementCopy = _react.default.cloneElement(childElement, {
         compact: compact,
         titleWidth: titleWidth,
-        key: "descriptionListItem-".concat(index)
+        key: `descriptionListItem-${index}`
       });
       return childElementCopy;
     });

package/dist/components/DescriptionList.module.scss

@@ -1,5 +1,3 @@
-@import "../style/global.scss";
-
 .descriptionList {
     margin: 0;
     padding: 0;

package/dist/components/DescriptionTerm.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
 var _DescriptionTermModule = _interopRequireDefault(require("./DescriptionTerm.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DescriptionTerm = _ref => {
   let {
     compact,

package/dist/components/DescriptionTerm.module.scss

@@ -1,9 +1,10 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
 
 .descriptionTerm {
     font-size: 16px;
     list-style: var(--listStyle);
-    color: var(--color-primary, $color-primary);
+    color: var(--color-primary, colors.$color-primary);
     margin: 0;
     font-weight: bold;
     &:not(.compact) {

package/dist/components/Dialog.js

@@ -9,11 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xSymbol = _interopRequireDefault(require("../assets/svg/x-symbol.svg?url"));
 var _DialogModule = _interopRequireDefault(require("./Dialog.module.scss"));
 var _helpers = require("../functions/helpers");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
 const Dialog = props => {
-  var _props$attachTo, _props$maxWidth;
   const dialogRef = (0, _react.useRef)();
   const dialogContainerRef = (0, _react.useRef)();
   const dialogContentRef = (0, _react.useCallback)(element => {
@@ -33,7 +32,7 @@ const Dialog = props => {
       }
     };
     const handleClickOutside = event => {
-      if (dialogContainerRef !== null && dialogContainerRef !== void 0 && dialogContainerRef.current && !dialogContainerRef.current.contains(event.target)) {
+      if (dialogContainerRef?.current && !dialogContainerRef.current.contains(event.target)) {
         props.onClickOutside();
       }
     };
@@ -46,9 +45,9 @@ const Dialog = props => {
       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 sideBarClassNames = 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
+    "--max-width": props?.maxWidth?.length && props.maxWidth
   };
   return _react.default.createElement("dialog", {
     className: (0, _helpers.classNameArrayToClassNameString)([_DialogModule.default.dialog, sideBarClassNames]),

package/dist/components/Dialog.module.scss

@@ -1,4 +1,9 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/calc";
+
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/viewports";
 
 @keyframes modalInVertical {
     0% {
@@ -23,7 +28,7 @@
 
 .dialog {
     &::backdrop {
-        background: color-mix(in srgb, var(--color-primary, $color-primary), transparent 60%);
+        background: color-mix(in srgb, var(--color-primary, colors.$color-primary), transparent 60%);
     }
     &[open] {
         border: none;
@@ -49,7 +54,7 @@
             .closeButton {
                 background: none;
                 border: none;
-                color: var(--color-primary, $color-primary);
+                color: var(--color-primary, colors.$color-primary);
                 display: inline-block;
                 position: absolute;
                 cursor: pointer;
@@ -66,7 +71,7 @@
             align-items: center;
             justify-content: center;
             padding: 8px 28px;
-            @media (min-width: $screen-md) {
+            @media (min-width: viewports.$screen-md) {
                 padding: 36px;
             }
             .dialogContainer {
@@ -75,7 +80,7 @@
                 .dialogContent {
                     &:not(.noPadding) {
                         padding: 30px 15px;
-                        @media only screen and (min-width: $screen-sm) {
+                        @media only screen and (min-width: viewports.$screen-sm) {
                             padding: 60px 40px;
                         }
                     }
@@ -85,7 +90,7 @@
                 &:not(.noPadding) {
                     right: 5px;
                     top: 8px;
-                    @media only screen and (min-width: $screen-sm) {
+                    @media only screen and (min-width: viewports.$screen-sm) {
                         right: 10px;
                         top: 13px;
                     }
@@ -154,7 +159,7 @@
         justify-content: center;
 
         .dialogContent {
-            @include calc("max-height", "100% - 128px");
+            @include calc.calc("max-height", "100% - 128px");
             width: 100%;
             max-width: var(--max-width, 540px);
         }
@@ -165,8 +170,8 @@
         overflow: auto;
         position: relative;
 
-        @media (min-width: $screen-md) {
-            @include calc("width", "100% - 128px");
+        @media (min-width: viewports.$screen-md) {
+            @include calc.calc("width", "100% - 128px");
             max-height: 100%;
         }
     }

package/dist/components/DragAndDropFileInput.js

@@ -11,12 +11,11 @@ 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 _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 _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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const DragAndDropFileInput = props => {
-  var _props$errorMessage, _props$ariaDescribed;
   const [highlight, setHighlight] = (0, _react.useState)(false);
   const containerElementRef = (0, _react.useRef)();
   const fileInputElementRef = (0, _react.useRef)();
@@ -31,11 +30,11 @@ const DragAndDropFileInput = props => {
     fileInputElementRef.current.click();
   };
   const getErrorElementId = () => {
-    return "".concat(props.id, "-errorMessage");
+    return `${props.id}-errorMessage`;
   };
   const inputElementProps = {
     id: props.id,
-    "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-describedby": props.hasErrors && !!props.errorMessage?.length ? getErrorElementId() : !!props["aria-describedby"]?.length ? props["aria-describedby"] : null,
     "aria-invalid": props.hasErrors ? "true" : null,
     name: props.name,
     required: props.required
@@ -54,7 +53,7 @@ const DragAndDropFileInput = props => {
       const files = e.dataTransfer.files;
       handleFiles(files);
     };
-    if (containerElementRef !== null && containerElementRef !== void 0 && containerElementRef.current) {
+    if (containerElementRef?.current) {
       containerElementRef.current.addEventListener("dragenter", preventDefaults, false);
       containerElementRef.current.addEventListener("dragover", preventDefaults, false);
       containerElementRef.current.addEventListener("dragleave", preventDefaults, false);
@@ -84,7 +83,7 @@ const DragAndDropFileInput = props => {
     className: _DragAndDropFileInputModule.default.requiredSymbol
   })), _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 : "")
+    className: `${_DragAndDropFileInputModule.default.dragAndDropContainer} ${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, {
     ref: fileInputElementRef,
     type: "file",

package/dist/components/DragAndDropFileInput.module.scss

@@ -1,4 +1,8 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/transition";
+
+// Variables
+@use "../style/abstracts/variables/colors";
 
 .dragAndDropFileInput {
     .requiredSymbol {
@@ -10,8 +14,8 @@
     }
 
     .dragAndDropContainer {
-        @include transition(all 0.1s ease-in-out);
-        border: 2px dashed var(--color-secondary-light, $color-secondary-light);
+        @include transition.transition(all 0.1s ease-in-out);
+        border: 2px dashed var(--color-secondary-light, colors.$color-secondary-light);
         border-radius: 20px;
         width: 100%;
         padding: 20px;
@@ -27,8 +31,8 @@
         }
 
         &.highlighted {
-            background: var(--color-secondary-x-light, $color-secondary-x-light);
-            border-color: var(--color-primary, $color-primary);
+            background: var(--color-secondary-x-light, colors.$color-secondary-x-light);
+            border-color: var(--color-primary, colors.$color-primary);
         }
     }
 }

package/dist/components/ErrorBox.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
 var _ErrorBoxModule = _interopRequireDefault(require("./ErrorBox.module.scss"));
 var _infoSign = _interopRequireDefault(require("../assets/svg/info-sign.svg?url"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ErrorBox = props => {
   return _react.default.createElement("div", {
     className: (0, _helpers.classNameArrayToClassNameString)([_ErrorBoxModule.default.errorBoxContainer, _ErrorBoxModule.default[props.type], props.fullScreen && _ErrorBoxModule.default.fullScreen])

package/dist/components/ErrorBox.module.scss

@@ -1,4 +1,8 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/sizes";
+@use "../style/abstracts/variables/typography";
+@use "../style/abstracts/variables/viewports";
 
 @keyframes messageIn {
     0% {
@@ -8,18 +12,18 @@
 }
 
 .errorBoxContainer {
-    font-family: $default-font;
+    font-family: typography.$default-font;
     margin: 0;
     animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
     position: relative;
     line-height: 24px;
     &.warning {
-        background-color: var(--color-warning-x-light, $color-warning-x-light);
-        border-color: var(--color-warning, $color-warning);
+        background-color: var(--color-warning-x-light, colors.$color-warning-x-light);
+        border-color: var(--color-warning, colors.$color-warning);
     }
     &.error {
-        background-color: var(--color-error-x-light, $color-error-x-light);
-        border-color: var(--color-error, $color-error);
+        background-color: var(--color-error-x-light, colors.$color-error-x-light);
+        border-color: var(--color-error, colors.$color-error);
     }
     &.fullScreen {
         border-bottom-width: 4px;
@@ -32,7 +36,7 @@
     .errorBox {
         padding: 24px 24px 24px calc(1.2em + 48px);
         &.fullScreen {
-            max-width: $content-width;
+            max-width: sizes.$content-width;
             margin: auto;
             position: relative;
         }
@@ -53,7 +57,7 @@
             font-weight: 500;
             line-height: 1.3;
             margin: 0;
-            @media only screen and (min-width: $screen-sm) {
+            @media only screen and (min-width: viewports.$screen-sm) {
                 font-size: 24px;
             }
         }

package/dist/components/ErrorMessage.js

@@ -8,18 +8,16 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ErrorMessageModule = _interopRequireDefault(require("./ErrorMessage.module.scss"));
 var _errorSign = _interopRequireDefault(require("../assets/svg/error-sign.svg?url"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const ErrorMessage = props => {
-  var _props$content;
   const getErrorElementProps = () => {
-    var _props$id;
     return {
-      id: !!((_props$id = props.id) !== null && _props$id !== void 0 && _props$id.length) ? props.id : null,
+      id: !!props.id?.length ? props.id : null,
       className: _ErrorMessageModule.default.errorMessage
     };
   };
-  return props !== null && props !== void 0 && (_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length ? _react.default.createElement("span", _extends({
+  return props?.content?.length ? _react.default.createElement("span", _extends({
     "aria-live": "polite"
   }, getErrorElementProps()), _react.default.createElement("img", {
     src: _errorSign.default,