@trafilea/afrodita-components 6.39.2 → 6.39.3

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 +3 -1
  2. package/build/index.esm.js +46 -41
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +46 -41
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.d.ts CHANGED
@@ -2729,6 +2729,8 @@ declare const SizeDropdown: react__default.FC<DropdownProps>;
2729
2729
  interface DialogPositionProps {
2730
2730
  top: string;
2731
2731
  right: string;
2732
+ containerPosRight?: string;
2733
+ containerPosTop?: string;
2732
2734
  }
2733
2735
  interface DialogDropdownProps {
2734
2736
  options?: {
@@ -2742,7 +2744,7 @@ interface DialogDropdownProps {
2742
2744
  dialogContainerText?: string;
2743
2745
  className?: string;
2744
2746
  }
2745
- declare const DropdownDialog: ({ options, position: { top, right }, style, dialogDropdownContainerStyle, dialogDropdownListItemStyle, dialogContainerText, className, }: DialogDropdownProps) => JSX.Element;
2747
+ declare const DropdownDialog: ({ options, position: { top, right, containerPosRight, containerPosTop }, style, dialogDropdownContainerStyle, dialogDropdownListItemStyle, dialogContainerText, className, }: DialogDropdownProps) => JSX.Element;
2746
2748
 
2747
2749
  declare type FilteringDropdownProps<T> = {
2748
2750
  options: DropdownOption<T>[];
package/build/index.esm.js CHANGED
@@ -4780,7 +4780,7 @@ var TAGS = {
4780
4780
  hero2: newStyled.h2(templateObject_2$1z || (templateObject_2$1z = __makeTemplateObject([""], [""]))),
4781
4781
  hero3: newStyled.h3(templateObject_3$1e || (templateObject_3$1e = __makeTemplateObject([""], [""]))),
4782
4782
  display1: newStyled.h1(templateObject_4$$ || (templateObject_4$$ = __makeTemplateObject([""], [""]))),
4783
- display2: newStyled.h2(templateObject_5$L || (templateObject_5$L = __makeTemplateObject([""], [""]))),
4783
+ display2: newStyled.h2(templateObject_5$M || (templateObject_5$M = __makeTemplateObject([""], [""]))),
4784
4784
  display3: newStyled.h3(templateObject_6$G || (templateObject_6$G = __makeTemplateObject([""], [""]))),
4785
4785
  heading1: newStyled.h1(templateObject_7$x || (templateObject_7$x = __makeTemplateObject([""], [""]))),
4786
4786
  heading2: newStyled.h2(templateObject_8$p || (templateObject_8$p = __makeTemplateObject([""], [""]))),
@@ -4916,13 +4916,13 @@ var DEFAULTS = {
4916
4916
  size: 'regular',
4917
4917
  },
4918
4918
  };
4919
- var templateObject_1$28, templateObject_2$1z, templateObject_3$1e, templateObject_4$$, templateObject_5$L, templateObject_6$G, templateObject_7$x, templateObject_8$p, templateObject_9$e, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
4919
+ var templateObject_1$28, templateObject_2$1z, templateObject_3$1e, templateObject_4$$, templateObject_5$M, templateObject_6$G, templateObject_7$x, templateObject_8$p, templateObject_9$e, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$5, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
4920
4920
 
4921
4921
  var Container$1m = newStyled.div(templateObject_1$27 || (templateObject_1$27 = __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"])));
4922
4922
  var Card$4 = newStyled.div(templateObject_2$1y || (templateObject_2$1y = __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"])));
4923
4923
  var Tag$2 = newStyled.div(templateObject_3$1d || (templateObject_3$1d = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
4924
4924
  var Label$7 = newStyled.div(templateObject_4$_ || (templateObject_4$_ = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
4925
- var Check$1 = newStyled.div(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
4925
+ var Check$1 = newStyled.div(templateObject_5$L || (templateObject_5$L = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
4926
4926
  var DiscountContainer$1 = newStyled.div(templateObject_6$F || (templateObject_6$F = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
4927
4927
  var PackSelectorV2 = function (_a) {
4928
4928
  var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
@@ -4948,7 +4948,7 @@ var PackCard$1 = function (_a) {
4948
4948
  currency: currencyCode || 'USD',
4949
4949
  }), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
4950
4950
  };
4951
- var templateObject_1$27, templateObject_2$1y, templateObject_3$1d, templateObject_4$_, templateObject_5$K, templateObject_6$F;
4951
+ var templateObject_1$27, templateObject_2$1y, templateObject_3$1d, templateObject_4$_, templateObject_5$L, templateObject_6$F;
4952
4952
 
4953
4953
  var Container$1l = newStyled.div(templateObject_1$26 || (templateObject_1$26 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
4954
4954
  var DropContainer = newStyled.div(templateObject_2$1x || (templateObject_2$1x = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
@@ -5244,8 +5244,8 @@ var Container$1i = newStyled.div(templateObject_1$21 || (templateObject_1$21 = _
5244
5244
  var FlexCentered = newStyled.div(templateObject_2$1u || (templateObject_2$1u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 90%;\n height: 100%;\n"])));
5245
5245
  var LeftSide = newStyled.div(templateObject_3$1b || (templateObject_3$1b = __makeTemplateObject(["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"], ["\n width: 110px;\n height: 100%;\n flex-shrink: 0;\n resize: vertical;\n"])));
5246
5246
  var RightSide = newStyled.div(templateObject_4$Z || (templateObject_4$Z = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n align-items: center;\n height: 100%;\n"])));
5247
- var FlexStart = newStyled.div(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
5248
- var templateObject_1$21, templateObject_2$1u, templateObject_3$1b, templateObject_4$Z, templateObject_5$J;
5247
+ var FlexStart = newStyled.div(templateObject_5$K || (templateObject_5$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
5248
+ var templateObject_1$21, templateObject_2$1u, templateObject_3$1b, templateObject_4$Z, templateObject_5$K;
5249
5249
 
5250
5250
  var CouponCard = function (_a) {
5251
5251
  var image = _a.image, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b, onClickRedeemOfferHandler = _a.onClickRedeemOfferHandler, onClickHandler = _a.onClickHandler;
@@ -6013,7 +6013,7 @@ var TooltipText = newStyled.div(templateObject_4$X || (templateObject_4$X = __ma
6013
6013
  var color = _a.color;
6014
6014
  return color;
6015
6015
  });
6016
- var TopSection = newStyled.div(templateObject_5$I || (templateObject_5$I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
6016
+ var TopSection = newStyled.div(templateObject_5$J || (templateObject_5$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
6017
6017
  var Title$b = newStyled.h1(templateObject_6$E || (templateObject_6$E = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
6018
6018
  var color = _a.color;
6019
6019
  return color;
@@ -6023,7 +6023,7 @@ var CloseToolTip = newStyled.button(templateObject_8$o || (templateObject_8$o =
6023
6023
  var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
6024
6024
  return right;
6025
6025
  });
6026
- var templateObject_1$1W, templateObject_2$1p, templateObject_3$18, templateObject_4$X, templateObject_5$I, templateObject_6$E, templateObject_7$w, templateObject_8$o;
6026
+ var templateObject_1$1W, templateObject_2$1p, templateObject_3$18, templateObject_4$X, templateObject_5$J, templateObject_6$E, templateObject_7$w, templateObject_8$o;
6027
6027
 
6028
6028
  var Tooltip = function (_a) {
6029
6029
  var _b;
@@ -6086,7 +6086,7 @@ var SinglePurchaseContainer$3 = newStyled(ContainerBase$3)(templateObject_3$17 |
6086
6086
  return (onClick ? 'cursor: pointer;' : '');
6087
6087
  });
6088
6088
  var SubscriptionContainer$3 = newStyled(ContainerBase$3)(templateObject_4$W || (templateObject_4$W = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
6089
- var SubscriptionHeader$3 = newStyled.div(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
6089
+ var SubscriptionHeader$3 = newStyled.div(templateObject_5$I || (templateObject_5$I = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
6090
6090
  var theme = _a.theme;
6091
6091
  return theme.colors.shades[200].color;
6092
6092
  }, function (_a) {
@@ -6104,7 +6104,7 @@ var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_12$4 || (templateOb
6104
6104
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
6105
6105
  });
6106
6106
  var Container$1e = newStyled.div(templateObject_13$4 || (templateObject_13$4 = __makeTemplateObject([""], [""])));
6107
- var templateObject_1$1V, templateObject_2$1o, templateObject_3$17, templateObject_4$W, templateObject_5$H, templateObject_6$D, templateObject_7$v, templateObject_8$n, templateObject_9$d, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
6107
+ var templateObject_1$1V, templateObject_2$1o, templateObject_3$17, templateObject_4$W, templateObject_5$I, templateObject_6$D, templateObject_7$v, templateObject_8$n, templateObject_9$d, templateObject_10$b, templateObject_11$7, templateObject_12$4, templateObject_13$4;
6108
6108
 
6109
6109
  var radioIds$2 = {
6110
6110
  oneTime: {
@@ -6196,7 +6196,7 @@ var SinglePurchaseContainer$2 = newStyled(ContainerBase$2)(templateObject_4$V ||
6196
6196
  var onClick = _a.onClick;
6197
6197
  return (onClick ? 'cursor: pointer;' : '');
6198
6198
  });
6199
- var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
6199
+ var SubscriptionContainer$2 = newStyled(ContainerBase$2)(templateObject_5$H || (templateObject_5$H = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
6200
6200
  var SubscriptionHeader$2 = newStyled.div(templateObject_6$C || (templateObject_6$C = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
6201
6201
  var theme = _a.theme;
6202
6202
  return theme.colors.shades[200].color;
@@ -6217,7 +6217,7 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$3 || (templateObject_13$3
6217
6217
  var theme = _a.theme;
6218
6218
  return theme.component.autoship.tooltip.margin;
6219
6219
  });
6220
- var templateObject_1$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V, templateObject_5$G, templateObject_6$C, templateObject_7$u, templateObject_8$m, templateObject_9$c, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
6220
+ var templateObject_1$1U, templateObject_2$1n, templateObject_3$16, templateObject_4$V, templateObject_5$H, templateObject_6$C, templateObject_7$u, templateObject_8$m, templateObject_9$c, templateObject_10$a, templateObject_11$6, templateObject_12$3, templateObject_13$3;
6221
6221
 
6222
6222
  var radioIds$1 = {
6223
6223
  oneTime: {
@@ -6300,9 +6300,9 @@ var CustomerDetails = newStyled.div(templateObject_1$1T || (templateObject_1$1T
6300
6300
  var CustomerInfo = newStyled.div(templateObject_2$1m || (templateObject_2$1m = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
6301
6301
  var Name = newStyled.h4(templateObject_3$15 || (templateObject_3$15 = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
6302
6302
  var StarIconContainer = newStyled.div(templateObject_4$U || (templateObject_4$U = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
6303
- var Description$2 = newStyled.p(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
6303
+ var Description$2 = newStyled.p(templateObject_5$G || (templateObject_5$G = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
6304
6304
  var ReviewDays = newStyled.span(templateObject_6$B || (templateObject_6$B = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
6305
- var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$F, templateObject_6$B;
6305
+ var templateObject_1$1T, templateObject_2$1m, templateObject_3$15, templateObject_4$U, templateObject_5$G, templateObject_6$B;
6306
6306
 
6307
6307
  var NameWithStars = function (_a) {
6308
6308
  var name = _a.name, size = _a.size;
@@ -6573,7 +6573,7 @@ var Container$17 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
6573
6573
  var MobileContainer = newStyled(Container$17)(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
6574
6574
  var DollarPart = newStyled.span(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
6575
6575
  var ClubMembersText = newStyled.span(templateObject_4$Q || (templateObject_4$Q = __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"])));
6576
- var MobileDollarPart = newStyled(DollarPart)(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
6576
+ var MobileDollarPart = newStyled(DollarPart)(templateObject_5$F || (templateObject_5$F = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
6577
6577
  var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$A || (templateObject_6$A = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
6578
6578
  var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$t || (templateObject_7$t = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
6579
6579
  var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$l || (templateObject_8$l = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
@@ -6582,7 +6582,7 @@ var ClubPriceLabel = function (_a) {
6582
6582
  var isMobile = useWindowDimensions().isMobile;
6583
6583
  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$17, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
6584
6584
  };
6585
- var templateObject_1$1G, templateObject_2$1h, templateObject_3$10, templateObject_4$Q, templateObject_5$E, templateObject_6$A, templateObject_7$t, templateObject_8$l;
6585
+ var templateObject_1$1G, templateObject_2$1h, templateObject_3$10, templateObject_4$Q, templateObject_5$F, templateObject_6$A, templateObject_7$t, templateObject_8$l;
6586
6586
 
6587
6587
  var Spacing = function (_a) {
6588
6588
  var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
@@ -6610,7 +6610,7 @@ var RegularPriceTagSpan = newStyled.span(templateObject_1$1E || (templateObject_
6610
6610
  var ClubPriceTagSpan = newStyled.span(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
6611
6611
  var PriceContainer$1 = newStyled.span(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
6612
6612
  var PriceContainerV2 = newStyled.span(templateObject_4$O || (templateObject_4$O = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
6613
- var PriceWithTagContainer = newStyled.span(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
6613
+ var PriceWithTagContainer = newStyled.span(templateObject_5$E || (templateObject_5$E = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
6614
6614
  var RegularPriceTag = function () {
6615
6615
  return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
6616
6616
  };
@@ -6664,7 +6664,7 @@ var PriceLabelV4 = function (_a) {
6664
6664
  ? finalPriceArray[0]
6665
6665
  : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, { label: theme.label.member }, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$3, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
6666
6666
  };
6667
- var templateObject_1$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O, templateObject_5$D;
6667
+ var templateObject_1$1E, templateObject_2$1f, templateObject_3$_, templateObject_4$O, templateObject_5$E;
6668
6668
 
6669
6669
  var STARTS_NUMBER = 5;
6670
6670
 
@@ -6904,7 +6904,7 @@ var getStylesBySize$c = function (size) {
6904
6904
  };
6905
6905
  }
6906
6906
  };
6907
- var TopTagContainer$9 = newStyled.div(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
6907
+ var TopTagContainer$9 = newStyled.div(templateObject_5$D || (templateObject_5$D = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
6908
6908
  var style = _a.style;
6909
6909
  return style.width;
6910
6910
  });
@@ -6914,7 +6914,7 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$z || (templateObject_6
6914
6914
  });
6915
6915
  var MarginTopContainer$1 = newStyled.div(templateObject_7$s || (templateObject_7$s = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
6916
6916
  var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$k || (templateObject_8$k = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
6917
- var templateObject_1$1A, templateObject_2$1d, templateObject_3$Z, templateObject_4$N, templateObject_5$C, templateObject_6$z, templateObject_7$s, templateObject_8$k;
6917
+ var templateObject_1$1A, templateObject_2$1d, templateObject_3$Z, templateObject_4$N, templateObject_5$D, templateObject_6$z, templateObject_7$s, templateObject_8$k;
6918
6918
 
6919
6919
  var ProductItemMobile = function (_a) {
6920
6920
  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 ? {
@@ -7018,7 +7018,7 @@ var getStylesBySize$b = function (size) {
7018
7018
  };
7019
7019
  }
7020
7020
  };
7021
- var TopTagContainer$8 = newStyled.div(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
7021
+ var TopTagContainer$8 = newStyled.div(templateObject_5$C || (templateObject_5$C = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
7022
7022
  var style = _a.style;
7023
7023
  return style.width;
7024
7024
  });
@@ -7078,7 +7078,7 @@ var ProductItemTK = function (_a) {
7078
7078
  marginTop: hasSpacing ? undefined : textContainerGap,
7079
7079
  } }, { children: title }), void 0)) : (jsx(Title$7, __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));
7080
7080
  };
7081
- var templateObject_1$1z, templateObject_2$1c, templateObject_3$Y, templateObject_4$M, templateObject_5$B, templateObject_6$y, templateObject_7$r, templateObject_8$j;
7081
+ var templateObject_1$1z, templateObject_2$1c, templateObject_3$Y, templateObject_4$M, templateObject_5$C, templateObject_6$y, templateObject_7$r, templateObject_8$j;
7082
7082
 
7083
7083
  var Container$11 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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"])));
7084
7084
  function withProductGrid(ProductItemComponent, data) {
@@ -7102,7 +7102,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$1x || (templateObject_1$1x
7102
7102
  newStyled(lt.Label)(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
7103
7103
  var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
7104
7104
  var Span = newStyled.span(templateObject_4$L || (templateObject_4$L = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
7105
- var OptionsContainer = newStyled.div(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
7105
+ var OptionsContainer = newStyled.div(templateObject_5$B || (templateObject_5$B = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
7106
7106
  var Label$5 = function (_a) {
7107
7107
  var label = _a.label, values = _a.values;
7108
7108
  return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
@@ -7120,7 +7120,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
7120
7120
  Option: Option,
7121
7121
  OptionsContainer: OptionsContainer,
7122
7122
  });
7123
- var templateObject_1$1x, templateObject_2$1b, templateObject_3$X, templateObject_4$L, templateObject_5$A;
7123
+ var templateObject_1$1x, templateObject_2$1b, templateObject_3$X, templateObject_4$L, templateObject_5$B;
7124
7124
 
7125
7125
  var OneColorSelector = function (_a) {
7126
7126
  var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
@@ -7251,14 +7251,14 @@ var Row$2 = newStyled.div(templateObject_3$W || (templateObject_3$W = __makeTemp
7251
7251
  "\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
7252
7252
  });
7253
7253
  var H5 = newStyled.h5(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
7254
- var H3 = newStyled.h3(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
7254
+ var H3 = newStyled.h3(templateObject_5$A || (templateObject_5$A = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
7255
7255
  var FreeShipping = newStyled.span(templateObject_6$x || (templateObject_6$x = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
7256
7256
  var CrossSellCheckbox = function (_a) {
7257
7257
  var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
7258
7258
  var theme = useTheme();
7259
7259
  return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
7260
7260
  };
7261
- var templateObject_1$1u, templateObject_2$19, templateObject_3$W, templateObject_4$K, templateObject_5$z, templateObject_6$x;
7261
+ var templateObject_1$1u, templateObject_2$19, templateObject_3$W, templateObject_4$K, templateObject_5$A, templateObject_6$x;
7262
7262
 
7263
7263
  var index$1 = /*#__PURE__*/Object.freeze({
7264
7264
  __proto__: null,
@@ -7426,7 +7426,7 @@ var Col = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTempla
7426
7426
  textAlign: ['center', 'inherit'],
7427
7427
  width: ['100%', 'inherit'],
7428
7428
  }));
7429
- var IconContainer$4 = newStyled.div(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
7429
+ var IconContainer$4 = newStyled.div(templateObject_5$z || (templateObject_5$z = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
7430
7430
  marginRight: ['0', '0.438rem'],
7431
7431
  marginBottom: ['10px', '0'],
7432
7432
  width: ['auto', '1.5rem'],
@@ -7454,7 +7454,7 @@ var DeliveryDetails = function (_a) {
7454
7454
  var theme = useTheme();
7455
7455
  return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$6, __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$4, __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$4, __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$4, __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));
7456
7456
  };
7457
- var templateObject_1$1r, templateObject_2$16, templateObject_3$U, templateObject_4$I, templateObject_5$y, templateObject_6$w, templateObject_7$q, templateObject_8$i;
7457
+ var templateObject_1$1r, templateObject_2$16, templateObject_3$U, templateObject_4$I, templateObject_5$z, templateObject_6$w, templateObject_7$q, templateObject_8$i;
7458
7458
 
7459
7459
  var Backdrop = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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) {
7460
7460
  var top = _a.top;
@@ -7521,9 +7521,9 @@ var List = newStyled.ul(templateObject_1$1p || (templateObject_1$1p = __makeTemp
7521
7521
  var Item$2 = newStyled.li(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
7522
7522
  var DropdownWrapper = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
7523
7523
  var ArrowContainer$1 = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
7524
- var StyledDropdown = newStyled.ul(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
7524
+ var StyledDropdown = newStyled.ul(templateObject_5$y || (templateObject_5$y = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
7525
7525
  var DropdownItem = newStyled.li(templateObject_6$v || (templateObject_6$v = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
7526
- var templateObject_1$1p, templateObject_2$14, templateObject_3$T, templateObject_4$H, templateObject_5$x, templateObject_6$v;
7526
+ var templateObject_1$1p, templateObject_2$14, templateObject_3$T, templateObject_4$H, templateObject_5$y, templateObject_6$v;
7527
7527
 
7528
7528
  var DropdownListIcons = function (_a) {
7529
7529
  var items = _a.items;
@@ -7540,9 +7540,9 @@ var DropdownContainer = newStyled.div(templateObject_1$1o || (templateObject_1$1
7540
7540
  var DropdownLabel = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
7541
7541
  var SizeLabel = newStyled.span(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
7542
7542
  var DetailLabel = newStyled.span(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
7543
- var DropdownOptions = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
7543
+ var DropdownOptions = newStyled.div(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
7544
7544
  var DropdownOption = newStyled.div(templateObject_6$u || (templateObject_6$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
7545
- var templateObject_1$1o, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$w, templateObject_6$u;
7545
+ var templateObject_1$1o, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$x, templateObject_6$u;
7546
7546
 
7547
7547
  var SizeDropdown = function (_a) {
7548
7548
  var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
@@ -7566,18 +7566,23 @@ var SizeDropdown = function (_a) {
7566
7566
  };
7567
7567
 
7568
7568
  var DialogDropdownWrapper = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
7569
- var DialogDropdownListContainer = newStyled.ul(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\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\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\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\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
7570
- var DialogDropdownListItem = newStyled.li(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
7571
- var DialogDropdownLink = newStyled.a(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
7569
+ var DialogDropdownWrapper2 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #292929;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: '#292929';\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
7570
+ var DialogDropdownListContainer = newStyled.ul(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\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 overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: ", ";\n right: ", ";\n z-index: 50 !important;\n margin-bottom: 1rem;\n\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 overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) {
7571
+ return props.containerPosTop ? "calc(".concat(props.containerPosTop, ")") : "calc(".concat(props.top, " + 15px)");
7572
+ }, function (props) {
7573
+ return props.containerPosRight ? "calc(".concat(props.containerPosRight, ")") : "calc(".concat(props.right, " - 23px)");
7574
+ });
7575
+ var DialogDropdownListItem = newStyled.li(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
7576
+ var DialogDropdownLink = newStyled.a(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
7572
7577
  var DropdownDialog = function (_a) {
7573
- var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
7578
+ var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, containerPosRight = _b.containerPosRight, containerPosTop = _b.containerPosTop, style = _a.style, dialogDropdownContainerStyle = _a.dialogDropdownContainerStyle, dialogDropdownListItemStyle = _a.dialogDropdownListItemStyle, dialogContainerText = _a.dialogContainerText, className = _a.className;
7574
7579
  var theme = useTheme$1();
7575
- return (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className, "data-testid": "dialogDropdownWrapper" }, { children: jsxs$1(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right, borderRadius: theme.component.dropdown.optionsWrapper.borderRadius, style: dialogDropdownContainerStyle }, { children: [options === null || options === void 0 ? void 0 : options.map(function (_a, idx) {
7576
- var label = _a.label, value = _a.value;
7577
- return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
7578
- }), dialogContainerText && (jsx$1(DialogDropdownListItem, __assign$1({ style: dialogDropdownListItemStyle }, { children: jsx$1(DialogDropdownLink, { children: dialogContainerText }, void 0) }), void 0))] }), void 0) }), void 0));
7580
+ return dialogContainerText ? (jsx$1(DialogDropdownWrapper2, __assign$1({ top: top, right: right, style: style, className: className, "data-testid": "dialogDropdownWrapper" }, { children: jsx$1(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: containerPosTop !== null && containerPosTop !== void 0 ? containerPosTop : top, right: containerPosRight !== null && containerPosRight !== void 0 ? containerPosRight : right, borderRadius: theme.component.dropdown.optionsWrapper.borderRadius, style: dialogDropdownContainerStyle }, { children: jsx$1(DialogDropdownListItem, __assign$1({ style: dialogDropdownListItemStyle }, { children: dialogContainerText }), void 0) }), void 0) }), void 0)) : (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className, "data-testid": "dialogDropdownWrapper" }, { children: jsx$1(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right, borderRadius: theme.component.dropdown.optionsWrapper.borderRadius, style: dialogDropdownContainerStyle }, { children: options === null || options === void 0 ? void 0 : options.map(function (_a, idx) {
7581
+ var label = _a.label, value = _a.value;
7582
+ return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
7583
+ }) }), void 0) }), void 0));
7579
7584
  };
7580
- var templateObject_1$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F;
7585
+ var templateObject_1$1n, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$w;
7581
7586
 
7582
7587
  function FilteringDropdown(_a) {
7583
7588
  var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;