@citygross/components 0.7.77 → 0.7.79

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

@@ -16,13 +16,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function InfoWithButtonBlock(_a) {
     var _b;
     var _c = _a.background, background = _c === void 0 ? (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.blueLight : _c, image = _a.image, buttonText = _a.buttonText, buttonColor = _a.buttonColor, imageHeight = _a.imageHeight, imageWidth = _a.imageWidth, handleClick = _a.handleClick, children = _a.children;
-    return (React__default['default'].createElement(InfoTextBlock_styles.InfoBlock, { background: background, hasImage: Boolean(image) },
-        React__default['default'].createElement(InfoTextBlock_styles.InfoTextWrapper, null,
-            image && (React__default['default'].createElement(InfoTextBlock_styles.ImageContainer, { width: imageWidth, height: imageHeight },
-                React__default['default'].createElement(InfoTextBlock_styles.Image, { src: (image === null || image === void 0 ? void 0 : image.url) || fallback_grocery, alt: image === null || image === void 0 ? void 0 : image.altText }))),
+    return (React__default["default"].createElement(InfoTextBlock_styles.InfoBlock, { background: background, hasImage: Boolean(image) },
+        React__default["default"].createElement(InfoTextBlock_styles.InfoTextWrapper, null,
+            image && (React__default["default"].createElement(InfoTextBlock_styles.ImageContainer, { width: imageWidth, height: imageHeight },
+                React__default["default"].createElement(InfoTextBlock_styles.Image, { src: (image === null || image === void 0 ? void 0 : image.url) || fallback_grocery, alt: image === null || image === void 0 ? void 0 : image.altText }))),
             children),
-        buttonText && (React__default['default'].createElement(InfoTextBlock_styles.ButtonContainer, null,
-            React__default['default'].createElement(Button.Button, { color: buttonColor, fullWidth: true, onClick: handleClick }, buttonText)))));
+        buttonText && (React__default["default"].createElement(InfoTextBlock_styles.ButtonContainer, null,
+            React__default["default"].createElement(Button.Button, { color: buttonColor, fullWidth: true, onClick: handleClick }, buttonText)))));
 }
 
 exports.InfoWithButtonBlock = InfoWithButtonBlock;

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

@@ -9,16 +9,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var InfoBlock = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  gap: ", "px;\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  @media (min-width: ", "px) {\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: space-between;\n  } ;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  gap: ", "px;\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  @media (min-width: ", "px) {\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: space-between;\n  } ;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.background; }, function (props) {
+var InfoBlock = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  gap: ", "px;\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  @media (min-width: ", "px) {\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: space-between;\n  } ;\n"], ["\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  gap: ", "px;\n  position: relative;\n  background: ", ";\n  padding: ", ";\n  @media (min-width: ", "px) {\n    flex-wrap: nowrap;\n    align-items: center;\n    justify-content: space-between;\n  } ;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.background; }, function (props) {
     var _a, _b, _c;
     return props.hasImage
         ? ((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md) + "px"
         : ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.sm) + "px " + ((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.md) + "px";
 }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
-var ImageContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  max-width: ", "px;\n  height: ", ";\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  max-width: ", "px;\n  height: ", ";\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"])), function (props) { return (props.width ? props.width + "px" : '100%'); }, function (props) { var _a; return props.width || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidth); }, function (props) { return (props.height ? props.height + "px" : 'auto'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return props.width || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockImageMaxWidthDesktop); });
-var Image = styled__default['default'].img(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n"])));
-var InfoTextWrapper = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "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.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
-var ButtonContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: max-content;\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: max-content;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
+var ImageContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  max-width: ", "px;\n  height: ", ";\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  max-width: ", "px;\n  height: ", ";\n  @media (min-width: ", "px) {\n    max-width: ", "px;\n  }\n"])), function (props) { return (props.width ? props.width + "px" : '100%'); }, function (props) { var _a; return props.width || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidth); }, function (props) { return (props.height ? props.height + "px" : 'auto'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return props.width || ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockImageMaxWidthDesktop); });
+var Image = styled__default["default"].img(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n"])));
+var InfoTextWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "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.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var ButtonContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: max-content;\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  @media (min-width: ", "px) {\n    max-width: max-content;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.ButtonContainer = ButtonContainer;

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

@@ -11,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var LayoutBox = function (_a) {
     var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, showOverflow = _a.showOverflow, children = _a.children;
-    return (React__default['default'].createElement(LayoutBox_styles.LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff', showOverflow: showOverflow }, children));
+    return (React__default["default"].createElement(LayoutBox_styles.LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff', showOverflow: showOverflow }, children));
 };
 
 exports.LayoutBox = LayoutBox;

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var LayoutBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"], ["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) {
+var LayoutBoxContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"], ["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) {
     var _a, _b, _c, _d;
     return props.shadowInset
         ? (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.layoutShadowInset

package/build/cjs/components/src/components/Links/Link.js

@@ -23,9 +23,9 @@ exports.LinkColors = void 0;
 })(exports.LinkColors || (exports.LinkColors = {}));
 function Link(_a) {
     var _b = _a.center, center = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'link' : _c, isDisabled = _a.isDisabled, noWrap = _a.noWrap, onClick = _a.onClick, hrefPath = _a.hrefPath, icon = _a.icon, _d = _a.textDecoration, textDecoration = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? typography.TextTypes.TextSize.REGULAR : _e, children = _a.children;
-    return (React__default['default'].createElement(Link_styles.BaseLink, { center: center, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'black', href: hrefPath, isDisabled: isDisabled, textDecoration: textDecoration, noWrap: noWrap, onClick: onClick, size: size, icon: icon },
-        React__default['default'].createElement(typography.LinkText, { size: size }, children),
-        icon && React__default['default'].createElement(Link_styles.IconWrapper, null, icon)));
+    return (React__default["default"].createElement(Link_styles.BaseLink, { center: center, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'black', href: hrefPath, isDisabled: isDisabled, textDecoration: textDecoration, noWrap: noWrap, onClick: onClick, size: size, icon: icon },
+        React__default["default"].createElement(typography.LinkText, { size: size }, children),
+        icon && React__default["default"].createElement(Link_styles.IconWrapper, null, icon)));
 }
 
 exports.Link = Link;

package/build/cjs/components/src/components/Links/Link.styles.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseLink = styled__default['default'].a(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n  text-decoration: ", ";\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n  ", "\n"], ["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n  text-decoration: ", ";\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n  ", "\n"])), function (props) { return props.isDisabled && 'none'; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.textDecoration; }, function (props) { var _a; return props.isDisabled ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium : props.color; }, function (props) {
+var BaseLink = styled__default["default"].a(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n  text-decoration: ", ";\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n  ", "\n"], ["\n  user-select: ", ";\n  pointer-events: ", ";\n  cursor: pointer;\n  text-decoration: ", ";\n\n  /* typography */\n  color: ", ";\n  line-height: ", ";\n  white-space: ", ";\n  ", "\n"])), function (props) { return props.isDisabled && 'none'; }, function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.textDecoration; }, function (props) { var _a; return props.isDisabled ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium : props.color; }, function (props) {
     var _a, _b;
     return props.size === 'small'
         ? ((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2) + 'px'
@@ -18,7 +18,7 @@ var BaseLink = styled__default['default'].a(templateObject_1 || (templateObject_
     return props.icon &&
         "\n      display:flex;\n      align-items: center;\n    ";
 });
-var IconWrapper = styled__default['default'].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"])));
+var IconWrapper = styled__default["default"].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"], ["\n  display: flex;\n  flex: 1;\n  justify-content: flex-end;\n"])));
 var templateObject_1, templateObject_2;
 
 exports.BaseLink = BaseLink;

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

@@ -17,18 +17,18 @@ var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
 function ListItem(_a) {
     var _b;
     var item = _a.item, loading = _a.loading, isSmall = _a.isSmall, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, boldHeader = _a.boldHeader, smallSkeleton = _a.smallSkeleton, children = _a.children;
-    return (React__default['default'].createElement(ListItem_styles.ListItemContainer, null,
-        React__default['default'].createElement(ListItem_styles.ListLeft, null,
-            React__default['default'].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
-                React__default['default'].createElement(ListItem_styles.ListImage, { autoHeight: imageAutoHeight, src: (item === null || item === void 0 ? void 0 : item.image) || fallBackImage || fallback_grocery, alt: item === null || item === void 0 ? void 0 : item.name, isSmall: isSmall })),
-            React__default['default'].createElement(ListItem_styles.ItemInformationContainer, null,
-                React__default['default'].createElement(typography.BodyText, { fontWeight: boldHeader ? 'semiBold' : 'regular', size: isSmall
+    return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
+        React__default["default"].createElement(ListItem_styles.ListLeft, null,
+            React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
+                React__default["default"].createElement(ListItem_styles.ListImage, { autoHeight: imageAutoHeight, src: (item === null || item === void 0 ? void 0 : item.image) || fallBackImage || fallback_grocery, alt: item === null || item === void 0 ? void 0 : item.name, isSmall: isSmall })),
+            React__default["default"].createElement(ListItem_styles.ItemInformationContainer, null,
+                React__default["default"].createElement(typography.BodyText, { fontWeight: boldHeader ? 'semiBold' : 'regular', size: isSmall
                         ? typography.TextTypes.TextSize.EXTRASMALL
-                        : typography.TextTypes.TextSize.REGULAR }, (item === null || item === void 0 ? void 0 : item.name) || React__default['default'].createElement(Skeleton__default['default'], { width: smallSkeleton ? 150 : 250 })),
-                loading ? (React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL },
-                    React__default['default'].createElement(Skeleton__default['default'], { width: smallSkeleton ? 150 : 250 }))) : (item === null || item === void 0 ? void 0 : item.description) ? (React__default['default'].createElement(typography.BodyText, { size: isSmall ? typography.TextTypes.TextSize.TINY : typography.TextTypes.TextSize.SMALL, color: (_b = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }, item === null || item === void 0 ? void 0 : item.description)) : null,
+                        : typography.TextTypes.TextSize.REGULAR }, (item === null || item === void 0 ? void 0 : item.name) || React__default["default"].createElement(Skeleton__default["default"], { width: smallSkeleton ? 150 : 250 })),
+                loading ? (React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL },
+                    React__default["default"].createElement(Skeleton__default["default"], { width: smallSkeleton ? 150 : 250 }))) : (item === null || item === void 0 ? void 0 : item.description) ? (React__default["default"].createElement(typography.BodyText, { size: isSmall ? typography.TextTypes.TextSize.TINY : typography.TextTypes.TextSize.SMALL, color: (_b = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }, item === null || item === void 0 ? void 0 : item.description)) : null,
                 (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
-        children && React__default['default'].createElement(ListItem_styles.ListRight, null, children)));
+        children && React__default["default"].createElement(ListItem_styles.ListRight, null, children)));
 }
 
 exports.ListItem = ListItem;

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

@@ -9,11 +9,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var ItemInformationContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: ", "px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var ListItemContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  p {\n    padding: 1px 0px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  p {\n    padding: 1px 0px;\n  }\n"])));
-var ListLeft = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "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.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listItemFlexGap; });
-var ListRight = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  justify-content: space-between;\n  text-align: right;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  justify-content: space-between;\n  text-align: right;\n"])));
-var ListImageContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"])), function (props) {
+var ItemInformationContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: ", "px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var ListItemContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n\n  p {\n    padding: 1px 0px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  p {\n    padding: 1px 0px;\n  }\n"])));
+var ListLeft = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "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.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listItemFlexGap; });
+var ListRight = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  justify-content: space-between;\n  text-align: right;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  justify-content: space-between;\n  text-align: right;\n"])));
+var ListImageContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n"])), function (props) {
     var _a, _b;
     return (props === null || props === void 0 ? void 0 : props.isSmall)
         ? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidthSmall
@@ -24,7 +24,7 @@ var ListImageContainer = styled__default['default'].div(templateObject_5 || (tem
         ? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxHeightSmall
         : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.listImageMaxWidth;
 });
-var ListImage = styled__default['default'].img(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  max-width: 100%;\n  max-height: ", ";\n"], ["\n  max-width: 100%;\n  max-height: ", ";\n"])), function (props) {
+var ListImage = styled__default["default"].img(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  max-width: 100%;\n  max-height: ", ";\n"], ["\n  max-width: 100%;\n  max-height: ", ";\n"])), function (props) {
     var _a, _b;
     return props.autoHeight
         ? '100%'

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

@@ -17,25 +17,25 @@ var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
 function ListItemWithRadio(_a) {
     var _b, _c;
     var item = _a.item, loading = _a.loading, rightChildren = _a.rightChildren, radioChildren = _a.radioChildren;
-    return (React__default['default'].createElement(ListItemWithRadio_styles.ListItemContainer, null,
-        React__default['default'].createElement(ListItemWithRadio_styles.ListImageContainer, null,
-            React__default['default'].createElement(ListItemWithRadio_styles.ListImage, { src: (item === null || item === void 0 ? void 0 : item.image) || fallback_grocery, alt: item === null || item === void 0 ? void 0 : item.name })),
-        loading ? (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(ListItemWithRadio_styles.ListItemHeader, null,
-                React__default['default'].createElement(Skeleton__default['default'], { width: 180 })),
-            React__default['default'].createElement(ListItemWithRadio_styles.RadioWrapper, null,
-                React__default['default'].createElement(Skeleton__default['default'], { width: 140, count: 2, style: {
+    return (React__default["default"].createElement(ListItemWithRadio_styles.ListItemContainer, null,
+        React__default["default"].createElement(ListItemWithRadio_styles.ListImageContainer, null,
+            React__default["default"].createElement(ListItemWithRadio_styles.ListImage, { src: (item === null || item === void 0 ? void 0 : item.image) || fallback_grocery, alt: item === null || item === void 0 ? void 0 : item.name })),
+        loading ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(ListItemWithRadio_styles.ListItemHeader, null,
+                React__default["default"].createElement(Skeleton__default["default"], { width: 180 })),
+            React__default["default"].createElement(ListItemWithRadio_styles.RadioWrapper, null,
+                React__default["default"].createElement(Skeleton__default["default"], { width: 140, count: 2, style: {
                         display: 'flex',
                         flexDirection: 'column',
                         marginBottom: ((_b = index.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px"
-                    } })))) : (React__default['default'].createElement(React__default['default'].Fragment, null,
-            React__default['default'].createElement(ListItemWithRadio_styles.ListItemHeader, null,
-                React__default['default'].createElement(typography.BodyText, { fontWeight: 'semiBold' }, item === null || item === void 0 ? void 0 :
+                    } })))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(ListItemWithRadio_styles.ListItemHeader, null,
+                React__default["default"].createElement(typography.BodyText, { fontWeight: 'semiBold' }, item === null || item === void 0 ? void 0 :
                     item.name,
                     " "),
-                React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark }, item === null || item === void 0 ? void 0 : item.description)),
-            React__default['default'].createElement(ListItemWithRadio_styles.RadioWrapper, null, radioChildren && radioChildren))),
-        rightChildren && (React__default['default'].createElement(ListItemWithRadio_styles.RightChildWrapper, null, rightChildren))));
+                React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark }, item === null || item === void 0 ? void 0 : item.description)),
+            React__default["default"].createElement(ListItemWithRadio_styles.RadioWrapper, null, radioChildren && radioChildren))),
+        rightChildren && (React__default["default"].createElement(ListItemWithRadio_styles.RightChildWrapper, null, rightChildren))));
 }
 
 exports.ListItemWithRadio = ListItemWithRadio;

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

@@ -9,13 +9,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var ListImageContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n  grid-area: img;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n  grid-area: img;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidth; });
-var ListImage = styled__default['default'].img(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  max-width: 100%;\n  max-height: 100%;\n"], ["\n  max-width: 100%;\n  max-height: 100%;\n"])));
-var ListItemContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: grid;\n  flex: 1;\n  gap: ", "px;\n  grid-template-columns: ", "px 1fr;\n  grid-template-areas:\n    'img header rightChild'\n    'radio radio radio';\n\n  @media (min-width: ", "px) {\n    grid-template-rows: ", "px 1fr;\n    grid-template-areas:\n      'img header rightChild'\n      '. radio .';\n  }\n"], ["\n  display: grid;\n  flex: 1;\n  gap: ", "px;\n  grid-template-columns: ", "px 1fr;\n  grid-template-areas:\n    'img header rightChild'\n    'radio radio radio';\n\n  @media (min-width: ", "px) {\n    grid-template-rows: ", "px 1fr;\n    grid-template-areas:\n      'img header rightChild'\n      '. radio .';\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.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.m1; });
-var ListItemHeader = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-left: ", "px;\n  grid-area: header;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-left: ", "px;\n  grid-area: header;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n    align-items: center;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var RadioWrapper = styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  grid-area: radio;\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n"], ["\n  grid-area: radio;\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
-var RightChildWrapper = styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  grid-area: rightChild;\n"], ["\n  grid-area: rightChild;\n"])));
+var ListImageContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n  grid-area: img;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  width: ", "px;\n  height: ", "px;\n  grid-area: img;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidth; });
+var ListImage = styled__default["default"].img(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  max-width: 100%;\n  max-height: 100%;\n"], ["\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var ListItemContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: grid;\n  flex: 1;\n  gap: ", "px;\n  grid-template-columns: ", "px 1fr;\n  grid-template-areas:\n    'img header rightChild'\n    'radio radio radio';\n\n  @media (min-width: ", "px) {\n    grid-template-rows: ", "px 1fr;\n    grid-template-areas:\n      'img header rightChild'\n      '. radio .';\n  }\n"], ["\n  display: grid;\n  flex: 1;\n  gap: ", "px;\n  grid-template-columns: ", "px 1fr;\n  grid-template-areas:\n    'img header rightChild'\n    'radio radio radio';\n\n  @media (min-width: ", "px) {\n    grid-template-rows: ", "px 1fr;\n    grid-template-areas:\n      'img header rightChild'\n      '. radio .';\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.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight) === null || _b === void 0 ? void 0 : _b.m1; });
+var ListItemHeader = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-left: ", "px;\n  grid-area: header;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-left: ", "px;\n  grid-area: header;\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n    align-items: center;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var RadioWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  grid-area: radio;\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n"], ["\n  grid-area: radio;\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var RightChildWrapper = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  grid-area: rightChild;\n"], ["\n  grid-area: rightChild;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 exports.ListImage = ListImage;

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

@@ -11,7 +11,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Logo(_a) {
     var logoImage = _a.logoImage;
-    return React__default['default'].createElement(Logo_styles.Logo, null, logoImage);
+    return React__default["default"].createElement(Logo_styles.Logo, null, logoImage);
 }
 
 exports.Logo = Logo;

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

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Logo = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
+var Logo = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n"])));
 var templateObject_1;
 
 exports.Logo = Logo;

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

@@ -13,10 +13,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function Menu(_a) {
     var showFade = _a.showFade, onScroll = _a.onScroll, children = _a.children;
     var isMobile = utils.useDetectDevice().isMobile;
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(Menu_styles.MenuContainer, { onScroll: onScroll && onScroll }, children),
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Menu_styles.MenuContainer, { onScroll: onScroll && onScroll }, children),
         ' ',
-        isMobile && React__default['default'].createElement(Menu_styles.Fade, { isVisible: showFade })));
+        isMobile && React__default["default"].createElement(Menu_styles.Fade, { isVisible: showFade })));
 }
 
 exports.Menu = Menu;

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

@@ -9,9 +9,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var MenuContainer = styled__default['default'].nav(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    width: calc(100% - 40px);\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    width: calc(100% - 40px);\n  }\n"])), 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.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
-var MenuItem = styled__default['default'].a(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"], ["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.isFirstChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return props.isLastChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, 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; }, 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.palette) === null || _a === void 0 ? void 0 : _a.primary; });
-var Fade = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"], ["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
+var MenuContainer = styled__default["default"].nav(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    width: calc(100% - 40px);\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    width: calc(100% - 40px);\n  }\n"])), 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.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
+var MenuItem = styled__default["default"].a(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"], ["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.isFirstChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, function (props) { var _a; return props.isLastChild ? 0 : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.menuHorizontalMargin; }, 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; }, 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.palette) === null || _a === void 0 ? void 0 : _a.primary; });
+var Fade = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"], ["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
 var templateObject_1, templateObject_2, templateObject_3;
 
 exports.Fade = Fade;

package/build/cjs/components/src/components/Menu/MenuItem.js

@@ -12,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function MenuItem(_a) {
     var active = _a.active, isFirstChild = _a.isFirstChild, isLastChild = _a.isLastChild, children = _a.children, props = _tslib.__rest(_a, ["active", "isFirstChild", "isLastChild", "children"]);
-    return (React__default['default'].createElement(Menu_styles.MenuItem, _tslib.__assign({}, props, { isFirstChild: isFirstChild, isLastChild: isLastChild, active: active }), children));
+    return (React__default["default"].createElement(Menu_styles.MenuItem, _tslib.__assign({}, props, { isFirstChild: isFirstChild, isLastChild: isLastChild, active: active }), children));
 }
 
 exports.MenuItem = MenuItem;

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

@@ -9,9 +9,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var MobileTable = styled__default['default'].table(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  padding: ", "px;\n  padding-bottom: ", "px;\n\n  @media screen and (max-width: ", "px) {\n    & {\n      padding: ", "px 0 0 0;\n    }\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  padding: ", "px;\n  padding-bottom: ", "px;\n\n  @media screen and (max-width: ", "px) {\n    & {\n      padding: ", "px 0 0 0;\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileTablePadding; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileTablePaddingBottom; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileTablePadding; });
-var MobileTd = styled__default['default'].td(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  @media screen and (max-width: ", "px) {\n    & > * {\n      font-size: ", "px;\n    }\n\n    & {\n      font-size: ", "px;\n    }\n  }\n"], ["\n  @media screen and (max-width: ", "px) {\n    & > * {\n      font-size: ", "px;\n    }\n\n    & {\n      font-size: ", "px;\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxs; }, 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.size.s2; });
-var MobileLabel = styled__default['default'](MobileTd)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0;\n  font-weight: ", ";\n  padding-right: ", "px;\n\n  @media screen and (max-width: ", "px) {\n    & {\n      padding: ", "px 0;\n      padding-right: ", "px;\n    }\n  }\n"], ["\n  padding: ", "px 0;\n  font-weight: ", ";\n  padding-right: ", "px;\n\n  @media screen and (max-width: ", "px) {\n    & {\n      padding: ", "px 0;\n      padding-right: ", "px;\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileLabelVerticalPadding; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileLabelPaddingRight; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileLabelVerticalPaddingMobile; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileLabelPaddingRightMobile; });
+var MobileTable = styled__default["default"].table(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  padding: ", "px;\n  padding-bottom: ", "px;\n\n  @media screen and (max-width: ", "px) {\n    & {\n      padding: ", "px 0 0 0;\n    }\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  padding: ", "px;\n  padding-bottom: ", "px;\n\n  @media screen and (max-width: ", "px) {\n    & {\n      padding: ", "px 0 0 0;\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileTablePadding; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileTablePaddingBottom; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileTablePadding; });
+var MobileTd = styled__default["default"].td(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  @media screen and (max-width: ", "px) {\n    & > * {\n      font-size: ", "px;\n    }\n\n    & {\n      font-size: ", "px;\n    }\n  }\n"], ["\n  @media screen and (max-width: ", "px) {\n    & > * {\n      font-size: ", "px;\n    }\n\n    & {\n      font-size: ", "px;\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxs; }, 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.size.s2; });
+var MobileLabel = styled__default["default"](MobileTd)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0;\n  font-weight: ", ";\n  padding-right: ", "px;\n\n  @media screen and (max-width: ", "px) {\n    & {\n      padding: ", "px 0;\n      padding-right: ", "px;\n    }\n  }\n"], ["\n  padding: ", "px 0;\n  font-weight: ", ";\n  padding-right: ", "px;\n\n  @media screen and (max-width: ", "px) {\n    & {\n      padding: ", "px 0;\n      padding-right: ", "px;\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileLabelVerticalPadding; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileLabelPaddingRight; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileLabelVerticalPaddingMobile; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.mobileLabelPaddingRightMobile; });
 var templateObject_1, templateObject_2, templateObject_3;
 
 exports.MobileLabel = MobileLabel;

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

@@ -19,20 +19,20 @@ var Modal = function (_a) {
     var onBackdropClick = _a.onBackdropClick, children = _a.children, title = _a.title, subTitle = _a.subTitle, hideCancel = _a.hideCancel, isConfirm = _a.isConfirm, maxWidth = _a.maxWidth, _c = _a.background, background = _c === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _c, _d = _a.querySelector, querySelector = _d === void 0 ? '#root' : _d, footer = _a.footer;
     var domSafe = typeof document !== 'undefined';
     return domSafe
-        ? reactDom.createPortal(React__default['default'].createElement(Modal_styles.ModalOverlay, { onClick: onBackdropClick },
-            React__default['default'].createElement(Modal_styles.ModalContainer, { isConfirm: isConfirm || false, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, background: background },
-                title && (React__default['default'].createElement(React__default['default'].Fragment, null,
-                    React__default['default'].createElement(Modal_styles.ModalHeaderContainer, null,
-                        React__default['default'].createElement(Modal_styles.ModalHeader, null,
-                            React__default['default'].createElement(typography.H2, null, title),
-                            !hideCancel && (React__default['default'].createElement(Modal_styles.CloseButtonWrapper, { onClick: onBackdropClick },
-                                React__default['default'].createElement(Icon.Icons.Cross, null)))),
-                        React__default['default'].createElement(typography.BodyText, null, subTitle)))),
-                children && (React__default['default'].createElement(React__default['default'].Fragment, null,
-                    React__default['default'].createElement(Modal_styles.ChildrenWrapper, null, children))),
-                footer && (React__default['default'].createElement(React__default['default'].Fragment, null,
-                    React__default['default'].createElement(Spacer.Spacer, null),
-                    React__default['default'].createElement(Modal_styles.FooterWrapper, null, footer))))), document.querySelector(querySelector) || document.body)
+        ? reactDom.createPortal(React__default["default"].createElement(Modal_styles.ModalOverlay, { onClick: onBackdropClick },
+            React__default["default"].createElement(Modal_styles.ModalContainer, { isConfirm: isConfirm || false, maxWidth: maxWidth, onClick: function (e) { return e.stopPropagation(); }, background: background },
+                title && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(Modal_styles.ModalHeaderContainer, null,
+                        React__default["default"].createElement(Modal_styles.ModalHeader, null,
+                            React__default["default"].createElement(typography.H2, null, title),
+                            !hideCancel && (React__default["default"].createElement(Modal_styles.CloseButtonWrapper, { onClick: onBackdropClick },
+                                React__default["default"].createElement(Icon.Icons.Cross, null)))),
+                        React__default["default"].createElement(typography.BodyText, null, subTitle)))),
+                children && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(Modal_styles.ChildrenWrapper, null, children))),
+                footer && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(Spacer.Spacer, null),
+                    React__default["default"].createElement(Modal_styles.FooterWrapper, null, footer))))), document.querySelector(querySelector) || document.body)
         : null;
 };
 

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

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var ModalOverlay = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkOverlay; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
-var ModalContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  max-width: 100%;\n  max-height: 100vh;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    width: 100%;\n    max-width: ", ";\n    max-height: 90vh;\n  }\n"], ["\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  max-width: 100%;\n  max-height: 100vh;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    width: 100%;\n    max-width: ", ";\n    max-height: 90vh;\n  }\n"])), function (props) { return props.background && "background: " + props.background; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) {
+var ModalOverlay = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkOverlay; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var ModalContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  max-width: 100%;\n  max-height: 100vh;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    width: 100%;\n    max-width: ", ";\n    max-height: 90vh;\n  }\n"], ["\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  max-width: 100%;\n  max-height: 100vh;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n    width: 100%;\n    max-width: ", ";\n    max-height: 90vh;\n  }\n"])), function (props) { return props.background && "background: " + props.background; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) {
     var _a, _b;
     return props.maxWidth
         ? props.maxWidth
@@ -18,11 +18,11 @@ var ModalContainer = styled__default['default'].div(templateObject_2 || (templat
             ? ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.modalConfirmMaxWidth) + 'px'
             : ((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.modalContainerMaxWidth) + 'px';
 });
-var ModalHeaderContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding-bottom: ", "px;\n  @media (min-width: ", "px) {\n    padding-top: 8px;\n  }\n"], ["\n  padding-bottom: ", "px;\n  @media (min-width: ", "px) {\n    padding-top: 8px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
-var ModalHeader = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", "px;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", "px;\n  align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var CloseButtonWrapper = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
-var ChildrenWrapper = styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n  min-height: 64px;\n  gap: ", "px;\n  padding: ", "px 0;\n\n  @media (min-width: ", "px) {\n    padding: ", "px 0;\n  }\n\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n\n  ::-webkit-scrollbar {\n    width: 6px;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background-color: ", ";\n  }\n\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n  min-height: 64px;\n  gap: ", "px;\n  padding: ", "px 0;\n\n  @media (min-width: ", "px) {\n    padding: ", "px 0;\n  }\n\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n\n  ::-webkit-scrollbar {\n    width: 6px;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background-color: ", ";\n  }\n\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, 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.palette) === null || _a === void 0 ? void 0 : _a.medium; }, 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.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; });
-var FooterWrapper = styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n"], ["\n  display: flex;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var ModalHeaderContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding-bottom: ", "px;\n  @media (min-width: ", "px) {\n    padding-top: 8px;\n  }\n"], ["\n  padding-bottom: ", "px;\n  @media (min-width: ", "px) {\n    padding-top: 8px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
+var ModalHeader = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", "px;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", "px;\n  align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var CloseButtonWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+var ChildrenWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n  min-height: 64px;\n  gap: ", "px;\n  padding: ", "px 0;\n\n  @media (min-width: ", "px) {\n    padding: ", "px 0;\n  }\n\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n\n  ::-webkit-scrollbar {\n    width: 6px;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background-color: ", ";\n  }\n\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  overflow-y: scroll;\n  min-height: 64px;\n  gap: ", "px;\n  padding: ", "px 0;\n\n  @media (min-width: ", "px) {\n    padding: ", "px 0;\n  }\n\n  border-bottom: 1px solid ", ";\n  border-top: 1px solid ", ";\n\n  ::-webkit-scrollbar {\n    width: 6px;\n    background: ", ";\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: 10px;\n    background-color: ", ";\n  }\n\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, 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.palette) === null || _a === void 0 ? void 0 : _a.medium; }, 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.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; });
+var FooterWrapper = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n"], ["\n  display: flex;\n  gap: ", "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, templateObject_5, templateObject_6, templateObject_7;
 
 exports.ChildrenWrapper = ChildrenWrapper;

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

@@ -38,16 +38,19 @@ function createPagination(totalItems, itemsPerPage) {
     return pagination;
 }
 function Pagination(_a) {
-    var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, itemsPerPage = _a.itemsPerPage;
+    var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, itemsPerPage = _a.itemsPerPage, setPage = _a.setPage;
     var _b = React.useState(Math.floor((currentPage - 1) / 4)), currentIndex = _b[0], setIndex = _b[1];
     var pagination = createPagination(totalItems, itemsPerPage);
-    return (React__default['default'].createElement(Box.Box, null, pagination && pagination.length > 0 && (React__default['default'].createElement(Pagination_styles.Flex, null,
-        currentIndex > 0 && (React__default['default'].createElement(Pagination_styles.PaginationButtonWrapper, null,
-            React__default['default'].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex - 1); }, width: 36, height: 36 }, '...'))),
-        pagination[currentIndex].map(function (page) { return (React__default['default'].createElement(Pagination_styles.PaginationButtonWrapper, { key: page },
-            React__default['default'].createElement(PaginationButton.PaginationButton, { color: currentPage === page + 1 ? 'primary' : 'white', width: 36, height: 36, onClick: function () { return fetchItems(page + 1); } }, page + 1))); }),
-        pagination.length > 1 && currentIndex < pagination.length - 1 && (React__default['default'].createElement(Pagination_styles.PaginationButtonWrapper, null,
-            React__default['default'].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex + 1); }, width: 36, height: 36 }, '...')))))));
+    return (React__default["default"].createElement(Box.Box, null, pagination && pagination.length > 0 && (React__default["default"].createElement(Pagination_styles.Flex, null,
+        currentIndex > 0 && (React__default["default"].createElement(Pagination_styles.PaginationButtonWrapper, null,
+            React__default["default"].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: function () {
+                    setPage && setPage(currentPage - 1);
+                    setIndex(currentIndex - 1);
+                }, width: 36, height: 36 }, '...'))),
+        pagination[currentIndex].map(function (page) { return (React__default["default"].createElement(Pagination_styles.PaginationButtonWrapper, { key: page },
+            React__default["default"].createElement(PaginationButton.PaginationButton, { color: currentPage === page + 1 ? 'primary' : 'white', width: 36, height: 36, onClick: function () { return fetchItems(page + 1); } }, page + 1))); }),
+        pagination.length > 1 && currentIndex < pagination.length - 1 && (React__default["default"].createElement(Pagination_styles.PaginationButtonWrapper, null,
+            React__default["default"].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex + 1); }, width: 36, height: 36 }, '...')))))));
 }
 
 exports.Pagination = Pagination;

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

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

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

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var PaginationButtonWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
-var Flex = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"])));
+var PaginationButtonWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var Flex = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"])));
 var templateObject_1, templateObject_2;
 
 exports.Flex = Flex;

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

@@ -14,8 +14,8 @@ function ProgressBar(_a) {
     var _b, _c;
     var maxValue = _a.maxValue, currentValue = _a.currentValue, _d = _a.background, background = _d === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _d, _e = _a.color, color = _e === void 0 ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e;
     var progress = (currentValue / maxValue) * 100;
-    return (React__default['default'].createElement(ProgressBar_styled.BarContainer, { color: background },
-        React__default['default'].createElement(ProgressBar_styled.Progress, { width: progress, color: color })));
+    return (React__default["default"].createElement(ProgressBar_styled.BarContainer, { color: background },
+        React__default["default"].createElement(ProgressBar_styled.Progress, { width: progress, color: color })));
 }
 
 exports.ProgressBar = ProgressBar;

package/build/cjs/components/src/components/ProgressBar/ProgressBar.styled.js

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BarContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  overflow: hidden;\n"], ["\n  background: ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  overflow: hidden;\n"])), function (props) { return props.color; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var Progress = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: ", "%;\n  background: ", ";\n  height: 100%;\n"], ["\n  width: ", "%;\n  background: ", ";\n  height: 100%;\n"])), function (props) { return props.width || 0; }, function (props) { return props.color; });
+var BarContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  overflow: hidden;\n"], ["\n  background: ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  overflow: hidden;\n"])), function (props) { return props.color; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var Progress = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: ", "%;\n  background: ", ";\n  height: 100%;\n"], ["\n  width: ", "%;\n  background: ", ";\n  height: 100%;\n"])), function (props) { return props.width || 0; }, function (props) { return props.color; });
 var templateObject_1, templateObject_2;
 
 exports.BarContainer = BarContainer;