@citygross/components 0.7.77 → 0.7.79

package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js

@@ -19,14 +19,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -35,13 +33,13 @@ var Icon__namespace = /*#__PURE__*/_interopNamespace(Icon);
 
 function QuantitySelector(_a) {
     var onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, _b = _a.currentValue, currentValue = _b === void 0 ? 0 : _b, incrementDisabled = _a.incrementDisabled, decrementDisabled = _a.decrementDisabled;
-    return (React__default['default'].createElement(QuantitySelector_styles.QuantitySelectorContainer, null,
-        React__default['default'].createElement(QuantitySelector_styles.IconButtonContainer, null,
-            React__default['default'].createElement(IconButton.IconButton, { height: 28, width: 28, icon: React__default['default'].createElement(Icon__namespace.Icons.Minus, null), color: 'white', onClick: onDecrement, isDisabled: decrementDisabled })),
-        React__default['default'].createElement(QuantitySelector_styles.QuantityContainer, null,
-            React__default['default'].createElement(typography.H3, null, currentValue)),
-        React__default['default'].createElement(QuantitySelector_styles.IconButtonContainer, null,
-            React__default['default'].createElement(IconButton.IconButton, { height: 28, width: 28, icon: React__default['default'].createElement(Icon__namespace.Icons.Plus, null), color: 'white', onClick: onIncrement, isDisabled: incrementDisabled }))));
+    return (React__default["default"].createElement(QuantitySelector_styles.QuantitySelectorContainer, null,
+        React__default["default"].createElement(QuantitySelector_styles.IconButtonContainer, null,
+            React__default["default"].createElement(IconButton.IconButton, { height: 28, width: 28, icon: React__default["default"].createElement(Icon__namespace.Icons.Minus, null), color: 'white', onClick: onDecrement, isDisabled: decrementDisabled })),
+        React__default["default"].createElement(QuantitySelector_styles.QuantityContainer, null,
+            React__default["default"].createElement(typography.H3, null, currentValue)),
+        React__default["default"].createElement(QuantitySelector_styles.IconButtonContainer, null,
+            React__default["default"].createElement(IconButton.IconButton, { height: 28, width: 28, icon: React__default["default"].createElement(Icon__namespace.Icons.Plus, null), color: 'white', onClick: onIncrement, isDisabled: incrementDisabled }))));
 }
 
 exports.QuantitySelector = QuantitySelector;

package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"QuantitySelector.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.styles.js

@@ -9,9 +9,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var QuantitySelectorContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  background: ", ";\n  width: fit-content;\n  border-radius: 20px;\n"], ["\n  display: flex;\n  background: ", ";\n  width: fit-content;\n  border-radius: 20px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; });
-var QuantityContainer = styled__default['default'].p(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  width: 50px;\n  padding: 0px ", "px;\n"], ["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  width: 50px;\n  padding: 0px ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var IconButtonContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  padding: ", "px;\n"], ["\n  display: flex;\n  padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var QuantitySelectorContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  background: ", ";\n  width: fit-content;\n  border-radius: 20px;\n"], ["\n  display: flex;\n  background: ", ";\n  width: fit-content;\n  border-radius: 20px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; });
+var QuantityContainer = styled__default["default"].p(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  width: 50px;\n  padding: 0px ", "px;\n"], ["\n  display: flex;\n  align-self: center;\n  justify-content: center;\n  width: 50px;\n  padding: 0px ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var IconButtonContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  padding: ", "px;\n"], ["\n  display: flex;\n  padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
 var templateObject_1, templateObject_2, templateObject_3;
 
 exports.IconButtonContainer = IconButtonContainer;

package/build/cjs/components/src/components/RadioBox/RadioBoxItem.js

@@ -14,8 +14,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function RadioBoxItem(_a) {
     var _b, _c;
     var _d = _a.radioColor, radioColor = _d === void 0 ? 'alertGreen' : _d, checked = _a.checked, isDisabled = _a.isDisabled, name = _a.name, _e = _a.align, align = _e === void 0 ? 'flex-start' : _e, setActive = _a.setActive, _f = _a.background, background = _f === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _f, _g = _a.border, border = _g === void 0 ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.border : _g, _h = _a.boxShadow, boxShadow = _h === void 0 ? true : _h, children = _a.children;
-    return (React__default['default'].createElement(RadioBoxItem_styles.BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow },
-        React__default['default'].createElement(Radio.Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
+    return (React__default["default"].createElement(RadioBoxItem_styles.BaseRadioBox, { align: align, checked: checked, isDisabled: isDisabled, onClick: !isDisabled ? setActive : function () { }, background: background, border: border, boxShadow: boxShadow },
+        React__default["default"].createElement(Radio.Radio, { customColor: radioColor, checked: checked, disabled: isDisabled, name: name, onChange: function () { return setActive; } }),
         children));
 }
 

package/build/cjs/components/src/components/RadioBox/RadioBoxItem.styles.js

@@ -14,7 +14,7 @@ exports.Alignment = void 0;
     Alignment[Alignment["flex-start"] = 0] = "flex-start";
     Alignment[Alignment["center"] = 1] = "center";
 })(exports.Alignment || (exports.Alignment = {}));
-var BaseRadioBox = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-basis: 100%;\n  padding: ", ";\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"], ["\n  display: flex;\n  flex-basis: 100%;\n  padding: ", ";\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"])), function (props) { var _a; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md) + "px "; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
+var BaseRadioBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-basis: 100%;\n  padding: ", ";\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"], ["\n  display: flex;\n  flex-basis: 100%;\n  padding: ", ";\n  align-items: ", ";\n  gap: ", "px;\n  cursor: ", ";\n  ", ";\n\n  background: ", ";\n  border: solid 1px ", ";\n  ", ";\n  border-radius: 5px;\n  ", ";\n  -webkit-transition: background-color 400ms linear;\n  -ms-transition: background-color 400ms linear;\n  transition: background-color 400ms linear;\n"])), function (props) { var _a; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md) + "px "; }, function (props) { return props.align; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return (props.isDisabled ? 'default' : 'pointer'); }, function (props) { return props.isDisabled && 'opacity: 0.4'; }, function (props) { var _a; return props.checked ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : props.background; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) {
     return props.checked &&
         props.border &&
         "border: 1px solid " + (props.border && props.border);

package/build/cjs/components/src/components/RadioBox/RadioBoxList.js

@@ -16,14 +16,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function RadioBoxList(_a) {
     var _b, _c, _d;
     var _e = _a.radioColor, radioColor = _e === void 0 ? 'alertBlue' : _e, isDisabled = _a.isDisabled, name = _a.name, _f = _a.align, align = _f === void 0 ? 'flex-start' : _f, setActive = _a.setActive, title = _a.title, text = _a.text, checked = _a.checked, children = _a.children;
-    return (React__default['default'].createElement(RadioBoxList_styles.BaseRadioBoxList, { checked: checked },
-        React__default['default'].createElement(RadioBoxItem.RadioBoxItem, { radioColor: radioColor, checked: checked, align: align, isDisabled: isDisabled, border: (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.none, boxShadow: false, setActive: setActive, name: name },
-            React__default['default'].createElement("div", null,
-                React__default['default'].createElement(typography.H3, null, title),
-                React__default['default'].createElement(RadioBoxList_styles.RadioBoxListParagraph, null, text))),
-        React__default['default'].createElement(RadioBoxList_styles.RadioBoxListChildContainer, { checked: checked },
-            children && (React__default['default'].createElement(RadioBoxList_styles.DividerPadding, null,
-                React__default['default'].createElement(Divider.Divider, { xsSpacing: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.xs, lgSpacing: (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.xs }))),
+    return (React__default["default"].createElement(RadioBoxList_styles.BaseRadioBoxList, { checked: checked },
+        React__default["default"].createElement(RadioBoxItem.RadioBoxItem, { radioColor: radioColor, checked: checked, align: align, isDisabled: isDisabled, border: (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.none, boxShadow: false, setActive: setActive, name: name },
+            React__default["default"].createElement("div", null,
+                React__default["default"].createElement(typography.H3, null, title),
+                React__default["default"].createElement(RadioBoxList_styles.RadioBoxListParagraph, null, text))),
+        React__default["default"].createElement(RadioBoxList_styles.RadioBoxListChildContainer, { checked: checked },
+            children && (React__default["default"].createElement(RadioBoxList_styles.DividerPadding, null,
+                React__default["default"].createElement(Divider.Divider, { xsSpacing: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.xs, lgSpacing: (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.xs }))),
             children)));
 }
 

package/build/cjs/components/src/components/RadioBox/RadioBoxList.styles.js

@@ -11,16 +11,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseRadioBoxList = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  ", ";\n  border-radius: 5px;\n  transition: border 0.4s linear;\n"], ["\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  ", ";\n  border-radius: 5px;\n  transition: border 0.4s linear;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.transparent; }, function (props) {
+var BaseRadioBoxList = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  ", ";\n  border-radius: 5px;\n  transition: border 0.4s linear;\n"], ["\n  display: flex;\n  flex-direction: column;\n  border: 1px solid ", ";\n  ", ";\n  border-radius: 5px;\n  transition: border 0.4s linear;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.transparent; }, function (props) {
     var _a;
     return props.checked &&
         "border-color:" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.border) + ";\n    box-shadow: 0px 2px 5px rgba(7, 52, 99, 0.15);";
 });
-var RadioBoxListChildContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  max-height:", ";\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  max-height:", ";\n  ", "\n"])), function (props) { return props.checked ? React.Children.count(props.children) * 184 + 'px' : '0px'; }, function (props) { return props.checked
+var RadioBoxListChildContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  max-height:", ";\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  max-height:", ";\n  ", "\n"])), function (props) { return props.checked ? React.Children.count(props.children) * 184 + 'px' : '0px'; }, function (props) { return props.checked
     ? 'transition: all 0.4s ease-out'
     : 'transition: all 0.2s ease-in'; });
-var DividerPadding = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) { var _a; return "padding: 0px " + ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm) + "px;"; });
-var RadioBoxListParagraph = styled__default['default'](typography.BodyText)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding-top: ", "px;\n"], ["\n  padding-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var DividerPadding = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) { var _a; return "padding: 0px " + ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm) + "px;"; });
+var RadioBoxListParagraph = styled__default["default"](typography.BodyText)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding-top: ", "px;\n"], ["\n  padding-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
 exports.BaseRadioBoxList = BaseRadioBoxList;

package/build/cjs/components/src/components/RadioGroup/RadioGroup.js

@@ -12,9 +12,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function RadioGroup(_a) {
     var header = _a.header, children = _a.children;
-    return (React__default['default'].createElement(RadioGroup_styles.StyledDiv, { rounded: true },
-        React__default['default'].createElement(RadioGroup_styles.BaseRadioGroup, { header: header },
-            header && React__default['default'].createElement(typography.H1, null, header),
+    return (React__default["default"].createElement(RadioGroup_styles.StyledDiv, { rounded: true },
+        React__default["default"].createElement(RadioGroup_styles.BaseRadioGroup, { header: header },
+            header && React__default["default"].createElement(typography.H1, null, header),
             children)));
 }
 

package/build/cjs/components/src/components/RadioGroup/RadioGroup.styles.js

@@ -9,12 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseRadioGroup = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var BaseRadioGroup = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
     var _a;
     return props.header &&
         "\n  > :first-child{\n    margin-bottom: " + ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md) + "px;\n    text-align: initial;\n  }\n  ";
 });
-var StyledDiv = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-radius: ", ";\n"], ["\n  background: ", ";\n  border-radius: ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { return (props.rounded ? '5px' : '0'); });
+var StyledDiv = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-radius: ", ";\n"], ["\n  background: ", ";\n  border-radius: ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { return (props.rounded ? '5px' : '0'); });
 var templateObject_1, templateObject_2;
 
 exports.BaseRadioGroup = BaseRadioGroup;

package/build/cjs/components/src/components/RadioListItem/RadioListItem.js

@@ -16,22 +16,22 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function RadioListItem(_a) {
     var _b, _c, _d, _e;
     var onClick = _a.onClick, selected = _a.selected, name = _a.name, _f = _a.radioColor, radioColor = _f === void 0 ? 'alertBlue' : _f, defaultDisabledString = _a.defaultDisabledString, _g = _a.flexGrow, flexGrow = _g === void 0 ? 1 : _g, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, secondaryLabel = _a.secondaryLabel, textOnSelected = _a.textOnSelected, value = _a.value, wrapMobile = _a.wrapMobile, children = _a.children;
-    return (React__default['default'].createElement(RadioListItem_styles.BaseRadioListItemContainer, { background: transparent
+    return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { background: transparent
             ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
             : designTokens.theme && designTokens.theme.palette
                 ? selected
                     ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
                     : (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.white
                 : 'white', noPadding: noPadding, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
-        React__default['default'].createElement(RadioListItem_styles.RadioFlex, { wrapMobile: wrapMobile },
-            React__default['default'].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow, center: !textOnSelected },
-                React__default['default'].createElement(Radio.Radio, { customColor: radioColor, checked: selected, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
-                React__default['default'].createElement("div", null,
-                    React__default['default'].createElement(RadioListItem_styles.StyledH3, { lineThrough: isDisabled }, label),
-                    textOnSelected && selected && (React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))),
-            React__default['default'].createElement(RadioListItem_styles.RadioSecondaryWrapper, null,
-                React__default['default'].createElement("span", null, dotIndicator && selected && (React__default['default'].createElement(DotIndicator.Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
-                isDisabled ? (React__default['default'].createElement(RadioListItem_styles.DisableText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
+        React__default["default"].createElement(RadioListItem_styles.RadioFlex, { wrapMobile: wrapMobile },
+            React__default["default"].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow, center: !textOnSelected },
+                React__default["default"].createElement(Radio.Radio, { customColor: radioColor, checked: selected, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
+                React__default["default"].createElement("div", null,
+                    React__default["default"].createElement(RadioListItem_styles.StyledH3, { lineThrough: isDisabled }, label),
+                    textOnSelected && selected && (React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))),
+            React__default["default"].createElement(RadioListItem_styles.RadioSecondaryWrapper, null,
+                React__default["default"].createElement("span", null, dotIndicator && selected && (React__default["default"].createElement(DotIndicator.Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
+                isDisabled ? (React__default["default"].createElement(RadioListItem_styles.DisableText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
 }
 
 exports.RadioListItem = RadioListItem;

package/build/cjs/components/src/components/RadioListItem/RadioListItem.styles.js

@@ -10,20 +10,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseRadioListItemContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"], ["\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var BaseRadioItemLeftWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 5;\n  align-items: ", ";\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"], ["\n  display: flex;\n  flex: 5;\n  align-items: ", ";\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"])), function (props) { return (props.center ? 'center' : 'flex-start'); }, function (props) { return props.flexGrow && "flex-grow: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; });
-var StyledH3 = styled__default['default'](typography.H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n"], ["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n"])));
-var RadioSecondaryWrapper = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
-var DisableText = styled__default['default'](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"], ["\n  font-size: ", "px;\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
+var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"], ["\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var BaseRadioItemLeftWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 5;\n  align-items: ", ";\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"], ["\n  display: flex;\n  flex: 5;\n  align-items: ", ";\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"])), function (props) { return (props.center ? 'center' : 'flex-start'); }, function (props) { return props.flexGrow && "flex-grow: " + props.flexGrow; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; });
+var StyledH3 = styled__default["default"](typography.H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n"], ["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n"])));
+var RadioSecondaryWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
+var DisableText = styled__default["default"](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"], ["\n  font-size: ", "px;\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
     return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
         "\n  text-align: left;\n \n";
 }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; });
-var RadioFlex = styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  ", "\n"], ["\n  display: flex;\n  gap: ", "px;\n  ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
+var RadioFlex = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  ", "\n"], ["\n  display: flex;\n  gap: ", "px;\n  ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
     var _a;
     return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
         "\n  flex-wrap: wrap;\n  @media (min-width: " + ((_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs) + "px) {\n    flex-wrap: nowrap;\n  }\n    ";
 });
-styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 exports.BaseRadioItemLeftWrapper = BaseRadioItemLeftWrapper;

package/build/cjs/components/src/components/RippleContainer/RippleContainer.js

@@ -11,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function RippleContainer(_a) {
     var color = _a.color, children = _a.children;
-    return (React__default['default'].createElement(RippleContainer_styles.RippleContainer, { color: color }, children));
+    return (React__default["default"].createElement(RippleContainer_styles.RippleContainer, { color: color }, children));
 }
 
 exports.RippleContainer = RippleContainer;

package/build/cjs/components/src/components/RippleContainer/RippleContainer.styles.js

@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var slide = styled.keyframes(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  0% { left: -100% }\n  100% { left: 120% }\n"], ["\n  0% { left: -100% }\n  100% { left: 120% }\n"])));
-var RippleContainer = styled__default['default'](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n\n  &:after {\n    background: ", ";\n    content: '';\n    height: 200%;\n    left: -100%;\n    opacity: 0.2;\n    position: absolute;\n    top: -30%;\n    transform: rotate(35deg);\n    width: 50px;\n  }\n\n  &:hover {\n    &:after {\n      animation: ", "\n        ", " forwards;\n    }\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n\n  &:after {\n    background: ", ";\n    content: '';\n    height: 200%;\n    left: -100%;\n    opacity: 0.2;\n    position: absolute;\n    top: -30%;\n    transform: rotate(35deg);\n    width: 50px;\n  }\n\n  &:hover {\n    &:after {\n      animation: ", "\n        ", " forwards;\n    }\n  }\n"])), function (props) { var _a; return props.color ? props.color : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, slide, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.animations) === null || _b === void 0 ? void 0 : _b.rippleTransition; });
+var RippleContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n\n  &:after {\n    background: ", ";\n    content: '';\n    height: 200%;\n    left: -100%;\n    opacity: 0.2;\n    position: absolute;\n    top: -30%;\n    transform: rotate(35deg);\n    width: 50px;\n  }\n\n  &:hover {\n    &:after {\n      animation: ", "\n        ", " forwards;\n    }\n  }\n"], ["\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n\n  &:after {\n    background: ", ";\n    content: '';\n    height: 200%;\n    left: -100%;\n    opacity: 0.2;\n    position: absolute;\n    top: -30%;\n    transform: rotate(35deg);\n    width: 50px;\n  }\n\n  &:hover {\n    &:after {\n      animation: ", "\n        ", " forwards;\n    }\n  }\n"])), function (props) { var _a; return props.color ? props.color : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, slide, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.animations) === null || _b === void 0 ? void 0 : _b.rippleTransition; });
 var templateObject_1, templateObject_2;
 
 exports.RippleContainer = RippleContainer;

package/build/cjs/components/src/components/Select/Select.js

@@ -11,8 +11,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Select(_a) {
     var onChange = _a.onChange, children = _a.children;
-    return (React__default['default'].createElement(Select_styles.SelectWrapper, null,
-        React__default['default'].createElement(Select_styles.SelectElement, { onChange: onChange }, children)));
+    return (React__default["default"].createElement(Select_styles.SelectWrapper, null,
+        React__default["default"].createElement(Select_styles.SelectElement, { onChange: onChange }, children)));
 }
 
 exports.Select = Select;

package/build/cjs/components/src/components/Select/Select.styles.js

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var SelectWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n\n  border-radius: ", "px;\n  border: 1px ", " solid;\n  padding: ", "px;\n  width: ", "px;\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n\n  &::after {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ", "px;\n    content: '';\n    width: 0px;\n    height: 0px;\n    /* static to make a triangle */\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 8px solid ", ";\n  }\n"], ["\n  position: relative;\n\n  border-radius: ", "px;\n  border: 1px ", " solid;\n  padding: ", "px;\n  width: ", "px;\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n\n  &::after {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ", "px;\n    content: '';\n    width: 0px;\n    height: 0px;\n    /* static to make a triangle */\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 8px solid ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.selectPadding; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.selectMobileWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.selectWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; });
-var SelectElement = styled__default['default'].select(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  appearance: none;\n  outline: none;\n  border: none;\n  padding: ", ";\n  border-radius: ", "px;\n  font-family: ", ";\n  background: none;\n  font-size: ", "px;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  option {\n    font-family: ", ";\n    color: ", ";\n    line-height: ", "px;\n    font-size: ", "px;\n  }\n"], ["\n  appearance: none;\n  outline: none;\n  border: none;\n  padding: ", ";\n  border-radius: ", "px;\n  font-family: ", ";\n  background: none;\n  font-size: ", "px;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  option {\n    font-family: ", ";\n    color: ", ";\n    line-height: ", "px;\n    font-size: ", "px;\n  }\n"])), function (props) {
+var SelectWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n\n  border-radius: ", "px;\n  border: 1px ", " solid;\n  padding: ", "px;\n  width: ", "px;\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n\n  &::after {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ", "px;\n    content: '';\n    width: 0px;\n    height: 0px;\n    /* static to make a triangle */\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 8px solid ", ";\n  }\n"], ["\n  position: relative;\n\n  border-radius: ", "px;\n  border: 1px ", " solid;\n  padding: ", "px;\n  width: ", "px;\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n\n  &::after {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: ", "px;\n    content: '';\n    width: 0px;\n    height: 0px;\n    /* static to make a triangle */\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-top: 8px solid ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.selectPadding; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.selectMobileWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.selectWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; });
+var SelectElement = styled__default["default"].select(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  appearance: none;\n  outline: none;\n  border: none;\n  padding: ", ";\n  border-radius: ", "px;\n  font-family: ", ";\n  background: none;\n  font-size: ", "px;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  option {\n    font-family: ", ";\n    color: ", ";\n    line-height: ", "px;\n    font-size: ", "px;\n  }\n"], ["\n  appearance: none;\n  outline: none;\n  border: none;\n  padding: ", ";\n  border-radius: ", "px;\n  font-family: ", ";\n  background: none;\n  font-size: ", "px;\n  text-overflow: ellipsis;\n  max-width: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  option {\n    font-family: ", ";\n    color: ", ";\n    line-height: ", "px;\n    font-size: ", "px;\n  }\n"])), function (props) {
     var _a, _b, _c, _d;
     return "\n    " + ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs) + "px\n    " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.lg) + "px\n    " + ((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs) + "px\n    " + ((_d = props.theme.spacings) === null || _d === void 0 ? void 0 : _d.xs) + "px\n  ";
 }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.type.primary; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.type.primary; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });

package/build/cjs/components/src/components/Slider/Slider.js

@@ -64,13 +64,13 @@ var Slider = function (_a) {
             document.removeEventListener('resize', resizeListener);
         };
     }, []);
-    return (React__default['default'].createElement(Slider_styles.Container, null,
-        React__default['default'].createElement(Slider_styles.SliderContainer, { ref: itemsContainer, onScroll: function (e) { return onScroll(e); } },
-            React__default['default'].createElement(Slider_styles.LeftIconButtonContainer, null,
-                React__default['default'].createElement(IconButton.IconButton, { isDisabled: isMin, color: iconColor, icon: React__default['default'].createElement(Icon.Icons.ChevronLeft, { color: 'white' }), height: iconHeight, width: iconWidth, onClick: function () { return slideRight(); } })),
-            React__default['default'].createElement(Slider_styles.ItemsContainer, { itemGap: itemGap }, children),
-            React__default['default'].createElement(Slider_styles.RightIconButtonContainer, null,
-                React__default['default'].createElement(IconButton.IconButton, { isDisabled: isMax || notScrollable, color: iconColor, icon: React__default['default'].createElement(Icon.Icons.ChevronRight, { color: 'white' }), height: iconHeight, width: iconWidth, onClick: function () { return slideLeft(); } })))));
+    return (React__default["default"].createElement(Slider_styles.Container, null,
+        React__default["default"].createElement(Slider_styles.SliderContainer, { ref: itemsContainer, onScroll: function (e) { return onScroll(e); } },
+            React__default["default"].createElement(Slider_styles.LeftIconButtonContainer, null,
+                React__default["default"].createElement(IconButton.IconButton, { isDisabled: isMin, color: iconColor, icon: React__default["default"].createElement(Icon.Icons.ChevronLeft, { color: 'white' }), height: iconHeight, width: iconWidth, onClick: function () { return slideRight(); } })),
+            React__default["default"].createElement(Slider_styles.ItemsContainer, { itemGap: itemGap }, children),
+            React__default["default"].createElement(Slider_styles.RightIconButtonContainer, null,
+                React__default["default"].createElement(IconButton.IconButton, { isDisabled: isMax || notScrollable, color: iconColor, icon: React__default["default"].createElement(Icon.Icons.ChevronRight, { color: 'white' }), height: iconHeight, width: iconWidth, onClick: function () { return slideLeft(); } })))));
 };
 
 exports.Slider = Slider;

package/build/cjs/components/src/components/Slider/Slider.styles.js

@@ -9,11 +9,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var SliderContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
-var LeftIconButtonContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  z-index: 1;\n  @media (min-width: ", "px) {\n    left: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  z-index: 1;\n  @media (min-width: ", "px) {\n    left: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var RightIconButtonContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  right: -", "px;\n  @media (min-width: ", "px) {\n    right: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  right: -", "px;\n  @media (min-width: ", "px) {\n    right: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var ItemsContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
+var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var SliderContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var LeftIconButtonContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  z-index: 1;\n  @media (min-width: ", "px) {\n    left: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  z-index: 1;\n  @media (min-width: ", "px) {\n    left: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var RightIconButtonContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  right: -", "px;\n  @media (min-width: ", "px) {\n    right: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  right: -", "px;\n  @media (min-width: ", "px) {\n    right: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var ItemsContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.Container = Container;

package/build/cjs/components/src/components/Spacer/Spacer.js

@@ -11,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Spacer = function (_a) {
     var _b = _a.xsSpacing, xsSpacing = _b === void 0 ? 'sm' : _b, _c = _a.lgSpacing, lgSpacing = _c === void 0 ? 'md' : _c;
-    return React__default['default'].createElement(Spacer_styles.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing });
+    return React__default["default"].createElement(Spacer_styles.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing });
 };
 
 exports.Spacer = Spacer;

package/build/cjs/components/src/components/Spacer/Spacer.styles.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Spacer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  margin-bottom: ", "px;\n\n  @media (min-width: ", "px) {\n    margin-bottom: ", "px;\n  }\n"], ["\n  width: 100%;\n  margin-bottom: ", "px;\n\n  @media (min-width: ", "px) {\n    margin-bottom: ", "px;\n  }\n"])), function (props) { return props.theme.spacings ? props.theme.spacings[props.xsSpacing] : 0; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return props.theme.spacings ? props.theme.spacings[props.lgSpacing] : 0; });
+var Spacer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  margin-bottom: ", "px;\n\n  @media (min-width: ", "px) {\n    margin-bottom: ", "px;\n  }\n"], ["\n  width: 100%;\n  margin-bottom: ", "px;\n\n  @media (min-width: ", "px) {\n    margin-bottom: ", "px;\n  }\n"])), function (props) { return props.theme.spacings ? props.theme.spacings[props.xsSpacing] : 0; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return props.theme.spacings ? props.theme.spacings[props.lgSpacing] : 0; });
 var templateObject_1;
 
 exports.Spacer = Spacer;

package/build/cjs/components/src/components/Spinner/Spinner.js

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Spinner = function (_a) {
     var spinnerColor = _a.spinnerColor, borderColor = _a.borderColor, _b = _a.animationSpeedMs, animationSpeedMs = _b === void 0 ? 500 : _b, _c = _a.size, size = _c === void 0 ? 32 : _c, props = _tslib.__rest(_a, ["spinnerColor", "borderColor", "animationSpeedMs", "size"]);
-    return (React__default['default'].createElement(Spinner_styles.spinnerWrapper, _tslib.__assign({ spinnerColor: spinnerColor, animationSpeedMs: animationSpeedMs, borderColor: borderColor, size: size }, props)));
+    return (React__default["default"].createElement(Spinner_styles.spinnerWrapper, _tslib.__assign({ spinnerColor: spinnerColor, animationSpeedMs: animationSpeedMs, borderColor: borderColor, size: size }, props)));
 };
 
 exports.Spinner = Spinner;

package/build/cjs/components/src/components/Spinner/Spinner.styles.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var spin = styled.keyframes(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n"], ["\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n"])));
-var spinnerWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  border: ", "px solid\n    ", ";\n  border-top: ", "px solid\n    ", ";\n  border-radius: 50%;\n  width: ", "px;\n  height: ", "px;\n  animation: ", " ", "ms linear infinite;\n"], ["\n  border: ", "px solid\n    ", ";\n  border-top: ", "px solid\n    ", ";\n  border-radius: 50%;\n  width: ", "px;\n  height: ", "px;\n  animation: ", " ", "ms linear infinite;\n"])), function (props) { return props.size / 7.5; }, function (props) { var _a, _b; return (_a = props.borderColor) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter; }, function (props) { return props.size / 7.5; }, function (props) { var _a, _b; return (_a = props.spinnerColor) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) { return props.size; }, function (props) { return props.size; }, spin, function (props) { return props.animationSpeedMs; });
+var spinnerWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  border: ", "px solid\n    ", ";\n  border-top: ", "px solid\n    ", ";\n  border-radius: 50%;\n  width: ", "px;\n  height: ", "px;\n  animation: ", " ", "ms linear infinite;\n"], ["\n  border: ", "px solid\n    ", ";\n  border-top: ", "px solid\n    ", ";\n  border-radius: 50%;\n  width: ", "px;\n  height: ", "px;\n  animation: ", " ", "ms linear infinite;\n"])), function (props) { return props.size / 7.5; }, function (props) { var _a, _b; return (_a = props.borderColor) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter; }, function (props) { return props.size / 7.5; }, function (props) { var _a, _b; return (_a = props.spinnerColor) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue; }, function (props) { return props.size; }, function (props) { return props.size; }, spin, function (props) { return props.animationSpeedMs; });
 var templateObject_1, templateObject_2;
 
 exports.spinnerWrapper = spinnerWrapper;

package/build/cjs/components/src/components/Stepper/Stepper.styles.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseStepperItem = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  cursor: ", ";\n  background: ", ";\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 25.5px ", "px;\n  border-right: ", ";\n  ", ";\n  @media (min-width: ", "px) {\n    ", ";\n  }\n\n  /* hide tooltip */\n  > {\n    &:first-child {\n      display: none;\n    }\n  }\n  /* dispaly tooltip */\n  &:hover {\n    > {\n      &:first-child {\n        display: block;\n      }\n    }\n  }\n"], ["\n  position: relative;\n  cursor: ", ";\n  background: ", ";\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 25.5px ", "px;\n  border-right: ", ";\n  ", ";\n  @media (min-width: ", "px) {\n    ", ";\n  }\n\n  /* hide tooltip */\n  > {\n    &:first-child {\n      display: none;\n    }\n  }\n  /* dispaly tooltip */\n  &:hover {\n    > {\n      &:first-child {\n        display: block;\n      }\n    }\n  }\n"])), function (props) { return (props.disabled ? 'default' : 'pointer'); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.md; }, function (props) { var _a, _b; return "1px solid " + ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium); }, function (props) {
+var BaseStepperItem = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  cursor: ", ";\n  background: ", ";\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 25.5px ", "px;\n  border-right: ", ";\n  ", ";\n  @media (min-width: ", "px) {\n    ", ";\n  }\n\n  /* hide tooltip */\n  > {\n    &:first-child {\n      display: none;\n    }\n  }\n  /* dispaly tooltip */\n  &:hover {\n    > {\n      &:first-child {\n        display: block;\n      }\n    }\n  }\n"], ["\n  position: relative;\n  cursor: ", ";\n  background: ", ";\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 25.5px ", "px;\n  border-right: ", ";\n  ", ";\n  @media (min-width: ", "px) {\n    ", ";\n  }\n\n  /* hide tooltip */\n  > {\n    &:first-child {\n      display: none;\n    }\n  }\n  /* dispaly tooltip */\n  &:hover {\n    > {\n      &:first-child {\n        display: block;\n      }\n    }\n  }\n"])), function (props) { return (props.disabled ? 'default' : 'pointer'); }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.md; }, function (props) { var _a, _b; return "1px solid " + ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium); }, function (props) {
     var _a, _b;
     return props.active &&
         "\n    border-bottom: 3px solid " + ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.brandBlue) + "\n    ";
@@ -18,9 +18,9 @@ var BaseStepperItem = styled__default['default'].div(templateObject_1 || (templa
     return props.firstChild &&
         "border-left: 1px solid " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium);
 });
-var BaseStepperList = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  box-shadow: ", ";\n  background: ", ";\n"], ["\n  box-shadow: ", ";\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
-var MaxWidthContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  max-width: ", "px;\n  margin: 0 auto;\n\n  @media (max-width: ", "px) {\n    padding-right: ", "px;\n  }\n"], ["\n  display: flex;\n  max-width: ", "px;\n  margin: 0 auto;\n\n  @media (max-width: ", "px) {\n    padding-right: ", "px;\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
-var ButtonContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* margin-right: ", "px; */\n  margin-left: auto;\n  justify-content: flex-end;\n  min-width: 155px;\n"], ["\n  display: flex;\n  align-items: center;\n  /* margin-right: ", "px; */\n  margin-left: auto;\n  justify-content: flex-end;\n  min-width: 155px;\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.lg; });
+var BaseStepperList = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  box-shadow: ", ";\n  background: ", ";\n"], ["\n  box-shadow: ", ";\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
+var MaxWidthContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  max-width: ", "px;\n  margin: 0 auto;\n\n  @media (max-width: ", "px) {\n    padding-right: ", "px;\n  }\n"], ["\n  display: flex;\n  max-width: ", "px;\n  margin: 0 auto;\n\n  @media (max-width: ", "px) {\n    padding-right: ", "px;\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
+var ButtonContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  /* margin-right: ", "px; */\n  margin-left: auto;\n  justify-content: flex-end;\n  min-width: 155px;\n"], ["\n  display: flex;\n  align-items: center;\n  /* margin-right: ", "px; */\n  margin-left: auto;\n  justify-content: flex-end;\n  min-width: 155px;\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.lg; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
 exports.BaseStepperItem = BaseStepperItem;

package/build/cjs/components/src/components/Stepper/StepperList.js

@@ -14,10 +14,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function StepperList(_a) {
     var _b;
     var steps = _a.steps, current = _a.current, setCurrent = _a.setCurrent, _c = _a.maxWidth, maxWidth = _c === void 0 ? (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.pageContentMaxWidth : _c, children = _a.children;
-    return (React__default['default'].createElement(Stepper_styles.BaseStepperList, null,
-        React__default['default'].createElement(Stepper_styles.MaxWidthContainer, { maxWidth: maxWidth },
-            steps.map(function (step, i) { return (React__default['default'].createElement(StepperListItem.StepperListItem, { firstChild: i === 0, key: step.step, step: step.step, onClick: function () { return setCurrent(step); }, tooltip: step.tooltip, active: step.step === current, disabled: step.step > 0 && !steps[step.step - 1].complete, complete: step.complete }, step.text)); }),
-            React__default['default'].createElement(Stepper_styles.ButtonContainer, null, children))));
+    return (React__default["default"].createElement(Stepper_styles.BaseStepperList, null,
+        React__default["default"].createElement(Stepper_styles.MaxWidthContainer, { maxWidth: maxWidth },
+            steps.map(function (step, i) { return (React__default["default"].createElement(StepperListItem.StepperListItem, { firstChild: i === 0, key: step.step, step: step.step, onClick: function () { return setCurrent(step); }, tooltip: step.tooltip, active: step.step === current, disabled: step.step > 0 && !steps[step.step - 1].complete, complete: step.complete }, step.text)); }),
+            React__default["default"].createElement(Stepper_styles.ButtonContainer, null, children))));
 }
 
 exports.StepperList = StepperList;

package/build/cjs/components/src/components/Stepper/StepperListItem.js

@@ -18,10 +18,10 @@ function StepperListItem(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var active = _a.active, firstChild = _a.firstChild, step = _a.step, onClick = _a.onClick, disabled = _a.disabled, complete = _a.complete, tooltip = _a.tooltip, children = _a.children;
     var _l = React.useState(false), isHover = _l[0], setIsHover = _l[1];
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(Stepper_styles.BaseStepperItem, { active: active, onClick: disabled ? function () { } : onClick, disabled: disabled, firstChild: firstChild, onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } },
-            React__default['default'].createElement(ToolTip.ToolTip, { align: step === 0 ? 'left' : 'center', width: step === 0 ? '190px' : '222px' }, tooltip),
-            React__default['default'].createElement(Badge.Badge, { width: '30px', height: '30px', background: isHover
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Stepper_styles.BaseStepperItem, { active: active, onClick: disabled ? function () { } : onClick, disabled: disabled, firstChild: firstChild, onMouseEnter: function () { return setIsHover(true); }, onMouseLeave: function () { return setIsHover(false); } },
+            React__default["default"].createElement(ToolTip.ToolTip, { align: step === 0 ? 'left' : 'center', width: step === 0 ? '190px' : '222px' }, tooltip),
+            React__default["default"].createElement(Badge.Badge, { width: '30px', height: '30px', background: isHover
                     ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white
                     : complete
                         ? (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white
@@ -33,8 +33,8 @@ function StepperListItem(_a) {
                         ? (_g = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _g === void 0 ? void 0 : _g.white
                         : (_h = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _h === void 0 ? void 0 : _h.black, borderColor: designTokens.theme && (designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) && (isHover || active)
                     ? (_j = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _j === void 0 ? void 0 : _j.brandBlue
-                    : undefined }, complete ? (React__default['default'].createElement(Icon.Icons.CheckMark, { fillType: Icon.FillType.STROKE, color: (_k = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _k === void 0 ? void 0 : _k.alertGreen, width: 18 })) : (Number(step) + 1)),
-            React__default['default'].createElement(typography.BodyText, null, children))));
+                    : undefined }, complete ? (React__default["default"].createElement(Icon.Icons.CheckMark, { fillType: Icon.FillType.STROKE, color: (_k = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _k === void 0 ? void 0 : _k.alertGreen, width: 18 })) : (Number(step) + 1)),
+            React__default["default"].createElement(typography.BodyText, null, children))));
 }
 
 exports.StepperListItem = StepperListItem;

package/build/cjs/components/src/components/StepperMobile/StepperMobile.js

@@ -17,18 +17,18 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function StepperMobile(_a) {
     var _b, _c;
     var steps = _a.steps, current = _a.current, setCurrent = _a.setCurrent, setPrevious = _a.setPrevious, buttonText = _a.buttonText;
-    return (React__default['default'].createElement(StepperMobile_styles.MobileStepperContainer, null,
-        React__default['default'].createElement(StepperMobile_styles.Leftside, null,
-            current > 0 && (React__default['default'].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: setPrevious, width: 36, height: 36 },
-                React__default['default'].createElement(Icon.Icons.ChevronLeft, null))),
-            React__default['default'].createElement("div", null,
-                React__default['default'].createElement(typography.BodyText, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.dark, size: typography.TextTypes.TextSize.SMALL },
+    return (React__default["default"].createElement(StepperMobile_styles.MobileStepperContainer, null,
+        React__default["default"].createElement(StepperMobile_styles.Leftside, null,
+            current > 0 && (React__default["default"].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: setPrevious, width: 36, height: 36 },
+                React__default["default"].createElement(Icon.Icons.ChevronLeft, null))),
+            React__default["default"].createElement("div", null,
+                React__default["default"].createElement(typography.BodyText, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.dark, size: typography.TextTypes.TextSize.SMALL },
                     "Steg ",
                     current + 1,
                     "/",
                     steps.length),
-                React__default['default'].createElement(typography.H3, null, steps[current].text))),
-        current !== steps.length - 1 && (React__default['default'].createElement(Button.Button, { color: 'secondary', icon: React__default['default'].createElement(Icon.Icons.ChevronRight, { color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white }), flexReverse: true, isDisabled: !steps[current].complete, onClick: setCurrent, size: 'medium' }, buttonText))));
+                React__default["default"].createElement(typography.H3, null, steps[current].text))),
+        current !== steps.length - 1 && (React__default["default"].createElement(Button.Button, { color: 'secondary', icon: React__default["default"].createElement(Icon.Icons.ChevronRight, { color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white }), flexReverse: true, isDisabled: !steps[current].complete, onClick: setCurrent, size: 'medium' }, buttonText))));
 }
 
 exports.StepperMobile = StepperMobile;

package/build/cjs/components/src/components/StepperMobile/StepperMobile.styles.js

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var MobileStepperContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", ";\n  background: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: ", ";\n"], ["\n  padding: ", ";\n  background: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: ", ";\n"])), function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md) + "px"; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; });
-var Leftside = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var MobileStepperContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", ";\n  background: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: ", ";\n"], ["\n  padding: ", ";\n  background: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  box-shadow: ", ";\n"])), function (props) { var _a, _b; return ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm) + "px " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md) + "px"; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.stepperShadow; });
+var Leftside = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n"], ["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
 var templateObject_1, templateObject_2;
 
 exports.Leftside = Leftside;