@citygross/components 0.7.76 → 0.7.78

package/build/@types/components/Timeline/Timeline.d.ts

@@ -5,11 +5,10 @@ export declare type TTimelineItem = {
     tiernaryText?: string;
 };
 export declare type TTimeline = {
-    background?: string;
     items: TTimelineItem[];
     title?: string;
     mobileTitle?: string;
-    current: TTimelineItem;
+    current: number;
     dotColor?: string;
     dotActiveColor?: string;
     dotShadow?: string;
@@ -18,4 +17,4 @@ export declare type TTimeline = {
     completedColor?: string;
     color?: string;
 };
-export declare function Timeline({ background, items, title, mobileTitle, current, dotColor, dotActiveColor, dotShadow, borderStyle, borderColor, color, completedColor }: TTimeline): JSX.Element;
+export declare function Timeline({ items, title, mobileTitle, current, dotColor, dotActiveColor, dotShadow, borderStyle, borderColor, color, completedColor }: TTimeline): JSX.Element;

package/build/@types/components/Timeline/Timeline.stories.d.ts

@@ -5,29 +5,21 @@ declare const _default: {
     title: string;
     args: {
         items: TTimelineItem[];
-        background: string | undefined;
     };
     argTypes: {
         current: {
             defaultValue: number;
             options: number[];
             mapping: {
-                0: TTimelineItem;
-                1: TTimelineItem;
-                2: TTimelineItem;
-                3: TTimelineItem;
+                0: number;
+                1: number;
+                2: number;
+                3: number;
             };
             control: {
                 type: string;
             };
         };
-        background: {
-            options: string[];
-            mapping: import("@citygross/design-tokens").Palette | never[];
-            control: {
-                type: string;
-            };
-        };
         dotColor: {
             options: string[];
             mapping: import("@citygross/design-tokens").Palette | never[];

package/build/@types/index.d.ts

@@ -58,3 +58,4 @@ export * from './containers/PageContainer/PageContainer';
 export * from './containers/TwoColumnsContainer/TwoColumnsPageContainer';
 export * from './components/UnorderedList';
 export * from './components/WarningLabel/WarningLabel';
+export * from './components/MobileTable';

package/build/cjs/_virtual/{index.js_commonjs-exports → index.js}

@@ -5,4 +5,4 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var build = {};
 
 exports.__exports = build;
-//# sourceMappingURL=index.js_commonjs-exports.map
+//# sourceMappingURL=index.js.map

package/build/cjs/_virtual/index.js.map

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

package/build/cjs/_virtual/{index2.js_commonjs-exports → index2.js}

@@ -5,4 +5,4 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var build = {};
 
 exports.__exports = build;
-//# sourceMappingURL=index2.js_commonjs-exports.map
+//# sourceMappingURL=index2.js.map

package/build/cjs/_virtual/index2.js.map

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

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

@@ -72,6 +72,7 @@ require('../../../../utils/build/index.js');
 require('../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js');
 require('../UnorderedList/UnorderedList.styles.js');
 require('../WarningLabel/WarningLabel.styles.js');
+require('../MobileTable/MobileTable.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -80,25 +81,25 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function AddressBlock(_a) {
     var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions, xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;
     var spacingsDefined = (xsSpacing || lgSpacing);
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(AddressBlock_styles.AddressOption, null,
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(AddressBlock_styles.AddressOption, null,
             icon && icon,
-            deliverOption && React__default['default'].createElement(typography.H3, null, deliverOption)),
-        spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
-        storeName && React__default['default'].createElement(typography.H3, null, storeName),
-        customerName && React__default['default'].createElement(typography.BodyText, null, customerName),
-        spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
-        React__default['default'].createElement(typography.BodyText, null, street),
-        spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
-        React__default['default'].createElement(typography.BodyText, null,
+            deliverOption && React__default["default"].createElement(typography.H3, null, deliverOption)),
+        spacingsDefined && React__default["default"].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
+        storeName && React__default["default"].createElement(typography.H3, null, storeName),
+        customerName && React__default["default"].createElement(typography.BodyText, null, customerName),
+        spacingsDefined && React__default["default"].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
+        React__default["default"].createElement(typography.BodyText, null, street),
+        spacingsDefined && React__default["default"].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
+        React__default["default"].createElement(typography.BodyText, null,
             zipCode,
             " ",
             city),
-        spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
-        doorCode && (React__default['default'].createElement(typography.BodyText, null, doorCode)),
-        spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
-        floor && (React__default['default'].createElement(typography.BodyText, null, floor)),
-        spacingsDefined && React__default['default'].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
+        spacingsDefined && React__default["default"].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
+        doorCode && (React__default["default"].createElement(typography.BodyText, null, doorCode)),
+        spacingsDefined && React__default["default"].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
+        floor && (React__default["default"].createElement(typography.BodyText, null, floor)),
+        spacingsDefined && React__default["default"].createElement(Spacer.Spacer, { xsSpacing: xsSpacing, lgSpacing: lgSpacing }),
         deliveryInstructions && (deliveryInstructions)));
 }
 

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

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

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var AddressOption = styled__default['default'].div(templateObject_1 || (templateObject_1 = _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.xs; });
+var AddressOption = styled__default["default"].div(templateObject_1 || (templateObject_1 = _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.xs; });
 var templateObject_1;
 
 exports.AddressOption = AddressOption;

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

@@ -14,10 +14,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function AlertBox(_a) {
     var _b, _c;
     var _d = _a.background, background = _d === void 0 ? (_b = index.theme.palette) === null || _b === void 0 ? void 0 : _b.blueLight : _d, _e = _a.borderColor, borderColor = _e === void 0 ? (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e, icon = _a.icon, _f = _a.iconMinWidth, iconMinWidth = _f === void 0 ? 24 : _f, withArrow = _a.withArrow, arrowSpacing = _a.arrowSpacing, arrowPlacement = _a.arrowPlacement, children = _a.children;
-    return (React__default['default'].createElement("div", null,
-        withArrow && (React__default['default'].createElement(BoxArrow, { arrowPlacement: arrowPlacement, arrowSpacing: arrowSpacing, background: background })),
-        React__default['default'].createElement(AlertBox_styles.AlertBox, { background: background, borderColor: borderColor },
-            icon && (React__default['default'].createElement(AlertBox_styles.IconContainer, { minWidth: iconMinWidth }, icon)),
+    return (React__default["default"].createElement("div", null,
+        withArrow && (React__default["default"].createElement(BoxArrow, { arrowPlacement: arrowPlacement, arrowSpacing: arrowSpacing, background: background })),
+        React__default["default"].createElement(AlertBox_styles.AlertBox, { background: background, borderColor: borderColor },
+            icon && (React__default["default"].createElement(AlertBox_styles.IconContainer, { minWidth: iconMinWidth }, icon)),
             children)));
 }
 

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

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var AlertBox = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"], ["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"])), function (props) { var _a; return props.background || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight); }, function (props) { var _a; return ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockBorderWidth) + "px solid " + props.borderColor; }, function (props) { var _a, _b; return ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall) + "px 0 0 " + ((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall) + "px"; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var IconContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  min-width: ", "px;\n  display: flex;\n  align-items: center;\n"], ["\n  min-width: ", "px;\n  display: flex;\n  align-items: center;\n"])), function (props) { var _a; return props.minWidth || ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md); });
+var AlertBox = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"], ["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"])), function (props) { var _a; return props.background || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight); }, function (props) { var _a; return ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockBorderWidth) + "px solid " + props.borderColor; }, function (props) { var _a, _b; return ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall) + "px 0 0 " + ((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall) + "px"; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var IconContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  min-width: ", "px;\n  display: flex;\n  align-items: center;\n"], ["\n  min-width: ", "px;\n  display: flex;\n  align-items: center;\n"])), function (props) { var _a; return props.minWidth || ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md); });
 var templateObject_1, templateObject_2;
 
 exports.AlertBox = AlertBox;

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

@@ -12,11 +12,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function BackButton(_a) {
-    var label = _a.label, color = _a.color, _b = _a.icon, icon = _b === void 0 ? React__default['default'].createElement(Icon.Icons.ChevronLeft, null) : _b, onClick = _a.onClick, children = _a.children;
-    return (React__default['default'].createElement(BackButton_styles.BackButtonFlex, { onClick: onClick },
+    var label = _a.label, color = _a.color, _b = _a.icon, icon = _b === void 0 ? React__default["default"].createElement(Icon.Icons.ChevronLeft, null) : _b, onClick = _a.onClick, children = _a.children;
+    return (React__default["default"].createElement(BackButton_styles.BackButtonFlex, { onClick: onClick },
         icon,
-        React__default['default'].createElement(BackButton_styles.BackText, null,
-            label && React__default['default'].createElement(typography.BodyText, { color: color }, label),
+        React__default["default"].createElement(BackButton_styles.BackText, null,
+            label && React__default["default"].createElement(typography.BodyText, { color: color }, label),
             children)));
 }
 

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

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BackButtonFlex = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var BackText = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  margin-top: 2px;\n"], ["\n  margin-top: 2px;\n"])));
+var BackButtonFlex = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var BackText = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  margin-top: 2px;\n"], ["\n  margin-top: 2px;\n"])));
 var templateObject_1, templateObject_2;
 
 exports.BackButtonFlex = BackButtonFlex;

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

@@ -11,11 +11,11 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function BackgroundImage(_a) {
     var image = _a.image, height = _a.height, width = _a.width, onClick = _a.onClick, _b = _a.showBackdrop, showBackdrop = _b === void 0 ? true : _b, children = _a.children;
-    return (React__default['default'].createElement(BackgroundImage_styles.BackgroundContainer, { height: height, width: width, onClick: onClick },
-        React__default['default'].createElement(BackgroundImage_styles.BackgroundImgContainer, null,
-            React__default['default'].createElement(BackgroundImage_styles.NextImagecontainer, null, image),
-            showBackdrop && React__default['default'].createElement(BackgroundImage_styles.BackgroundGradient, null)),
-        React__default['default'].createElement(BackgroundImage_styles.ChildrenWrapper, null, children)));
+    return (React__default["default"].createElement(BackgroundImage_styles.BackgroundContainer, { height: height, width: width, onClick: onClick },
+        React__default["default"].createElement(BackgroundImage_styles.BackgroundImgContainer, null,
+            React__default["default"].createElement(BackgroundImage_styles.NextImagecontainer, null, image),
+            showBackdrop && React__default["default"].createElement(BackgroundImage_styles.BackgroundGradient, null)),
+        React__default["default"].createElement(BackgroundImage_styles.ChildrenWrapper, null, children)));
 }
 
 exports.BackgroundImage = BackgroundImage;

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

@@ -9,15 +9,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BackgroundContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  ", "\n"], ["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  ", "\n"])), function (props) { return (props.height ? props.height + "px" : 'auto'); }, function (props) { return (props.height ? props.width + "px" : 'auto'); }, 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.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow; }, function (props) {
+var BackgroundContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  ", "\n"], ["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  box-shadow: ", ";\n  display: flex;\n  align-items: center;\n  ", "\n"])), function (props) { return (props.height ? props.height + "px" : 'auto'); }, function (props) { return (props.height ? props.width + "px" : 'auto'); }, 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.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow; }, function (props) {
     var _a;
     return props.onClick &&
         " \n    cursor: pointer;\n    &:hover {\n        box-shadow: " + ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover) + ";\n        }";
 });
-var BackgroundImgContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"])));
-var BackgroundGradient = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n  z-index: 1;\n  position: absolute;\n  top: 0;\n"], ["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n  z-index: 1;\n  position: absolute;\n  top: 0;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.BackgroundOverlayOpacity; });
-var ChildrenWrapper = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n"])));
-var NextImagecontainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"])));
+var BackgroundImgContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: absolute;\n"])));
+var BackgroundGradient = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n  z-index: 1;\n  position: absolute;\n  top: 0;\n"], ["\n  width: 100%;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n  z-index: 1;\n  position: absolute;\n  top: 0;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.BackgroundOverlayOpacity; });
+var ChildrenWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n"], ["\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n"])));
+var NextImagecontainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: relative;\n  width: 100%;\n  height: 100%;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.BackgroundContainer = BackgroundContainer;

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

@@ -11,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Badge(_a) {
     var _b = _a.color, color = _b === void 0 ? 'black' : _b, _c = _a.background, background = _c === void 0 ? 'white' : _c, _d = _a.height, height = _d === void 0 ? '30px' : _d, _e = _a.width, width = _e === void 0 ? '30px' : _e, borderColor = _a.borderColor, children = _a.children;
-    return (React__default['default'].createElement(Badge_styles.BaseBadge, { color: color || 'black', background: background || 'white', height: height, width: width, borderColor: borderColor || 'none' }, children));
+    return (React__default["default"].createElement(Badge_styles.BaseBadge, { color: color || 'black', background: background || 'white', height: height, width: width, borderColor: borderColor || 'none' }, children));
 }
 
 exports.Badge = Badge;

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseBadge = styled__default['default'].span(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: ", ";\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  background-color: ", ";\n  color: ", ";\n  font-size: ", "px;\n  padding-top: 2px;\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: ", ";\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  background-color: ", ";\n  color: ", ";\n  font-size: ", "px;\n  padding-top: 2px;\n"])), function (props) {
+var BaseBadge = styled__default["default"].span(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: ", ";\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  background-color: ", ";\n  color: ", ";\n  font-size: ", "px;\n  padding-top: 2px;\n"], ["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: ", ";\n  width: ", ";\n  min-width: ", ";\n  height: ", ";\n  background-color: ", ";\n  color: ", ";\n  font-size: ", "px;\n  padding-top: 2px;\n"])), function (props) {
     var _a, _b, _c, _d;
     return props.borderColor && props.borderColor !== 'none'
         ? "1px solid " + props.borderColor

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

@@ -13,9 +13,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Box(_a) {
     var background = _a.background, _b = _a.rounded, rounded = _b === void 0 ? true : _b, padding = _a.padding, arrowSpacing = _a.arrowSpacing, arrowPlacement = _a.arrowPlacement, withArrow = _a.withArrow, children = _a.children, props = _tslib.__rest(_a, ["background", "rounded", "padding", "arrowSpacing", "arrowPlacement", "withArrow", "children"]);
-    return (React__default['default'].createElement("div", _tslib.__assign({}, props),
-        withArrow && (React__default['default'].createElement(BoxArrow, { arrowPlacement: arrowPlacement, arrowSpacing: arrowSpacing, background: background })),
-        React__default['default'].createElement(Box_styles.BoxContainer, { background: background || 'transparent', rounded: rounded, padding: padding }, children)));
+    return (React__default["default"].createElement("div", _tslib.__assign({}, props),
+        withArrow && (React__default["default"].createElement(BoxArrow, { arrowPlacement: arrowPlacement, arrowSpacing: arrowSpacing, background: background })),
+        React__default["default"].createElement(Box_styles.BoxContainer, { background: background || 'transparent', rounded: rounded, padding: padding }, children)));
 }
 
 exports.Box = Box;

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\n"], ["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\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.md; }, function (props) { return props.background; }, function (props) { return (props.rounded ? '5px' : '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.lg; }, function (props) { var _a, _b; return props.padding ? props.padding : (_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; }, function (props) { return props.padding && "padding: " + props.padding + "px"; });
+var BoxContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\n"], ["\n  padding: ", "px;\n  background: ", ";\n  border-radius: ", ";\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n\n  ", ";\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.md; }, function (props) { return props.background; }, function (props) { return (props.rounded ? '5px' : '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.lg; }, function (props) { var _a, _b; return props.padding ? props.padding : (_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; }, function (props) { return props.padding && "padding: " + props.padding + "px"; });
 var templateObject_1;
 
 exports.BoxContainer = BoxContainer;

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

@@ -10,8 +10,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var BoxArrow = function (_a) {
     var arrowPlacement = _a.arrowPlacement, arrowSpacing = _a.arrowSpacing, background = _a.background;
-    return (React__default['default'].createElement(BoxArrow_styles.BoxArrowContainer, { margin: arrowSpacing, placement: arrowPlacement },
-        React__default['default'].createElement(Icon.Icons.BoxArrow, { width: 17, height: 8, color: background })));
+    return (React__default["default"].createElement(BoxArrow_styles.BoxArrowContainer, { margin: arrowSpacing, placement: arrowPlacement },
+        React__default["default"].createElement(Icon.Icons.BoxArrow, { width: 17, height: 8, color: background })));
 };
 
 module.exports = BoxArrow;

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BoxArrowContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  margin-bottom: -1px;\n  justify-content: ", ";\n  ", "\n"], ["\n  display: flex;\n  margin-bottom: -1px;\n  justify-content: ", ";\n  ", "\n"])), function (props) {
+var BoxArrowContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  margin-bottom: -1px;\n  justify-content: ", ";\n  ", "\n"], ["\n  display: flex;\n  margin-bottom: -1px;\n  justify-content: ", ";\n  ", "\n"])), function (props) {
     return props.placement === 'right' ? 'flex-end' : 'flex-start';
 }, function (props) {
     return props.placement && props.placement === 'right'

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

@@ -27,18 +27,18 @@ exports.ButtonColor = void 0;
 function Button(_a) {
     var _b;
     var _c = _a.center, center = _c === void 0 ? true : _c, _d = _a.color, color = _d === void 0 ? 'primary' : _d, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, selected = _a.selected, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 'large' : _e, xsSize = _a.xsSize, children = _a.children;
-    return (React__default['default'].createElement(Button_styles.BasePrimaryButton, { center: center, color: designTokens.theme && designTokens.theme.palette
+    return (React__default["default"].createElement(Button_styles.BasePrimaryButton, { center: center, color: designTokens.theme && designTokens.theme.palette
             ? selected
                 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white
                 : designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color]
             : 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, selected: selected, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); } },
-        loading && (React__default['default'].createElement(Button_styles.Loading, null,
-            React__default['default'].createElement(Button_styles.LoadingContainer, { xsSize: xsSize, size: size },
-                React__default['default'].createElement(Button_styles.LoadingSpinner, null)))),
-        icon ? (React__default['default'].createElement("div", null,
+        loading && (React__default["default"].createElement(Button_styles.Loading, null,
+            React__default["default"].createElement(Button_styles.LoadingContainer, { xsSize: xsSize, size: size },
+                React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
+        icon ? (React__default["default"].createElement("div", null,
             icon,
             children)) : (children),
-        React__default['default'].createElement("span", { className: "ripple" })));
+        React__default["default"].createElement("span", { className: "ripple" })));
 }
 
 exports.Button = Button;

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

@@ -62,7 +62,7 @@ var SpinnerSize = function (size) {
             return '26px';
     }
 };
-var BaseButton = styled__default['default'].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  /* reset */\n  outline: none;\n  border: none;\n\n  backface-visibility: hidden;\n  cursor: pointer;\n  border-radius: ", "px;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  -webkit-font-smoothing: antialiased;\n  user-select: ", ";\n\n  position: relative;\n\n  /* typography */\n\n  font-family: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  white-space: ", ";\n\n  /* colors */\n\n  background: ", ";\n  color: ", ";\n\n  /* Width & Height */\n\n  width: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  /* Hover Effect */\n\n  &:hover {\n    ::after {\n      opacity: 1;\n    }\n  }\n  &:active {\n    ::before {\n      opacity: 1;\n    }\n    ::after {\n      opacity: 0;\n    }\n  }\n  /* Media Queries */\n\n  @media (max-width: ", "px) {\n    align-self: ", ";\n  }\n"], ["\n  /* reset */\n  outline: none;\n  border: none;\n\n  backface-visibility: hidden;\n  cursor: pointer;\n  border-radius: ", "px;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  -webkit-font-smoothing: antialiased;\n  user-select: ", ";\n\n  position: relative;\n\n  /* typography */\n\n  font-family: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  white-space: ", ";\n\n  /* colors */\n\n  background: ", ";\n  color: ", ";\n\n  /* Width & Height */\n\n  width: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  /* Hover Effect */\n\n  &:hover {\n    ::after {\n      opacity: 1;\n    }\n  }\n  &:active {\n    ::before {\n      opacity: 1;\n    }\n    ::after {\n      opacity: 0;\n    }\n  }\n  /* Media Queries */\n\n  @media (max-width: ", "px) {\n    align-self: ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.isDisabled && 'none'; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.weight.medium; }, function (props) { return (props.center ? 'center' : 'initial'); }, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) { var _a, _b; return props.isDisabled ? (_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 : props.color; }, function (props) {
+var BaseButton = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  /* reset */\n  outline: none;\n  border: none;\n\n  backface-visibility: hidden;\n  cursor: pointer;\n  border-radius: ", "px;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  -webkit-font-smoothing: antialiased;\n  user-select: ", ";\n\n  position: relative;\n\n  /* typography */\n\n  font-family: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  white-space: ", ";\n\n  /* colors */\n\n  background: ", ";\n  color: ", ";\n\n  /* Width & Height */\n\n  width: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  /* Hover Effect */\n\n  &:hover {\n    ::after {\n      opacity: 1;\n    }\n  }\n  &:active {\n    ::before {\n      opacity: 1;\n    }\n    ::after {\n      opacity: 0;\n    }\n  }\n  /* Media Queries */\n\n  @media (max-width: ", "px) {\n    align-self: ", ";\n  }\n"], ["\n  /* reset */\n  outline: none;\n  border: none;\n\n  backface-visibility: hidden;\n  cursor: pointer;\n  border-radius: ", "px;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  -webkit-font-smoothing: antialiased;\n  user-select: ", ";\n\n  position: relative;\n\n  /* typography */\n\n  font-family: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  white-space: ", ";\n\n  /* colors */\n\n  background: ", ";\n  color: ", ";\n\n  /* Width & Height */\n\n  width: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  /* Hover Effect */\n\n  &:hover {\n    ::after {\n      opacity: 1;\n    }\n  }\n  &:active {\n    ::before {\n      opacity: 1;\n    }\n    ::after {\n      opacity: 0;\n    }\n  }\n  /* Media Queries */\n\n  @media (max-width: ", "px) {\n    align-self: ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.isDisabled && 'none'; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.weight.medium; }, function (props) { return (props.center ? 'center' : 'initial'); }, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) { var _a, _b; return props.isDisabled ? (_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 : props.color; }, function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     return props.color === ((_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.secondary) ||
         props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.darkest) ||
@@ -70,7 +70,7 @@ var BaseButton = styled__default['default'].button(templateObject_1 || (template
         ? (_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.white
         : (_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.darkest;
 }, function (props) { return (props.fullWidth ? '100%' : 'auto'); }, 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.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, 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.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonActive; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, 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.center ? 'center' : 'initial'); });
-var BasePrimaryButton = styled__default['default'](BaseButton)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n\n  /* children */\n\n  > div {\n    display: flex;\n    flex-direction: ", ";\n    width: 100%;\n    gap: ", ";\n    align-items: center;\n    justify-content: center;\n    flex-wrap: ", ";\n  }\n"], ["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n\n  /* children */\n\n  > div {\n    display: flex;\n    flex-direction: ", ";\n    width: 100%;\n    gap: ", ";\n    align-items: center;\n    justify-content: center;\n    flex-wrap: ", ";\n  }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) {
+var BasePrimaryButton = styled__default["default"](BaseButton)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n\n  /* children */\n\n  > div {\n    display: flex;\n    flex-direction: ", ";\n    width: 100%;\n    gap: ", ";\n    align-items: center;\n    justify-content: center;\n    flex-wrap: ", ";\n  }\n"], ["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n\n  /* children */\n\n  > div {\n    display: flex;\n    flex-direction: ", ";\n    width: 100%;\n    gap: ", ";\n    align-items: center;\n    justify-content: center;\n    flex-wrap: ", ";\n  }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) {
     var _a, _b;
     return props.size === 'small'
         ? ((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2) + "px"
@@ -105,10 +105,10 @@ var BasePrimaryButton = styled__default['default'](BaseButton)(templateObject_2
                 ? "inset 0px 0px 0px 1px " + ((_l = props.theme.palette) === null || _l === void 0 ? void 0 : _l.medium)
                 : 'none';
 }, function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) { return (props.size === 'small' ? '8px' : '12px'); }, function (props) { return (props.noWrap ? 'nowrap' : 'wrap'); });
-var Loading = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var LoadingContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return SpinnerSize(props.size); }, function (props) { return SpinnerSize(props.size); });
-var LoadingSpinner = styled__default['default'](Spinner.Spinner)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
-var BaseIconButton = styled__default['default'](BaseButton)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"], ["\n  padding: ", "px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { return props.height || 32; }, function (props) { return props.width || 32; }, function (props) { return props.width || 32; }, function (props) {
+var Loading = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+var LoadingContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return SpinnerSize(props.size); }, function (props) { return SpinnerSize(props.size); });
+var LoadingSpinner = styled__default["default"](Spinner.Spinner)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+var BaseIconButton = styled__default["default"](BaseButton)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"], ["\n  padding: ", "px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { return props.height || 32; }, function (props) { return props.width || 32; }, function (props) { return props.width || 32; }, function (props) {
     var _a;
     return props.shadow && props.border
         ? "box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15), inset 0px 0px 0px 1px " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium)
@@ -118,7 +118,7 @@ var BaseIconButton = styled__default['default'](BaseButton)(templateObject_6 ||
                 ? "box-shadow: inset 0px 0px 0px 1px " + props.border
                 : '';
 }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.iconButtonHover; });
-var BasePaginationButton = styled__default['default'](BaseButton)(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) { return props.height || 36; }, function (props) { return props.width || 36; }, function (props) { return props.width || 36; }, function (props) {
+var BasePaginationButton = styled__default["default"](BaseButton)(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) { return props.height || 36; }, function (props) { return props.width || 36; }, function (props) { return props.width || 36; }, function (props) {
     var _a, _b, _c;
     return props.color !== ((_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)
         ? 'box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15)'

package/build/cjs/components/src/components/Button/IconButton.js

@@ -12,12 +12,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function IconButton(_a) {
     var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width;
-    return (React__default['default'].createElement(Button_styles.BaseIconButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow },
-        loading && (React__default['default'].createElement(Button_styles.Loading, null,
-            React__default['default'].createElement(Button_styles.LoadingContainer, null,
-                React__default['default'].createElement(Button_styles.LoadingSpinner, null)))),
+    return (React__default["default"].createElement(Button_styles.BaseIconButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow },
+        loading && (React__default["default"].createElement(Button_styles.Loading, null,
+            React__default["default"].createElement(Button_styles.LoadingContainer, null,
+                React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
         icon,
-        React__default['default'].createElement("span", { className: "ripple" })));
+        React__default["default"].createElement("span", { className: "ripple" })));
 }
 
 exports.IconButton = IconButton;

package/build/cjs/components/src/components/Button/PaginationButton.js

@@ -12,12 +12,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function PaginationButton(_a) {
     var _b = _a.color, color = _b === void 0 ? 'primary' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, width = _a.width, children = _a.children;
-    return (React__default['default'].createElement(Button_styles.BasePaginationButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'white', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width },
-        loading && (React__default['default'].createElement(Button_styles.Loading, null,
-            React__default['default'].createElement(Button_styles.LoadingContainer, null,
-                React__default['default'].createElement(Button_styles.LoadingSpinner, null)))),
+    return (React__default["default"].createElement(Button_styles.BasePaginationButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'white', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width },
+        loading && (React__default["default"].createElement(Button_styles.Loading, null,
+            React__default["default"].createElement(Button_styles.LoadingContainer, null,
+                React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
         icon || children,
-        React__default['default'].createElement("span", { className: "ripple" })));
+        React__default["default"].createElement("span", { className: "ripple" })));
 }
 
 exports.PaginationButton = PaginationButton;

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

@@ -15,16 +15,16 @@ var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
 
 function CartItemSummary(_a) {
     var product = _a.product, withParenthesis = _a.withParenthesis, _b = _a.unit, unit = _b === void 0 ? "st" : _b;
-    return (React__default['default'].createElement(CartItemSummary_styles.CartItemSummaryWrapper, null,
+    return (React__default["default"].createElement(CartItemSummary_styles.CartItemSummaryWrapper, null,
         product &&
             (product.amount === 0 || product.amount) &&
             (product === null || product === void 0 ? void 0 : product.cancelledQuantity) !== 0 &&
-            (product === null || product === void 0 ? void 0 : product.cancelledQuantity) && (React__default['default'].createElement(CartItemSummary_styles.CancelledWrapper, null,
-            React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, lineThrough: true }, (product === null || product === void 0 ? void 0 : product.cancelledQuantity) ? (product.cancelledQuantity + " st") : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))),
-            React__default['default'].createElement(CartItemSummary_styles.AmountText, { lineThrough: true, fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (utils.formatPrice(product.cancelledAmount, withParenthesis)) : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))))),
-        React__default['default'].createElement(CartItemSummary_styles.ItemInformationContainer, null,
-            React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, (product === null || product === void 0 ? void 0 : product.quantity) || (product === null || product === void 0 ? void 0 : product.quantity) === 0 ? (product.quantity + " " + unit) : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))),
-            React__default['default'].createElement(CartItemSummary_styles.AmountText, { fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (utils.formatPrice(product.amount, withParenthesis)) : (React__default['default'].createElement(Skeleton__default['default'], { width: 100 }))))));
+            (product === null || product === void 0 ? void 0 : product.cancelledQuantity) && (React__default["default"].createElement(CartItemSummary_styles.CancelledWrapper, null,
+            React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, lineThrough: true }, (product === null || product === void 0 ? void 0 : product.cancelledQuantity) ? (product.cancelledQuantity + " st") : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))),
+            React__default["default"].createElement(CartItemSummary_styles.AmountText, { lineThrough: true, fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (utils.formatPrice(product.cancelledAmount, withParenthesis)) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))))),
+        React__default["default"].createElement(CartItemSummary_styles.ItemInformationContainer, null,
+            React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, (product === null || product === void 0 ? void 0 : product.quantity) || (product === null || product === void 0 ? void 0 : product.quantity) === 0 ? (product.quantity + " " + unit) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))),
+            React__default["default"].createElement(CartItemSummary_styles.AmountText, { fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (utils.formatPrice(product.amount, withParenthesis)) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))))));
 }
 
 exports.CartItemSummary = CartItemSummary;

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

@@ -10,10 +10,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var CartItemSummaryWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
-var CancelledWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
-var ItemInformationContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
-var AmountText = styled__default['default'](typography.H3)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  white-space: nowrap;\n"], ["\n  white-space: nowrap;\n"])));
+var CartItemSummaryWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
+var CancelledWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var ItemInformationContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var AmountText = styled__default["default"](typography.H3)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  white-space: nowrap;\n"], ["\n  white-space: nowrap;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
 exports.AmountText = AmountText;