@trafilea/afrodita-components 6.9.1 → 6.11.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 +27 -19
  2. package/build/index.esm.js +171 -126
  3. package/build/index.esm.js.map +1 -1
  4. package/build/index.js +171 -126
  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.esm.js CHANGED
@@ -3067,11 +3067,13 @@ var inline = function (text) {
3067
3067
  };
3068
3068
 
3069
3069
  var ThemeProvider = function (_a) {
3070
- var theme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children;
3070
+ var _b;
3071
+ var unparsedTheme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children, config = _a.config;
3071
3072
  //TODO Analyze why we are doing this and remove
3072
- var parsedTheme = useMemo(function () { return applyVariablesIntoTheme(theme); }, [theme]);
3073
- var themeWithOtherVariables = __assign$1(__assign$1({}, parsedTheme), { assets: __assign$1(__assign$1({}, parsedTheme.assets), { isSameOriginIcons: isSameOriginIcons }) });
3074
- return (jsx$1(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsx$1(AssetsProvider, __assign$1({ assets: themeWithOtherVariables.assets }, { children: children }), void 0) }), void 0));
3073
+ var theme = useMemo(function () { return (__assign$1(__assign$1({}, applyVariablesIntoTheme(__assign$1({}, unparsedTheme))), { config: config })); }, [unparsedTheme]);
3074
+ 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 });
3075
+ var themeWithOtherVariables = __assign$1(__assign$1({}, theme), { assets: assets });
3076
+ return (jsx$1(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsx$1(AssetsProvider, __assign$1({ assets: assets }, { children: children }), void 0) }), void 0));
3075
3077
  };
3076
3078
  var useTheme = function () { return useTheme$1(); };
3077
3079
  var DefaultContainer = function (props) { return jsx$1("div", __assign$1({}, props), void 0); };
@@ -3298,7 +3300,7 @@ var UnmemoIconFromExtSource = function (_a) {
3298
3300
  if (!fill && !svgProps) {
3299
3301
  return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
3300
3302
  }
3301
- return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { xlinkHref: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
3303
+ return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
3302
3304
  };
3303
3305
  var IconFromExtSource = React__default.memo(UnmemoIconFromExtSource);
3304
3306
 
@@ -3312,12 +3314,62 @@ var UnmemoIcon = function (_a) {
3312
3314
  var svgSplit = name.split('/');
3313
3315
  var svgId = svgSplit[svgSplit.length - 1];
3314
3316
  if (assets.isSameOriginIcons) {
3315
- return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { xlinkHref: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
3317
+ return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
3316
3318
  }
3317
3319
  return (jsx$1(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
3318
3320
  };
3319
3321
  var Icon$1 = React__default.memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
3320
3322
 
3323
+ var getValidSize = function (size) {
3324
+ if (!size) {
3325
+ return 'auto';
3326
+ }
3327
+ if (typeof size === 'number') {
3328
+ return String(size);
3329
+ }
3330
+ if (size.endsWith('px')) {
3331
+ return size.replace('px', '');
3332
+ }
3333
+ if (Number(size))
3334
+ return String(Number(size));
3335
+ return 'auto';
3336
+ };
3337
+
3338
+ var DEFAULT_QUALITY = 100;
3339
+ var buildImageUrl = function (_a) {
3340
+ var cdn = _a.cdn, src = _a.src, widthString = _a.width, heightString = _a.height, _b = _a.quality, quality = _b === void 0 ? DEFAULT_QUALITY : _b;
3341
+ try {
3342
+ new URL(src);
3343
+ var baseUrl = new URL(src);
3344
+ if (!baseUrl.host) {
3345
+ return src;
3346
+ }
3347
+ if (cdn.includes(baseUrl.host)) {
3348
+ return src;
3349
+ }
3350
+ var url = encodeURIComponent(src);
3351
+ var source = "/external/".concat(baseUrl.host.replaceAll('.', ''));
3352
+ var width = getValidSize(widthString);
3353
+ var height = getValidSize(heightString);
3354
+ return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?width=").concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url);
3355
+ }
3356
+ catch (e) {
3357
+ console.warn("[Afrodita][buildImageUrl] [src:".concat(src, "] ERROR:").concat(e));
3358
+ return src;
3359
+ }
3360
+ };
3361
+
3362
+ 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; });
3363
+ var Image$3 = function (_a) {
3364
+ 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;
3365
+ var config = useTheme().config;
3366
+ var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
3367
+ ? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
3368
+ : src;
3369
+ return (jsx$1(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));
3370
+ };
3371
+ var templateObject_1$1V;
3372
+
3321
3373
  var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
3322
3374
 
3323
3375
  var Check$2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/check" }), void 0); };
@@ -4101,7 +4153,7 @@ function jsxs(type, props, key) {
4101
4153
  // This defines which HTML tag to render for each `variant`, it also defines
4102
4154
  // `variants` styles that are consistent through all themes.
4103
4155
  var TAGS = {
4104
- hero1: newStyled.h1(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""]))),
4156
+ hero1: newStyled.h1(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject([""], [""]))),
4105
4157
  hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
4106
4158
  hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
4107
4159
  display1: newStyled.h1(templateObject_4$K || (templateObject_4$K = __makeTemplateObject([""], [""]))),
@@ -4237,9 +4289,9 @@ var DEFAULTS = {
4237
4289
  size: 'regular',
4238
4290
  },
4239
4291
  };
4240
- 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;
4292
+ 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;
4241
4293
 
4242
- 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"])));
4294
+ 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"])));
4243
4295
  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"])));
4244
4296
  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"])));
4245
4297
  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"])));
@@ -4269,9 +4321,9 @@ var PackCard$1 = function (_a) {
4269
4321
  currency: currencyCode || 'USD',
4270
4322
  }), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
4271
4323
  };
4272
- var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$J, templateObject_5$u, templateObject_6$p;
4324
+ var templateObject_1$1T, templateObject_2$1f, templateObject_3$Y, templateObject_4$J, templateObject_5$u, templateObject_6$p;
4273
4325
 
4274
- 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"])));
4326
+ 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"])));
4275
4327
  var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
4276
4328
  var DropList = function (_a) {
4277
4329
  var dropTotal = _a.dropTotal, drops = _a.drops;
@@ -4279,17 +4331,17 @@ var DropList = function (_a) {
4279
4331
  return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
4280
4332
  }) }, void 0));
4281
4333
  };
4282
- var templateObject_1$1T, templateObject_2$1e;
4334
+ var templateObject_1$1S, templateObject_2$1e;
4283
4335
 
4284
4336
  var DROPS_TOTAL = 5;
4285
- 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"])));
4337
+ 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"])));
4286
4338
  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"])));
4287
4339
  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"])));
4288
4340
  var AbsorbencyLevel = function (_a) {
4289
4341
  var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
4290
4342
  return (jsxs$1(Container$19, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
4291
4343
  };
4292
- var templateObject_1$1S, templateObject_2$1d, templateObject_3$X;
4344
+ var templateObject_1$1R, templateObject_2$1d, templateObject_3$X;
4293
4345
 
4294
4346
  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]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),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===Fragment$1&&Object.keys(l).length>0){if(!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(`
4295
4347
  `),"","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(`
@@ -4365,7 +4417,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
4365
4417
  AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
4366
4418
  ]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
4367
4419
  var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
4368
- 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"])));
4420
+ 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"])));
4369
4421
  var Accordion$1 = function (_a) {
4370
4422
  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;
4371
4423
  var theme = useTheme();
@@ -4389,9 +4441,9 @@ var Accordion$1 = function (_a) {
4389
4441
  } }, { children: jsx$1(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 && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
4390
4442
  } }), void 0));
4391
4443
  };
4392
- var templateObject_1$1R;
4444
+ var templateObject_1$1Q;
4393
4445
 
4394
- 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"])));
4446
+ 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"])));
4395
4447
  var AccordionOptions = function (_a) {
4396
4448
  var titleColor = _a.titleColor, accordions = _a.accordions;
4397
4449
  var _b = useState({
@@ -4415,7 +4467,7 @@ var AccordionOptions = function (_a) {
4415
4467
  } }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
4416
4468
  }) }, void 0));
4417
4469
  };
4418
- var templateObject_1$1Q;
4470
+ var templateObject_1$1P;
4419
4471
 
4420
4472
  var CardSectionType;
4421
4473
  (function (CardSectionType) {
@@ -4577,14 +4629,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
4577
4629
  literal: true,
4578
4630
  });
4579
4631
 
4580
- 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; });
4632
+ 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; });
4581
4633
  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"])));
4582
4634
  var Error$1 = function (_a) {
4583
4635
  var error = _a.error;
4584
4636
  var theme = useTheme();
4585
4637
  return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
4586
4638
  };
4587
- var templateObject_1$1P, templateObject_2$1c;
4639
+ var templateObject_1$1O, templateObject_2$1c;
4588
4640
 
4589
4641
  var BaseSelectButton = function (_a) {
4590
4642
  var children = _a.children, as = _a.as;
@@ -4601,7 +4653,7 @@ function BaseSelectOption(_a) {
4601
4653
  return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
4602
4654
  }
4603
4655
 
4604
- var CustomListBox = newStyled(Ee)(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
4656
+ var CustomListBox = newStyled(Ee)(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
4605
4657
  function BaseSelect(_a) {
4606
4658
  var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
4607
4659
  return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
@@ -4611,7 +4663,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
4611
4663
  Options: BaseSelectOptions,
4612
4664
  Option: BaseSelectOption,
4613
4665
  });
4614
- var templateObject_1$1O;
4666
+ var templateObject_1$1N;
4615
4667
 
4616
4668
  var CustomButton = newStyled.button(function (_a) {
4617
4669
  var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
@@ -4650,7 +4702,7 @@ var CustomButton = newStyled.button(function (_a) {
4650
4702
  });
4651
4703
  });
4652
4704
  //TODO Remove this when we find the real solution
4653
- 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) {
4705
+ 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) {
4654
4706
  var open = _a.open;
4655
4707
  return open &&
4656
4708
  "\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
@@ -4666,11 +4718,11 @@ var BaseDropdownButton = function (_a) {
4666
4718
  alignItems: 'flex-start',
4667
4719
  whiteSpace: 'nowrap',
4668
4720
  overflowX: 'hidden',
4669
- } }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0)) : (children), jsxs(StyledIcon$1, __assign$1({ open: open }, { children: [jsx(CloseIcon, { testId: "CloseIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0), jsx(OpenIcon, { testId: "OpenIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0)] }), void 0)] }), void 0));
4721
+ } }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0)) : (jsx(Fragment, { children: children }, void 0)), jsxs(StyledIcon$1, __assign$1({ open: open }, { children: [jsx(CloseIcon, { testId: "CloseIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0), jsx(OpenIcon, { testId: "OpenIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0)] }), void 0)] }), void 0));
4670
4722
  } }), void 0));
4671
4723
  };
4672
4724
  var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
4673
- var templateObject_1$1N;
4725
+ var templateObject_1$1M;
4674
4726
 
4675
4727
  var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
4676
4728
  var theme = _a.theme;
@@ -4837,7 +4889,7 @@ var CustomCheckboxStyles = {
4837
4889
  },
4838
4890
  };
4839
4891
 
4840
- 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"])));
4892
+ 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"])));
4841
4893
  var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
4842
4894
  CustomCheckboxStyles[props.size](props.theme),
4843
4895
  CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
@@ -4864,15 +4916,15 @@ var Checkbox = function (_a) {
4864
4916
  };
4865
4917
  return (jsxs$1(Container$17, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
4866
4918
  };
4867
- var templateObject_1$1M, templateObject_2$1b;
4919
+ var templateObject_1$1L, templateObject_2$1b;
4868
4920
 
4869
4921
  var CustomOption = newStyled.li(function (_a) {
4870
- var theme = _a.theme, selected = _a.selected, active = _a.active;
4922
+ var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
4871
4923
  return ({
4872
4924
  listStyleType: 'none',
4873
4925
  display: 'flex',
4874
4926
  flexDirection: 'row',
4875
- alignItems: 'flex-start',
4927
+ alignItems: hasImage ? 'center' : 'flex-start',
4876
4928
  margin: 0,
4877
4929
  cursor: 'pointer',
4878
4930
  padding: theme.component.dropdown.optionPadding,
@@ -4887,11 +4939,11 @@ var CustomOption = newStyled.li(function (_a) {
4887
4939
  });
4888
4940
  });
4889
4941
  function BaseDropdownOption(_a) {
4890
- var value = _a.value, disabled = _a.disabled, children = _a.children, _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? false : _b, isSelected = _a.isSelected;
4942
+ var value = _a.value, disabled = _a.disabled, children = _a.children, _b = _a.hasCheckbox, hasCheckbox = _b === void 0 ? false : _b, isSelected = _a.isSelected, _c = _a.hasImage, hasImage = _c === void 0 ? false : _c;
4891
4943
  var theme = useTheme();
4892
4944
  return (jsx$1(BaseSelect$1.Option, __assign$1({ value: value, disabled: disabled, as: Fragment$1 }, { children: function (_a) {
4893
4945
  var selected = _a.selected, active = _a.active;
4894
- return (jsxs$1(CustomOption, __assign$1({ theme: theme, selected: isSelected || selected, active: active }, { children: [hasCheckbox && (jsx$1(Checkbox, { checked: isSelected || selected, text: "", id: value.key, onChange: console.log, size: ComponentSize.Small, variant: "primary" }, void 0)), children] }), void 0));
4946
+ return (jsxs$1(CustomOption, __assign$1({ theme: theme, selected: isSelected || selected, active: active, hasImage: hasImage }, { children: [hasCheckbox && (jsx$1(Checkbox, { checked: isSelected || selected, text: "", id: value.key, onChange: console.log, size: ComponentSize.Small, variant: "primary" }, void 0)), children] }), void 0));
4895
4947
  } }), void 0));
4896
4948
  }
4897
4949
 
@@ -4913,7 +4965,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
4913
4965
  Option: BaseDropdownOption,
4914
4966
  });
4915
4967
 
4916
- var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject([""], [""])));
4968
+ var Container$16 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
4917
4969
  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"])));
4918
4970
  function SimpleDropdown(_a) {
4919
4971
  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;
@@ -4944,9 +4996,9 @@ function SimpleDropdown(_a) {
4944
4996
  setSelectedValue(value);
4945
4997
  }, [value, options, initialValue]);
4946
4998
  var DropdownContainer = showRequiredPlaceholder ? Container$16 : Fragment$1;
4947
- return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(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), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
4999
+ return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionLabel] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
4948
5000
  }
4949
- var templateObject_1$1L, templateObject_2$1a;
5001
+ var templateObject_1$1K, templateObject_2$1a;
4950
5002
 
4951
5003
  /* base styles & size variants */
4952
5004
  var CustomRadioStyles$2 = {
@@ -5011,7 +5063,7 @@ var ContainerStyles$2 = {
5011
5063
  },
5012
5064
  };
5013
5065
 
5014
- 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"])));
5066
+ 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"])));
5015
5067
  var Container$15 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
5016
5068
  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) {
5017
5069
  var disabled = _a.disabled;
@@ -5044,7 +5096,7 @@ var RadioInput = function (_a) {
5044
5096
  };
5045
5097
  return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$15, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
5046
5098
  };
5047
- var templateObject_1$1K, templateObject_2$19, templateObject_3$W, templateObject_4$I;
5099
+ var templateObject_1$1J, templateObject_2$19, templateObject_3$W, templateObject_4$I;
5048
5100
 
5049
5101
  var getWrapperFlexDirection = function (position) {
5050
5102
  switch (position) {
@@ -5095,7 +5147,7 @@ var getTooltipAlignItems = function (position, align) {
5095
5147
  }
5096
5148
  };
5097
5149
 
5098
- 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) {
5150
+ 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) {
5099
5151
  var position = _a.position;
5100
5152
  return getWrapperFlexDirection(position);
5101
5153
  }, function (_a) {
@@ -5151,7 +5203,7 @@ var Title$7 = newStyled.h1(templateObject_6$o || (templateObject_6$o = __makeTem
5151
5203
  });
5152
5204
  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"])));
5153
5205
  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"])));
5154
- 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;
5206
+ 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;
5155
5207
 
5156
5208
  var useOnClickOutside = function (ref, handler) {
5157
5209
  useEffect(function () {
@@ -5294,7 +5346,7 @@ var getStylesBySize$d = function (size) {
5294
5346
  };
5295
5347
  }
5296
5348
  };
5297
- 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) {
5349
+ 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) {
5298
5350
  var backgroundColor = _a.backgroundColor;
5299
5351
  return backgroundColor;
5300
5352
  }, function (_a) {
@@ -5333,7 +5385,7 @@ var ClubOfferTag = function (_a) {
5333
5385
  var theme = useTheme();
5334
5386
  return (jsx$1(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: jsx$1(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));
5335
5387
  };
5336
- var templateObject_1$1I, templateObject_2$17;
5388
+ var templateObject_1$1H, templateObject_2$17;
5337
5389
 
5338
5390
  var getStylesBySize$c = function (size, bordersRounded, theme) {
5339
5391
  var _a, _b, _c;
@@ -5364,7 +5416,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
5364
5416
  };
5365
5417
  }
5366
5418
  };
5367
- 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) {
5419
+ 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) {
5368
5420
  var backgroundColor = _a.backgroundColor;
5369
5421
  return backgroundColor;
5370
5422
  }, function (_a) {
@@ -5403,7 +5455,7 @@ var DiscountTag$1 = function (_a) {
5403
5455
  var theme = useTheme();
5404
5456
  return (jsx$1(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: jsxs$1(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));
5405
5457
  };
5406
- var templateObject_1$1H, templateObject_2$16;
5458
+ var templateObject_1$1G, templateObject_2$16;
5407
5459
 
5408
5460
  var getStylesBySize$b = function (size, theme) {
5409
5461
  var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -5445,7 +5497,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
5445
5497
  return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
5446
5498
  }
5447
5499
  };
5448
- 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"])));
5500
+ 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"])));
5449
5501
  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) {
5450
5502
  var weight = _a.weight;
5451
5503
  return (weight ? weight : '400');
@@ -5503,9 +5555,9 @@ var PriceLabel = function (_a) {
5503
5555
  };
5504
5556
  return (jsxs$1(Container$12, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
5505
5557
  };
5506
- var templateObject_1$1G, templateObject_2$15, templateObject_3$U;
5558
+ var templateObject_1$1F, templateObject_2$15, templateObject_3$U;
5507
5559
 
5508
- var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5560
+ var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5509
5561
  var PriceLabelV2 = function (_a) {
5510
5562
  var _b;
5511
5563
  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 ? 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"]);
@@ -5576,9 +5628,9 @@ var PriceLabelV2 = function (_a) {
5576
5628
  lineHeight: '22px',
5577
5629
  } }), void 0)) }), void 0))] }), void 0));
5578
5630
  };
5579
- var templateObject_1$1F;
5631
+ var templateObject_1$1E;
5580
5632
 
5581
- var FinalPriceStyledContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5633
+ var FinalPriceStyledContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5582
5634
  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"])));
5583
5635
  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"])));
5584
5636
  var PriceLabelV3 = function (_a) {
@@ -5651,9 +5703,9 @@ var PriceLabelV3 = function (_a) {
5651
5703
  lineHeight: '22px',
5652
5704
  } }), void 0)) }), void 0))] }, void 0)] }), void 0));
5653
5705
  };
5654
- var templateObject_1$1E, templateObject_2$14, templateObject_3$T;
5706
+ var templateObject_1$1D, templateObject_2$14, templateObject_3$T;
5655
5707
 
5656
- var FlexContainer$1 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5708
+ var FlexContainer$1 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5657
5709
  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) {
5658
5710
  var selected = _a.selected, theme = _a.theme;
5659
5711
  return selected
@@ -5691,7 +5743,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObje
5691
5743
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
5692
5744
  });
5693
5745
  var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
5694
- 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;
5746
+ 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;
5695
5747
 
5696
5748
  var radioIds$1 = {
5697
5749
  oneTime: {
@@ -5746,7 +5798,7 @@ var Autoship = function (_a) {
5746
5798
  : benefitsColor.base }, void 0), jsx$1(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$1, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$1, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
5747
5799
  };
5748
5800
 
5749
- var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5801
+ var FlexContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
5750
5802
  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"])));
5751
5803
  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) {
5752
5804
  var selected = _a.selected, theme = _a.theme;
@@ -5783,7 +5835,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject
5783
5835
  return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
5784
5836
  });
5785
5837
  var Container$10 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
5786
- 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;
5838
+ 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;
5787
5839
 
5788
5840
  var radioIds = {
5789
5841
  oneTime: {
@@ -5851,13 +5903,6 @@ var AutoshipV2 = function (_a) {
5851
5903
  : benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsx$1(Fragment$2, { children: jsx$1(FlexContainer, { children: jsx$1(DeliveryFrequencySelector, {}, void 0) }, void 0) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
5852
5904
  };
5853
5905
 
5854
- 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; });
5855
- var Image$3 = function (_a) {
5856
- 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;
5857
- return (jsx$1(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));
5858
- };
5859
- var templateObject_1$1B;
5860
-
5861
5906
  var _a$2;
5862
5907
  var BeforeAfterVariant;
5863
5908
  (function (BeforeAfterVariant) {
@@ -6174,10 +6219,69 @@ var StrengthBars = function (_a) {
6174
6219
  };
6175
6220
  var templateObject_1$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z;
6176
6221
 
6177
- 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"])));
6178
- var templateObject_1$1l;
6222
+ 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"])));
6223
+ 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"])));
6224
+ 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"])));
6225
+ var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
6226
+ 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"])));
6227
+ var RegularPriceTag = function () {
6228
+ return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
6229
+ };
6230
+ var ClubPriceTag = function () {
6231
+ return jsx$1(ClubPriceTagSpan, { children: "CLUB MEMBERS" }, void 0);
6232
+ };
6233
+ function getTestId() {
6234
+ var args = [];
6235
+ for (var _i = 0; _i < arguments.length; _i++) {
6236
+ args[_i] = arguments[_i];
6237
+ }
6238
+ return args.filter(Boolean).join('-');
6239
+ }
6240
+ var PriceLabelV4 = function (_a) {
6241
+ var _b;
6242
+ _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 ? 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"]);
6243
+ var theme = useTheme();
6244
+ var isMobile = useWindowDimensions().isMobile;
6245
+ var productFinalPrice = clubPrice;
6246
+ var supportedCurrencies = ['AU$', 'CA$', '£'];
6247
+ var currencySymbol = '$';
6248
+ if (typeof productFinalPrice === 'string') {
6249
+ supportedCurrencies.forEach(function (availableCurrency) {
6250
+ if (productFinalPrice.includes(availableCurrency)) {
6251
+ currencySymbol = availableCurrency;
6252
+ }
6253
+ });
6254
+ }
6255
+ var finalPriceArray = typeof productFinalPrice === 'string' &&
6256
+ productFinalPrice.includes('.') &&
6257
+ productFinalPrice.includes(currencySymbol)
6258
+ ? productFinalPrice.split(currencySymbol)[1].split('.')
6259
+ : ['', ''];
6260
+ var priceCommonProps = {
6261
+ size: finalPriceStyled ? ComponentSize.Small : size,
6262
+ color: color || theme.colors.pallete.secondary.color,
6263
+ weight: 700,
6264
+ };
6265
+ var OriginalPrice = function () {
6266
+ var sizeProp = !clubStyle
6267
+ ? originalPriceStyled
6268
+ ? size
6269
+ : ComponentSize.Small
6270
+ : isMobile
6271
+ ? ComponentSize.Small
6272
+ : ComponentSize.XSmall;
6273
+ return (jsx$1(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));
6274
+ };
6275
+ return (jsxs$1(Container$12, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(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), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
6276
+ ? finalPriceArray[0]
6277
+ : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
6278
+ };
6279
+ var templateObject_1$1l, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
6280
+
6281
+ 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"])));
6282
+ var templateObject_1$1k;
6179
6283
 
6180
- 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) {
6284
+ 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) {
6181
6285
  var marginRight = _a.marginRight;
6182
6286
  return marginRight;
6183
6287
  });
@@ -6193,7 +6297,7 @@ var StarList = function (_a) {
6193
6297
  return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
6194
6298
  }) }, void 0));
6195
6299
  };
6196
- var templateObject_1$1k;
6300
+ var templateObject_1$1j;
6197
6301
 
6198
6302
  /* base styles & size variants */
6199
6303
  var LabelStyles = {
@@ -6234,8 +6338,8 @@ var LabelStyles = {
6234
6338
  });
6235
6339
  },
6236
6340
  };
6237
- 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"])));
6238
- var templateObject_1$1j;
6341
+ 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"])));
6342
+ var templateObject_1$1i;
6239
6343
 
6240
6344
  var CustomLabel = newStyled.div(function (_a) {
6241
6345
  var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
@@ -6255,7 +6359,7 @@ var CustomLabel = newStyled.div(function (_a) {
6255
6359
  }),
6256
6360
  ];
6257
6361
  });
6258
- 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; });
6362
+ 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; });
6259
6363
  var starsNumber = 5;
6260
6364
  var Rating = function (_a) {
6261
6365
  var _b = _a.size, size = _b === void 0 ? 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;
@@ -6278,66 +6382,7 @@ var Rating = function (_a) {
6278
6382
  : {};
6279
6383
  return (jsxs$1(Container$T, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
6280
6384
  };
6281
- var templateObject_1$1i;
6282
-
6283
- 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"])));
6284
- 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"])));
6285
- 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"])));
6286
- var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
6287
- 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"])));
6288
- var RegularPriceTag = function () {
6289
- return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
6290
- };
6291
- var ClubPriceTag = function () {
6292
- return jsx$1(ClubPriceTagSpan, { children: "CLUB MEMBERS" }, void 0);
6293
- };
6294
- function getTestId() {
6295
- var args = [];
6296
- for (var _i = 0; _i < arguments.length; _i++) {
6297
- args[_i] = arguments[_i];
6298
- }
6299
- return args.filter(Boolean).join('-');
6300
- }
6301
- var PriceLabelV4 = function (_a) {
6302
- var _b;
6303
- _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 ? 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"]);
6304
- var theme = useTheme();
6305
- var isMobile = useWindowDimensions().isMobile;
6306
- var productFinalPrice = clubPrice;
6307
- var supportedCurrencies = ['AU$', 'CA$', '£'];
6308
- var currencySymbol = '$';
6309
- if (typeof productFinalPrice === 'string') {
6310
- supportedCurrencies.forEach(function (availableCurrency) {
6311
- if (productFinalPrice.includes(availableCurrency)) {
6312
- currencySymbol = availableCurrency;
6313
- }
6314
- });
6315
- }
6316
- var finalPriceArray = typeof productFinalPrice === 'string' &&
6317
- productFinalPrice.includes('.') &&
6318
- productFinalPrice.includes(currencySymbol)
6319
- ? productFinalPrice.split(currencySymbol)[1].split('.')
6320
- : ['', ''];
6321
- var priceCommonProps = {
6322
- size: finalPriceStyled ? ComponentSize.Small : size,
6323
- color: color || theme.colors.pallete.secondary.color,
6324
- weight: 700,
6325
- };
6326
- var OriginalPrice = function () {
6327
- var sizeProp = !clubStyle
6328
- ? originalPriceStyled
6329
- ? size
6330
- : ComponentSize.Small
6331
- : isMobile
6332
- ? ComponentSize.Small
6333
- : ComponentSize.XSmall;
6334
- return (jsx$1(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));
6335
- };
6336
- return (jsxs$1(Container$12, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(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), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
6337
- ? finalPriceArray[0]
6338
- : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
6339
- };
6340
- var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
6385
+ var templateObject_1$1h;
6341
6386
 
6342
6387
  var ImageContainer$4 = newStyled.div(function (_a) {
6343
6388
  var width = _a.width, height = _a.height;