@trafilea/afrodita-components 4.3.0 → 4.3.1-beta.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 +11 -6
  2. package/build/index.esm.js +46 -45
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +46 -45
  5. package/build/index.js.map +1 -1
  6. package/package.json +1 -1
package/build/index.d.ts CHANGED
@@ -42,6 +42,7 @@ interface CTAProps {
42
42
  text: string;
43
43
  type?: ButtonType;
44
44
  className?: string;
45
+ testId?: string;
45
46
  inline?: boolean;
46
47
  }
47
48
  declare type DropdownOption<T> = {
@@ -81,7 +82,7 @@ interface IconWithOpacityProps extends IconProps {
81
82
  opacity?: number;
82
83
  }
83
84
  interface WithTestId {
84
- dataTestId?: string;
85
+ testId?: string;
85
86
  }
86
87
  declare type DropdownListIconsItem = {
87
88
  Icon: IconType;
@@ -398,7 +399,7 @@ declare namespace Payment {
398
399
  };
399
400
  }
400
401
 
401
- declare const SlideDot: ({ height, width, fill, opacity, dataTestId, }: IconWithOpacityProps & WithTestId) => JSX.Element;
402
+ declare const SlideDot: ({ height, width, fill, opacity, testId, }: IconWithOpacityProps & WithTestId) => JSX.Element;
402
403
 
403
404
  declare const SlideDots_SlideDot: typeof SlideDot;
404
405
  declare namespace SlideDots {
@@ -447,7 +448,7 @@ declare const _default: (({ children, backgroundColor, widthAuto, border, flex }
447
448
  Body: ({ children }: CardBodyProps) => JSX.Element;
448
449
  };
449
450
 
450
- declare const ButtonPrimary: (props: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
451
+ declare const ButtonPrimary: ({ testId, ...props }: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
451
452
 
452
453
  declare const ButtonSecondary: (props: CTAProps) => _emotion_react_jsx_runtime.JSX.Element;
453
454
 
@@ -463,6 +464,7 @@ declare type CommonProps<T> = {
463
464
  sort?: boolean;
464
465
  initialValue?: Value<T>;
465
466
  placeHolder: string;
467
+ testId?: string;
466
468
  };
467
469
  declare type ControlledProps<T> = {
468
470
  value: Value<T>;
@@ -473,7 +475,7 @@ declare type UncontrolledProps<T> = {
473
475
  onChange?: OnChange<T>;
474
476
  } & CommonProps<T>;
475
477
  declare type SimpleDropdownProps<T> = UncontrolledProps<T> | ControlledProps<T>;
476
- declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, sort, onChange, value, }: SimpleDropdownProps<T>): JSX.Element;
478
+ declare function SimpleDropdown<T>({ options, disabled, initialValue, placeHolder, label, wide, sort, onChange, value, testId, }: SimpleDropdownProps<T>): JSX.Element;
477
479
 
478
480
  interface SizeSelectorProps {
479
481
  label: string;
@@ -501,6 +503,7 @@ interface BaseButtonProps {
501
503
  onClick: () => void;
502
504
  className?: string;
503
505
  inline?: boolean;
506
+ testId?: string;
504
507
  }
505
508
 
506
509
  declare type BaseProps = Pick<BaseButtonProps, 'disabled' | 'type' | 'onClick'>;
@@ -1122,7 +1125,7 @@ interface BaseCTAProps {
1122
1125
  size?: ComponentSize;
1123
1126
  text: string;
1124
1127
  type?: ButtonType;
1125
- inline?: boolean;
1128
+ testId?: string;
1126
1129
  }
1127
1130
 
1128
1131
  declare type ButtonProps = {
@@ -1340,6 +1343,8 @@ interface ProductItemProps {
1340
1343
  seasonOfferTagText: string;
1341
1344
  };
1342
1345
  alignName?: 'left' | 'center';
1346
+ url?: string;
1347
+ className?: string;
1343
1348
  }
1344
1349
 
1345
1350
  interface ProductItemSmallMobileProps extends ProductItemProps {
@@ -1352,7 +1357,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
1352
1357
  };
1353
1358
 
1354
1359
  declare const Collection: {
1355
- ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
1360
+ ProductItemMobile: ({ title, image, price, rating, size, tags, alignName, url, className, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
1356
1361
  withProductGrid: typeof withProductGrid;
1357
1362
  };
1358
1363
 
package/build/index.esm.js CHANGED
@@ -431,8 +431,8 @@ var Payment = /*#__PURE__*/Object.freeze({
431
431
  });
432
432
 
433
433
  var SlideDot = function (_a) {
434
- var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, dataTestId = _a.dataTestId;
435
- return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testid: dataTestId, fill: "none" }, { children: jsx$1("g", __assign({ opacity: opacity }, { children: jsx$1("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
434
+ var height = _a.height, width = _a.width, fill = _a.fill, opacity = _a.opacity, testId = _a.testId;
435
+ return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 16, viewBoxY: 16, title: "Slide dot", testid: testId, fill: "none" }, { children: jsx$1("g", __assign({ opacity: opacity }, { children: jsx$1("circle", { cx: "8", cy: "8", r: "7.5", stroke: "#292929", fill: fill }, void 0) }), void 0) }), void 0));
436
436
  };
437
437
 
438
438
  var SlideDots$1 = /*#__PURE__*/Object.freeze({
@@ -3488,8 +3488,8 @@ function jsxs(type, props, key) {
3488
3488
  }
3489
3489
 
3490
3490
  var BaseButton = function (_a) {
3491
- var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline;
3492
- return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: {
3491
+ var children = _a.children, renderLeading = _a.renderLeading, renderTrailing = _a.renderTrailing, disabled = _a.disabled, _b = _a.type, type = _b === void 0 ? 'button' : _b, onClick = _a.onClick, className = _a.className, inline = _a.inline, _c = _a.testId, testId = _c === void 0 ? 'base-button' : _c;
3492
+ return (jsxs("button", __assign({ onClick: onClick, disabled: disabled, className: className, type: type, "data-testid": testId, css: {
3493
3493
  display: inline ? 'inline-flex' : 'flex',
3494
3494
  justifyContent: 'center',
3495
3495
  alignItems: 'center',
@@ -3536,7 +3536,8 @@ var BaseCTA = function (_a) {
3536
3536
  } }) }, { children: text }), void 0));
3537
3537
  };
3538
3538
 
3539
- var ButtonPrimary = function (props) {
3539
+ var ButtonPrimary = function (_a) {
3540
+ _a.testId; var props = __rest(_a, ["testId"]);
3540
3541
  var theme = useTheme();
3541
3542
  return (jsx(BaseCTA, __assign({}, props, { css: {
3542
3543
  backgroundColor: theme.component.button.primary.active.backgroundColor,
@@ -6248,8 +6249,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
6248
6249
  });
6249
6250
 
6250
6251
  function SimpleDropdown(_a) {
6251
- var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value;
6252
- var _e = useState(value || initialValue), selectedValue = _e[0], setSelectedValue = _e[1];
6252
+ var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e;
6253
+ var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
6253
6254
  var selectedOptionLabel = useMemo(function () {
6254
6255
  if (selectedValue) {
6255
6256
  return selectedValue.label;
@@ -6269,7 +6270,7 @@ function SimpleDropdown(_a) {
6269
6270
  setSelectedValue(value);
6270
6271
  }, [value]);
6271
6272
  var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
6272
- return (jsxs$1(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
6273
+ return (jsxs$1(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
6273
6274
  }
6274
6275
 
6275
6276
  var getStylesBySize$8 = function (size, theme) {
@@ -6287,13 +6288,13 @@ var getStylesBySize$8 = function (size, theme) {
6287
6288
  }
6288
6289
  };
6289
6290
  var SimpleSelector = function (_a) {
6290
- var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, onClick = _a.onClick;
6291
+ var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, onClick = _a.onClick;
6291
6292
  var theme = useTheme();
6292
6293
  var stylesBySize = getStylesBySize$8(size, theme);
6293
6294
  var activeStyles = active
6294
6295
  ? { fontWeight: theme.component.selector.hover.fontWeight }
6295
6296
  : { fontWeight: theme.component.selector.default.fontWeight };
6296
- return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
6297
+ return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
6297
6298
  fontWeight: theme.component.selector.hover.fontWeight,
6298
6299
  }, '&:disabled': {
6299
6300
  color: theme.colors.shades['250'].color,
@@ -6302,7 +6303,7 @@ var SimpleSelector = function (_a) {
6302
6303
  };
6303
6304
 
6304
6305
  var SelectorSecondary = function (_a) {
6305
- var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, onClick = _a.onClick;
6306
+ var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
6306
6307
  var theme = useTheme();
6307
6308
  var stylesByActive = active
6308
6309
  ? {
@@ -6317,7 +6318,7 @@ var SelectorSecondary = function (_a) {
6317
6318
  border: theme.component.selector.default.border,
6318
6319
  fontWeight: theme.component.selector.default.fontWeight,
6319
6320
  };
6320
- return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, css: __assign(__assign({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
6321
+ return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign(__assign({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
6321
6322
  background: theme.component.selector.hover.background,
6322
6323
  color: theme.component.selector.hover.color,
6323
6324
  }, '&:disabled': {
@@ -6470,7 +6471,7 @@ var SizeSelector = function (_a) {
6470
6471
  return (jsx(SelectorSecondary, { css: {
6471
6472
  padding: '0.75rem 1rem 0.625rem',
6472
6473
  margin: '0 0.5rem 0.625rem 0',
6473
- }, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
6474
+ }, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]) }, size.label));
6474
6475
  }) }), void 0)] }), void 0));
6475
6476
  };
6476
6477
  var templateObject_1$$;
@@ -6656,34 +6657,34 @@ var PriceLabel = function (_a) {
6656
6657
  var templateObject_1$X, templateObject_2$A, templateObject_3$n;
6657
6658
 
6658
6659
  var OneColorSelector = function (_a) {
6659
- var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
6660
+ var color = _a.color, selected = _a.selected, testId = _a.testId;
6660
6661
  var theme = useTheme();
6661
6662
  var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
6662
- return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsx$1("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
6663
+ return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsx$1("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
6663
6664
  };
6664
6665
 
6665
6666
  var ThreeColorSelector = function (_a) {
6666
- var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, dataTestId = _a.dataTestId;
6667
+ var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId;
6667
6668
  var theme = useTheme();
6668
6669
  var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
6669
- return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsx$1("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsx$1("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsx$1("rect", { x: "20.3198", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 20.3198 33.76)", fill: tertiaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
6670
+ return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsx$1("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 4 33.76)", fill: primaryColor }, void 0), jsx$1("rect", { x: "11.6802", y: "33.76", width: "34.56", height: "8.64", transform: "rotate(-90 11.6802 33.76)", fill: secondaryColor }, void 0), jsx$1("rect", { x: "20.3198", y: "33.76", width: "34.56", height: "7.68", transform: "rotate(-90 20.3198 33.76)", fill: tertiaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
6670
6671
  };
6671
6672
 
6672
6673
  var TwoColorSelector = function (_a) {
6673
- var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, dataTestId = _a.dataTestId;
6674
+ var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, selected = _a.selected, testId = _a.testId;
6674
6675
  var theme = useTheme();
6675
6676
  var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
6676
- return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": dataTestId }, { children: [jsx$1("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsx$1("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
6677
+ return (jsxs$1("svg", __assign({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId }, { children: [jsx$1("mask", __assign({ id: "mask0", "mask-type": "alpha", maskUnits: "userSpaceOnUse", x: "4", y: "4", width: "24", height: "24" }, { children: jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", fill: "black" }, void 0) }), void 0), jsxs$1("g", __assign({ mask: "url(#mask0)" }, { children: [jsx$1("rect", { x: "4", y: "34", width: "35", height: "12", transform: "rotate(-90 4 34)", fill: primaryColor }, void 0), jsx$1("rect", { x: "16", y: "34", width: "35", height: "12", transform: "rotate(-90 16 34)", fill: secondaryColor }, void 0)] }), void 0), jsx$1("circle", { cx: "16", cy: "16", r: "12", transform: "rotate(-90 16 16)", stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
6677
6678
  };
6678
6679
 
6679
6680
  var ColorSelector = function (_a) {
6680
- var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, dataTestId = _a.dataTestId;
6681
+ var primaryColor = _a.primaryColor, secondaryColor = _a.secondaryColor, tertiaryColor = _a.tertiaryColor, selected = _a.selected, testId = _a.testId;
6681
6682
  if (secondaryColor && tertiaryColor)
6682
- return (jsx$1(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, dataTestId: dataTestId }, void 0));
6683
+ return (jsx$1(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, testId: testId }, void 0));
6683
6684
  else if (secondaryColor && !tertiaryColor)
6684
- return (jsx$1(TwoColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, selected: selected, dataTestId: dataTestId }, void 0));
6685
+ return (jsx$1(TwoColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, selected: selected, testId: testId }, void 0));
6685
6686
  else
6686
- return jsx$1(OneColorSelector, { color: primaryColor, selected: selected, dataTestId: dataTestId }, void 0);
6687
+ return jsx$1(OneColorSelector, { color: primaryColor, selected: selected, testId: testId }, void 0);
6687
6688
  };
6688
6689
 
6689
6690
  var OutOfStock = function (_a) {
@@ -6722,10 +6723,10 @@ var Container$A = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
6722
6723
  });
6723
6724
  var Image$2 = newStyled.img(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
6724
6725
  var PatternSelector = function (_a) {
6725
- var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
6726
+ var url = _a.url, selected = _a.selected, testId = _a.testId;
6726
6727
  var theme = useTheme();
6727
6728
  var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
6728
- return (jsx$1(Container$A, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
6729
+ return (jsx$1(Container$A, __assign({ "data-testid": testId, borderColor: outerBorder }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
6729
6730
  };
6730
6731
  var templateObject_1$V, templateObject_2$y;
6731
6732
 
@@ -6733,7 +6734,7 @@ var renderOptions$1 = function (options) {
6733
6734
  if (options.length)
6734
6735
  return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
6735
6736
  var checked = _a.checked;
6736
- return option.color ? (jsx(ColorSelector, __assign({}, option.color, { selected: checked, dataTestId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && jsx(PatternSelector, { url: option.pattern.url, selected: checked }, void 0));
6737
+ return option.color ? (jsx(ColorSelector, __assign({}, option.color, { selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector") }), void 0)) : (option.pattern && jsx(PatternSelector, { url: option.pattern.url, selected: checked }, void 0));
6737
6738
  } }), option.label)); });
6738
6739
  else
6739
6740
  return jsx(OutOfStock, { title: "out of stock color" }, void 0);
@@ -6745,7 +6746,7 @@ var SingleColorPicker = function (_a) {
6745
6746
 
6746
6747
  var renderOptions = function (selectedColor, options) {
6747
6748
  if (options && options.length)
6748
- return options.map(function (option) { return (jsx$1(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsx$1(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option), dataTestId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && (jsx$1(PatternSelector, { url: option.pattern.url, selected: selectedColor.has(option) }, void 0))) }), option.label)); });
6749
+ return options.map(function (option) { return (jsx$1(ColorRadioGroup$1.Option, __assign({ value: option }, { children: option.color ? (jsx$1(ColorSelector, __assign({}, option.color, { selected: selectedColor.has(option), testId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && (jsx$1(PatternSelector, { url: option.pattern.url, selected: selectedColor.has(option) }, void 0))) }), option.label)); });
6749
6750
  else
6750
6751
  return jsx$1(OutOfStock, { title: "out of stock color" }, void 0);
6751
6752
  };
@@ -6793,8 +6794,8 @@ var templateObject_1$U;
6793
6794
  var Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"], ["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"])));
6794
6795
  var Button$5 = newStyled.button(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"])));
6795
6796
  var ImagePreviewList = function (_a) {
6796
- var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
6797
- return (jsx$1(Container$z, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
6797
+ var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, testId = _a.testId;
6798
+ return (jsx$1(Container$z, __assign({ "data-testid": testId }, { children: images.map(function (item) {
6798
6799
  return (jsx$1(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
6799
6800
  }) }), void 0));
6800
6801
  };
@@ -6811,8 +6812,8 @@ var Container$y = newStyled.div(templateObject_1$R || (templateObject_1$R = __ma
6811
6812
  var TopTagContainer$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
6812
6813
  var BottomTagContainer$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
6813
6814
  var ImageProductWithTags$1 = function (_a) {
6814
- var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
6815
- return (jsxs$1(Container$y, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
6815
+ var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
6816
+ return (jsxs$1(Container$y, __assign({ "data-testid": testId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
6816
6817
  };
6817
6818
  var templateObject_1$R, templateObject_2$w, templateObject_3$l;
6818
6819
 
@@ -6824,9 +6825,9 @@ var ProductGallery = function (_a) {
6824
6825
  useEffect(function () {
6825
6826
  setSelectedImage(initialValue);
6826
6827
  }, [initialValue]);
6827
- return (jsxs$1(Container$x, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
6828
+ return (jsxs$1(Container$x, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, testId: previewListDataTestId, onClick: function (value) {
6828
6829
  setSelectedImage(value);
6829
- } }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
6830
+ } }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0)] }, void 0));
6830
6831
  };
6831
6832
  var templateObject_1$Q;
6832
6833
 
@@ -12490,7 +12491,7 @@ var ImageContainer = newStyled.div(function (_a) {
12490
12491
  height: height,
12491
12492
  });
12492
12493
  });
12493
- var Container$d = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n"])));
12494
+ var Container$d = newStyled.a(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
12494
12495
  var H1 = newStyled.h1(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
12495
12496
  var getStylesBySize = function (size) {
12496
12497
  switch (size) {
@@ -12518,7 +12519,7 @@ var getStylesBySize = function (size) {
12518
12519
  }
12519
12520
  };
12520
12521
  var ProductItemMobile = function (_a) {
12521
- var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b;
12522
+ var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className;
12522
12523
  var theme = useTheme();
12523
12524
  var styles = getStylesBySize(size);
12524
12525
  var spaces = useMemo(function () {
@@ -12535,7 +12536,7 @@ var ProductItemMobile = function (_a) {
12535
12536
  _b)[size];
12536
12537
  return [first, second];
12537
12538
  }, [size]);
12538
- return (jsxs(Container$d, { children: [tags ? (jsxs(ImageContainer, __assign({ 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: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
12539
+ return (jsxs(Container$d, __assign({ as: url ? 'a' : 'div', href: url, className: className }, { children: [tags ? (jsxs(ImageContainer, __assign({ 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: spaces[0] }, void 0), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: spaces[1] }, void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }), void 0));
12539
12540
  };
12540
12541
  var templateObject_1$j, templateObject_2$9;
12541
12542
 
@@ -12766,9 +12767,9 @@ var Header = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTem
12766
12767
  });
12767
12768
  });
12768
12769
  var ResultsPanel = function (_a) {
12769
- var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, dataTestId = _a.dataTestId;
12770
+ var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
12770
12771
  var theme = useTheme();
12771
- return (jsxs$1(Container$7, __assign({ "data-testid": dataTestId, theme: theme }, { children: [header && (jsx$1(Header, __assign({ theme: theme }, { children: jsx$1(Text$5, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign({ theme: theme }, { children: jsx$1(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
12772
+ return (jsxs$1(Container$7, __assign({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign({ theme: theme }, { children: jsx$1(Text$5, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign({ theme: theme }, { children: jsx$1(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
12772
12773
  };
12773
12774
  var templateObject_1$c, templateObject_2$4, templateObject_3$4;
12774
12775
 
@@ -12916,7 +12917,7 @@ var SearchBar = function (_a) {
12916
12917
  return function () { return clearTimeout(id); };
12917
12918
  }, [onChange, state.term]);
12918
12919
  var options = resultOptions && resultOptions.length > 0 ? resultOptions : suggestions;
12919
- return (jsxs$1("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$6, __assign({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsx$1(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsx$1(ResultsPanel, { dataTestId: resultsPanelDataTestId, options: options, header: resultOptions.length === 0 ? 'Most popular products' : undefined, footer: resultOptions.length > 0 ? "View all results (".concat(resultOptions.length, ")") : undefined, onClick: function (value) {
12920
+ return (jsxs$1("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$6, __assign({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsx$1(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: resultOptions.length === 0 ? 'Most popular products' : undefined, footer: resultOptions.length > 0 ? "View all results (".concat(resultOptions.length, ")") : undefined, onClick: function (value) {
12920
12921
  onSearch(value.title);
12921
12922
  dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
12922
12923
  }, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
@@ -12926,8 +12927,8 @@ var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __ma
12926
12927
  var TopTagContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
12927
12928
  var BottomTagContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
12928
12929
  var ImageProductWithTags = function (_a) {
12929
- var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
12930
- return (jsxs$1(Container$5, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
12930
+ var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
12931
+ return (jsxs$1(Container$5, __assign({ "data-testid": testId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
12931
12932
  };
12932
12933
  var templateObject_1$a, templateObject_2$3, templateObject_3$3;
12933
12934
 
@@ -12945,7 +12946,7 @@ var SlideDots = function (_a) {
12945
12946
  var theme = useTheme();
12946
12947
  return (jsx$1(Container$4, __assign({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
12947
12948
  ? theme.colors.shades.white.color
12948
- : theme.colors.shades['700'].color, opacity: 0.6, dataTestId: "slide-dot-".concat(index) }, index)); }) }), void 0));
12949
+ : theme.colors.shades['700'].color, opacity: 0.6, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
12949
12950
  };
12950
12951
  var templateObject_1$8;
12951
12952
 
@@ -12953,7 +12954,7 @@ var NavigationButton = newStyled(ArrowButton)(templateObject_1$7 || (templateObj
12953
12954
  var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
12954
12955
  var LeftButton = newStyled(NavigationButton)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
12955
12956
  var SlideNavigation = function (_a) {
12956
- var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, dataTestId = _a.dataTestId;
12957
+ var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
12957
12958
  var theme = useTheme();
12958
12959
  var upperLimit = quantity - 1;
12959
12960
  var lowerLimit = 0;
@@ -12961,7 +12962,7 @@ var SlideNavigation = function (_a) {
12961
12962
  onNavigate(selectedIndex - 1);
12962
12963
  } }, void 0)), selectedIndex < upperLimit && (jsx$1(RightButton, { Icon: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: theme.colors.shades['700'].color, opacity: 0.5 }, void 0), onClick: function () {
12963
12964
  onNavigate(selectedIndex + 1);
12964
- } }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: dataTestId }, void 0)] }, void 0));
12965
+ } }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
12965
12966
  };
12966
12967
  var templateObject_1$7, templateObject_2$2, templateObject_3$2;
12967
12968
 
@@ -12973,7 +12974,7 @@ var ProductGalleryMobile = function (_a) {
12973
12974
  useEffect(function () {
12974
12975
  setSelectedImage(initialValue);
12975
12976
  }, [initialValue]);
12976
- return (jsxs$1(Container$3, { children: [jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, dataTestId: slideDotsDataTestId }, void 0)] }, void 0));
12977
+ return (jsxs$1(Container$3, { children: [jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, testId: productImageDataTestId }, void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, testId: slideDotsDataTestId }, void 0)] }, void 0));
12977
12978
  };
12978
12979
  var templateObject_1$6;
12979
12980