dibk-design 6.5.2 → 7.0.0

package/dist/components/Accordion.js

@@ -8,10 +8,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
 var _AccordionModule = _interopRequireDefault(require("./Accordion.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 Accordion = props => {
   const [expanded, setExpanded] = (0, _react.useState)(props.expanded);
   const [initialized, setInitialized] = (0, _react.useState)(props.initialized);
@@ -33,14 +33,14 @@ const Accordion = props => {
     }), _react.default.createElement("span", {
       className: _AccordionModule.default.panelText
     }, props.title), _react.default.createElement("span", {
-      className: "".concat(_AccordionModule.default.panelChevron, " ").concat(expanded ? _AccordionModule.default.expanded : "")
+      className: `${_AccordionModule.default.panelChevron} ${expanded ? _AccordionModule.default.expanded : ""}`
     }));
   };
   const className = (0, _helpers.classNameArrayToClassNameString)([_AccordionModule.default.accordion, props.color && _AccordionModule.default[props.color], !props.noMargin && _AccordionModule.default.margin]);
   return _react.default.createElement("div", {
     className: className
   }, renderPanel(), _react.default.createElement("div", {
-    className: "".concat(_AccordionModule.default.content, " ").concat(initialized ? _AccordionModule.default.initialized : "", " ").concat(expanded ? _AccordionModule.default.expanded : "")
+    className: `${_AccordionModule.default.content} ${initialized ? _AccordionModule.default.initialized : ""} ${expanded ? _AccordionModule.default.expanded : ""}`
   }, props.children));
 };
 Accordion.propTypes = {

package/dist/components/Accordion.module.scss

@@ -1,4 +1,11 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/appearance";
+@use "../style/abstracts/mixins/border-radius";
+
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/viewports";
+@use "../style/abstracts/variables/typography";
 
 @keyframes show {
     0% {
@@ -34,7 +41,7 @@
     }
 }
 
-@media only screen and (min-width: $screen-sm) {
+@media only screen and (min-width: viewports.$screen-sm) {
     @keyframes show {
         0% {
             opacity: 0;
@@ -70,23 +77,23 @@
 }
 
 .accordion {
-    font-family: $default-font;
+    font-family: typography.$default-font;
     text-decoration: none;
     width: 100%;
     display: block;
     &.default {
-        background-color: var(--color-default-background, $color-default-background);
+        background-color: var(--color-default-background, colors.$color-default-background);
         .panel span,
         .content {
-            color: var(--color-default-text, $color-default-text);
+            color: var(--color-default-text, 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);
         .panel span,
         .content {
-            color: var(--color-default-text, $color-default-text);
+            color: var(--color-default-text, colors.$color-default-text);
         }
     }
     &.margin {
@@ -94,9 +101,9 @@
     }
 
     .panel {
-        @include appearance(none);
-        @include border-radius(0);
-        font-family: $default-font;
+        @include appearance.appearance(none);
+        @include border-radius.border-radius(0);
+        font-family: typography.$default-font;
         padding: 15px 15px;
         display: flex;
         align-items: center;
@@ -109,30 +116,30 @@
         width: 100%;
         background: none;
         text-align: left;
-        @media only screen and (min-width: $screen-sm) {
+        @media only screen and (min-width: viewports.$screen-sm) {
             padding: 15px 30px;
         }
         &:focus-visible {
-            outline-color: var(--color-primary, $color-primary);
+            outline-color: var(--color-primary, colors.$color-primary);
             outline-style: auto;
             outline-width: 2px;
             outline-offset: 0px;
         }
         .panelText {
-            font-family: $default-font;
+            font-family: typography.$default-font;
             font-weight: bold;
             font-size: 18px;
             flex: 1;
         }
         .panelChevron {
+            @include border-radius.border-radius(100px);
             box-sizing: border-box;
             position: relative;
             display: block;
             width: 18px;
             height: 18px;
-            border-radius: 100px;
             margin-right: 6px;
-            @media only screen and (min-width: $screen-sm) {
+            @media only screen and (min-width: viewports.$screen-sm) {
                 margin-right: 0;
             }
             &::after {
@@ -161,7 +168,7 @@
         max-height: 0;
         overflow: hidden;
         padding: 0 15px 0;
-        @media only screen and (min-width: $screen-sm) {
+        @media only screen and (min-width: viewports.$screen-sm) {
             padding: 0 30px 0;
         }
         &.initialized {
@@ -175,7 +182,7 @@
             padding: 8px 15px 15px;
             line-height: inherit;
             max-height: 10000px;
-            @media only screen and (min-width: $screen-sm) {
+            @media only screen and (min-width: viewports.$screen-sm) {
                 padding: 8px 30px 15px;
             }
         }

package/dist/components/Button.js

@@ -9,12 +9,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRouterDom = require("react-router-dom");
 var _helpers = require("../functions/helpers");
 var _ButtonModule = _interopRequireDefault(require("./Button.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 Button = props => {
-  var _props$href, _props$href2, _props$children;
   const getArrowClass = arrow => {
     switch (arrow) {
       case "left":
@@ -28,7 +27,7 @@ const Button = props => {
   let buttonProps = {
     ...props,
     "aria-invalid": props.hasErrors || null,
-    href: !props.disabled && (_props$href = props.href) !== null && _props$href !== void 0 && _props$href.length ? props.href : null
+    href: !props.disabled && props.href?.length ? props.href : null
   };
   delete buttonProps.noHover;
   delete buttonProps.hasErrors;
@@ -38,23 +37,21 @@ const Button = props => {
   delete buttonProps.content;
   delete buttonProps.arrow;
   delete buttonProps.noMargin;
-  const buttonColor = (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? props.defaultChecked ? "primary" : "secondary" : props.color;
-  const className = (0, _helpers.classNameArrayToClassNameString)([_ButtonModule.default.button, _ButtonModule.default[buttonColor], _ButtonModule.default[props.size], getArrowClass(props.arrow), props.noHover || (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? _ButtonModule.default.noHover : null, props.rounded && _ButtonModule.default.rounded, props.hasErrors && _ButtonModule.default.hasErrors, props.disabled && _ButtonModule.default.disabled, props.noMargin && _ButtonModule.default.noMargin]);
+  const buttonColor = props?.inputType === "radio" ? props.defaultChecked ? "primary" : "secondary" : props.color;
+  const className = (0, _helpers.classNameArrayToClassNameString)([_ButtonModule.default.button, _ButtonModule.default[buttonColor], _ButtonModule.default[props.size], getArrowClass(props.arrow), props.noHover || props?.inputType === "radio" ? _ButtonModule.default.noHover : null, props.rounded && _ButtonModule.default.rounded, props.hasErrors && _ButtonModule.default.hasErrors, props.disabled && _ButtonModule.default.disabled, props.noMargin && _ButtonModule.default.noMargin]);
   const renderReactLinkElements = childElements => {
     const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
     return childElementsthroughFragments.map((childElement, index) => {
-      var _childElement$props;
-      if (!buttonProps.disabled && !!(childElement !== null && childElement !== void 0 && (_childElement$props = childElement.props) !== null && _childElement$props !== void 0 && _childElement$props.to)) {
-        var _childElement$props2, _childElement$props3;
+      if (!buttonProps.disabled && !!childElement?.props?.to) {
         const childElementCopy = _react.default.cloneElement(childElement, {
           className: className,
-          key: "button-".concat(index),
-          to: !buttonProps.disabled && childElement !== null && childElement !== void 0 && (_childElement$props2 = childElement.props) !== null && _childElement$props2 !== void 0 && _childElement$props2.to ? childElement === null || childElement === void 0 || (_childElement$props3 = childElement.props) === null || _childElement$props3 === void 0 ? void 0 : _childElement$props3.to : null
+          key: `button-${index}`,
+          to: !buttonProps.disabled && childElement?.props?.to ? childElement?.props?.to : null
         });
         return childElementCopy;
       } else {
         return _react.default.createElement("button", _extends({}, buttonProps, {
-          key: "button-".concat(index),
+          key: `button-${index}`,
           className: className
         }), props.content || childElement.props.children);
       }
@@ -72,11 +69,11 @@ const Button = props => {
     }, _react.default.createElement("input", _extends({}, buttonProps, {
       type: "radio"
     })), props.content);
-  } else if ((_props$href2 = props.href) !== null && _props$href2 !== void 0 && _props$href2.length && !props.disabled) {
+  } else if (props.href?.length && !props.disabled) {
     return _react.default.createElement("a", _extends({}, buttonProps, {
       className: className
     }), props.content || props.children);
-  } else if ((props === null || props === void 0 || (_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === _reactRouterDom.Link) {
+  } else if (props?.children?.type === _reactRouterDom.Link) {
     return _react.default.createElement(_react.Fragment, null, renderReactLinkElements(_react.default.Children.toArray(props.children)));
   } else {
     return _react.default.createElement("button", _extends({}, buttonProps, {

package/dist/components/Button.module.scss

@@ -1,45 +1,58 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/animation";
+@use "../style/abstracts/mixins/appearance";
+@use "../style/abstracts/mixins/border-radius";
+@use "../style/abstracts/mixins/box-shadow";
+@use "../style/abstracts/mixins/keyframes";
+@use "../style/abstracts/mixins/transform";
+@use "../style/abstracts/mixins/transition";
 
-@include keyframes(pushnext) {
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/transitions";
+@use "../style/abstracts/variables/typography";
+@use "../style/abstracts/variables/viewports";
+
+@include keyframes.keyframes(pushnext) {
   0% {
-    @include transform(rotate(45deg) translate3d(0, 0, 0));
+    @include transform.transform(rotate(45deg) translate3d(0, 0, 0));
   }
 
   50% {
-    @include transform(rotate(45deg) translate3d(2px, -2px, 0));
+    @include transform.transform(rotate(45deg) translate3d(2px, -2px, 0));
   }
 
   100% {
-    @include transform(rotate(45deg) translate3d(0, 0, 0));
+    @include transform.transform(rotate(45deg) translate3d(0, 0, 0));
   }
 }
-@include keyframes(pushprev) {
+@include keyframes.keyframes(pushprev) {
   0% {
-    @include transform(rotate(-135deg) translate3d(0, 0, 0));
+    @include transform.transform(rotate(-135deg) translate3d(0, 0, 0));
   }
 
   50% {
-    @include transform(rotate(-135deg) translate3d(-2px, 2px, 0));
+    @include transform.transform(rotate(-135deg) translate3d(-2px, 2px, 0));
   }
 
   100% {
-    @include transform(rotate(-135deg) translate3d(0, 0, 0));
+    @include transform.transform(rotate(-135deg) translate3d(0, 0, 0));
   }
 }
 
 .button {
-  @include appearance(none);
-  @include border-radius(0);
-  @include transition(
-    filter $default-transition,
-    background-color $default-transition,
-    color $default-transition,
-    border-color $default-transition
+  @include appearance.appearance(none);
+  @include border-radius.border-radius(0);
+  @include transition.transition(
+    filter transitions.$default-transition,
+    background-color transitions.$default-transition,
+    color transitions.$default-transition,
+    border-color transitions.$default-transition
   );
-  font-family: $default-font;
+  font-family: typography.$default-font;
   border-style: solid;
   border-width: 1px;
-  border-color: var(--color-primary, $color-primary);
+  border-color: var(--color-primary, colors.$color-primary);
   cursor: pointer;
   line-height: 1;
   position: relative;
@@ -49,7 +62,7 @@
 
   font-size: 17px;
   font-weight: 500;
-  @media only screen and (min-width: $screen-sm) {
+  @media only screen and (min-width: viewports.$screen-sm) {
     font-size: 20px;
   }
   &:not(.noMargin) {
@@ -63,7 +76,7 @@
 
   &:focus-visible,
   &:focus-within {
-    outline-color: var(--color-primary, $color-primary);
+    outline-color: var(--color-primary, colors.$color-primary);
   }
 
   &.regular {
@@ -74,57 +87,57 @@
     padding: 6px 24px;
     min-width: 80px;
     line-height: 18px;
-    @media only screen and (min-width: $screen-sm) {
+    @media only screen and (min-width: viewports.$screen-sm) {
       line-height: 21px;
       padding: 6px 32px;
     }
   }
 
   &.primary {
-    background-color: var(--color-primary, $color-primary);
-    color: var(--color-primary-contrast, $color-primary-contrast);
+    background-color: var(--color-primary, colors.$color-primary);
+    color: var(--color-primary-contrast, colors.$color-primary-contrast);
     &:hover:not(.noHover),
     &:focus-visible {
-      background-color: var(--color-primary-light, $color-primary-light);
-      border-color: var(--color-primary-light, $color-primary-light);
-      color: var(--color-primary-contrast, $color-primary-contrast);
+      background-color: var(--color-primary-light, colors.$color-primary-light);
+      border-color: var(--color-primary-light, colors.$color-primary-light);
+      color: var(--color-primary-contrast, colors.$color-primary-contrast);
       &:after,
       &:before {
-        border-color: var(--color-primary-light, $color-primary-light);
+        border-color: var(--color-primary-light, colors.$color-primary-light);
       }
     }
     &:active:not(.noHover),
     &:active:hover:not(.noHover) {
-      background-color: var(--color-primary-x-light, $color-primary-x-light);
-      border-color: var(--color-primary-x-light, $color-primary-x-light);
-      color: var(--color-primary-contrast, $color-primary-contrast);
+      background-color: var(--color-primary-x-light, colors.$color-primary-x-light);
+      border-color: var(--color-primary-x-light, colors.$color-primary-x-light);
+      color: var(--color-primary-contrast, colors.$color-primary-contrast);
       &:after,
       &:before {
-        border-color: var(--color-primary-x-light, $color-primary-x-light);
+        border-color: var(--color-primary-x-light, colors.$color-primary-x-light);
       }
     }
   }
 
   &.secondary {
-    background-color: var(--color-secondary, $color-secondary);
-    color: var(--color-secondary-contrast, $color-secondary-contrast);
-    border-color: var(--color-secondary-x-light, $color-secondary-x-light);
+    background-color: var(--color-secondary, colors.$color-secondary);
+    color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
+    border-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
     &:hover:not(.noHover),
     &:focus-visible {
-      background-color: var(--color-secondary-light, $color-secondary-x-light);
-      color: var(--color-secondary-contrast, $color-secondary-contrast);
+      background-color: var(--color-secondary-light, colors.$color-secondary-x-light);
+      color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
       &:after,
       &:before {
-        border-color: var(--color-secondary-light, $color-secondary-x-light);
+        border-color: var(--color-secondary-light, colors.$color-secondary-x-light);
       }
     }
     &:active:not(.noHover),
     &:active:hover:not(.noHover) {
-      background-color: var(--color-secondary-x-light, $color-secondary-light);
-      color: var(--color-secondary-contrast, $color-secondary-contrast);
+      background-color: var(--color-secondary-x-light, colors.$color-secondary-light);
+      color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
       &:after,
       &:before {
-        border-color: var(--color-secondary-x-light, $color-secondary-light);
+        border-color: var(--color-secondary-x-light, colors.$color-secondary-light);
       }
     }
   }
@@ -133,44 +146,44 @@
   &.disabled {
     &.primary,
     &.secondary {
-      background-color: var(--color-primary, $color-primary);
+      background-color: var(--color-primary, colors.$color-primary);
       cursor: default;
-      color: var(--color-primary-contrast, $color-primary-contrast);
-      border: 1px solid var(--color-primary, $color-primary);
+      color: var(--color-primary-contrast, colors.$color-primary-contrast);
+      border: 1px solid var(--color-primary, colors.$color-primary);
       opacity: 0.2;
       filter: saturate(3);
       &:hover:not(.noHover),
       &:focus-visible,
       &:active:not(.noHover),
       &:active:hover:not(.noHover) {
-        background-color: var(--color-primary, $color-primary);
+        background-color: var(--color-primary, colors.$color-primary);
         cursor: default;
-        color: var(--color-primary-contrast, $color-primary-contrast);
-        border: 1px solid var(--color-primary, $color-primary);
+        color: var(--color-primary-contrast, colors.$color-primary-contrast);
+        border: 1px solid var(--color-primary, colors.$color-primary);
         &:before,
         &:after {
-          border-color: var(--color-primary-contrast, $color-primary-contrast);
+          border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
         }
       }
       &:before,
       &:after {
-        border-color: var(--color-primary-contrast, $color-primary-contrast);
+        border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
       }
     }
   }
 
   &.hasErrors {
-    @include box-shadow(0 0 2px 1px var(--color-error, $color-error));
-    border-color: var(--color-error, $color-error);
+    @include box-shadow.box-shadow(0 0 2px 1px var(--color-error, colors.$color-error));
+    border-color: var(--color-error, colors.$color-error);
   }
 
   &.rounded {
-    border-radius: 20px;
+    @include border-radius.border-radius(20px);
   }
 
   &.hasArrowLeft {
     &:before {
-      @include transform(rotate(-135deg));
+      @include transform.transform(rotate(-135deg));
       content: " ";
       display: inline-block;
       margin-right: 1em;
@@ -180,7 +193,7 @@
       border-style: solid;
       border-width: 2px 2px 0 0;
       margin-right: 1em;
-      @media only screen and (min-width: $screen-sm) {
+      @media only screen and (min-width: viewports.$screen-sm) {
         left: 1em;
       }
     }
@@ -188,12 +201,12 @@
     &:not(.disabled) {
       &.primary {
         &:before {
-          border-color: var(--color-primary-contrast, $color-primary-contrast);
+          border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
         }
       }
       &.secondary {
         &:before {
-          border-color: var(--color-secondary-contrast, $color-secondary-contrast);
+          border-color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
         }
       }
       &:hover:not(.noHover),
@@ -201,16 +214,16 @@
       &:active:not(.noHover),
       &:active:hover:not(.noHover) {
         &:before {
-          @include animation(pushprev 0.8s linear infinite);
+          @include animation.animation(pushprev 0.8s linear infinite);
         }
         &.primary {
           &:before {
-            border-color: var(--color-primary-contrast, $color-primary-contrast);
+            border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
           }
         }
         &.secondary {
           &:before {
-            border-color: var(--color-secondary-contrast, $color-secondary-contrast);
+            border-color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
           }
         }
       }
@@ -219,7 +232,7 @@
 
   &.hasArrowRight {
     &:after {
-      @include transform(rotate(45deg));
+      @include transform.transform(rotate(45deg));
       content: " ";
       display: inline-block;
       margin-left: 1em;
@@ -229,7 +242,7 @@
       border-style: solid;
       border-width: 2px 2px 0 0;
       margin-left: 1em;
-      @media only screen and (min-width: $screen-sm) {
+      @media only screen and (min-width: viewports.$screen-sm) {
         right: 1em;
       }
     }
@@ -238,12 +251,12 @@
     &:not(.disabled) {
       &.primary {
         &:after {
-          border-color: var(--color-primary-contrast, $color-primary-contrast);
+          border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
         }
       }
       &.secondary {
         &:after {
-          border-color: var(--color-secondary-contrast, $color-secondary-contrast);
+          border-color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
         }
       }
 
@@ -252,16 +265,16 @@
       &:active:not(.noHover),
       &:active:hover:not(.noHover) {
         &:after {
-          @include animation(pushnext 0.8s linear infinite);
+          @include animation.animation(pushnext 0.8s linear infinite);
         }
         &.primary {
           &:after {
-            border-color: var(--color-primary-contrast, $color-primary-contrast);
+            border-color: var(--color-primary-contrast, colors.$color-primary-contrast);
           }
         }
         &.secondary {
           &:after {
-            border-color: var(--color-secondary-contrast, $color-secondary-contrast);
+            border-color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
           }
         }
       }
@@ -271,7 +284,7 @@
 
 label.button {
   input[type="radio"] {
-    @include appearance(none);
+    @include appearance.appearance(none);
     margin: 0;
   }
 }

package/dist/components/CheckBoxIcon.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CheckBoxIconModule = _interopRequireDefault(require("./CheckBoxIcon.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CheckBoxIcon = props => {
   let inlineStyle = {
     height: props.size,
@@ -15,7 +15,7 @@ const CheckBoxIcon = props => {
     fontSize: props.size
   };
   const checkBoxIconProps = {
-    className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(props.checked ? _CheckBoxIconModule.default.checked : "", " ").concat(props.disabled ? _CheckBoxIconModule.default.disabled : "", " ").concat(props.showBox ? _CheckBoxIconModule.default.showBox : "", " ").concat(props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ""),
+    className: `${_CheckBoxIconModule.default.checkBoxIcon} ${props.checked ? _CheckBoxIconModule.default.checked : ""} ${props.disabled ? _CheckBoxIconModule.default.disabled : ""} ${props.showBox ? _CheckBoxIconModule.default.showBox : ""} ${props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ""}`,
     style: inlineStyle
   };
   return _react.default.createElement("span", checkBoxIconProps, _react.default.createElement("span", {

package/dist/components/CheckBoxIcon.module.scss

@@ -1,9 +1,16 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/border-radius";
+@use "../style/abstracts/mixins/box-shadow";
+@use "../style/abstracts/mixins/box-sizing";
+@use "../style/abstracts/mixins/transition";
+
+// Variables
+@use "../style/abstracts/variables/colors";
 
 .checkBoxIcon {
-    @include border-radius(0);
-    @include transition(all 0.1s ease-in-out);
-    @include box-sizing(content-box);
+    @include border-radius.border-radius(0);
+    @include transition.transition(all 0.1s ease-in-out);
+    @include box-sizing.box-sizing(content-box);
     display: inline-block;
     vertical-align: middle;
     min-width: 10px;
@@ -20,26 +27,26 @@
         margin-top: 2px;
         background: white;
         &:not(.hasErrors) {
-            @include box-shadow(0 0 0 1px var(--color-form-element, $color-form-element));
+            @include box-shadow.box-shadow(0 0 0 1px var(--color-form-element, colors.$color-form-element));
         }
         &.hasErrors {
-            @include box-shadow(0 0 0 1px var(--color-error, $color-error));
+            @include box-shadow.box-shadow(0 0 0 1px var(--color-error, colors.$color-error));
         }
     }
 
     &.checked {
-        color: var(--color-primary, $color-primary);
+        color: var(--color-primary, colors.$color-primary);
         &.hasErrors {
             span {
-                color: var(--color-error, $color-error);
+                color: var(--color-error, colors.$color-error);
             }
         }
         &.showBox {
             &:not(.hasErrors) {
-                @include box-shadow(0 0 0 1px var(--color-form-element, $color-form-element));
+                @include box-shadow.box-shadow(0 0 0 1px var(--color-form-element, colors.$color-form-element));
             }
             &.hasErrors {
-                @include box-shadow(0 0 0 1px var(--color-error, $color-error));
+                @include box-shadow.box-shadow(0 0 0 1px var(--color-error, colors.$color-error));
             }
         }
     }

package/dist/components/CheckBoxInput.js

@@ -9,10 +9,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CheckBoxIcon = _interopRequireDefault(require("./CheckBoxIcon"));
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _CheckBoxInputModule = _interopRequireDefault(require("./CheckBoxInput.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CheckBoxInput = props => {
   const labelProps = {
-    className: "".concat(_CheckBoxInputModule.default.checkBoxInput, " ").concat(props.contentOnly ? _CheckBoxInputModule.default.contentOnly : "", " ").concat(props.disabled ? _CheckBoxInputModule.default.disabled : "", " ").concat(props.hasErrors ? _CheckBoxInputModule.default.hasErrors : ""),
+    className: `${_CheckBoxInputModule.default.checkBoxInput} ${props.contentOnly ? _CheckBoxInputModule.default.contentOnly : ""} ${props.disabled ? _CheckBoxInputModule.default.disabled : ""} ${props.hasErrors ? _CheckBoxInputModule.default.hasErrors : ""}`,
     htmlFor: props.id
   };
   const iconProps = {