@trafilea/afrodita-components 6.23.3 → 6.23.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/build/index.d.ts +4 -1
  2. package/build/index.esm.js +35 -31
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +35 -31
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.d.ts CHANGED
@@ -2899,11 +2899,13 @@ declare type ModalProps = {
2899
2899
  padding?: string;
2900
2900
  onClickOverlayHandler?: () => void;
2901
2901
  children: React__default.ReactNode;
2902
+ width?: string;
2902
2903
  };
2903
2904
  interface ContainerProps {
2904
2905
  maxFullScreen: boolean;
2905
2906
  opened?: boolean;
2906
2907
  padding?: string;
2908
+ width?: string;
2907
2909
  }
2908
2910
  declare const Overlay: _emotion_styled.StyledComponent<{
2909
2911
  theme?: _emotion_react.Theme | undefined;
@@ -3017,6 +3019,7 @@ interface Price extends Pick<PriceLabelProps, 'finalPrice' | 'originalPrice'> {
3017
3019
  interface ProductOrderItemProps {
3018
3020
  title: React__default.ReactNode | string;
3019
3021
  subtitle: string;
3022
+ midElement?: React__default.ReactNode;
3020
3023
  className?: string;
3021
3024
  image: {
3022
3025
  src: string;
@@ -3030,7 +3033,7 @@ interface ProductOrderItemProps {
3030
3033
  };
3031
3034
  finalPriceStyle?: React__default.CSSProperties;
3032
3035
  }
3033
- declare const SimpleOrderItem: ({ title, className, subtitle, image, price, tag, quantity, finalPriceStyle, }: ProductOrderItemProps) => JSX.Element;
3036
+ declare const SimpleOrderItem: ({ title, className, subtitle, midElement, image, price, tag, quantity, finalPriceStyle, }: ProductOrderItemProps) => JSX.Element;
3034
3037
 
3035
3038
  interface ProgressBarProps {
3036
3039
  description?: string;
package/build/index.esm.js CHANGED
@@ -4737,7 +4737,7 @@ var TAGS = {
4737
4737
  display1: newStyled.h1(templateObject_4$R || (templateObject_4$R = __makeTemplateObject([""], [""]))),
4738
4738
  display2: newStyled.h2(templateObject_5$C || (templateObject_5$C = __makeTemplateObject([""], [""]))),
4739
4739
  display3: newStyled.h3(templateObject_6$x || (templateObject_6$x = __makeTemplateObject([""], [""]))),
4740
- heading1: newStyled.h1(templateObject_7$n || (templateObject_7$n = __makeTemplateObject([""], [""]))),
4740
+ heading1: newStyled.h1(templateObject_7$o || (templateObject_7$o = __makeTemplateObject([""], [""]))),
4741
4741
  heading2: newStyled.h2(templateObject_8$j || (templateObject_8$j = __makeTemplateObject([""], [""]))),
4742
4742
  heading3: newStyled.h3(templateObject_9$a || (templateObject_9$a = __makeTemplateObject([""], [""]))),
4743
4743
  heading4: newStyled.h4(templateObject_10$9 || (templateObject_10$9 = __makeTemplateObject([""], [""]))),
@@ -4867,7 +4867,7 @@ var DEFAULTS = {
4867
4867
  size: 'regular',
4868
4868
  },
4869
4869
  };
4870
- 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;
4870
+ 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;
4871
4871
 
4872
4872
  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"])));
4873
4873
  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
5876
5876
  var color = _a.color;
5877
5877
  return color;
5878
5878
  });
5879
- 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"])));
5879
+ 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"])));
5880
5880
  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) {
5881
5881
  var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
5882
5882
  return right;
5883
5883
  });
5884
- 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;
5884
+ 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;
5885
5885
 
5886
5886
  var Tooltip = function (_a) {
5887
5887
  var _b;
@@ -5952,7 +5952,7 @@ var SubscriptionHeader$1 = newStyled.div(templateObject_5$y || (templateObject_5
5952
5952
  return theme.colors.pallete.primary.color;
5953
5953
  });
5954
5954
  var BenefitsContainer$1 = newStyled.div(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
5955
- 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"])));
5955
+ 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"])));
5956
5956
  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"])));
5957
5957
  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"])));
5958
5958
  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
5962
5962
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
5963
5963
  });
5964
5964
  var Container$16 = newStyled.div(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""])));
5965
- 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;
5965
+ 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;
5966
5966
 
5967
5967
  var radioIds$1 = {
5968
5968
  oneTime: {
@@ -6062,7 +6062,7 @@ var SubscriptionHeader = newStyled.div(templateObject_6$t || (templateObject_6$t
6062
6062
  var theme = _a.theme;
6063
6063
  return theme.colors.pallete.primary.color;
6064
6064
  });
6065
- var BenefitsContainer = newStyled.div(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
6065
+ var BenefitsContainer = newStyled.div(templateObject_7$l || (templateObject_7$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
6066
6066
  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"])));
6067
6067
  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"])));
6068
6068
  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 =
6075
6075
  var theme = _a.theme;
6076
6076
  return theme.component.autoship.tooltip.margin;
6077
6077
  });
6078
- 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;
6078
+ 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;
6079
6079
 
6080
6080
  var radioIds = {
6081
6081
  oneTime: {
@@ -6425,14 +6425,14 @@ var DollarPart = newStyled.span(templateObject_3$R || (templateObject_3$R = __ma
6425
6425
  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"])));
6426
6426
  var MobileDollarPart = newStyled(DollarPart)(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
6427
6427
  var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
6428
- var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
6428
+ var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$k || (templateObject_7$k = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
6429
6429
  var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
6430
6430
  var ClubPriceLabel = function (_a) {
6431
6431
  var clubPrice = _a.clubPrice;
6432
6432
  var isMobile = useWindowDimensions().isMobile;
6433
6433
  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));
6434
6434
  };
6435
- 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;
6435
+ 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;
6436
6436
 
6437
6437
  var Spacing = function (_a) {
6438
6438
  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
6666
6666
  var style = _a.style;
6667
6667
  return style.width;
6668
6668
  });
6669
- var MarginTopContainer$1 = newStyled.div(templateObject_7$i || (templateObject_7$i = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
6669
+ var MarginTopContainer$1 = newStyled.div(templateObject_7$j || (templateObject_7$j = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
6670
6670
  var ProductItemMobile = function (_a) {
6671
6671
  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 ? {
6672
6672
  display: false,
@@ -6725,7 +6725,7 @@ var ProductItemMobile = function (_a) {
6725
6725
  };
6726
6726
  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));
6727
6727
  };
6728
- var templateObject_1$1n, templateObject_2$11, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$q, templateObject_7$i;
6728
+ var templateObject_1$1n, templateObject_2$11, templateObject_3$O, templateObject_4$D, templateObject_5$t, templateObject_6$q, templateObject_7$j;
6729
6729
 
6730
6730
  var ImageContainer$5 = newStyled.div(function (_a) {
6731
6731
  var width = _a.width, height = _a.height;
@@ -6769,7 +6769,7 @@ var TopTagContainer$7 = newStyled.div(templateObject_5$s || (templateObject_5$s
6769
6769
  return style.width;
6770
6770
  });
6771
6771
  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"])));
6772
- 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) {
6772
+ 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) {
6773
6773
  var style = _a.style;
6774
6774
  return style.width;
6775
6775
  });
@@ -6824,7 +6824,7 @@ var ProductItemTK = function (_a) {
6824
6824
  marginTop: hasSpacing ? undefined : textContainerGap,
6825
6825
  } }, { 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));
6826
6826
  };
6827
- 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;
6827
+ 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;
6828
6828
 
6829
6829
  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"])));
6830
6830
  function withProductGrid(ProductItemComponent, data) {
@@ -7172,7 +7172,7 @@ var SectionTitle = newStyled.h1(templateObject_6$n || (templateObject_6$n = __ma
7172
7172
  var theme = _a.theme;
7173
7173
  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 ");
7174
7174
  });
7175
- 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) {
7175
+ 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) {
7176
7176
  var theme = _a.theme;
7177
7177
  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 ");
7178
7178
  }, function (_a) {
@@ -7189,7 +7189,7 @@ var DeliveryDetails = function (_a) {
7189
7189
  var theme = useTheme();
7190
7190
  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));
7191
7191
  };
7192
- 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;
7192
+ 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;
7193
7193
 
7194
7194
  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) {
7195
7195
  var top = _a.top;
@@ -7363,11 +7363,11 @@ var MobileHeader = newStyled.div(templateObject_3$E || (templateObject_3$E = __m
7363
7363
  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"])));
7364
7364
  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; });
7365
7365
  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; });
7366
- 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'); });
7366
+ 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'); });
7367
7367
  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; });
7368
7368
  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"])));
7369
7369
  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"])));
7370
- 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;
7370
+ 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;
7371
7371
 
7372
7372
  var getStylesBySize$a = function (size, theme) {
7373
7373
  switch (size) {
@@ -11964,9 +11964,9 @@ var Container$P = newStyled.div(templateObject_3$C || (templateObject_3$C = __ma
11964
11964
  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"])));
11965
11965
  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"])));
11966
11966
  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"])));
11967
- 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"])));
11967
+ 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"])));
11968
11968
  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"])));
11969
- 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;
11969
+ 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;
11970
11970
 
11971
11971
  var ImagePreviewList = function (_a) {
11972
11972
  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
14515
14515
  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"])));
14516
14516
  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"])));
14517
14517
  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"])));
14518
- var Text$2 = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
14518
+ var Text$2 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
14519
14519
  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"])));
14520
14520
  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"])));
14521
14521
  var settings = {
@@ -14575,7 +14575,7 @@ var ImageProductSlideV3 = function (_a) {
14575
14575
  } }, 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));
14576
14576
  }) }), void 0) }), void 0)] }, void 0));
14577
14577
  };
14578
- 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;
14578
+ 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;
14579
14579
 
14580
14580
  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"])));
14581
14581
  var ProductGalleryMobileV3 = function (_a) {
@@ -14722,12 +14722,16 @@ var transformStyle = function (_a) {
14722
14722
  return opened
14723
14723
  ? 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%)');
14724
14724
  };
14725
- 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"], ["\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"])), 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'); }, mediaQueries({
14726
- minWidth: ['90%', 'var(--component-modal-minWidth)'],
14727
- }), visibleStyle, transformStyle);
14728
- 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);
14725
+ 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) {
14726
+ var width = _a.width;
14727
+ return width
14728
+ ? css(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
14729
+ minWidth: ['90%', 'var(--component-modal-minWidth)'],
14730
+ });
14731
+ }, visibleStyle, transformStyle);
14732
+ 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);
14729
14733
  var Modal = function (_a) {
14730
- 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;
14734
+ 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;
14731
14735
  var _d = useModal(id), opened = _d.opened, close = _d.close;
14732
14736
  var onDismiss = function () {
14733
14737
  if (!dismissable) {
@@ -14735,7 +14739,7 @@ var Modal = function (_a) {
14735
14739
  }
14736
14740
  close();
14737
14741
  };
14738
- return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$y, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: function () {
14742
+ return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$y, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: function () {
14739
14743
  onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
14740
14744
  onDismiss();
14741
14745
  } }, void 0)] }), void 0));
@@ -14766,7 +14770,7 @@ var useModal = function (id) {
14766
14770
  close: close,
14767
14771
  }); }, [close, open, opened]);
14768
14772
  };
14769
- var templateObject_1$I, templateObject_2$y, templateObject_3$s, templateObject_4$m, templateObject_5$f, templateObject_6$e;
14773
+ var templateObject_1$I, templateObject_2$y, templateObject_3$s, templateObject_4$m, templateObject_5$f, templateObject_6$e, templateObject_7$d;
14770
14774
 
14771
14775
  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) {
14772
14776
  var height = _a.height;
@@ -18888,9 +18892,9 @@ var PriceContainer = newStyled.div(templateObject_4$j || (templateObject_4$j = _
18888
18892
  var Quantity = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
18889
18893
  var StyledSpan = newStyled.span(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
18890
18894
  var SimpleOrderItem = function (_a) {
18891
- var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
18895
+ var title = _a.title, className = _a.className, subtitle = _a.subtitle, midElement = _a.midElement, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
18892
18896
  var theme = useTheme();
18893
- return (jsxs$1(Container$s, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
18897
+ return (jsxs$1(Container$s, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$3, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), midElement, jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
18894
18898
  };
18895
18899
  var templateObject_1$B, templateObject_2$t, templateObject_3$p, templateObject_4$j, templateObject_5$d, templateObject_6$c;
18896
18900