@trafilea/afrodita-components 6.9.1 → 6.10.0

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 (11) hide show
  1. package/build/index.d.ts +25 -19
  2. package/build/index.esm.js +165 -120
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +165 -120
  5. package/build/index.js.map +1 -1
  6. package/build/theme/revel.theme.d.ts +4 -0
  7. package/build/theme/shapermint.theme.d.ts +4 -0
  8. package/build/theme/thebodcon.theme.d.ts +4 -0
  9. package/build/theme/thespadr.theme.d.ts +4 -0
  10. package/build/theme/truekind.theme.d.ts +4 -0
  11. package/package.json +1 -1
package/build/index.js CHANGED
@@ -3093,11 +3093,13 @@ var inline = function (text) {
3093
3093
  };
3094
3094
 
3095
3095
  var ThemeProvider = function (_a) {
3096
- var theme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children;
3096
+ var _b;
3097
+ var unparsedTheme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children, config = _a.config;
3097
3098
  //TODO Analyze why we are doing this and remove
3098
- var parsedTheme = React$2.useMemo(function () { return applyVariablesIntoTheme(theme); }, [theme]);
3099
- var themeWithOtherVariables = __assign$1(__assign$1({}, parsedTheme), { assets: __assign$1(__assign$1({}, parsedTheme.assets), { isSameOriginIcons: isSameOriginIcons }) });
3100
- return (jsxRuntime.jsx(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsxRuntime.jsx(AssetsProvider, __assign$1({ assets: themeWithOtherVariables.assets }, { children: children }), void 0) }), void 0));
3099
+ var theme = React$2.useMemo(function () { return (__assign$1(__assign$1({}, applyVariablesIntoTheme(__assign$1({}, unparsedTheme))), { config: config })); }, [unparsedTheme]);
3100
+ var assets = __assign$1(__assign$1({}, theme.assets), { isSameOriginIcons: isSameOriginIcons, cdn: theme.config ? "".concat(theme.config.cdn, "/assets/common") : (_b = theme.assets) === null || _b === void 0 ? void 0 : _b.cdn });
3101
+ var themeWithOtherVariables = __assign$1(__assign$1({}, theme), { assets: assets });
3102
+ return (jsxRuntime.jsx(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsxRuntime.jsx(AssetsProvider, __assign$1({ assets: assets }, { children: children }), void 0) }), void 0));
3101
3103
  };
3102
3104
  var useTheme = function () { return useTheme$1(); };
3103
3105
  var DefaultContainer = function (props) { return jsxRuntime.jsx("div", __assign$1({}, props), void 0); };
@@ -3324,7 +3326,7 @@ var UnmemoIconFromExtSource = function (_a) {
3324
3326
  if (!fill && !svgProps) {
3325
3327
  return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
3326
3328
  }
3327
- return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { xlinkHref: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
3329
+ return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
3328
3330
  };
3329
3331
  var IconFromExtSource = React__default["default"].memo(UnmemoIconFromExtSource);
3330
3332
 
@@ -3338,12 +3340,62 @@ var UnmemoIcon = function (_a) {
3338
3340
  var svgSplit = name.split('/');
3339
3341
  var svgId = svgSplit[svgSplit.length - 1];
3340
3342
  if (assets.isSameOriginIcons) {
3341
- return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { xlinkHref: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
3343
+ return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
3342
3344
  }
3343
3345
  return (jsxRuntime.jsx(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
3344
3346
  };
3345
3347
  var Icon$1 = React__default["default"].memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
3346
3348
 
3349
+ var getValidSize = function (size) {
3350
+ if (!size) {
3351
+ return 'auto';
3352
+ }
3353
+ if (typeof size === 'number') {
3354
+ return String(size);
3355
+ }
3356
+ if (size.endsWith('px')) {
3357
+ return size.replace('px', '');
3358
+ }
3359
+ if (Number(size))
3360
+ return String(Number(size));
3361
+ return 'auto';
3362
+ };
3363
+
3364
+ var DEFAULT_QUALITY = 100;
3365
+ var buildImageUrl = function (_a) {
3366
+ var cdn = _a.cdn, src = _a.src, widthString = _a.width, heightString = _a.height, _b = _a.quality, quality = _b === void 0 ? DEFAULT_QUALITY : _b;
3367
+ try {
3368
+ new URL(src);
3369
+ var baseUrl = new URL(src);
3370
+ if (!baseUrl.host) {
3371
+ return src;
3372
+ }
3373
+ if (cdn.includes(baseUrl.host)) {
3374
+ return src;
3375
+ }
3376
+ var url = encodeURIComponent(src);
3377
+ var source = "/external/".concat(baseUrl.host.replaceAll('.', ''));
3378
+ var width = getValidSize(widthString);
3379
+ var height = getValidSize(heightString);
3380
+ return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?width=").concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url);
3381
+ }
3382
+ catch (e) {
3383
+ console.warn("[Afrodita][buildImageUrl] [src:".concat(src, "] ERROR:").concat(e));
3384
+ return src;
3385
+ }
3386
+ };
3387
+
3388
+ var Img = newStyled.img(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
3389
+ var Image$3 = function (_a) {
3390
+ var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, className = _a.className;
3391
+ var config = useTheme().config;
3392
+ var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
3393
+ ? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
3394
+ : src;
3395
+ return (jsxRuntime.jsx(Img, { src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
3396
+ };
3397
+ var templateObject_1$1V;
3398
+
3347
3399
  var Add = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
3348
3400
 
3349
3401
  var Check$2 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/check" }), void 0); };
@@ -4127,7 +4179,7 @@ function jsxs(type, props, key) {
4127
4179
  // This defines which HTML tag to render for each `variant`, it also defines
4128
4180
  // `variants` styles that are consistent through all themes.
4129
4181
  var TAGS = {
4130
- hero1: newStyled.h1(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""]))),
4182
+ hero1: newStyled.h1(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject([""], [""]))),
4131
4183
  hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
4132
4184
  hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
4133
4185
  display1: newStyled.h1(templateObject_4$K || (templateObject_4$K = __makeTemplateObject([""], [""]))),
@@ -4263,9 +4315,9 @@ var DEFAULTS = {
4263
4315
  size: 'regular',
4264
4316
  },
4265
4317
  };
4266
- var templateObject_1$1V, templateObject_2$1g, templateObject_3$Z, templateObject_4$K, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$f, templateObject_9$8, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
4318
+ var templateObject_1$1U, templateObject_2$1g, templateObject_3$Z, templateObject_4$K, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$f, templateObject_9$8, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
4267
4319
 
4268
- var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __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"])));
4320
+ var Container$1b = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __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"])));
4269
4321
  var Card$3 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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"])));
4270
4322
  var Tag$2 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
4271
4323
  var Label$5 = newStyled.div(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
@@ -4295,9 +4347,9 @@ var PackCard$1 = function (_a) {
4295
4347
  currency: currencyCode || 'USD',
4296
4348
  }), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
4297
4349
  };
4298
- var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$J, templateObject_5$u, templateObject_6$p;
4350
+ var templateObject_1$1T, templateObject_2$1f, templateObject_3$Y, templateObject_4$J, templateObject_5$u, templateObject_6$p;
4299
4351
 
4300
- var Container$1a = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
4352
+ var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
4301
4353
  var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
4302
4354
  var DropList = function (_a) {
4303
4355
  var dropTotal = _a.dropTotal, drops = _a.drops;
@@ -4305,17 +4357,17 @@ var DropList = function (_a) {
4305
4357
  return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
4306
4358
  }) }, void 0));
4307
4359
  };
4308
- var templateObject_1$1T, templateObject_2$1e;
4360
+ var templateObject_1$1S, templateObject_2$1e;
4309
4361
 
4310
4362
  var DROPS_TOTAL = 5;
4311
- var Container$19 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
4363
+ var Container$19 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
4312
4364
  var Title$8 = newStyled.p(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
4313
4365
  var Description$3 = newStyled.p(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
4314
4366
  var AbsorbencyLevel = function (_a) {
4315
4367
  var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
4316
4368
  return (jsxRuntime.jsxs(Container$19, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
4317
4369
  };
4318
- var templateObject_1$1S, templateObject_2$1d, templateObject_3$X;
4370
+ var templateObject_1$1R, templateObject_2$1d, templateObject_3$X;
4319
4371
 
4320
4372
  function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
4321
4373
  `),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
@@ -4391,7 +4443,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
4391
4443
  AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
4392
4444
  ]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
4393
4445
  var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
4394
- var StyledContent = newStyled.button(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
4446
+ var StyledContent = newStyled.button(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
4395
4447
  var Accordion$1 = function (_a) {
4396
4448
  var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
4397
4449
  var theme = useTheme();
@@ -4415,9 +4467,9 @@ var Accordion$1 = function (_a) {
4415
4467
  } }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
4416
4468
  } }), void 0));
4417
4469
  };
4418
- var templateObject_1$1R;
4470
+ var templateObject_1$1Q;
4419
4471
 
4420
- var Container$18 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
4472
+ var Container$18 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
4421
4473
  var AccordionOptions = function (_a) {
4422
4474
  var titleColor = _a.titleColor, accordions = _a.accordions;
4423
4475
  var _b = React$2.useState({
@@ -4441,7 +4493,7 @@ var AccordionOptions = function (_a) {
4441
4493
  } }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
4442
4494
  }) }, void 0));
4443
4495
  };
4444
- var templateObject_1$1Q;
4496
+ var templateObject_1$1P;
4445
4497
 
4446
4498
  exports.CardSectionType = void 0;
4447
4499
  (function (CardSectionType) {
@@ -4603,14 +4655,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
4603
4655
  literal: true,
4604
4656
  });
4605
4657
 
4606
- var ErrorText = newStyled.h3(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
4658
+ var ErrorText = newStyled.h3(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
4607
4659
  var ErrorContainer = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
4608
4660
  var Error$1 = function (_a) {
4609
4661
  var error = _a.error;
4610
4662
  var theme = useTheme();
4611
4663
  return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
4612
4664
  };
4613
- var templateObject_1$1P, templateObject_2$1c;
4665
+ var templateObject_1$1O, templateObject_2$1c;
4614
4666
 
4615
4667
  var BaseSelectButton = function (_a) {
4616
4668
  var children = _a.children, as = _a.as;
@@ -4627,7 +4679,7 @@ function BaseSelectOption(_a) {
4627
4679
  return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
4628
4680
  }
4629
4681
 
4630
- var CustomListBox = newStyled(Ee)(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
4682
+ var CustomListBox = newStyled(Ee)(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
4631
4683
  function BaseSelect(_a) {
4632
4684
  var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
4633
4685
  return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
@@ -4637,7 +4689,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
4637
4689
  Options: BaseSelectOptions,
4638
4690
  Option: BaseSelectOption,
4639
4691
  });
4640
- var templateObject_1$1O;
4692
+ var templateObject_1$1N;
4641
4693
 
4642
4694
  var CustomButton = newStyled.button(function (_a) {
4643
4695
  var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
@@ -4676,7 +4728,7 @@ var CustomButton = newStyled.button(function (_a) {
4676
4728
  });
4677
4729
  });
4678
4730
  //TODO Remove this when we find the real solution
4679
- var StyledIcon$1 = newStyled.span(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
4731
+ var StyledIcon$1 = newStyled.span(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
4680
4732
  var open = _a.open;
4681
4733
  return open &&
4682
4734
  "\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
@@ -4696,7 +4748,7 @@ var BaseDropdownButton = function (_a) {
4696
4748
  } }), void 0));
4697
4749
  };
4698
4750
  var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
4699
- var templateObject_1$1N;
4751
+ var templateObject_1$1M;
4700
4752
 
4701
4753
  var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
4702
4754
  var theme = _a.theme;
@@ -4863,7 +4915,7 @@ var CustomCheckboxStyles = {
4863
4915
  },
4864
4916
  };
4865
4917
 
4866
- var Container$17 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
4918
+ var Container$17 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
4867
4919
  var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
4868
4920
  CustomCheckboxStyles[props.size](props.theme),
4869
4921
  CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
@@ -4890,7 +4942,7 @@ var Checkbox = function (_a) {
4890
4942
  };
4891
4943
  return (jsxRuntime.jsxs(Container$17, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
4892
4944
  };
4893
- var templateObject_1$1M, templateObject_2$1b;
4945
+ var templateObject_1$1L, templateObject_2$1b;
4894
4946
 
4895
4947
  var CustomOption = newStyled.li(function (_a) {
4896
4948
  var theme = _a.theme, selected = _a.selected, active = _a.active;
@@ -4939,7 +4991,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
4939
4991
  Option: BaseDropdownOption,
4940
4992
  });
4941
4993
 
4942
- var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject([""], [""])));
4994
+ var Container$16 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
4943
4995
  var RequiredPlaceholder = newStyled.p(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
4944
4996
  function SimpleDropdown(_a) {
4945
4997
  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, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
@@ -4972,7 +5024,7 @@ function SimpleDropdown(_a) {
4972
5024
  var DropdownContainer = showRequiredPlaceholder ? Container$16 : React$2.Fragment;
4973
5025
  return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
4974
5026
  }
4975
- var templateObject_1$1L, templateObject_2$1a;
5027
+ var templateObject_1$1K, templateObject_2$1a;
4976
5028
 
4977
5029
  /* base styles & size variants */
4978
5030
  var CustomRadioStyles$2 = {
@@ -5037,7 +5089,7 @@ var ContainerStyles$2 = {
5037
5089
  },
5038
5090
  };
5039
5091
 
5040
- var Wrapper$7 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
5092
+ var Wrapper$7 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
5041
5093
  var Container$15 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
5042
5094
  var Input$4 = newStyled.input(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
5043
5095
  var disabled = _a.disabled;
@@ -5070,7 +5122,7 @@ var RadioInput = function (_a) {
5070
5122
  };
5071
5123
  return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$15, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
5072
5124
  };
5073
- var templateObject_1$1K, templateObject_2$19, templateObject_3$W, templateObject_4$I;
5125
+ var templateObject_1$1J, templateObject_2$19, templateObject_3$W, templateObject_4$I;
5074
5126
 
5075
5127
  var getWrapperFlexDirection = function (position) {
5076
5128
  switch (position) {
@@ -5121,7 +5173,7 @@ var getTooltipAlignItems = function (position, align) {
5121
5173
  }
5122
5174
  };
5123
5175
 
5124
- var Wrapper$6 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
5176
+ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
5125
5177
  var position = _a.position;
5126
5178
  return getWrapperFlexDirection(position);
5127
5179
  }, function (_a) {
@@ -5177,7 +5229,7 @@ var Title$7 = newStyled.h1(templateObject_6$o || (templateObject_6$o = __makeTem
5177
5229
  });
5178
5230
  var IconContainer$5 = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
5179
5231
  var CloseToolTip = newStyled.button(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
5180
- var templateObject_1$1J, templateObject_2$18, templateObject_3$V, templateObject_4$H, templateObject_5$t, templateObject_6$o, templateObject_7$h, templateObject_8$e;
5232
+ var templateObject_1$1I, templateObject_2$18, templateObject_3$V, templateObject_4$H, templateObject_5$t, templateObject_6$o, templateObject_7$h, templateObject_8$e;
5181
5233
 
5182
5234
  var useOnClickOutside = function (ref, handler) {
5183
5235
  React$2.useEffect(function () {
@@ -5320,7 +5372,7 @@ var getStylesBySize$d = function (size) {
5320
5372
  };
5321
5373
  }
5322
5374
  };
5323
- var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
5375
+ var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
5324
5376
  var backgroundColor = _a.backgroundColor;
5325
5377
  return backgroundColor;
5326
5378
  }, function (_a) {
@@ -5359,7 +5411,7 @@ var ClubOfferTag = function (_a) {
5359
5411
  var theme = useTheme();
5360
5412
  return (jsxRuntime.jsx(Container$14, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
5361
5413
  };
5362
- var templateObject_1$1I, templateObject_2$17;
5414
+ var templateObject_1$1H, templateObject_2$17;
5363
5415
 
5364
5416
  var getStylesBySize$c = function (size, bordersRounded, theme) {
5365
5417
  var _a, _b, _c;
@@ -5390,7 +5442,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
5390
5442
  };
5391
5443
  }
5392
5444
  };
5393
- var Container$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
5445
+ var Container$13 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
5394
5446
  var backgroundColor = _a.backgroundColor;
5395
5447
  return backgroundColor;
5396
5448
  }, function (_a) {
@@ -5429,7 +5481,7 @@ var DiscountTag$1 = function (_a) {
5429
5481
  var theme = useTheme();
5430
5482
  return (jsxRuntime.jsx(Container$13, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
5431
5483
  };
5432
- var templateObject_1$1H, templateObject_2$16;
5484
+ var templateObject_1$1G, templateObject_2$16;
5433
5485
 
5434
5486
  var getStylesBySize$b = function (size, theme) {
5435
5487
  var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -5471,7 +5523,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
5471
5523
  return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
5472
5524
  }
5473
5525
  };
5474
- var Container$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
5526
+ var Container$12 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
5475
5527
  var Price = newStyled.p(templateObject_2$15 || (templateObject_2$15 = __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) {
5476
5528
  var weight = _a.weight;
5477
5529
  return (weight ? weight : '400');
@@ -5529,9 +5581,9 @@ var PriceLabel = function (_a) {
5529
5581
  };
5530
5582
  return (jsxRuntime.jsxs(Container$12, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(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$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
5531
5583
  };
5532
- var templateObject_1$1G, templateObject_2$15, templateObject_3$U;
5584
+ var templateObject_1$1F, templateObject_2$15, templateObject_3$U;
5533
5585
 
5534
- var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5586
+ var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5535
5587
  var PriceLabelV2 = function (_a) {
5536
5588
  var _b;
5537
5589
  var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _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.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
@@ -5602,9 +5654,9 @@ var PriceLabelV2 = function (_a) {
5602
5654
  lineHeight: '22px',
5603
5655
  } }), void 0)) }), void 0))] }), void 0));
5604
5656
  };
5605
- var templateObject_1$1F;
5657
+ var templateObject_1$1E;
5606
5658
 
5607
- var FinalPriceStyledContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5659
+ var FinalPriceStyledContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5608
5660
  var ContainerDirectionColumn = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
5609
5661
  var DiscountEachOneContainer = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
5610
5662
  var PriceLabelV3 = function (_a) {
@@ -5677,9 +5729,9 @@ var PriceLabelV3 = function (_a) {
5677
5729
  lineHeight: '22px',
5678
5730
  } }), void 0)) }), void 0))] }, void 0)] }), void 0));
5679
5731
  };
5680
- var templateObject_1$1E, templateObject_2$14, templateObject_3$T;
5732
+ var templateObject_1$1D, templateObject_2$14, templateObject_3$T;
5681
5733
 
5682
- var FlexContainer$1 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5734
+ var FlexContainer$1 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5683
5735
  var ContainerBase$1 = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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) {
5684
5736
  var selected = _a.selected, theme = _a.theme;
5685
5737
  return selected
@@ -5717,7 +5769,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObje
5717
5769
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
5718
5770
  });
5719
5771
  var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
5720
- var templateObject_1$1D, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$s, templateObject_6$n, templateObject_7$g, templateObject_8$d, templateObject_9$7, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
5772
+ var templateObject_1$1C, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$s, templateObject_6$n, templateObject_7$g, templateObject_8$d, templateObject_9$7, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
5721
5773
 
5722
5774
  var radioIds$1 = {
5723
5775
  oneTime: {
@@ -5772,7 +5824,7 @@ var Autoship = function (_a) {
5772
5824
  : benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$1, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$1, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
5773
5825
  };
5774
5826
 
5775
- var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5827
+ var FlexContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5776
5828
  var DiscountTag = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n position: absolute;\n top: -25px;\n right: 5px;\n background-color: #c64844;\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: 5px;\n font-weight: 600;\n"], ["\n position: absolute;\n top: -25px;\n right: 5px;\n background-color: #c64844;\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: 5px;\n font-weight: 600;\n"])));
5777
5829
  var ContainerBase = newStyled.div(templateObject_3$R || (templateObject_3$R = __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) {
5778
5830
  var selected = _a.selected, theme = _a.theme;
@@ -5809,7 +5861,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject
5809
5861
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
5810
5862
  });
5811
5863
  var Container$10 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
5812
- var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$c, templateObject_9$6, templateObject_10$5, templateObject_11$3, templateObject_12$2;
5864
+ var templateObject_1$1B, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$c, templateObject_9$6, templateObject_10$5, templateObject_11$3, templateObject_12$2;
5813
5865
 
5814
5866
  var radioIds = {
5815
5867
  oneTime: {
@@ -5877,13 +5929,6 @@ var AutoshipV2 = function (_a) {
5877
5929
  : benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(FlexContainer, { children: jsxRuntime.jsx(DeliveryFrequencySelector, {}, void 0) }, void 0) }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
5878
5930
  };
5879
5931
 
5880
- var Img = newStyled.img(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
5881
- var Image$3 = function (_a) {
5882
- var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
5883
- return (jsxRuntime.jsx(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
5884
- };
5885
- var templateObject_1$1B;
5886
-
5887
5932
  var _a$2;
5888
5933
  exports.BeforeAfterVariant = void 0;
5889
5934
  (function (BeforeAfterVariant) {
@@ -6200,10 +6245,69 @@ var StrengthBars = function (_a) {
6200
6245
  };
6201
6246
  var templateObject_1$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z;
6202
6247
 
6203
- var Container$U = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
6204
- var templateObject_1$1l;
6248
+ var RegularPriceTagSpan = newStyled.span(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
6249
+ var ClubPriceTagSpan = newStyled.span(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
6250
+ var PriceContainer$1 = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
6251
+ var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
6252
+ var PriceWithTagContainer = newStyled.span(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
6253
+ var RegularPriceTag = function () {
6254
+ return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
6255
+ };
6256
+ var ClubPriceTag = function () {
6257
+ return jsxRuntime.jsx(ClubPriceTagSpan, { children: "CLUB MEMBERS" }, void 0);
6258
+ };
6259
+ function getTestId() {
6260
+ var args = [];
6261
+ for (var _i = 0; _i < arguments.length; _i++) {
6262
+ args[_i] = arguments[_i];
6263
+ }
6264
+ return args.filter(Boolean).join('-');
6265
+ }
6266
+ var PriceLabelV4 = function (_a) {
6267
+ var _b;
6268
+ _a.finalPrice; var originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.finalPriceStyled, finalPriceStyled = _c === void 0 ? false : _c, finalPriceStyle = _a.finalPriceStyle, _d = _a.originalPriceStyled, originalPriceStyled = _d === void 0 ? false : _d, _e = _a.originalPriceUnderlined, originalPriceUnderlined = _e === void 0 ? true : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, _g = _a.clubStyle, clubStyle = _g === void 0 ? false : _g, _h = _a.styledPrice, styledPrice = _h === void 0 ? false : _h, clubPrice = _a.clubPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle", "styledPrice", "clubPrice"]);
6269
+ var theme = useTheme();
6270
+ var isMobile = useWindowDimensions().isMobile;
6271
+ var productFinalPrice = clubPrice;
6272
+ var supportedCurrencies = ['AU$', 'CA$', '£'];
6273
+ var currencySymbol = '$';
6274
+ if (typeof productFinalPrice === 'string') {
6275
+ supportedCurrencies.forEach(function (availableCurrency) {
6276
+ if (productFinalPrice.includes(availableCurrency)) {
6277
+ currencySymbol = availableCurrency;
6278
+ }
6279
+ });
6280
+ }
6281
+ var finalPriceArray = typeof productFinalPrice === 'string' &&
6282
+ productFinalPrice.includes('.') &&
6283
+ productFinalPrice.includes(currencySymbol)
6284
+ ? productFinalPrice.split(currencySymbol)[1].split('.')
6285
+ : ['', ''];
6286
+ var priceCommonProps = {
6287
+ size: finalPriceStyled ? exports.ComponentSize.Small : size,
6288
+ color: color || theme.colors.pallete.secondary.color,
6289
+ weight: 700,
6290
+ };
6291
+ var OriginalPrice = function () {
6292
+ var sizeProp = !clubStyle
6293
+ ? originalPriceStyled
6294
+ ? size
6295
+ : exports.ComponentSize.Small
6296
+ : isMobile
6297
+ ? exports.ComponentSize.Small
6298
+ : exports.ComponentSize.XSmall;
6299
+ return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
6300
+ };
6301
+ return (jsxRuntime.jsxs(Container$12, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsxs(PriceContainerV2, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
6302
+ ? finalPriceArray[0]
6303
+ : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
6304
+ };
6305
+ var templateObject_1$1l, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
6306
+
6307
+ var Container$U = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
6308
+ var templateObject_1$1k;
6205
6309
 
6206
- var StarContainer = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
6310
+ var StarContainer = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
6207
6311
  var marginRight = _a.marginRight;
6208
6312
  return marginRight;
6209
6313
  });
@@ -6219,7 +6323,7 @@ var StarList = function (_a) {
6219
6323
  return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
6220
6324
  }) }, void 0));
6221
6325
  };
6222
- var templateObject_1$1k;
6326
+ var templateObject_1$1j;
6223
6327
 
6224
6328
  /* base styles & size variants */
6225
6329
  var LabelStyles = {
@@ -6260,8 +6364,8 @@ var LabelStyles = {
6260
6364
  });
6261
6365
  },
6262
6366
  };
6263
- var Container$T = newStyled.a(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
6264
- var templateObject_1$1j;
6367
+ var Container$T = newStyled.a(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
6368
+ var templateObject_1$1i;
6265
6369
 
6266
6370
  var CustomLabel = newStyled.div(function (_a) {
6267
6371
  var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
@@ -6281,7 +6385,7 @@ var CustomLabel = newStyled.div(function (_a) {
6281
6385
  }),
6282
6386
  ];
6283
6387
  });
6284
- var RatingLabel = newStyled.span(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
6388
+ var RatingLabel = newStyled.span(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
6285
6389
  var starsNumber = 5;
6286
6390
  var Rating = function (_a) {
6287
6391
  var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
@@ -6304,66 +6408,7 @@ var Rating = function (_a) {
6304
6408
  : {};
6305
6409
  return (jsxRuntime.jsxs(Container$T, __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: starsNumber, 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));
6306
6410
  };
6307
- var templateObject_1$1i;
6308
-
6309
- var RegularPriceTagSpan = newStyled.span(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
6310
- var ClubPriceTagSpan = newStyled.span(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
6311
- var PriceContainer$1 = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
6312
- var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
6313
- var PriceWithTagContainer = newStyled.span(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
6314
- var RegularPriceTag = function () {
6315
- return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
6316
- };
6317
- var ClubPriceTag = function () {
6318
- return jsxRuntime.jsx(ClubPriceTagSpan, { children: "CLUB MEMBERS" }, void 0);
6319
- };
6320
- function getTestId() {
6321
- var args = [];
6322
- for (var _i = 0; _i < arguments.length; _i++) {
6323
- args[_i] = arguments[_i];
6324
- }
6325
- return args.filter(Boolean).join('-');
6326
- }
6327
- var PriceLabelV4 = function (_a) {
6328
- var _b;
6329
- _a.finalPrice; var originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.finalPriceStyled, finalPriceStyled = _c === void 0 ? false : _c, finalPriceStyle = _a.finalPriceStyle, _d = _a.originalPriceStyled, originalPriceStyled = _d === void 0 ? false : _d, _e = _a.originalPriceUnderlined, originalPriceUnderlined = _e === void 0 ? true : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, _g = _a.clubStyle, clubStyle = _g === void 0 ? false : _g, _h = _a.styledPrice, styledPrice = _h === void 0 ? false : _h, clubPrice = _a.clubPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle", "styledPrice", "clubPrice"]);
6330
- var theme = useTheme();
6331
- var isMobile = useWindowDimensions().isMobile;
6332
- var productFinalPrice = clubPrice;
6333
- var supportedCurrencies = ['AU$', 'CA$', '£'];
6334
- var currencySymbol = '$';
6335
- if (typeof productFinalPrice === 'string') {
6336
- supportedCurrencies.forEach(function (availableCurrency) {
6337
- if (productFinalPrice.includes(availableCurrency)) {
6338
- currencySymbol = availableCurrency;
6339
- }
6340
- });
6341
- }
6342
- var finalPriceArray = typeof productFinalPrice === 'string' &&
6343
- productFinalPrice.includes('.') &&
6344
- productFinalPrice.includes(currencySymbol)
6345
- ? productFinalPrice.split(currencySymbol)[1].split('.')
6346
- : ['', ''];
6347
- var priceCommonProps = {
6348
- size: finalPriceStyled ? exports.ComponentSize.Small : size,
6349
- color: color || theme.colors.pallete.secondary.color,
6350
- weight: 700,
6351
- };
6352
- var OriginalPrice = function () {
6353
- var sizeProp = !clubStyle
6354
- ? originalPriceStyled
6355
- ? size
6356
- : exports.ComponentSize.Small
6357
- : isMobile
6358
- ? exports.ComponentSize.Small
6359
- : exports.ComponentSize.XSmall;
6360
- return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
6361
- };
6362
- return (jsxRuntime.jsxs(Container$12, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsxs(PriceContainerV2, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
6363
- ? finalPriceArray[0]
6364
- : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
6365
- };
6366
- var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
6411
+ var templateObject_1$1h;
6367
6412
 
6368
6413
  var ImageContainer$4 = newStyled.div(function (_a) {
6369
6414
  var width = _a.width, height = _a.height;