@trafilea/afrodita-components 6.55.6 → 6.55.7

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 (12) hide show
  1. package/build/index.d.ts +29 -1
  2. package/build/index.esm.js +131 -83
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +131 -83
  5. package/build/index.js.map +1 -1
  6. package/build/theme/revel.theme.d.ts +20 -0
  7. package/build/theme/shapermint.theme.d.ts +20 -0
  8. package/build/theme/thebodcon.theme.d.ts +20 -0
  9. package/build/theme/thespadr.theme.d.ts +20 -0
  10. package/build/theme/thespadr.theme.js +25 -5
  11. package/build/theme/truekind.theme.d.ts +20 -0
  12. package/package.json +1 -1
package/build/index.js CHANGED
@@ -3399,6 +3399,42 @@ var useWindowDimensions = function (breakpoints, _a) {
3399
3399
  return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
3400
3400
  };
3401
3401
 
3402
+ var Container$1x = newStyled.div(templateObject_1$2D || (templateObject_1$2D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
3403
+ var Price$1 = newStyled.p(templateObject_2$1T || (templateObject_2$1T = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
3404
+ var weight = _a.weight;
3405
+ return (weight ? weight : '400');
3406
+ }, function (_a) {
3407
+ var size = _a.size, theme = _a.theme, finalPriceStyled = _a.finalPriceStyled, finalPriceStyledSmall = _a.finalPriceStyledSmall;
3408
+ return getFontSize(size, theme, finalPriceStyled, finalPriceStyledSmall);
3409
+ }, function (_a) {
3410
+ var _b;
3411
+ var size = _a.size;
3412
+ return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
3413
+ }, function (_a) {
3414
+ var color = _a.color;
3415
+ return color;
3416
+ }, function (_a) {
3417
+ var underlined = _a.underlined;
3418
+ return (underlined ? 'line-through' : 'none');
3419
+ }, function (_a) {
3420
+ var _b;
3421
+ var margin = _a.margin, size = _a.size;
3422
+ return (margin ? (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
3423
+ }, function (_a) {
3424
+ var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
3425
+ return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
3426
+ });
3427
+ var TagContainer = newStyled.div(templateObject_3$1t || (templateObject_3$1t = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
3428
+ var _b;
3429
+ var size = _a.size;
3430
+ return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
3431
+ });
3432
+ var PriceContainer$3 = newStyled.div(templateObject_4$19 || (templateObject_4$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n gap: 0.5rem;\n"], ["\n display: flex;\n flex-direction: ", ";\n gap: 0.5rem;\n"])), function (_a) {
3433
+ var invertDirection = _a.invertDirection;
3434
+ return (invertDirection ? 'row-reverse' : 'row');
3435
+ });
3436
+ var templateObject_1$2D, templateObject_2$1T, templateObject_3$1t, templateObject_4$19;
3437
+
3402
3438
  var getStylesBySize$e = function (size, theme) {
3403
3439
  var _a, _b, _c, _d, _e, _f, _g, _h;
3404
3440
  switch (size) {
@@ -3439,36 +3475,6 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
3439
3475
  return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
3440
3476
  }
3441
3477
  };
3442
- var Container$1x = newStyled.div(templateObject_1$2D || (templateObject_1$2D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
3443
- var Price$1 = newStyled.p(templateObject_2$1T || (templateObject_2$1T = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
3444
- var weight = _a.weight;
3445
- return (weight ? weight : '400');
3446
- }, function (_a) {
3447
- var size = _a.size, theme = _a.theme, finalPriceStyled = _a.finalPriceStyled, finalPriceStyledSmall = _a.finalPriceStyledSmall;
3448
- return getFontSize(size, theme, finalPriceStyled, finalPriceStyledSmall);
3449
- }, function (_a) {
3450
- var _b;
3451
- var size = _a.size;
3452
- return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
3453
- }, function (_a) {
3454
- var color = _a.color;
3455
- return color;
3456
- }, function (_a) {
3457
- var underlined = _a.underlined;
3458
- return (underlined ? 'line-through' : 'none');
3459
- }, function (_a) {
3460
- var _b;
3461
- var margin = _a.margin, size = _a.size;
3462
- return (margin ? (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
3463
- }, function (_a) {
3464
- var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
3465
- return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
3466
- });
3467
- var TagContainer = newStyled.div(templateObject_3$1t || (templateObject_3$1t = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
3468
- var _b;
3469
- var size = _a.size;
3470
- return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
3471
- });
3472
3478
  function getTestId$2() {
3473
3479
  var args = [];
3474
3480
  for (var _i = 0; _i < arguments.length; _i++) {
@@ -3477,7 +3483,7 @@ function getTestId$2() {
3477
3483
  return args.filter(Boolean).join('-');
3478
3484
  }
3479
3485
  var PriceLabel$1 = function (_a) {
3480
- var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, _f = _a.clubStyle, clubStyle = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle"]);
3486
+ var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, _f = _a.clubStyle, clubStyle = _f === void 0 ? false : _f, _g = _a.invertDirection, invertDirection = _g === void 0 ? false : _g, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle", "invertDirection"]);
3481
3487
  var theme = useTheme();
3482
3488
  var isMobile = useWindowDimensions().isMobile;
3483
3489
  var priceCommonProps = {
@@ -3493,11 +3499,10 @@ var PriceLabel$1 = function (_a) {
3493
3499
  : isMobile
3494
3500
  ? exports.ComponentSize.Small
3495
3501
  : exports.ComponentSize.XSmall;
3496
- return (jsxRuntime.jsx(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
3502
+ return (jsxRuntime.jsx(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
3497
3503
  };
3498
- return (jsxRuntime.jsxs(Container$1x, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
3499
- };
3500
- var templateObject_1$2D, templateObject_2$1T, templateObject_3$1t;
3504
+ return (jsxRuntime.jsxs(Container$1x, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxRuntime.jsxs(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }), void 0)) : (jsxRuntime.jsxs(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [jsxRuntime.jsx(Price$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }), void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
3505
+ };
3501
3506
 
3502
3507
  var supportedCurrencies = ['AU$', 'CA$', '€', 'kr', '£', 'NZ$', 'S$'];
3503
3508
 
@@ -4900,12 +4905,12 @@ var TAGS = {
4900
4905
  display3: newStyled.h3(templateObject_6$K || (templateObject_6$K = __makeTemplateObject([""], [""]))),
4901
4906
  heading1: newStyled.h1(templateObject_7$A || (templateObject_7$A = __makeTemplateObject([""], [""]))),
4902
4907
  heading2: newStyled.h2(templateObject_8$t || (templateObject_8$t = __makeTemplateObject([""], [""]))),
4903
- heading3: newStyled.h3(templateObject_9$g || (templateObject_9$g = __makeTemplateObject([""], [""]))),
4904
- heading4: newStyled.h4(templateObject_10$e || (templateObject_10$e = __makeTemplateObject([""], [""]))),
4908
+ heading3: newStyled.h3(templateObject_9$h || (templateObject_9$h = __makeTemplateObject([""], [""]))),
4909
+ heading4: newStyled.h4(templateObject_10$f || (templateObject_10$f = __makeTemplateObject([""], [""]))),
4905
4910
  heading5: newStyled.h5(templateObject_11$a || (templateObject_11$a = __makeTemplateObject([""], [""]))),
4906
4911
  heading6: newStyled.h6(templateObject_12$7 || (templateObject_12$7 = __makeTemplateObject([""], [""]))),
4907
4912
  heading7: newStyled.h1(templateObject_13$6 || (templateObject_13$6 = __makeTemplateObject([""], [""]))),
4908
- heading8: newStyled.h1(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject([""], [""]))),
4913
+ heading8: newStyled.h1(templateObject_14$4 || (templateObject_14$4 = __makeTemplateObject([""], [""]))),
4909
4914
  body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
4910
4915
  link: newStyled.a(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
4911
4916
  button: newStyled.span(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
@@ -5032,7 +5037,7 @@ var DEFAULTS = {
5032
5037
  size: 'regular',
5033
5038
  },
5034
5039
  };
5035
- var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$18, templateObject_5$T, templateObject_6$K, templateObject_7$A, templateObject_8$t, templateObject_9$g, templateObject_10$e, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$3, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
5040
+ var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$18, templateObject_5$T, templateObject_6$K, templateObject_7$A, templateObject_8$t, templateObject_9$h, templateObject_10$f, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$4, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
5036
5041
 
5037
5042
  var Container$1u = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
5038
5043
  var Card$4 = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
@@ -6234,15 +6239,15 @@ var SubscriptionHeader$5 = newStyled.div(templateObject_5$P || (templateObject_5
6234
6239
  var BenefitsContainer$4 = newStyled.div(templateObject_6$H || (templateObject_6$H = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
6235
6240
  var Benefit$4 = newStyled.div(templateObject_7$y || (templateObject_7$y = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
6236
6241
  var BenefitText$4 = newStyled(Text$7)(templateObject_8$r || (templateObject_8$r = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
6237
- var SubscriptionDetails = newStyled(Text$7)(templateObject_9$f || (templateObject_9$f = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
6238
- var SubscriptionDetailsContainer = newStyled.div(templateObject_10$d || (templateObject_10$d = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
6242
+ var SubscriptionDetails = newStyled(Text$7)(templateObject_9$g || (templateObject_9$g = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
6243
+ var SubscriptionDetailsContainer = newStyled.div(templateObject_10$e || (templateObject_10$e = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
6239
6244
  var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$9 || (templateObject_11$9 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
6240
6245
  var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateObject_12$6 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
6241
6246
  var selected = _a.selected, theme = _a.theme;
6242
6247
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
6243
6248
  });
6244
6249
  var Container$1m = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
6245
- var templateObject_1$2c, templateObject_2$1C, templateObject_3$1j, templateObject_4$13, templateObject_5$P, templateObject_6$H, templateObject_7$y, templateObject_8$r, templateObject_9$f, templateObject_10$d, templateObject_11$9, templateObject_12$6, templateObject_13$5;
6250
+ var templateObject_1$2c, templateObject_2$1C, templateObject_3$1j, templateObject_4$13, templateObject_5$P, templateObject_6$H, templateObject_7$y, templateObject_8$r, templateObject_9$g, templateObject_10$e, templateObject_11$9, templateObject_12$6, templateObject_13$5;
6246
6251
 
6247
6252
  var radioIds$3 = {
6248
6253
  oneTime: {
@@ -6318,7 +6323,10 @@ var getSelectedBorder$1 = function (_a) {
6318
6323
  }
6319
6324
  return "1.5px solid ".concat(colors.shades['700'].color);
6320
6325
  };
6321
- var ContainerBase$4 = newStyled.div(templateObject_3$1i || (templateObject_3$1i = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
6326
+ var ContainerBase$4 = newStyled.div(templateObject_3$1i || (templateObject_3$1i = __makeTemplateObject(["\n border-radius: ", ";\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: ", ";\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
6327
+ var borderRadiusValue = _a.borderRadiusValue;
6328
+ return borderRadiusValue !== null && borderRadiusValue !== void 0 ? borderRadiusValue : '8px';
6329
+ }, function (_a) {
6322
6330
  var selected = _a.selected, theme = _a.theme;
6323
6331
  return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
6324
6332
  }, function (_a) {
@@ -6344,8 +6352,8 @@ var SubscriptionHeader$4 = newStyled.div(templateObject_6$G || (templateObject_6
6344
6352
  });
6345
6353
  var BenefitsContainer$3 = newStyled.div(templateObject_7$x || (templateObject_7$x = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
6346
6354
  var Benefit$3 = newStyled.div(templateObject_8$q || (templateObject_8$q = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
6347
- var BenefitText$3 = newStyled(Text$7)(templateObject_9$e || (templateObject_9$e = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
6348
- var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$c || (templateObject_10$c = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
6355
+ var BenefitText$3 = newStyled(Text$7)(templateObject_9$f || (templateObject_9$f = __makeTemplateObject(["\n line-height: 20px;\n"], ["\n line-height: 20px;\n"])));
6356
+ var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$d || (templateObject_10$d = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
6349
6357
  var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
6350
6358
  var selected = _a.selected, theme = _a.theme;
6351
6359
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
@@ -6355,7 +6363,8 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4
6355
6363
  var theme = _a.theme;
6356
6364
  return theme.component.autoship.tooltip.margin;
6357
6365
  });
6358
- var templateObject_1$2b, templateObject_2$1B, templateObject_3$1i, templateObject_4$12, templateObject_5$O, templateObject_6$G, templateObject_7$x, templateObject_8$q, templateObject_9$e, templateObject_10$c, templateObject_11$8, templateObject_12$5, templateObject_13$4;
6366
+ var BulletIconWrapper = newStyled.div(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject(["\n margin-right: 9px;\n"], ["\n margin-right: 9px;\n"])));
6367
+ var templateObject_1$2b, templateObject_2$1B, templateObject_3$1i, templateObject_4$12, templateObject_5$O, templateObject_6$G, templateObject_7$x, templateObject_8$q, templateObject_9$f, templateObject_10$d, templateObject_11$8, templateObject_12$5, templateObject_13$4, templateObject_14$3;
6359
6368
 
6360
6369
  var radioIds$2 = {
6361
6370
  oneTime: {
@@ -6368,7 +6377,7 @@ var radioIds$2 = {
6368
6377
  var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
6369
6378
  var DEFAULT_FREQUENCY_UNIT = 'months';
6370
6379
  var AutoshipV2 = function (_a) {
6371
- var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
6380
+ var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs, _d = _a.hasInfoBulletIcons, hasInfoBulletIcons = _d === void 0 ? true : _d, borderRadiusValue = _a.borderRadiusValue;
6372
6381
  var theme = useTheme();
6373
6382
  var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
6374
6383
  ? frequencyValues.map(function (value) {
@@ -6378,8 +6387,8 @@ var AutoshipV2 = function (_a) {
6378
6387
  : [DEFAULT_DROPDOWN_OPTIONS];
6379
6388
  var initialRadioChecked = radioIds$2.autoship &&
6380
6389
  ((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.includes(radioIds$2.autoship.id)) ? radioIds$2.oneTime : radioIds$2.autoship);
6381
- var _d = React$2.useState(initialRadioChecked), radioCheck = _d[0], setRadioCheck = _d[1];
6382
- var _e = React$2.useState(dropdownOptions[0].value), subscriptionPeriod = _e[0], setSubscriptionPeriod = _e[1];
6390
+ var _e = React$2.useState(initialRadioChecked), radioCheck = _e[0], setRadioCheck = _e[1];
6391
+ var _f = React$2.useState(dropdownOptions[0].value), subscriptionPeriod = _f[0], setSubscriptionPeriod = _f[1];
6383
6392
  var listPrice = pricing.listPrice, discountedPrice = pricing.discountedPrice, autoshipDiscountPercentage = pricing.autoshipDiscountPercentage;
6384
6393
  var autoShipAdditionalDiscount = discountedPrice * (autoshipDiscountPercentage / 100);
6385
6394
  var autoshipFinalPrice = Number((discountedPrice - autoShipAdditionalDiscount).toFixed(2));
@@ -6415,9 +6424,9 @@ var AutoshipV2 = function (_a) {
6415
6424
  onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
6416
6425
  };
6417
6426
  var benefitsColor = benefitsColorMapper(theme);
6418
- return (jsxRuntime.jsxs(Container$1l, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag$3, __assign$1({ isSelected: radioIds$2.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader$4, { children: [jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$2.autoship.id) }, void 0), jsxRuntime.jsx(TooltipWrapper$1, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer$3, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$3, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
6419
- ? benefitsColor.selected
6420
- : benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$3, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer$3, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds$2.oneTime.id, id: radioIds$2.oneTime.id, value: radioIds$2.oneTime.id, checked: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$2.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
6427
+ return (jsxRuntime.jsxs(Container$1l, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id, borderRadiusValue: borderRadiusValue }, { children: [jsxRuntime.jsx(DiscountTag$3, __assign$1({ isSelected: radioIds$2.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader$4, { children: [jsxRuntime.jsxs(FlexContainer$3, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$2.autoship.id) }, void 0), jsxRuntime.jsx(TooltipWrapper$1, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer$3, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$3, { children: [hasInfoBulletIcons && (jsxRuntime.jsx(BulletIconWrapper, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
6428
+ ? benefitsColor.selected
6429
+ : benefitsColor.base }, void 0) }, void 0)), jsxRuntime.jsx(BenefitText$3, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer$3, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, borderRadiusValue: borderRadiusValue, onClick: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds$2.oneTime.id, id: radioIds$2.oneTime.id, value: radioIds$2.oneTime.id, checked: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$2.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$3, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
6421
6430
  };
6422
6431
 
6423
6432
  var _a$2;
@@ -6902,7 +6911,7 @@ var Rating = function (_a) {
6902
6911
  href: reviewsContainerId,
6903
6912
  }
6904
6913
  : {};
6905
- return (jsxRuntime.jsxs(Container$1b, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
6914
+ return (jsxRuntime.jsxs(Container$1b, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), (reviews || reviewsText) && (jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0))] }), void 0));
6906
6915
  };
6907
6916
 
6908
6917
  var ImageWrapper$4 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"])), function (_a) {
@@ -7339,11 +7348,11 @@ var STYLES_BY_THEME = {
7339
7348
  mobile: {
7340
7349
  fontSize: '14px',
7341
7350
  },
7342
- fontSize: '16px',
7343
- fontWeight: '600',
7351
+ fontSize: '14px',
7352
+ fontWeight: '400',
7344
7353
  },
7345
7354
  image: {
7346
- borderRadius: '8px',
7355
+ borderRadius: '0px',
7347
7356
  },
7348
7357
  },
7349
7358
  Revel: {
@@ -7415,7 +7424,7 @@ var Title$7 = newStyled.h2(templateObject_4$U || (templateObject_4$U = __makeTem
7415
7424
  return STYLES_BY_THEME[theme.name].title.fontWeight;
7416
7425
  }, function (_a) {
7417
7426
  var theme = _a.theme;
7418
- return theme.colors.pallete.secondary.color;
7427
+ return theme.colors.text.color;
7419
7428
  }, function (_a) {
7420
7429
  var _b = _a.align, align = _b === void 0 ? 'center' : _b;
7421
7430
  return align;
@@ -7468,7 +7477,12 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$C || (templateObject_6
7468
7477
  });
7469
7478
  var MarginTopContainer$1 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
7470
7479
  var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
7471
- var templateObject_1$1G, templateObject_2$1k, templateObject_3$16, templateObject_4$U, templateObject_5$J, templateObject_6$C, templateObject_7$v, templateObject_8$o;
7480
+ var Divider = newStyled.div(templateObject_9$e || (templateObject_9$e = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n background-color: ", ";\n"])), function (_a) {
7481
+ var theme = _a.theme;
7482
+ return theme.colors.shades['100'].color;
7483
+ });
7484
+ var OneLineInfoWrapper = newStyled.div(templateObject_10$c || (templateObject_10$c = __makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: space-between;\n"], ["\n width: 100%;\n display: flex;\n justify-content: space-between;\n"])));
7485
+ var templateObject_1$1G, templateObject_2$1k, templateObject_3$16, templateObject_4$U, templateObject_5$J, templateObject_6$C, templateObject_7$v, templateObject_8$o, templateObject_9$e, templateObject_10$c;
7472
7486
 
7473
7487
  var ProductItemMobile = function (_a) {
7474
7488
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
@@ -7488,7 +7502,7 @@ var ProductItemMobile = function (_a) {
7488
7502
  } : _s, _t = _a.hasStrength, hasStrength = _t === void 0 ? {
7489
7503
  strength: -1,
7490
7504
  description: '',
7491
- } : _t, _u = _a.clubPrice, clubPrice = _u === void 0 ? '' : _u, _v = _a.showClubPriceLabel, showClubPriceLabel = _v === void 0 ? false : _v, isRatingLoading = _a.isRatingLoading, _w = _a.version, version = _w === void 0 ? 1 : _w, _x = _a.showDiscountPercentageTag, showDiscountPercentageTag = _x === void 0 ? false : _x, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag, _y = _a.isOnViewport, isOnViewport = _y === void 0 ? false : _y, _z = _a.hasDefaultSize, hasDefaultSize = _z === void 0 ? false : _z, clubOffer = _a.clubOffer, likeBtn = _a.likeBtn, onClickBottomButton = _a.onClickBottomButton, _0 = _a.showDecimals, showDecimals = _0 === void 0 ? true : _0;
7505
+ } : _t, _u = _a.clubPrice, clubPrice = _u === void 0 ? '' : _u, _v = _a.showClubPriceLabel, showClubPriceLabel = _v === void 0 ? false : _v, isRatingLoading = _a.isRatingLoading, _w = _a.version, version = _w === void 0 ? 1 : _w, _x = _a.showDiscountPercentageTag, showDiscountPercentageTag = _x === void 0 ? false : _x, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag, _y = _a.isOnViewport, isOnViewport = _y === void 0 ? false : _y, _z = _a.hasDefaultSize, hasDefaultSize = _z === void 0 ? false : _z, clubOffer = _a.clubOffer, likeBtn = _a.likeBtn, onClickBottomButton = _a.onClickBottomButton, _0 = _a.showDecimals, showDecimals = _0 === void 0 ? true : _0, _1 = _a.showDivider, showDivider = _1 === void 0 ? false : _1, _2 = _a.invertPriceDirection, invertPriceDirection = _2 === void 0 ? false : _2, _3 = _a.priceAndReviewInOneLine, priceAndReviewInOneLine = _3 === void 0 ? false : _3;
7492
7506
  var theme = useTheme();
7493
7507
  var styles = getStylesBySize$b(size);
7494
7508
  var isMobile = useWindowDimensions().isMobile;
@@ -7533,7 +7547,7 @@ var ProductItemMobile = function (_a) {
7533
7547
  case 5:
7534
7548
  return (jsx(ClubOfferPriceLabelWrapper, __assign$1({ style: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.wrapperStyle }, { children: jsx(ClubPriceMemberLabel, { isClub: true, isPDP: true, finalPrice: (_e = clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.price) === null || _e === void 0 ? void 0 : _e.finalPrice, originalPrice: (_f = clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.price) === null || _f === void 0 ? void 0 : _f.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, icon: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.clubOfferIcon, isCollections: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isCollections }, void 0) }), void 0));
7535
7549
  default:
7536
- return priceDisplayType === 'styled' ? (jsx(PriceLabelV2$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount", showDecimals: showDecimals }, void 0)) : (jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
7550
+ return priceDisplayType === 'styled' ? (jsx(PriceLabelV2$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount", showDecimals: showDecimals }, void 0)) : (jsx(PriceLabel$1, { invertDirection: invertPriceDirection, finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
7537
7551
  ? !isMobile
7538
7552
  ? { fontSize: '16px', fontWeight: 700 }
7539
7553
  : { fontSize: '12px', fontWeight: 700 }
@@ -7541,14 +7555,16 @@ var ProductItemMobile = function (_a) {
7541
7555
  }
7542
7556
  };
7543
7557
  var RatingDisplay = function () {
7544
- if (isRatingLoading)
7558
+ if (isRatingLoading) {
7545
7559
  return jsx(SkeletonBox, { height: "20px", width: "80px" }, void 0);
7546
- if (!rating.reviews)
7560
+ }
7561
+ if (!rating.reviews && !rating.rating) {
7547
7562
  return jsx(Fragment, {}, void 0);
7548
- return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
7563
+ }
7564
+ return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating === null || rating === void 0 ? void 0 : rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
7549
7565
  };
7550
- var _1 = React$2.useState((_b = likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.isLiked) !== null && _b !== void 0 ? _b : false), isLiked = _1[0], setIsLiked = _1[1];
7551
- var _2 = React$2.useState((_c = likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.likes) !== null && _c !== void 0 ? _c : 0), likesCount = _2[0], setLikesCount = _2[1];
7566
+ var _4 = React$2.useState((_b = likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.isLiked) !== null && _b !== void 0 ? _b : false), isLiked = _4[0], setIsLiked = _4[1];
7567
+ var _5 = React$2.useState((_c = likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.likes) !== null && _c !== void 0 ? _c : 0), likesCount = _5[0], setLikesCount = _5[1];
7552
7568
  var handleLikeClick = function (e) {
7553
7569
  e.stopPropagation();
7554
7570
  if (isLiked) {
@@ -7565,9 +7581,9 @@ var ProductItemMobile = function (_a) {
7565
7581
  active: (_f = (_e = (_d = likeBtn.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.active) !== null && _f !== void 0 ? _f : theme.colors.shades.white.color,
7566
7582
  hover: (_m = (_j = (_h = (_g = likeBtn.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.hover) !== null && _j !== void 0 ? _j : (_l = (_k = likeBtn.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l.active) !== null && _m !== void 0 ? _m : theme.colors.shades.white.color,
7567
7583
  },
7568
- } }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$17, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName, "data-testid": "product-card-title" }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom && !ratingOnTop ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$4, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
7584
+ } }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$17, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName, "data-testid": "product-card-title" }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), showDivider && (jsxs(Fragment, { children: [jsx(Divider, { theme: theme }, void 0), jsx(Spacing, { size: space }, void 0)] }, void 0)), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom && !ratingOnTop ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : priceAndReviewInOneLine && !ratingOnTop ? (jsxs(OneLineInfoWrapper, { children: [PriceLabelDisplay(), jsx(RatingDisplay, {}, void 0)] }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$4, __assign$1({}, discountTag, { size: exports.ComponentSize.Medium, style: {
7569
7585
  letterSpacing: '-0.05rem',
7570
- } }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && jsx(RatingDisplay, {}, void 0)] }, void 0)), !!onClickBottomButton && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsxs(IconButton, __assign$1({ size: exports.ComponentSize.Small, width: "100%", onClick: function (e) {
7586
+ } }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && !priceAndReviewInOneLine && jsx(RatingDisplay, {}, void 0)] }, void 0)), !!onClickBottomButton && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsxs(IconButton, __assign$1({ size: exports.ComponentSize.Small, width: "100%", onClick: function (e) {
7571
7587
  e.preventDefault();
7572
7588
  e.stopPropagation();
7573
7589
  onClickBottomButton === null || onClickBottomButton === void 0 ? void 0 : onClickBottomButton(e);
@@ -8009,23 +8025,45 @@ var ButtonSecondary = function (props) {
8009
8025
  } }), void 0));
8010
8026
  };
8011
8027
 
8012
- var ButtonSecondaryOutline = function (props) {
8013
- var theme = useTheme();
8014
- return (jsx(BaseCTA, __assign$1({}, props, { css: {
8015
- backgroundColor: theme.component.button.secondary.active.color,
8016
- color: theme.component.button.secondary.active.backgroundColor,
8017
- border: "1px solid ".concat(theme.component.button.secondary.active.backgroundColor),
8028
+ function getStyle(theme) {
8029
+ var _a;
8030
+ var outlineStyle = (_a = theme.component.button) === null || _a === void 0 ? void 0 : _a.outline;
8031
+ if (outlineStyle) {
8032
+ return {
8033
+ backgroundColor: outlineStyle.active.backgroundColor,
8034
+ color: outlineStyle.active.color,
8035
+ border: "2px solid ".concat(outlineStyle.active.color),
8018
8036
  fontFamily: 'inherit',
8019
8037
  '&:hover': {
8020
- backgroundColor: theme.component.button.secondary.active.backgroundColor,
8021
- color: theme.component.button.secondary.active.color,
8038
+ backgroundColor: outlineStyle.hover.backgroundColor,
8039
+ color: outlineStyle.hover.color,
8022
8040
  },
8023
8041
  '&:disabled': {
8024
8042
  backgroundColor: theme.colors.background.disabled,
8025
8043
  color: theme.colors.text.disabled,
8026
8044
  border: 'none',
8027
8045
  },
8028
- } }), void 0));
8046
+ };
8047
+ }
8048
+ return {
8049
+ backgroundColor: theme.component.button.secondary.active.color,
8050
+ color: theme.component.button.secondary.active.backgroundColor,
8051
+ border: "1px solid ".concat(theme.component.button.secondary.active.backgroundColor),
8052
+ fontFamily: 'inherit',
8053
+ '&:hover': {
8054
+ backgroundColor: theme.component.button.secondary.active.backgroundColor,
8055
+ color: theme.component.button.secondary.active.color,
8056
+ },
8057
+ '&:disabled': {
8058
+ backgroundColor: theme.colors.background.disabled,
8059
+ color: theme.colors.text.disabled,
8060
+ border: 'none',
8061
+ },
8062
+ };
8063
+ }
8064
+ var ButtonSecondaryOutline = function (props) {
8065
+ var theme = useTheme();
8066
+ return jsx(BaseCTA, __assign$1({}, props, { css: getStyle(theme) }), void 0);
8029
8067
  };
8030
8068
 
8031
8069
  var Container$13 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
@@ -19982,12 +20020,22 @@ var Tag = function (_a) {
19982
20020
  };
19983
20021
  var templateObject_1$K;
19984
20022
 
19985
- var getStylesBySize$6 = function (size, styledBorder) {
20023
+ var getBorderRadius = function (size, styledBorder, noBorderRadius) {
20024
+ var styledBorderValue = '20px';
20025
+ var defaultValue = size === exports.ComponentSize.Small ? '0 0.125em 0.125rem 0' : '0 0.25rem 0.25rem 0';
20026
+ if (noBorderRadius)
20027
+ return '0px';
20028
+ if (styledBorder)
20029
+ return styledBorderValue;
20030
+ return defaultValue;
20031
+ };
20032
+ var getStylesBySize$6 = function (size, styledBorder, noBorderRadius) {
20033
+ var borderRadius = getBorderRadius(size, styledBorder, noBorderRadius);
19986
20034
  switch (size) {
19987
20035
  case exports.ComponentSize.Large:
19988
20036
  return {
19989
20037
  padding: '0.125rem 1.25rem 0 1.25rem',
19990
- borderRadius: styledBorder ? '20px' : '0 0.25rem 0.25rem 0',
20038
+ borderRadius: borderRadius,
19991
20039
  fontSize: '0.875rem',
19992
20040
  lineHeight: '0.875rem',
19993
20041
  height: '1.5rem',
@@ -19995,7 +20043,7 @@ var getStylesBySize$6 = function (size, styledBorder) {
19995
20043
  case exports.ComponentSize.Medium:
19996
20044
  return {
19997
20045
  padding: '0.063rem 0.625rem',
19998
- borderRadius: styledBorder ? '20px' : '0 0.25rem 0.25rem 0',
20046
+ borderRadius: borderRadius,
19999
20047
  fontSize: '0.625rem',
20000
20048
  lineHeight: '0.625rem',
20001
20049
  height: '1rem',
@@ -20003,7 +20051,7 @@ var getStylesBySize$6 = function (size, styledBorder) {
20003
20051
  case exports.ComponentSize.Small:
20004
20052
  return {
20005
20053
  padding: '0.125rem 0.625rem',
20006
- borderRadius: styledBorder ? '20px' : '0 0.125em 0.125rem 0',
20054
+ borderRadius: borderRadius,
20007
20055
  fontSize: '0.5rem',
20008
20056
  lineHeight: '0.75rem',
20009
20057
  height: '0.875rem',
@@ -20011,10 +20059,10 @@ var getStylesBySize$6 = function (size, styledBorder) {
20011
20059
  }
20012
20060
  };
20013
20061
  var CategoryTag = function (_a) {
20014
- var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b, backgroundColor = _a.backgroundColor;
20062
+ var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b, backgroundColor = _a.backgroundColor, _c = _a.hasMargin, hasMargin = _c === void 0 ? false : _c, _d = _a.noBorderRadius, noBorderRadius = _d === void 0 ? false : _d;
20015
20063
  var theme = useTheme();
20016
- var stylesBySize = getStylesBySize$6(size, styledBorder);
20017
- return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor || theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
20064
+ var stylesBySize = getStylesBySize$6(size, styledBorder, noBorderRadius);
20065
+ return (jsx(Tag, { css: __assign$1({ margin: hasMargin ? '0.5rem' : 'unset', backgroundColor: backgroundColor || theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
20018
20066
  };
20019
20067
 
20020
20068
  var getStylesBySize$5 = function (size) {