@trafilea/afrodita-components 5.0.0-beta.16 → 5.0.0-beta.19

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 +20 -11
  2. package/build/index.esm.js +66 -52
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +66 -52
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.d.ts CHANGED
@@ -33,6 +33,7 @@ interface IconProps {
33
33
  height?: number;
34
34
  fill?: string;
35
35
  title?: string;
36
+ testId?: string;
36
37
  }
37
38
  declare type ButtonType = 'button' | 'submit' | 'reset';
38
39
  interface CTAProps {
@@ -191,9 +192,9 @@ declare namespace Other {
191
192
 
192
193
  declare const ChevronDown: ({ height, width, fill }: IconProps) => JSX.Element;
193
194
 
194
- declare const ChevronLeft: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
195
+ declare const ChevronLeft: ({ height, width, fill, opacity, testId }: IconWithOpacityProps) => JSX.Element;
195
196
 
196
- declare const ChevronRight: ({ height, width, fill, opacity }: IconWithOpacityProps) => JSX.Element;
197
+ declare const ChevronRight: ({ height, width, fill, opacity, testId }: IconWithOpacityProps) => JSX.Element;
197
198
 
198
199
  declare const ChevronRightVariant: ({ height, width, fill }: IconProps) => JSX.Element;
199
200
 
@@ -342,7 +343,7 @@ interface IconWrapperProps {
342
343
  viewBoxX: number;
343
344
  viewBoxY: number;
344
345
  children: React.ReactNode;
345
- testid?: string;
346
+ testId?: string;
346
347
  fill?: string;
347
348
  }
348
349
 
@@ -425,7 +426,7 @@ declare namespace Emoji {
425
426
  };
426
427
  }
427
428
 
428
- declare type IconType = ({ height, width, fill }: IconProps) => JSX.Element;
429
+ declare type IconType = ({ height, width, fill, testId }: IconProps) => JSX.Element;
429
430
  declare const Icon: {
430
431
  Custom: typeof Custom;
431
432
  Arrows: typeof Arrows;
@@ -554,8 +555,9 @@ interface PriceLabelProps {
554
555
  color?: string;
555
556
  size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
556
557
  discount?: DiscountTagProps;
558
+ testId?: string;
557
559
  }
558
- declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, size, }: PriceLabelProps) => JSX.Element;
560
+ declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, size, }: PriceLabelProps) => JSX.Element;
559
561
 
560
562
  interface ColorPickerProps {
561
563
  options: ColorPickerOption[];
@@ -1105,10 +1107,11 @@ interface MinimalisticProps {
1105
1107
  discount: number;
1106
1108
  offText: string;
1107
1109
  widthAuto?: boolean;
1110
+ testId?: string;
1108
1111
  }
1109
1112
 
1110
1113
  declare const Bundle: {
1111
- Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, }: MinimalisticProps) => JSX.Element;
1114
+ Minimalistic: ({ backgroundColor, borderColor, originalPrice, price, savingPrice, getMorePayLessText, youAreSavingText, getQtyForText, discount, offText, widthAuto, testId, }: MinimalisticProps) => JSX.Element;
1112
1115
  Simple: ({ title, freeShippingText, price, anyQtyForText, backgroundColor, widthAuto, }: SimpleProps) => JSX.Element;
1113
1116
  };
1114
1117
 
@@ -1181,6 +1184,7 @@ interface BaseCTAProps {
1181
1184
  size?: ComponentSize;
1182
1185
  text: string;
1183
1186
  type?: ButtonType;
1187
+ inline?: boolean;
1184
1188
  testId?: string;
1185
1189
  }
1186
1190
 
@@ -1571,6 +1575,7 @@ declare type TextTagProps = {
1571
1575
  declare type TextProps = AriaAttributes & {
1572
1576
  style?: CSSProperties;
1573
1577
  className?: string;
1578
+ testId?: string;
1574
1579
  } & (TextHeroProps | TextDisplayProps | TextHeadingProps | TextBodyProps | TextLinkProps | TextButtonProps | TextPricingProps | TextLabelProps | TextTagProps);
1575
1580
 
1576
1581
  interface SearchBarProps {
@@ -1616,12 +1621,14 @@ declare type ModalProps = {
1616
1621
  dismissable?: boolean;
1617
1622
  maxFullScreen?: boolean;
1618
1623
  };
1624
+ interface ContainerProps {
1625
+ maxFullScreen: boolean;
1626
+ opened?: boolean;
1627
+ }
1619
1628
  declare const Overlay: _emotion_styled.StyledComponent<{
1620
1629
  theme?: _emotion_react.Theme | undefined;
1621
1630
  as?: React.ElementType<any> | undefined;
1622
- } & {
1623
- opened?: boolean | undefined;
1624
- }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
1631
+ } & Pick<ContainerProps, "opened">, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
1625
1632
  declare const Modal: FC<ModalProps>;
1626
1633
  declare const modalEvent: (id: string, detail: Omit<Events['modal'], 'id'>) => void;
1627
1634
  declare const useModalEvent: (id: string, cb: (event: CustomEvent<Events['modal']>) => void) => void;
@@ -1668,8 +1675,9 @@ declare type QuantityPickerPropsUncontrolled = {
1668
1675
  declare type QuantityPickerProps = {
1669
1676
  initialValue?: number;
1670
1677
  maxValue?: number;
1678
+ testId?: string;
1671
1679
  } & (QuantityPickerPropsControlled | QuantityPickerPropsUncontrolled);
1672
- declare const QuantityPicker: ({ initialValue, maxValue, value, onChange, }: QuantityPickerProps) => JSX.Element;
1680
+ declare const QuantityPicker: ({ initialValue, maxValue, value, testId, onChange, }: QuantityPickerProps) => JSX.Element;
1673
1681
 
1674
1682
  declare type SpacingProps = {
1675
1683
  size: number;
@@ -1708,8 +1716,9 @@ interface FiltersProps {
1708
1716
  applyText: string;
1709
1717
  mobileBackArrowClick: () => void;
1710
1718
  mobileApplyButtonClick: () => void;
1719
+ onResetValues: () => void;
1711
1720
  }
1712
- declare const Filters: ({ filters, onChange, tagsColor, filterByText, clearAllText, isMobile, filtersSelectText, applyText, mobileApplyButtonClick, mobileBackArrowClick, }: FiltersProps) => JSX.Element;
1721
+ declare const Filters: ({ filters, onChange, tagsColor, filterByText, clearAllText, isMobile, filtersSelectText, applyText, mobileApplyButtonClick, mobileBackArrowClick, onResetValues, }: FiltersProps) => JSX.Element;
1713
1722
 
1714
1723
  interface SearchNavigationProps {
1715
1724
  returnText?: string;
package/build/index.esm.js CHANGED
@@ -57,8 +57,8 @@ function __makeTemplateObject(cooked, raw) {
57
57
  }
58
58
 
59
59
  var IconWrapper = function (_a) {
60
- var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, viewBoxX = _a.viewBoxX, viewBoxY = _a.viewBoxY, children = _a.children, testid = _a.testid, fill = _a.fill;
61
- return (jsxs$1("svg", __assign$1({ style: { display: 'inline-block', verticalAlign: 'middle' }, width: width ? "".concat(width, "rem") : '100%', height: height ? "".concat(height, "rem") : width ? "".concat(width, "rem") : '100%', viewBox: "0 0 ".concat(viewBoxX, " ").concat(viewBoxY), xmlns: "http://www.w3.org/2000/svg", "data-testid": testid ? testid : 'IconWrapper', fill: fill }, { children: [jsxs$1("title", { children: [title, " icon"] }, void 0), children] }), void 0));
60
+ var height = _a.height, _b = _a.width, width = _b === void 0 ? 1 : _b, title = _a.title, viewBoxX = _a.viewBoxX, viewBoxY = _a.viewBoxY, children = _a.children, testId = _a.testId, fill = _a.fill;
61
+ return (jsxs$1("svg", __assign$1({ style: { display: 'inline-block', verticalAlign: 'middle' }, width: width ? "".concat(width, "rem") : '100%', height: height ? "".concat(height, "rem") : width ? "".concat(width, "rem") : '100%', viewBox: "0 0 ".concat(viewBoxX, " ").concat(viewBoxY), xmlns: "http://www.w3.org/2000/svg", "data-testid": testId ? testId : 'IconWrapper', fill: fill }, { children: [jsxs$1("title", { children: [title, " icon"] }, void 0), children] }), void 0));
62
62
  };
63
63
 
64
64
  var SixtyDaysGuarantee = function (_a) {
@@ -94,7 +94,7 @@ var LightExclamation = function (_a) {
94
94
 
95
95
  var LightCheck = function (_a) {
96
96
  var height = _a.height, width = _a.width, fill = _a.fill, _b = _a.strokeWidth, strokeWidth = _b === void 0 ? 5 : _b;
97
- return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 110, viewBoxY: 110, title: "check", fill: "none", testid: "LightCheck" }, { children: [jsx$1("circle", { cx: "54.9999", cy: "55", r: "47.9167", stroke: fill, strokeWidth: strokeWidth }, void 0), jsx$1("path", { d: "M72.2976 42.0884L46.957 67.5762L37.9226 58.186C36.6005 57.0681 34.397 57.0681 33.0748 58.186C31.7527 59.3039 31.7527 61.5396 33.0748 62.8811L44.7535 74.7307C45.4146 75.4014 46.296 75.625 47.1774 75.625C48.0588 75.625 48.9402 75.4014 49.3809 74.7307L76.925 46.7835C78.2471 45.4421 78.2471 43.4299 76.925 42.0884C75.6029 40.9705 73.6197 40.9705 72.2976 42.0884Z", fill: fill }, void 0)] }), void 0));
97
+ return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 110, viewBoxY: 110, title: "check", fill: "none", testId: "LightCheck" }, { children: [jsx$1("circle", { cx: "54.9999", cy: "55", r: "47.9167", stroke: fill, strokeWidth: strokeWidth }, void 0), jsx$1("path", { d: "M72.2976 42.0884L46.957 67.5762L37.9226 58.186C36.6005 57.0681 34.397 57.0681 33.0748 58.186C31.7527 59.3039 31.7527 61.5396 33.0748 62.8811L44.7535 74.7307C45.4146 75.4014 46.296 75.625 47.1774 75.625C48.0588 75.625 48.9402 75.4014 49.3809 74.7307L76.925 46.7835C78.2471 45.4421 78.2471 43.4299 76.925 42.0884C75.6029 40.9705 73.6197 40.9705 72.2976 42.0884Z", fill: fill }, void 0)] }), void 0));
98
98
  };
99
99
 
100
100
  var Question = function (_a) {
@@ -130,7 +130,7 @@ var FitPredictor$1 = function (_a) {
130
130
 
131
131
  var Loading = function (_a) {
132
132
  var height = _a.height, width = _a.width, fill = _a.fill, backgroundColor = _a.backgroundColor;
133
- return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 100, viewBoxY: 100, title: "loading", testid: "Loading" }, { children: [jsx$1("mask", __assign$1({ id: "loading-mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "100" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100ZM50 95C74.8528 95 95 74.8528 95 50C95 25.1472 74.8528 5 50 5C25.1472 5 5 25.1472 5 50C5 74.8528 25.1472 95 50 95Z" }, void 0) }), void 0), jsxs$1("g", __assign$1({ mask: "url(#loading-mask0)" }, { children: [jsx$1("rect", { width: "100", height: "100", fill: backgroundColor }, void 0), jsx$1("rect", { x: "50", width: "50", height: "50", fill: fill }, void 0)] }), void 0)] }), void 0));
133
+ return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 100, viewBoxY: 100, title: "loading", testId: "Loading" }, { children: [jsx$1("mask", __assign$1({ id: "loading-mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "100", height: "100" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M50 100C77.6142 100 100 77.6142 100 50C100 22.3858 77.6142 0 50 0C22.3858 0 0 22.3858 0 50C0 77.6142 22.3858 100 50 100ZM50 95C74.8528 95 95 74.8528 95 50C95 25.1472 74.8528 5 50 5C25.1472 5 5 25.1472 5 50C5 74.8528 25.1472 95 50 95Z" }, void 0) }), void 0), jsxs$1("g", __assign$1({ mask: "url(#loading-mask0)" }, { children: [jsx$1("rect", { width: "100", height: "100", fill: backgroundColor }, void 0), jsx$1("rect", { x: "50", width: "50", height: "50", fill: fill }, void 0)] }), void 0)] }), void 0));
134
134
  };
135
135
 
136
136
  var Shapermint = function (_a) {
@@ -157,13 +157,13 @@ var ChevronDown = function (_a) {
157
157
  };
158
158
 
159
159
  var ChevronLeft = function (_a) {
160
- var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity;
161
- return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron left" }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("path", { d: "M15.8577 33.3343C16.7726 34.2219 18.2973 34.2219 19.2122 33.3343C20.1271 32.4467 20.1271 30.9674 19.2122 30.0798C15.5527 26.5294 11.8933 23.0776 8.2338 19.5272C8.2338 19.4286 5.79416 17.2589 5.79416 17.1603C5.79416 17.0616 8.33545 14.7933 8.33545 14.6947C11.9949 11.1443 15.6544 7.59391 19.3139 3.94489C20.2287 3.05729 20.2287 1.57795 19.3139 0.690353C18.8056 0.197243 18.1957 0 17.5858 0C16.9759 0 16.3659 0.197243 15.8577 0.690353L0.711563 15.3851C0.304956 15.7795 0 16.3713 0 17.0616C0 17.6534 0.304956 18.2451 0.711563 18.7382L15.8577 33.3343Z", fill: fill }, void 0) }), void 0) }), void 0));
160
+ var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
161
+ return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron left", testId: testId }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("path", { d: "M15.8577 33.3343C16.7726 34.2219 18.2973 34.2219 19.2122 33.3343C20.1271 32.4467 20.1271 30.9674 19.2122 30.0798C15.5527 26.5294 11.8933 23.0776 8.2338 19.5272C8.2338 19.4286 5.79416 17.2589 5.79416 17.1603C5.79416 17.0616 8.33545 14.7933 8.33545 14.6947C11.9949 11.1443 15.6544 7.59391 19.3139 3.94489C20.2287 3.05729 20.2287 1.57795 19.3139 0.690353C18.8056 0.197243 18.1957 0 17.5858 0C16.9759 0 16.3659 0.197243 15.8577 0.690353L0.711563 15.3851C0.304956 15.7795 0 16.3713 0 17.0616C0 17.6534 0.304956 18.2451 0.711563 18.7382L15.8577 33.3343Z", fill: fill }, void 0) }), void 0) }), void 0));
162
162
  };
163
163
 
164
164
  var ChevronRight = function (_a) {
165
- var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity;
166
- return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron right" }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("path", { d: "M4.14231 0.6657C3.22745 -0.2219 1.70267 -0.2219 0.787802 0.6657C-0.127065 1.5533 -0.127065 3.03263 0.787802 3.92023C4.44727 7.47063 8.10673 10.9224 11.7662 14.4728C11.7662 14.5714 14.2058 16.7411 14.2058 16.8397C14.2058 16.9384 11.6645 19.2067 11.6645 19.3053C8.00508 22.8557 4.34562 26.4061 0.68615 30.0551C-0.228717 30.9427 -0.228717 32.422 0.68615 33.3096C1.19441 33.8028 1.80432 34 2.41423 34C3.02414 34 3.63405 33.8028 4.14231 33.3096L19.2884 18.6149C19.695 18.2205 20 17.6287 20 16.9384C20 16.3466 19.695 15.7549 19.2884 15.2618L4.14231 0.6657Z", fill: fill }, void 0) }), void 0) }), void 0));
165
+ var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
166
+ return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 20, viewBoxY: 34, title: "chevron right", testId: testId }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("path", { d: "M4.14231 0.6657C3.22745 -0.2219 1.70267 -0.2219 0.787802 0.6657C-0.127065 1.5533 -0.127065 3.03263 0.787802 3.92023C4.44727 7.47063 8.10673 10.9224 11.7662 14.4728C11.7662 14.5714 14.2058 16.7411 14.2058 16.8397C14.2058 16.9384 11.6645 19.2067 11.6645 19.3053C8.00508 22.8557 4.34562 26.4061 0.68615 30.0551C-0.228717 30.9427 -0.228717 32.422 0.68615 33.3096C1.19441 33.8028 1.80432 34 2.41423 34C3.02414 34 3.63405 33.8028 4.14231 33.3096L19.2884 18.6149C19.695 18.2205 20 17.6287 20 16.9384C20 16.3466 19.695 15.7549 19.2884 15.2618L4.14231 0.6657Z", fill: fill }, void 0) }), void 0) }), void 0));
167
167
  };
168
168
 
169
169
  var ChevronRightVariant = function (_a) {
@@ -224,17 +224,17 @@ var Rule = function (_a) {
224
224
 
225
225
  var Star = function (_a) {
226
226
  var height = _a.height, width = _a.width, fill = _a.fill;
227
- return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star", testid: "star" }, { children: jsx$1("path", { d: "M16.9615 1.2523L12.3234 10.5605L1.9462 12.058C0.0852673 12.3251 -0.660526 14.596 0.689004 15.8966L8.19665 23.1379L6.42096 33.3671C6.10133 35.2161 8.0688 36.6011 9.71665 35.7363L19 30.9064L28.2833 35.7363C29.9312 36.594 31.8987 35.2161 31.579 33.3671L29.8033 23.1379L37.311 15.8966C38.6605 14.596 37.9147 12.3251 36.0538 12.058L25.6766 10.5605L21.0385 1.2523C20.2075 -0.406871 17.7996 -0.427962 16.9615 1.2523Z", fill: fill }, void 0) }), void 0));
227
+ return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star", testId: "star" }, { children: jsx$1("path", { d: "M16.9615 1.2523L12.3234 10.5605L1.9462 12.058C0.0852673 12.3251 -0.660526 14.596 0.689004 15.8966L8.19665 23.1379L6.42096 33.3671C6.10133 35.2161 8.0688 36.6011 9.71665 35.7363L19 30.9064L28.2833 35.7363C29.9312 36.594 31.8987 35.2161 31.579 33.3671L29.8033 23.1379L37.311 15.8966C38.6605 14.596 37.9147 12.3251 36.0538 12.058L25.6766 10.5605L21.0385 1.2523C20.2075 -0.406871 17.7996 -0.427962 16.9615 1.2523Z", fill: fill }, void 0) }), void 0));
228
228
  };
229
229
 
230
230
  var StarEmpty = function (_a) {
231
231
  var height = _a.height, width = _a.width, fill = _a.fill;
232
- return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star empty", testid: "star-empty" }, { children: jsx$1("path", { d: "M36.0538 12.058L25.6766 10.5605L21.0385 1.2523C20.2075 -0.406871 17.7996 -0.427962 16.9615 1.2523L12.3234 10.5605L1.9462 12.058C0.0852673 12.3251 -0.660526 14.596 0.689004 15.8966L8.19665 23.1379L6.42096 33.3671C6.10133 35.2161 8.0688 36.6011 9.71665 35.7363L19 30.9064L28.2833 35.7363C29.9312 36.594 31.8987 35.2161 31.579 33.3671L29.8033 23.1379L37.311 15.8966C38.6605 14.596 37.9147 12.3251 36.0538 12.058ZM26.1454 21.9568L27.8288 31.6868L19 27.096L10.1712 31.6868L11.8546 21.9568L4.70918 15.067L14.5821 13.6469L19 4.78858L23.4179 13.6469L33.2908 15.067L26.1454 21.9568Z", fill: fill }, void 0) }), void 0));
232
+ return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star empty", testId: "star-empty" }, { children: jsx$1("path", { d: "M36.0538 12.058L25.6766 10.5605L21.0385 1.2523C20.2075 -0.406871 17.7996 -0.427962 16.9615 1.2523L12.3234 10.5605L1.9462 12.058C0.0852673 12.3251 -0.660526 14.596 0.689004 15.8966L8.19665 23.1379L6.42096 33.3671C6.10133 35.2161 8.0688 36.6011 9.71665 35.7363L19 30.9064L28.2833 35.7363C29.9312 36.594 31.8987 35.2161 31.579 33.3671L29.8033 23.1379L37.311 15.8966C38.6605 14.596 37.9147 12.3251 36.0538 12.058ZM26.1454 21.9568L27.8288 31.6868L19 27.096L10.1712 31.6868L11.8546 21.9568L4.70918 15.067L14.5821 13.6469L19 4.78858L23.4179 13.6469L33.2908 15.067L26.1454 21.9568Z", fill: fill }, void 0) }), void 0));
233
233
  };
234
234
 
235
235
  var StarHalf = function (_a) {
236
236
  var height = _a.height, width = _a.width, fill = _a.fill;
237
- return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star half", testid: "star-half" }, { children: jsx$1("path", { d: "M36.0538 12.0593L25.677 10.5609L21.0397 1.25227C20.6229 0.420469 19.8097 0 18.9966 0C18.1884 0 17.3809 0.414844 16.9626 1.25227L12.3239 10.5602L1.94638 12.0572C0.0853893 12.3244 -0.660423 14.5948 0.688703 15.8955L8.19574 23.1377L6.41912 33.3668C6.16674 34.8279 7.34288 36 8.6601 36C9.00961 36 9.36905 35.9177 9.71431 35.7363L18.998 30.9073L28.2809 35.7377C28.6255 35.917 28.9842 35.9986 29.3323 35.9986C30.6509 35.9986 31.8292 34.8307 31.5768 33.3689L29.8023 23.1391L37.3108 15.8984C38.6606 14.5976 37.9148 12.3265 36.0538 12.0593ZM27.4231 20.7218L26.1385 21.9607L26.4419 23.7101L27.8258 31.687L20.5853 27.919L18.9987 27.0935L19.0008 4.79109L22.6186 12.0537L23.4112 13.6448L25.1842 13.9008L33.2825 15.0701L27.4231 20.7218Z", fill: fill }, void 0) }), void 0));
237
+ return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 38, viewBoxY: 36, title: "Star half", testId: "star-half" }, { children: jsx$1("path", { d: "M36.0538 12.0593L25.677 10.5609L21.0397 1.25227C20.6229 0.420469 19.8097 0 18.9966 0C18.1884 0 17.3809 0.414844 16.9626 1.25227L12.3239 10.5602L1.94638 12.0572C0.0853893 12.3244 -0.660423 14.5948 0.688703 15.8955L8.19574 23.1377L6.41912 33.3668C6.16674 34.8279 7.34288 36 8.6601 36C9.00961 36 9.36905 35.9177 9.71431 35.7363L18.998 30.9073L28.2809 35.7377C28.6255 35.917 28.9842 35.9986 29.3323 35.9986C30.6509 35.9986 31.8292 34.8307 31.5768 33.3689L29.8023 23.1391L37.3108 15.8984C38.6606 14.5976 37.9148 12.3265 36.0538 12.0593ZM27.4231 20.7218L26.1385 21.9607L26.4419 23.7101L27.8258 31.687L20.5853 27.919L18.9987 27.0935L19.0008 4.79109L22.6186 12.0537L23.4112 13.6448L25.1842 13.9008L33.2825 15.0701L27.4231 20.7218Z", fill: fill }, void 0) }), void 0));
238
238
  };
239
239
 
240
240
  var Stopwatch = function (_a) {
@@ -439,7 +439,7 @@ var Payment = /*#__PURE__*/Object.freeze({
439
439
 
440
440
  var SlideDot = function (_a) {
441
441
  var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
442
- return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testid: testId, fill: "none" }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
442
+ return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testId: testId, fill: "none" }, { children: jsx$1("g", __assign$1({ opacity: opacity }, { children: jsx$1("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
443
443
  };
444
444
 
445
445
  var SlideDots$1 = /*#__PURE__*/Object.freeze({
@@ -4067,8 +4067,8 @@ var TAGS = {
4067
4067
  hero2: newStyled.h2(templateObject_2$H || (templateObject_2$H = __makeTemplateObject([""], [""]))),
4068
4068
  hero3: newStyled.h3(templateObject_3$s || (templateObject_3$s = __makeTemplateObject([""], [""]))),
4069
4069
  display1: newStyled.h1(templateObject_4$i || (templateObject_4$i = __makeTemplateObject([""], [""]))),
4070
- display2: newStyled.h2(templateObject_5$b || (templateObject_5$b = __makeTemplateObject([""], [""]))),
4071
- heading1: newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject([""], [""]))),
4070
+ display2: newStyled.h2(templateObject_5$c || (templateObject_5$c = __makeTemplateObject([""], [""]))),
4071
+ heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
4072
4072
  heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
4073
4073
  heading3: newStyled.h3(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject([""], [""]))),
4074
4074
  heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
@@ -4082,7 +4082,7 @@ var TAGS = {
4082
4082
  tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
4083
4083
  };
4084
4084
  var Text$5 = function (_a) {
4085
- var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
4085
+ var variant = _a.variant, children = _a.children, testId = _a.testId, allProps = __rest(_a, ["variant", "children", "testId"]);
4086
4086
  var theme = useTheme();
4087
4087
  var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
4088
4088
  var _b = useMemo(function () {
@@ -4126,7 +4126,7 @@ var Text$5 = function (_a) {
4126
4126
  }
4127
4127
  return propsHref;
4128
4128
  }, [props.disabled, propsHref]);
4129
- return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href }, { children: children }), void 0));
4129
+ return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href, "data-testid": testId }, { children: children }), void 0));
4130
4130
  };
4131
4131
  var DEFAULTS = {
4132
4132
  heading1: {
@@ -4186,7 +4186,7 @@ var DEFAULTS = {
4186
4186
  size: 'regular',
4187
4187
  },
4188
4188
  };
4189
- var templateObject_1$14, templateObject_2$H, templateObject_3$s, templateObject_4$i, templateObject_5$b, templateObject_6$7, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
4189
+ var templateObject_1$14, templateObject_2$H, templateObject_3$s, templateObject_4$i, templateObject_5$c, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
4190
4190
 
4191
4191
  var ButtonsContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
4192
4192
  var inline = _a.inline;
@@ -4381,10 +4381,17 @@ var TagContainer = newStyled.h1(templateObject_3$q || (templateObject_3$q = __ma
4381
4381
  var size = _a.size;
4382
4382
  return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
4383
4383
  });
4384
+ function getTestId() {
4385
+ var args = [];
4386
+ for (var _i = 0; _i < arguments.length; _i++) {
4387
+ args[_i] = arguments[_i];
4388
+ }
4389
+ return args.filter(Boolean).join('-');
4390
+ }
4384
4391
  var PriceLabel = function (_a) {
4385
- var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
4392
+ var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
4386
4393
  var theme = useTheme();
4387
- return (jsxs$1(Container$D, { children: [jsx$1(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign$1({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
4394
+ return (jsxs$1(Container$D, { children: [jsx$1(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": getTestId(testId, 'price') }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign$1({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'discount') }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
4388
4395
  };
4389
4396
  var templateObject_1$$, templateObject_2$E, templateObject_3$q;
4390
4397
 
@@ -4429,7 +4436,7 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$_ || (templateObject_1$_ =
4429
4436
  newStyled(lt.Label)(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
4430
4437
  var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$p || (templateObject_3$p = __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"])));
4431
4438
  var Span = newStyled.span(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
4432
- 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"])));
4439
+ 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"])));
4433
4440
  var Label$2 = function (_a) {
4434
4441
  var label = _a.label, values = _a.values;
4435
4442
  return (jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
@@ -4447,7 +4454,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
4447
4454
  Option: Option,
4448
4455
  OptionsContainer: OptionsContainer,
4449
4456
  });
4450
- var templateObject_1$_, templateObject_2$D, templateObject_3$p, templateObject_4$h, templateObject_5$a;
4457
+ var templateObject_1$_, templateObject_2$D, templateObject_3$p, templateObject_4$h, templateObject_5$b;
4451
4458
 
4452
4459
  var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n"])), function (_a) {
4453
4460
  var borderColor = _a.borderColor;
@@ -4943,13 +4950,13 @@ var TooltipText = newStyled.div(templateObject_4$g || (templateObject_4$g = __ma
4943
4950
  var color = _a.color;
4944
4951
  return color;
4945
4952
  });
4946
- var TopSection = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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"])));
4947
- var Title$5 = newStyled.h1(templateObject_6$6 || (templateObject_6$6 = __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) {
4953
+ var TopSection = newStyled.div(templateObject_5$a || (templateObject_5$a = __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"])));
4954
+ var Title$5 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __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) {
4948
4955
  var color = _a.color;
4949
4956
  return color;
4950
4957
  });
4951
4958
  var IconContainer$5 = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __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"])));
4952
- var templateObject_1$O, templateObject_2$y, templateObject_3$n, templateObject_4$g, templateObject_5$9, templateObject_6$6, templateObject_7$4;
4959
+ var templateObject_1$O, templateObject_2$y, templateObject_3$n, templateObject_4$g, templateObject_5$a, templateObject_6$7, templateObject_7$4;
4953
4960
 
4954
4961
  var Tooltip = function (_a) {
4955
4962
  var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
@@ -5137,9 +5144,9 @@ var RadioGroupInput = function (_a) {
5137
5144
  var Wrapper$3 = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
5138
5145
  var Container$s = newStyled.div(templateObject_2$w || (templateObject_2$w = __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"])));
5139
5146
  var Minimalistic = function (_a) {
5140
- var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d;
5147
+ var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
5141
5148
  var theme = useTheme();
5142
- return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$s, __assign$1({ "data-testid": "TopSection" }, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$s, __assign$1({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$5, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
5149
+ return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$s, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$s, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$5, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
5143
5150
  };
5144
5151
  var templateObject_1$M, templateObject_2$w;
5145
5152
 
@@ -5579,13 +5586,13 @@ var Wrapper$2 = newStyled.div(templateObject_1$A || (templateObject_1$A = __make
5579
5586
  var GrandTotal = newStyled.h1(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\n align-items: center;\n"])), function (props) { return props.color; });
5580
5587
  var Currency = newStyled.span(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
5581
5588
  var Container$l = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
5582
- var Discount = newStyled.h3(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
5589
+ var Discount = newStyled.h3(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
5583
5590
  var Total = function (_a) {
5584
5591
  var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
5585
5592
  var theme = useTheme();
5586
5593
  return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$l, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
5587
5594
  };
5588
- var templateObject_1$A, templateObject_2$o, templateObject_3$j, templateObject_4$e, templateObject_5$8;
5595
+ var templateObject_1$A, templateObject_2$o, templateObject_3$j, templateObject_4$e, templateObject_5$9;
5589
5596
 
5590
5597
  var Wrapper$1 = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
5591
5598
  var color = _a.color;
@@ -5718,11 +5725,11 @@ var Col$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemp
5718
5725
  textAlign: ['center', 'inherit'],
5719
5726
  width: ['100%', 'inherit'],
5720
5727
  }));
5721
- var IconContainer$2 = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"])), mediaQueries({
5728
+ var IconContainer$2 = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"])), mediaQueries({
5722
5729
  marginBottom: ['1.875rem', '0'],
5723
5730
  width: ['auto', '1.375rem'],
5724
5731
  }));
5725
- var SectionTitle = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"], ["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"])), mediaQueries({
5732
+ var SectionTitle = newStyled.h1(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"], ["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"])), mediaQueries({
5726
5733
  display: ['block', 'flex'],
5727
5734
  }), function (_a) {
5728
5735
  var theme = _a.theme;
@@ -5735,7 +5742,7 @@ var DeliveryDetails = function (_a) {
5735
5742
  var theme = useTheme();
5736
5743
  return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$3, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].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$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, 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$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, 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$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), 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));
5737
5744
  };
5738
- var templateObject_1$x, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$7, templateObject_6$5, templateObject_7$3, templateObject_8$1;
5745
+ var templateObject_1$x, templateObject_2$l, templateObject_3$g, templateObject_4$b, templateObject_5$8, templateObject_6$6, templateObject_7$3, templateObject_8$1;
5739
5746
 
5740
5747
  var Container$j = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
5741
5748
  var H1$2 = newStyled.h1(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
@@ -5800,13 +5807,13 @@ var PriceContainer = newStyled.div(templateObject_4$9 || (templateObject_4$9 = _
5800
5807
  })
5801
5808
  : 'justify-content: end';
5802
5809
  });
5803
- var Quantity = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"])));
5810
+ var Quantity = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"])));
5804
5811
  var SimpleOrderItem = function (_a) {
5805
5812
  var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
5806
5813
  var theme = useTheme();
5807
5814
  return (jsxs$1(Container$h, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { 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: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color }, { 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, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
5808
5815
  };
5809
- var templateObject_1$t, templateObject_2$h, templateObject_3$e, templateObject_4$9, templateObject_5$6;
5816
+ var templateObject_1$t, templateObject_2$h, templateObject_3$e, templateObject_4$9, templateObject_5$7;
5810
5817
 
5811
5818
  function formatDate(date) {
5812
5819
  var day = date.getDate();
@@ -5826,11 +5833,11 @@ var Content = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTe
5826
5833
  var ReviewContainer = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), mediaQueries({
5827
5834
  margin: ['0 0 8px 0', '0 50px 0 0'],
5828
5835
  }));
5829
- var H2$1 = newStyled.h2(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), mediaQueries({
5836
+ var H2$1 = newStyled.h2(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), mediaQueries({
5830
5837
  fontSize: ['16px', '18px'],
5831
5838
  lineHeight: ['24px', '28px'],
5832
5839
  }));
5833
- var H3$1 = newStyled.h3(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"], ["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"])), mediaQueries({
5840
+ var H3$1 = newStyled.h3(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"], ["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"])), mediaQueries({
5834
5841
  fontSize: ['14px', '16px'],
5835
5842
  lineHeight: ['22px', '24px'],
5836
5843
  }));
@@ -5840,7 +5847,7 @@ var Review = function (_a) {
5840
5847
  var theme = useTheme();
5841
5848
  return (jsxs$1(Container$g, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(H2$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign$1({ theme: theme }, { children: [jsx$1(H3$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
5842
5849
  };
5843
- var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$5, templateObject_6$4, templateObject_7$2;
5850
+ var templateObject_1$s, templateObject_2$g, templateObject_3$d, templateObject_4$8, templateObject_5$6, templateObject_6$5, templateObject_7$2;
5844
5851
 
5845
5852
  var Button$3 = newStyled.button(function () { return ({
5846
5853
  background: 'transparent',
@@ -10153,9 +10160,9 @@ var List = newStyled.ul(templateObject_1$q || (templateObject_1$q = __makeTempla
10153
10160
  var Item$1 = newStyled.li(templateObject_2$f || (templateObject_2$f = __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"])));
10154
10161
  var DropdownWrapper = newStyled.div(templateObject_3$c || (templateObject_3$c = __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"])));
10155
10162
  var ArrowContainer$1 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __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"])));
10156
- var StyledDropdown = newStyled.ul(templateObject_5$4 || (templateObject_5$4 = __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; });
10157
- var DropdownItem = newStyled.li(templateObject_6$3 || (templateObject_6$3 = __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; });
10158
- var templateObject_1$q, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$4, templateObject_6$3;
10163
+ var StyledDropdown = newStyled.ul(templateObject_5$5 || (templateObject_5$5 = __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; });
10164
+ var DropdownItem = newStyled.li(templateObject_6$4 || (templateObject_6$4 = __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; });
10165
+ var templateObject_1$q, templateObject_2$f, templateObject_3$c, templateObject_4$7, templateObject_5$5, templateObject_6$4;
10159
10166
 
10160
10167
  var DropdownListIcons = function (_a) {
10161
10168
  var items = _a.items;
@@ -10186,14 +10193,14 @@ var Row = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTempla
10186
10193
  "\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
10187
10194
  });
10188
10195
  var H5 = newStyled.h5(templateObject_4$6 || (templateObject_4$6 = __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; });
10189
- var H3 = newStyled.h3(templateObject_5$3 || (templateObject_5$3 = __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; });
10190
- var FreeShipping = newStyled.span(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
10196
+ var H3 = newStyled.h3(templateObject_5$4 || (templateObject_5$4 = __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; });
10197
+ var FreeShipping = newStyled.span(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
10191
10198
  var CrossSellCheckbox = function (_a) {
10192
10199
  var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
10193
10200
  var theme = useTheme();
10194
10201
  return (jsxs$1(Wrapper, __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, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { 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));
10195
10202
  };
10196
- var templateObject_1$o, templateObject_2$e, templateObject_3$b, templateObject_4$6, templateObject_5$3, templateObject_6$2;
10203
+ var templateObject_1$o, templateObject_2$e, templateObject_3$b, templateObject_4$6, templateObject_5$4, templateObject_6$3;
10197
10204
 
10198
10205
  var index = /*#__PURE__*/Object.freeze({
10199
10206
  __proto__: null,
@@ -10253,7 +10260,7 @@ var ProductItemMobile = function (_a) {
10253
10260
  _a[ComponentSize.Small] = 2,
10254
10261
  _a)[size];
10255
10262
  }, [size]);
10256
- return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __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, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, 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)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
10263
+ return (jsxs(Container$f, __assign$1({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __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, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, 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)), jsx(Spacing, { size: space }, void 0), jsx(H1, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small, testId: "volume-discount" }, void 0), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
10257
10264
  };
10258
10265
  var templateObject_1$n, templateObject_2$d;
10259
10266
 
@@ -10990,6 +10997,7 @@ var Portal = function (_a) {
10990
10997
  throw new Error("Unable to find/create container (".concat(id, ")"));
10991
10998
  }
10992
10999
  element.dataset.testId = id;
11000
+ element.style.overflow = 'hidden';
10993
11001
  setMounted(true);
10994
11002
  container.current = element;
10995
11003
  }, [id]);
@@ -11096,12 +11104,17 @@ var react = __toCommonJS(react_exports);
11096
11104
  var visibleStyle = function (_a) {
11097
11105
  var opened = _a.opened;
11098
11106
  return opened
11099
- ? css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n transform: translate(-50%, -50%);\n "], ["\n opacity: 1;\n pointer-events: all;\n transform: translate(-50%, -50%);\n "]))) : css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, -40%);\n "], ["\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, -40%);\n "])));
11107
+ ? css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
11108
+ };
11109
+ var transformStyle = function (_a) {
11110
+ var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
11111
+ return opened
11112
+ ? css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
11100
11113
  };
11101
- var Container$4 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\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: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\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.maxFullScreen ? '100vw' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100vw' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100vh' : 'inherit'); }, mediaQueries({
11114
+ var Container$4 = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: 20px;\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: 20px;\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.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({
11102
11115
  minWidth: ['90%', 'var(--component-modal-minWidth)'],
11103
- }), visibleStyle);
11104
- var Overlay = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __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: transform 0.3s, opacity 0.3s;\n\n ", "\n\n transform: none;\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: transform 0.3s, opacity 0.3s;\n\n ", "\n\n transform: none;\n"])), visibleStyle);
11116
+ }), visibleStyle, transformStyle);
11117
+ var Overlay = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __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);
11105
11118
  var Modal = function (_a) {
11106
11119
  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;
11107
11120
  var _d = useModal(id), opened = _d.opened, close = _d.close;
@@ -11139,7 +11152,7 @@ var useModal = function (id) {
11139
11152
  close: close,
11140
11153
  }); }, [close, open, opened]);
11141
11154
  };
11142
- var templateObject_1$9, templateObject_2$5, templateObject_3$5, templateObject_4$4;
11155
+ var templateObject_1$9, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$2;
11143
11156
 
11144
11157
  var Text$2 = newStyled.span(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
11145
11158
  var Title$1 = function (_a) {
@@ -11186,9 +11199,9 @@ var Item = newStyled.span(templateObject_2$4 || (templateObject_2$4 = __makeTemp
11186
11199
  var Number$1 = newStyled(Item)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
11187
11200
  var IncreaseDecrease = newStyled(Item)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"])));
11188
11201
  var QuantityPicker = function (_a) {
11189
- var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, onChange = _a.onChange;
11202
+ var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
11190
11203
  var theme = useTheme();
11191
- var _d = useState(value !== null && value !== void 0 ? value : initialValue), internal = _d[0], setInternal = _d[1];
11204
+ var _e = useState(value !== null && value !== void 0 ? value : initialValue), internal = _e[0], setInternal = _e[1];
11192
11205
  useEffect(function () {
11193
11206
  if (onChange) {
11194
11207
  onChange(internal);
@@ -11207,7 +11220,7 @@ var QuantityPicker = function (_a) {
11207
11220
  return clamp(value);
11208
11221
  });
11209
11222
  }, [value, clamp]);
11210
- return (jsxs$1(Container$2, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": "QuantityPickerContainer" }, { children: [jsx$1(IncreaseDecrease, __assign$1({ onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
11223
+ return (jsxs$1(Container$2, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
11211
11224
  };
11212
11225
  var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3;
11213
11226
 
@@ -15040,7 +15053,7 @@ var MobileClearContainer = newStyled.div(templateObject_8 || (templateObject_8 =
15040
15053
  var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8;
15041
15054
 
15042
15055
  var Filters = function (_a) {
15043
- var filters = _a.filters, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick;
15056
+ var filters = _a.filters, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
15044
15057
  var theme = useTheme();
15045
15058
  var _c = React__default.useState([]), checkedItems = _c[0], setCheckedItems = _c[1];
15046
15059
  var handleCheckboxClick = useCallback(function (_a) {
@@ -15061,6 +15074,7 @@ var Filters = function (_a) {
15061
15074
  var sectionIndex = item.sectionIndex, itemIndex = item.itemIndex;
15062
15075
  handleCloseClick({ sectionIndex: sectionIndex, itemIndex: itemIndex });
15063
15076
  });
15077
+ onResetValues();
15064
15078
  };
15065
15079
  return (jsxs$1(Fragment$1, { children: [!isMobile ? (jsxs$1("div", __assign$1({ "data-testid": "DesktopHeader" }, { children: [jsxs$1(Header, { children: [jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filterByText, " (", checkedItems.length, ")"] }), void 0), jsx$1(ClearAll, __assign$1({ onClick: handleClearAllClick, color: theme.colors.shades['700'].color, "data-testid": "desktop-clear-all" }, { children: clearAllText }), void 0)] }, void 0), jsx$1(Tags, { color: tagsColor, items: checkedItems.map(function (item) { return item.label; }), onCloseClick: function (index) { return handleCloseClick(checkedItems[index]); } }, void 0)] }), void 0)) : (jsxs$1(MobileHeader, __assign$1({ "data-testid": "MobileHeader" }, { children: [jsx$1(MobileIconsContainer, __assign$1({ onClick: mobileBackArrowClick, "data-testid": "mobileBackArrow" }, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { fill: theme.colors.shades['700'].color }, void 0) }), void 0), jsxs$1(H4, __assign$1({ color: theme.colors.shades['700'].color }, { children: [filtersSelectText, " (", checkedItems.length, ")"] }), void 0)] }), void 0)), filters.map(function (filter, sectionIndex) { return (jsx$1(Accordion, __assign$1({ title: filter.title, isOpenByDefault: filter.isOpenByDefault }, { children: jsx$1(SectionContent, __assign$1({ cols: filter.columns }, { children: filter.items.map(function (item, itemIndex) { return (jsx$1(FilterCheckbox, { onChange: handleCheckboxClick, text: item, itemIndex: itemIndex, sectionIndex: sectionIndex }, itemIndex)); }) }), void 0) }), sectionIndex)); }), isMobile && (jsxs$1(MobileFooter, __assign$1({ "data-testid": "MobileFooter" }, { children: [jsxs$1(MobileClearContainer, __assign$1({ onClick: handleClearAllClick }, { children: [jsx$1(MobileIconsContainer, { children: jsx$1(Icon.Actions.Trash, { fill: theme.colors.shades['700'].color }, void 0) }, void 0), jsx$1(ClearAll, __assign$1({ color: theme.colors.shades['700'].color }, { children: clearAllText }), void 0)] }), void 0), jsx$1(ButtonSecondary, { text: applyText, onClick: mobileApplyButtonClick }, void 0)] }), void 0))] }, void 0));
15066
15080
  };