@trafilea/afrodita-components 6.23.4 → 6.23.6

package/build/index.d.ts

@@ -1496,10 +1496,10 @@ declare type ThemeColors = {
         990: ThemeBasicPallete;
     };
     semantic: {
-        positive: ThemeBasicPallete;
-        urgent: ThemeBasicPallete;
-        attention: ThemeBasicPallete;
-        informative: ThemeBasicPallete;
+        positive: ThemeColorPallete;
+        urgent: ThemeColorPallete;
+        attention: ThemeColorPallete;
+        informative: ThemeColorPallete;
     };
     border: {
         color: string;

package/build/index.esm.js

@@ -4737,7 +4737,7 @@ var TAGS = {
     display1: newStyled.h1(templateObject_4$R || (templateObject_4$R = __makeTemplateObject([""], [""]))),
     display2: newStyled.h2(templateObject_5$C || (templateObject_5$C = __makeTemplateObject([""], [""]))),
     display3: newStyled.h3(templateObject_6$x || (templateObject_6$x = __makeTemplateObject([""], [""]))),
-    heading1: newStyled.h1(templateObject_7$n || (templateObject_7$n = __makeTemplateObject([""], [""]))),
+    heading1: newStyled.h1(templateObject_7$o || (templateObject_7$o = __makeTemplateObject([""], [""]))),
     heading2: newStyled.h2(templateObject_8$j || (templateObject_8$j = __makeTemplateObject([""], [""]))),
     heading3: newStyled.h3(templateObject_9$a || (templateObject_9$a = __makeTemplateObject([""], [""]))),
     heading4: newStyled.h4(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject([""], [""]))),
@@ -4867,7 +4867,7 @@ var DEFAULTS = {
         size: 'regular',
     },
 };
-var templateObject_1$1Y, templateObject_2$1m, templateObject_3$13, templateObject_4$R, templateObject_5$C, templateObject_6$x, templateObject_7$n, templateObject_8$j, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
+var templateObject_1$1Y, templateObject_2$1m, templateObject_3$13, templateObject_4$R, templateObject_5$C, templateObject_6$x, templateObject_7$o, templateObject_8$j, templateObject_9$a, templateObject_10$9, templateObject_11$6, templateObject_12$4, templateObject_13$4, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
 
 var Container$1e = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"], ["\n  position: relative;\n  display: flex;\n  border-radius: 6px;\n  gap: 6px;\n"])));
 var Card$3 = newStyled.div(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n  --background: var(--colors-background-color);\n\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 2px solid var(--component-packSelector-borderColor);\n  padding: 16px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      p {\n        color: var(--color);\n      }\n    }\n  }\n"], ["\n  --background: var(--colors-background-color);\n\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  cursor: pointer;\n  border: 2px solid var(--component-packSelector-borderColor);\n  padding: 16px 7px 7px;\n  text-align: center;\n  background-color: var(--background);\n  border-radius: var(--component-packSelector-borderRadius);\n\n  &[aria-checked='true'] {\n    --color: var(--component-packSelector-selectedColor);\n\n    border-color: var(--color);\n\n    & * {\n      p {\n        color: var(--color);\n      }\n    }\n  }\n"])));
@@ -5876,12 +5876,12 @@ var Title$a = newStyled.h1(templateObject_6$v || (templateObject_6$v = __makeTem
     var color = _a.color;
     return color;
 });
-var IconContainer$5 = newStyled.div(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"], ["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"])));
+var IconContainer$5 = newStyled.div(templateObject_7$n || (templateObject_7$n = __makeTemplateObject(["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"], ["\n  width: 1.375rem;\n  height: 1.125rem;\n  margin-right: 0.563rem;\n"])));
 var CloseToolTip = newStyled.button(templateObject_8$i || (templateObject_8$i = __makeTemplateObject(["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ", ";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"], ["\n  position: absolute;\n  background: none;\n  border: none;\n  cursor: pointer;\n  right: ", ";\n  top: 0.25rem;\n  padding: 0px;\n  z-index: 2;\n"])), function (_a) {
     var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
     return right;
 });
-var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$v, templateObject_7$m, templateObject_8$i;
+var templateObject_1$1K, templateObject_2$1c, templateObject_3$Z, templateObject_4$N, templateObject_5$z, templateObject_6$v, templateObject_7$n, templateObject_8$i;
 
 var Tooltip = function (_a) {
     var _b;
@@ -5952,7 +5952,7 @@ var SubscriptionHeader$1 = newStyled.div(templateObject_5$y || (templateObject_5
     return theme.colors.pallete.primary.color;
 });
 var BenefitsContainer$1 = newStyled.div(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n  margin-bottom: 5px;\n"], ["\n  margin-bottom: 5px;\n"])));
-var Benefit$1 = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n  display: flex;\n  padding: 8px 0px;\n  svg {\n    overflow: visible;\n  }\n"], ["\n  display: flex;\n  padding: 8px 0px;\n  svg {\n    overflow: visible;\n  }\n"])));
+var Benefit$1 = newStyled.div(templateObject_7$m || (templateObject_7$m = __makeTemplateObject(["\n  display: flex;\n  padding: 8px 0px;\n  svg {\n    overflow: visible;\n  }\n"], ["\n  display: flex;\n  padding: 8px 0px;\n  svg {\n    overflow: visible;\n  }\n"])));
 var BenefitText$1 = newStyled(Text$7)(templateObject_8$h || (templateObject_8$h = __makeTemplateObject(["\n  line-height: 20px;\n  margin-left: 9px;\n"], ["\n  line-height: 20px;\n  margin-left: 9px;\n"])));
 var SubscriptionDetails = newStyled(Text$7)(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n  font-size: 16px;\n  margin-right: 7px;\n"], ["\n  font-size: 16px;\n  margin-right: 7px;\n"])));
 var SubscriptionDetailsContainer = newStyled.div(templateObject_10$8 || (templateObject_10$8 = __makeTemplateObject(["\n  margin-top: 18px;\n  display: flex;\n"], ["\n  margin-top: 18px;\n  display: flex;\n"])));
@@ -5962,7 +5962,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2$1)(templateObject_12$3 || (templateOb
     return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
 });
 var Container$16 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
-var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$M, templateObject_5$y, templateObject_6$u, templateObject_7$l, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$3, templateObject_13$3;
+var templateObject_1$1J, templateObject_2$1b, templateObject_3$Y, templateObject_4$M, templateObject_5$y, templateObject_6$u, templateObject_7$m, templateObject_8$h, templateObject_9$9, templateObject_10$8, templateObject_11$5, templateObject_12$3, templateObject_13$3;
 
 var radioIds$1 = {
     oneTime: {
@@ -6062,7 +6062,7 @@ var SubscriptionHeader = newStyled.div(templateObject_6$t || (templateObject_6$t
     var theme = _a.theme;
     return theme.colors.pallete.primary.color;
 });
-var BenefitsContainer = newStyled.div(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n  margin-bottom: 5px;\n"], ["\n  margin-bottom: 5px;\n"])));
+var BenefitsContainer = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n  margin-bottom: 5px;\n"], ["\n  margin-bottom: 5px;\n"])));
 var Benefit = newStyled.div(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n  display: flex;\n  padding: 8px 0;\n  svg {\n    overflow: visible;\n  }\n"], ["\n  display: flex;\n  padding: 8px 0;\n  svg {\n    overflow: visible;\n  }\n"])));
 var BenefitText = newStyled(Text$7)(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n  line-height: 20px;\n  margin-left: 9px;\n"], ["\n  line-height: 20px;\n  margin-left: 9px;\n"])));
 var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject(["\n  line-height: 35px;\n  margin-right: 8px;\n  align-self: center;\n"], ["\n  line-height: 35px;\n  margin-right: 8px;\n  align-self: center;\n"])));
@@ -6075,7 +6075,7 @@ var TooltipWrapper = newStyled.div(templateObject_13$2 || (templateObject_13$2 =
     var theme = _a.theme;
     return theme.component.autoship.tooltip.margin;
 });
-var templateObject_1$1I, templateObject_2$1a, templateObject_3$X, templateObject_4$L, templateObject_5$x, templateObject_6$t, templateObject_7$k, templateObject_8$g, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$2, templateObject_13$2;
+var templateObject_1$1I, templateObject_2$1a, templateObject_3$X, templateObject_4$L, templateObject_5$x, templateObject_6$t, templateObject_7$l, templateObject_8$g, templateObject_9$8, templateObject_10$7, templateObject_11$4, templateObject_12$2, templateObject_13$2;
 
 var radioIds = {
     oneTime: {
@@ -6425,14 +6425,14 @@ var DollarPart = newStyled.span(templateObject_3$R || (templateObject_3$R = __ma
 var ClubMembersText = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n  color: #fff;\n  font-family: 'Avenir Next', sans-serif;\n  font-weight: 500;\n  line-height: 14px; /* 116.667% */\n"], ["\n  color: #fff;\n  font-family: 'Avenir Next', sans-serif;\n  font-weight: 500;\n  line-height: 14px; /* 116.667% */\n"])));
 var MobileDollarPart = newStyled(DollarPart)(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n  font-size: 10px;\n"], ["\n  font-size: 10px;\n"])));
 var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n  font-size: 10px;\n"], ["\n  font-size: 10px;\n"])));
-var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n  font-size: 13px;\n"], ["\n  font-size: 13px;\n"])));
+var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n  font-size: 13px;\n"], ["\n  font-size: 13px;\n"])));
 var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n  font-size: 13px;\n"], ["\n  font-size: 13px;\n"])));
 var ClubPriceLabel = function (_a) {
     var clubPrice = _a.clubPrice;
     var isMobile = useWindowDimensions().isMobile;
     return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$$, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
 };
-var templateObject_1$1u, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$v, templateObject_6$r, templateObject_7$j, templateObject_8$f;
+var templateObject_1$1u, templateObject_2$14, templateObject_3$R, templateObject_4$G, templateObject_5$v, templateObject_6$r, templateObject_7$k, templateObject_8$f;
 
 var Spacing = function (_a) {
     var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
@@ -6666,7 +6666,7 @@ var BottomTagContainer$8 = newStyled.div(templateObject_6$q || (templateObject_6
     var style = _a.style;
     return style.width;
 });
-var MarginTopContainer$1 = newStyled.div(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n  margin-top: 8px;\n"], ["\n  margin-top: 8px;\n"])));
+var MarginTopContainer$1 = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n  margin-top: 8px;\n"], ["\n  margin-top: 8px;\n"])));
 var ProductItemMobile = function (_a) {
     var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
         display: false,
@@ -6725,7 +6725,7 @@ var ProductItemMobile = function (_a) {
     };
     return (jsxs(ProdCardContainer$4, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$X, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$8, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$X, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
 };
-var templateObject_1$1n, templateObject_2$11, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$q, templateObject_7$i;
+var templateObject_1$1n, templateObject_2$11, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$q, templateObject_7$j;
 
 var ImageContainer$5 = newStyled.div(function (_a) {
     var width = _a.width, height = _a.height;
@@ -6769,7 +6769,7 @@ var TopTagContainer$7 = newStyled.div(templateObject_5$s || (templateObject_5$s
     return style.width;
 });
 var TopRightTagContainer$2 = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n"])));
-var BottomTagContainer$7 = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n  position: absolute;\n  bottom: 10%;\n  left: 0;\n  width: ", ";\n  z-index: 1;\n"], ["\n  position: absolute;\n  bottom: 10%;\n  left: 0;\n  width: ", ";\n  z-index: 1;\n"])), function (_a) {
+var BottomTagContainer$7 = newStyled.div(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n  position: absolute;\n  bottom: 10%;\n  left: 0;\n  width: ", ";\n  z-index: 1;\n"], ["\n  position: absolute;\n  bottom: 10%;\n  left: 0;\n  width: ", ";\n  z-index: 1;\n"])), function (_a) {
     var style = _a.style;
     return style.width;
 });
@@ -6824,7 +6824,7 @@ var ProductItemTK = function (_a) {
                             marginTop: hasSpacing ? undefined : textContainerGap,
                         } }, { children: title }), void 0)) : (jsx(Title$6, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : hasStrength.strength) !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
 };
-var templateObject_1$1m, templateObject_2$10, templateObject_3$N, templateObject_4$C, templateObject_5$s, templateObject_6$p, templateObject_7$h, templateObject_8$e;
+var templateObject_1$1m, templateObject_2$10, templateObject_3$N, templateObject_4$C, templateObject_5$s, templateObject_6$p, templateObject_7$i, templateObject_8$e;
 
 var Container$V = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n  display: flex;\n  row-gap: 1.875rem;\n  column-gap: 1.875rem;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  row-gap: 1.875rem;\n  column-gap: 1.875rem;\n  flex-wrap: wrap;\n"])));
 function withProductGrid(ProductItemComponent, data) {
@@ -7172,7 +7172,7 @@ var SectionTitle = newStyled.h1(templateObject_6$n || (templateObject_6$n = __ma
     var theme = _a.theme;
     return "\n    color: ".concat(theme.colors.shades['700'].color, ";\n    font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n    line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n    font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n  ");
 });
-var SectionDetails = newStyled.p(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n  color: ", ";\n  ", "\n  margin: 0;\n  margin-top: 0.625rem;\n  ", ";\n"], ["\n  color: ", ";\n  ", "\n  margin: 0;\n  margin-top: 0.625rem;\n  ", ";\n"])), function (props) { return props.color; }, function (_a) {
+var SectionDetails = newStyled.p(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n  color: ", ";\n  ", "\n  margin: 0;\n  margin-top: 0.625rem;\n  ", ";\n"], ["\n  color: ", ";\n  ", "\n  margin: 0;\n  margin-top: 0.625rem;\n  ", ";\n"])), function (props) { return props.color; }, function (_a) {
     var theme = _a.theme;
     return "\n    font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n    line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n    font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n  ");
 }, function (_a) {
@@ -7189,7 +7189,7 @@ var DeliveryDetails = function (_a) {
     var theme = useTheme();
     return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
 };
-var templateObject_1$1f, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$n, templateObject_7$g, templateObject_8$d;
+var templateObject_1$1f, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$n, templateObject_7$h, templateObject_8$d;
 
 var Backdrop = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: ", ";\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"], ["\n  position: fixed;\n  z-index: 2;\n  left: 0;\n  top: ", ";\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  transition: background-color 0.3s ease-out;\n\n  ", "\n"])), function (_a) {
     var top = _a.top;
@@ -7363,11 +7363,11 @@ var MobileHeader = newStyled.div(templateObject_3$E || (templateObject_3$E = __m
 var MobileIconsContainer = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n  width: 1.5rem;\n  height: 1.5rem;\n  cursor: pointer;\n"], ["\n  width: 1.5rem;\n  height: 1.5rem;\n  cursor: pointer;\n"])));
 var H4 = newStyled.h4(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: 400;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"])), function (props) { return props.color; });
 var FilterLink = newStyled.a(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-decoration: none;\n"], ["\n  font-size: 1rem;\n  font-weight: 700;\n  line-height: 1.5rem;\n  color: ", ";\n  text-decoration: none;\n"])), function (props) { return props.color; });
-var OptionContainer = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n  margin-bottom: 1.25rem;\n  &:last-child {\n    margin-bottom: 0;\n  }\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n  @media (min-width: 768px) and (max-width: 992px) {\n    display: ", ";\n  }\n"], ["\n  margin-bottom: 1.25rem;\n  &:last-child {\n    margin-bottom: 0;\n  }\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n  @media (min-width: 768px) and (max-width: 992px) {\n    display: ", ";\n  }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
+var OptionContainer = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n  margin-bottom: 1.25rem;\n  &:last-child {\n    margin-bottom: 0;\n  }\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n  @media (min-width: 768px) and (max-width: 992px) {\n    display: ", ";\n  }\n"], ["\n  margin-bottom: 1.25rem;\n  &:last-child {\n    margin-bottom: 0;\n  }\n  @media (max-width: 768px) {\n    display: ", ";\n  }\n  @media (min-width: 768px) and (max-width: 992px) {\n    display: ", ";\n  }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
 var ClearAll = newStyled.span(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n  text-decoration: underline;\n  cursor: pointer;\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n  text-decoration: underline;\n  cursor: pointer;\n"])), function (props) { return props.color; });
 var MobileFooter = newStyled.div(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n  background-color: #fff;\n  padding: 0.75rem 0.938rem;\n  position: sticky;\n  bottom: 0;\n  z-index: 1;\n  margin-top: 5.625rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  background-color: #fff;\n  padding: 0.75rem 0.938rem;\n  position: sticky;\n  bottom: 0;\n  z-index: 1;\n  margin-top: 5.625rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var MobileClearContainer = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n\n  span {\n    margin-left: 0.5rem;\n    user-select: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n\n  span {\n    margin-left: 0.5rem;\n    user-select: none;\n  }\n"])));
-var templateObject_1$19, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$f, templateObject_8$c, templateObject_9$7, templateObject_10$6;
+var templateObject_1$19, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$m, templateObject_6$k, templateObject_7$g, templateObject_8$c, templateObject_9$7, templateObject_10$6;
 
 var getStylesBySize$a = function (size, theme) {
     switch (size) {
@@ -11964,9 +11964,9 @@ var Container$P = newStyled.div(templateObject_3$C || (templateObject_3$C = __ma
 var Button$6 = newStyled.button(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"])));
 var ArrowsContainer = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n  display: flex;\n  width: 65px;\n  position: relative;\n  left: 6px;\n"], ["\n  display: flex;\n  width: 65px;\n  position: relative;\n  left: 6px;\n"])));
 var ArrowBaseStyles = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n  color: #2a2a2a;\n  border: 0;\n  font-family: inherit;\n  font-size: 100%;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  margin: 0;\n  padding: 0;\n  vertical-align: inherit;\n  background-color: #ececea;\n  box-sizing: border-box;\n  cursor: pointer;\n  float: left;\n  height: 20px;\n  position: relative;\n  width: 50%;\n  background-position: 50%;\n  background-repeat: no-repeat;\n  background-size: 11px;\n  display: block;\n"], ["\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n  color: #2a2a2a;\n  border: 0;\n  font-family: inherit;\n  font-size: 100%;\n  font-style: inherit;\n  font-variant: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n  margin: 0;\n  padding: 0;\n  vertical-align: inherit;\n  background-color: #ececea;\n  box-sizing: border-box;\n  cursor: pointer;\n  float: left;\n  height: 20px;\n  position: relative;\n  width: 50%;\n  background-position: 50%;\n  background-repeat: no-repeat;\n  background-size: 11px;\n  display: block;\n"])));
-var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n  background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n  border-radius: 0 0 0 4px;\n"], ["\n  background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n  border-radius: 0 0 0 4px;\n"])));
+var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n  background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n  border-radius: 0 0 0 4px;\n"], ["\n  background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n  border-radius: 0 0 0 4px;\n"])));
 var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n  grid-column: 1;\n  background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n  border-radius: 0 0 4px 0;\n  border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n  grid-column: 1;\n  background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n  border-radius: 0 0 4px 0;\n  border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
-var templateObject_1$13, templateObject_2$M, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$j, templateObject_7$e, templateObject_8$b;
+var templateObject_1$13, templateObject_2$M, templateObject_3$C, templateObject_4$s, templateObject_5$l, templateObject_6$j, templateObject_7$f, templateObject_8$b;
 
 var ImagePreviewList = function (_a) {
     var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows, isRatioSquare = _a.isRatioSquare;
@@ -14515,7 +14515,7 @@ var BottomTagContainer$3 = newStyled.div(templateObject_3$t || (templateObject_3
 var VideoOverlay$1 = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n  content: '';\n  background: transparent;\n  width: 100%;\n  height: 100%;\n  min-height: 1px;\n  position: absolute;\n  top: 0;\n"], ["\n  content: '';\n  background: transparent;\n  width: 100%;\n  height: 100%;\n  min-height: 1px;\n  position: absolute;\n  top: 0;\n"])));
 var Video = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 510px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 510px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n"])));
 var VideoTag = newStyled.div(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n  gap: 8px;\n  position: absolute;\n  width: 100%;\n  bottom: 50px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"], ["\n  gap: 8px;\n  position: absolute;\n  width: 100%;\n  bottom: 50px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"])));
-var Text$2 = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n  padding-top: 3px;\n"], ["\n  padding-top: 3px;\n"])));
+var Text$2 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n  padding-top: 3px;\n"], ["\n  padding-top: 3px;\n"])));
 var NavButtonContainer$1 = newStyled.div(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n"], ["\n  height: 40px;\n  width: 40px;\n"])));
 var Button$2 = newStyled.button(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  height: 40px !important;\n  cursor: pointer;\n"], ["\n  background: transparent;\n  border: none;\n  padding: 0.188rem 0.625rem;\n  z-index: 5;\n  height: 40px !important;\n  cursor: pointer;\n"])));
 var settings = {
@@ -14575,7 +14575,7 @@ var ImageProductSlideV3 = function (_a) {
                                             } }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
                     }) }), void 0) }), void 0)] }, void 0));
 };
-var templateObject_1$K, templateObject_2$z, templateObject_3$t, templateObject_4$n, templateObject_5$g, templateObject_6$f, templateObject_7$d, templateObject_8$a, templateObject_9$6;
+var templateObject_1$K, templateObject_2$z, templateObject_3$t, templateObject_4$n, templateObject_5$g, templateObject_6$f, templateObject_7$e, templateObject_8$a, templateObject_9$6;
 
 var Container$z = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"])));
 var ProductGalleryMobileV3 = function (_a) {
@@ -14722,13 +14722,14 @@ var transformStyle = function (_a) {
     return opened
         ? css(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n        transform: ", ";\n      "], ["\n        transform: ", ";\n      "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n        transform: ", ";\n      "], ["\n        transform: ", ";\n      "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
 };
-var Container$y = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
+var Container$y = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  border: 1px solid var(--colors-pallete-primary-color);\n  border-radius: ", ";\n  padding: ", ";\n  position: fixed;\n  left: ", ";\n  top: ", ";\n  z-index: var(--zIndex-modal);\n  background-color: var(--colors-background-color);\n  transition: transform 0.3s, opacity 0.3s;\n  overflow-y: auto;\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
     var width = _a.width;
-    return mediaQueries({
-        minWidth: ['90%', "".concat(width || 'var(--component-modal-minWidth)')],
+    return width
+        ? css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n          width: ", ";\n        "], ["\n          width: ", ";\n        "])), width) : mediaQueries({
+        minWidth: ['90%', 'var(--component-modal-minWidth)'],
     });
 }, visibleStyle, transformStyle);
-var Overlay = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n\n  ", "\n"], ["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n\n  ", "\n"])), visibleStyle);
+var Overlay = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n\n  ", "\n"], ["\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.75);\n  z-index: var(--zIndex-overlay);\n  transition: opacity 0.3s;\n\n  ", "\n"])), visibleStyle);
 var Modal = function (_a) {
     var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width;
     var _d = useModal(id), opened = _d.opened, close = _d.close;
@@ -14769,7 +14770,7 @@ var useModal = function (id) {
         close: close,
     }); }, [close, open, opened]);
 };
-var templateObject_1$I, templateObject_2$y, templateObject_3$s, templateObject_4$m, templateObject_5$f, templateObject_6$e;
+var templateObject_1$I, templateObject_2$y, templateObject_3$s, templateObject_4$m, templateObject_5$f, templateObject_6$e, templateObject_7$d;
 
 var Bar$1 = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  left: ", ";\n  animation: ", ";\n"], ["\n  @keyframes loading {\n    0% {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(400%);\n    }\n  }\n\n  height: ", ";\n  background-color: ", ";\n  width: ", ";\n  border-radius: ", ";\n  left: ", ";\n  animation: ", ";\n"])), function (_a) {
     var height = _a.height;