@trafilea/afrodita-components 6.5.12 → 6.6.1
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.
- package/build/index.d.ts +6 -1
- package/build/index.esm.js +169 -124
- package/build/index.esm.js.map +1 -1
- package/build/index.js +169 -124
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3151,7 +3151,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3151
3151
|
desktop: 1280,
|
|
3152
3152
|
};
|
|
3153
3153
|
|
|
3154
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
3154
|
+
var Container$17 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3155
3155
|
var height = _a.height;
|
|
3156
3156
|
return (height ? height : '1.5em');
|
|
3157
3157
|
}, function (_a) {
|
|
@@ -3178,9 +3178,9 @@ var SkeletonBox = function (_a) {
|
|
|
3178
3178
|
var theme = useTheme();
|
|
3179
3179
|
return jsxRuntime.jsx(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3180
3180
|
};
|
|
3181
|
-
var templateObject_1$
|
|
3181
|
+
var templateObject_1$1S;
|
|
3182
3182
|
|
|
3183
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3183
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3184
3184
|
var width = _a.width;
|
|
3185
3185
|
return width;
|
|
3186
3186
|
}, function (_a) {
|
|
@@ -3196,7 +3196,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1Q || (templateObject_1$1Q
|
|
|
3196
3196
|
var opacity = _a.opacity;
|
|
3197
3197
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3198
3198
|
});
|
|
3199
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3199
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3200
3200
|
var width = _a.width;
|
|
3201
3201
|
return width;
|
|
3202
3202
|
}, function (_a) {
|
|
@@ -3209,7 +3209,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1c || (templateObject_2$
|
|
|
3209
3209
|
var opacity = _a.opacity;
|
|
3210
3210
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3211
3211
|
});
|
|
3212
|
-
var templateObject_1$
|
|
3212
|
+
var templateObject_1$1R, templateObject_2$1d;
|
|
3213
3213
|
|
|
3214
3214
|
/* eslint-disable no-undef */
|
|
3215
3215
|
var cache = new Map();
|
|
@@ -3578,6 +3578,8 @@ var Underwear = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({},
|
|
|
3578
3578
|
|
|
3579
3579
|
var WireFreeComfort = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "custom/wire_free_comfort" }), void 0)); };
|
|
3580
3580
|
|
|
3581
|
+
var WireFreeComfortBold = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "custom/wire_free_comfort_bold" }), void 0)); };
|
|
3582
|
+
|
|
3581
3583
|
var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
3582
3584
|
__proto__: null,
|
|
3583
3585
|
Atom: Atom,
|
|
@@ -3602,7 +3604,8 @@ var Custom$1 = /*#__PURE__*/Object.freeze({
|
|
|
3602
3604
|
ThumbsDown: ThumbsDown,
|
|
3603
3605
|
ThumbsUp: ThumbsUp,
|
|
3604
3606
|
Underwear: Underwear,
|
|
3605
|
-
WireFreeComfort: WireFreeComfort
|
|
3607
|
+
WireFreeComfort: WireFreeComfort,
|
|
3608
|
+
WireFreeComfortBold: WireFreeComfortBold
|
|
3606
3609
|
});
|
|
3607
3610
|
|
|
3608
3611
|
var AppleStore = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "download/apple_store" }), void 0); };
|
|
@@ -4094,8 +4097,8 @@ function jsxs(type, props, key) {
|
|
|
4094
4097
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4095
4098
|
// `variants` styles that are consistent through all themes.
|
|
4096
4099
|
var TAGS = {
|
|
4097
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4098
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4100
|
+
hero1: newStyled.h1(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject([""], [""]))),
|
|
4101
|
+
hero2: newStyled.h2(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject([""], [""]))),
|
|
4099
4102
|
hero3: newStyled.h3(templateObject_3$V || (templateObject_3$V = __makeTemplateObject([""], [""]))),
|
|
4100
4103
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
4101
4104
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
@@ -4230,10 +4233,10 @@ var DEFAULTS = {
|
|
|
4230
4233
|
size: 'regular',
|
|
4231
4234
|
},
|
|
4232
4235
|
};
|
|
4233
|
-
var templateObject_1$
|
|
4236
|
+
var templateObject_1$1Q, templateObject_2$1c, templateObject_3$V, templateObject_4$F, templateObject_5$r, templateObject_6$p, templateObject_7$h, templateObject_8$d, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4234
4237
|
|
|
4235
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4236
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4238
|
+
var Container$16 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __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"])));
|
|
4239
|
+
var Card$3 = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
4237
4240
|
var Tag$2 = newStyled.div(templateObject_3$U || (templateObject_3$U = __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"])));
|
|
4238
4241
|
var Label$4 = newStyled.div(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
4239
4242
|
var Check$1 = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
@@ -4262,27 +4265,27 @@ var PackCard$1 = function (_a) {
|
|
|
4262
4265
|
currency: currencyCode || 'USD',
|
|
4263
4266
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4264
4267
|
};
|
|
4265
|
-
var templateObject_1$
|
|
4268
|
+
var templateObject_1$1P, templateObject_2$1b, templateObject_3$U, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4266
4269
|
|
|
4267
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4268
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4270
|
+
var Container$15 = newStyled.div(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4271
|
+
var DropContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4269
4272
|
var DropList = function (_a) {
|
|
4270
4273
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4271
4274
|
return (jsxRuntime.jsx(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4272
4275
|
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));
|
|
4273
4276
|
}) }, void 0));
|
|
4274
4277
|
};
|
|
4275
|
-
var templateObject_1$
|
|
4278
|
+
var templateObject_1$1O, templateObject_2$1a;
|
|
4276
4279
|
|
|
4277
4280
|
var DROPS_TOTAL = 5;
|
|
4278
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4279
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4281
|
+
var Container$14 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4282
|
+
var Title$8 = newStyled.p(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
4280
4283
|
var Description$3 = newStyled.p(templateObject_3$T || (templateObject_3$T = __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"])));
|
|
4281
4284
|
var AbsorbencyLevel = function (_a) {
|
|
4282
4285
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4283
4286
|
return (jsxRuntime.jsxs(Container$14, { 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));
|
|
4284
4287
|
};
|
|
4285
|
-
var templateObject_1$
|
|
4288
|
+
var templateObject_1$1N, templateObject_2$19, templateObject_3$T;
|
|
4286
4289
|
|
|
4287
4290
|
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(`
|
|
4288
4291
|
`),"","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(`
|
|
@@ -4358,7 +4361,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4358
4361
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4359
4362
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4360
4363
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4361
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4364
|
+
var StyledContent = newStyled.button(templateObject_1$1M || (templateObject_1$1M = __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"])));
|
|
4362
4365
|
var Accordion$1 = function (_a) {
|
|
4363
4366
|
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;
|
|
4364
4367
|
var theme = useTheme();
|
|
@@ -4382,9 +4385,9 @@ var Accordion$1 = function (_a) {
|
|
|
4382
4385
|
} }, { 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));
|
|
4383
4386
|
} }), void 0));
|
|
4384
4387
|
};
|
|
4385
|
-
var templateObject_1$
|
|
4388
|
+
var templateObject_1$1M;
|
|
4386
4389
|
|
|
4387
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4390
|
+
var Container$13 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4388
4391
|
var AccordionOptions = function (_a) {
|
|
4389
4392
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4390
4393
|
var _b = React$2.useState({
|
|
@@ -4408,7 +4411,7 @@ var AccordionOptions = function (_a) {
|
|
|
4408
4411
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4409
4412
|
}) }, void 0));
|
|
4410
4413
|
};
|
|
4411
|
-
var templateObject_1$
|
|
4414
|
+
var templateObject_1$1L;
|
|
4412
4415
|
|
|
4413
4416
|
exports.CardSectionType = void 0;
|
|
4414
4417
|
(function (CardSectionType) {
|
|
@@ -4570,14 +4573,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4570
4573
|
literal: true,
|
|
4571
4574
|
});
|
|
4572
4575
|
|
|
4573
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4574
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4576
|
+
var ErrorText = newStyled.h3(templateObject_1$1K || (templateObject_1$1K = __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; });
|
|
4577
|
+
var ErrorContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __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"])));
|
|
4575
4578
|
var Error$1 = function (_a) {
|
|
4576
4579
|
var error = _a.error;
|
|
4577
4580
|
var theme = useTheme();
|
|
4578
4581
|
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));
|
|
4579
4582
|
};
|
|
4580
|
-
var templateObject_1$
|
|
4583
|
+
var templateObject_1$1K, templateObject_2$18;
|
|
4581
4584
|
|
|
4582
4585
|
var BaseSelectButton = function (_a) {
|
|
4583
4586
|
var children = _a.children, as = _a.as;
|
|
@@ -4594,7 +4597,7 @@ function BaseSelectOption(_a) {
|
|
|
4594
4597
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4595
4598
|
}
|
|
4596
4599
|
|
|
4597
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4600
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4598
4601
|
function BaseSelect(_a) {
|
|
4599
4602
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4600
4603
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4604,7 +4607,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4604
4607
|
Options: BaseSelectOptions,
|
|
4605
4608
|
Option: BaseSelectOption,
|
|
4606
4609
|
});
|
|
4607
|
-
var templateObject_1$
|
|
4610
|
+
var templateObject_1$1J;
|
|
4608
4611
|
|
|
4609
4612
|
var CustomButton = newStyled.button(function (_a) {
|
|
4610
4613
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4643,7 +4646,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4643
4646
|
});
|
|
4644
4647
|
});
|
|
4645
4648
|
//TODO Remove this when we find the real solution
|
|
4646
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4649
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4647
4650
|
var open = _a.open;
|
|
4648
4651
|
return open &&
|
|
4649
4652
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4663,7 +4666,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4663
4666
|
} }), void 0));
|
|
4664
4667
|
};
|
|
4665
4668
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4666
|
-
var templateObject_1$
|
|
4669
|
+
var templateObject_1$1I;
|
|
4667
4670
|
|
|
4668
4671
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4669
4672
|
var theme = _a.theme;
|
|
@@ -4830,7 +4833,7 @@ var CustomCheckboxStyles = {
|
|
|
4830
4833
|
},
|
|
4831
4834
|
};
|
|
4832
4835
|
|
|
4833
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
4836
|
+
var Container$12 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __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"])));
|
|
4834
4837
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4835
4838
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4836
4839
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4841,7 +4844,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4841
4844
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4842
4845
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4843
4846
|
]; });
|
|
4844
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4847
|
+
var Input$5 = newStyled.input(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
4845
4848
|
var disabled = _a.disabled;
|
|
4846
4849
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4847
4850
|
});
|
|
@@ -4857,7 +4860,7 @@ var Checkbox = function (_a) {
|
|
|
4857
4860
|
};
|
|
4858
4861
|
return (jsxRuntime.jsxs(Container$12, { 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$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4859
4862
|
};
|
|
4860
|
-
var templateObject_1$
|
|
4863
|
+
var templateObject_1$1H, templateObject_2$17;
|
|
4861
4864
|
|
|
4862
4865
|
var CustomOption = newStyled.li(function (_a) {
|
|
4863
4866
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4906,8 +4909,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4906
4909
|
Option: BaseDropdownOption,
|
|
4907
4910
|
});
|
|
4908
4911
|
|
|
4909
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
4910
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4912
|
+
var Container$11 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject([""], [""])));
|
|
4913
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$16 || (templateObject_2$16 = __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"])));
|
|
4911
4914
|
function SimpleDropdown(_a) {
|
|
4912
4915
|
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;
|
|
4913
4916
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4939,7 +4942,7 @@ function SimpleDropdown(_a) {
|
|
|
4939
4942
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : React$2.Fragment;
|
|
4940
4943
|
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));
|
|
4941
4944
|
}
|
|
4942
|
-
var templateObject_1$
|
|
4945
|
+
var templateObject_1$1G, templateObject_2$16;
|
|
4943
4946
|
|
|
4944
4947
|
/* base styles & size variants */
|
|
4945
4948
|
var CustomRadioStyles$2 = {
|
|
@@ -5004,9 +5007,9 @@ var ContainerStyles$2 = {
|
|
|
5004
5007
|
},
|
|
5005
5008
|
};
|
|
5006
5009
|
|
|
5007
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5010
|
+
var Wrapper$7 = 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"])));
|
|
5008
5011
|
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5009
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5012
|
+
var Input$4 = newStyled.input(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5010
5013
|
var disabled = _a.disabled;
|
|
5011
5014
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5012
5015
|
});
|
|
@@ -5030,7 +5033,7 @@ var RadioInput = function (_a) {
|
|
|
5030
5033
|
};
|
|
5031
5034
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$10, __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), 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));
|
|
5032
5035
|
};
|
|
5033
|
-
var templateObject_1$
|
|
5036
|
+
var templateObject_1$1F, templateObject_2$15, templateObject_3$S;
|
|
5034
5037
|
|
|
5035
5038
|
var getWrapperFlexDirection = function (position) {
|
|
5036
5039
|
switch (position) {
|
|
@@ -5081,7 +5084,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5081
5084
|
}
|
|
5082
5085
|
};
|
|
5083
5086
|
|
|
5084
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5087
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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) {
|
|
5085
5088
|
var position = _a.position;
|
|
5086
5089
|
return getWrapperFlexDirection(position);
|
|
5087
5090
|
}, function (_a) {
|
|
@@ -5091,7 +5094,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __ma
|
|
|
5091
5094
|
var disableHover = _a.disableHover;
|
|
5092
5095
|
return (disableHover ? 0 : 1);
|
|
5093
5096
|
});
|
|
5094
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5097
|
+
var TooltipContainer = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5095
5098
|
var position = _a.position;
|
|
5096
5099
|
return getContainerFlexDirection(position);
|
|
5097
5100
|
}, function (_a) {
|
|
@@ -5137,7 +5140,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5137
5140
|
});
|
|
5138
5141
|
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __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"])));
|
|
5139
5142
|
var CloseToolTip = newStyled.button(templateObject_8$c || (templateObject_8$c = __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"])));
|
|
5140
|
-
var templateObject_1$
|
|
5143
|
+
var templateObject_1$1E, templateObject_2$14, templateObject_3$R, templateObject_4$D, templateObject_5$p, templateObject_6$n, templateObject_7$g, templateObject_8$c;
|
|
5141
5144
|
|
|
5142
5145
|
var useOnClickOutside = function (ref, handler) {
|
|
5143
5146
|
React$2.useEffect(function () {
|
|
@@ -5279,7 +5282,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5279
5282
|
};
|
|
5280
5283
|
}
|
|
5281
5284
|
};
|
|
5282
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
5285
|
+
var Container$$ = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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) {
|
|
5283
5286
|
var backgroundColor = _a.backgroundColor;
|
|
5284
5287
|
return backgroundColor;
|
|
5285
5288
|
}, function (_a) {
|
|
@@ -5301,7 +5304,7 @@ var Container$$ = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __
|
|
|
5301
5304
|
var size = _a.size;
|
|
5302
5305
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5303
5306
|
});
|
|
5304
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5307
|
+
var H3$3 = newStyled.h3(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5305
5308
|
var textColor = _a.textColor;
|
|
5306
5309
|
return textColor;
|
|
5307
5310
|
}, function (_a) {
|
|
@@ -5318,7 +5321,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5318
5321
|
var theme = useTheme();
|
|
5319
5322
|
return (jsxRuntime.jsx(Container$$, __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));
|
|
5320
5323
|
};
|
|
5321
|
-
var templateObject_1$
|
|
5324
|
+
var templateObject_1$1D, templateObject_2$13;
|
|
5322
5325
|
|
|
5323
5326
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5324
5327
|
var _a, _b, _c;
|
|
@@ -5349,7 +5352,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5349
5352
|
};
|
|
5350
5353
|
}
|
|
5351
5354
|
};
|
|
5352
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
5355
|
+
var Container$_ = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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) {
|
|
5353
5356
|
var backgroundColor = _a.backgroundColor;
|
|
5354
5357
|
return backgroundColor;
|
|
5355
5358
|
}, function (_a) {
|
|
@@ -5371,7 +5374,7 @@ var Container$_ = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __
|
|
|
5371
5374
|
var size = _a.size;
|
|
5372
5375
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5373
5376
|
});
|
|
5374
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5377
|
+
var H3$2 = newStyled.h3(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5375
5378
|
var textColor = _a.textColor;
|
|
5376
5379
|
return textColor;
|
|
5377
5380
|
}, function (_a) {
|
|
@@ -5388,7 +5391,7 @@ var DiscountTag = function (_a) {
|
|
|
5388
5391
|
var theme = useTheme();
|
|
5389
5392
|
return (jsxRuntime.jsx(Container$_, __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));
|
|
5390
5393
|
};
|
|
5391
|
-
var templateObject_1$
|
|
5394
|
+
var templateObject_1$1C, templateObject_2$12;
|
|
5392
5395
|
|
|
5393
5396
|
var getStylesBySize$b = function (size, theme) {
|
|
5394
5397
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5430,8 +5433,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5430
5433
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5431
5434
|
}
|
|
5432
5435
|
};
|
|
5433
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
5434
|
-
var Price = newStyled.p(templateObject_2$
|
|
5436
|
+
var Container$Z = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5437
|
+
var Price = newStyled.p(templateObject_2$11 || (templateObject_2$11 = __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) {
|
|
5435
5438
|
var weight = _a.weight;
|
|
5436
5439
|
return (weight ? weight : '400');
|
|
5437
5440
|
}, function (_a) {
|
|
@@ -5460,7 +5463,7 @@ var TagContainer = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __m
|
|
|
5460
5463
|
var size = _a.size;
|
|
5461
5464
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
5462
5465
|
});
|
|
5463
|
-
function getTestId() {
|
|
5466
|
+
function getTestId$1() {
|
|
5464
5467
|
var args = [];
|
|
5465
5468
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
5466
5469
|
args[_i] = arguments[_i];
|
|
@@ -5484,13 +5487,13 @@ var PriceLabel = function (_a) {
|
|
|
5484
5487
|
: isMobile
|
|
5485
5488
|
? exports.ComponentSize.Small
|
|
5486
5489
|
: exports.ComponentSize.XSmall;
|
|
5487
|
-
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5490
|
+
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5488
5491
|
};
|
|
5489
|
-
return (jsxRuntime.jsxs(Container$Z, __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(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(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, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5492
|
+
return (jsxRuntime.jsxs(Container$Z, __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, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5490
5493
|
};
|
|
5491
|
-
var templateObject_1$
|
|
5494
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$Q;
|
|
5492
5495
|
|
|
5493
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5496
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5494
5497
|
var PriceLabelV2 = function (_a) {
|
|
5495
5498
|
var _b;
|
|
5496
5499
|
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, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem"]);
|
|
@@ -5540,8 +5543,8 @@ var PriceLabelV2 = function (_a) {
|
|
|
5540
5543
|
}
|
|
5541
5544
|
var savetoString = saveto.toFixed(2);
|
|
5542
5545
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5543
|
-
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5544
|
-
return (jsxRuntime.jsxs(Container$Z, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5546
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5547
|
+
return (jsxRuntime.jsxs(Container$Z, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5545
5548
|
marginTop: '-5px',
|
|
5546
5549
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5547
5550
|
? finalPriceArray[0]
|
|
@@ -5559,10 +5562,10 @@ var PriceLabelV2 = function (_a) {
|
|
|
5559
5562
|
lineHeight: '22px',
|
|
5560
5563
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5561
5564
|
};
|
|
5562
|
-
var templateObject_1$
|
|
5565
|
+
var templateObject_1$1A;
|
|
5563
5566
|
|
|
5564
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5565
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2
|
|
5567
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5568
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5566
5569
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5567
5570
|
var PriceLabelV3 = function (_a) {
|
|
5568
5571
|
var _b;
|
|
@@ -5612,13 +5615,13 @@ var PriceLabelV3 = function (_a) {
|
|
|
5612
5615
|
}
|
|
5613
5616
|
var savetoString = saveto.toFixed(2);
|
|
5614
5617
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5615
|
-
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5618
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5616
5619
|
var DiscountedPriceOfEach = function () {
|
|
5617
5620
|
if (!itemsQuantity || itemsQuantity < 2)
|
|
5618
5621
|
return null;
|
|
5619
|
-
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5622
|
+
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5620
5623
|
};
|
|
5621
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$Z, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$Z, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5624
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$Z, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$Z, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5622
5625
|
marginTop: '-5px',
|
|
5623
5626
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5624
5627
|
marginTop: '-6px',
|
|
@@ -5634,10 +5637,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5634
5637
|
lineHeight: '22px',
|
|
5635
5638
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5636
5639
|
};
|
|
5637
|
-
var templateObject_1$
|
|
5640
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$P;
|
|
5638
5641
|
|
|
5639
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5640
|
-
var ContainerBase = newStyled.div(templateObject_2
|
|
5642
|
+
var FlexContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5643
|
+
var ContainerBase = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __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) {
|
|
5641
5644
|
var selected = _a.selected, theme = _a.theme;
|
|
5642
5645
|
return selected
|
|
5643
5646
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5674,7 +5677,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5674
5677
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5675
5678
|
});
|
|
5676
5679
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5677
|
-
var templateObject_1$
|
|
5680
|
+
var templateObject_1$1y, templateObject_2$$, templateObject_3$O, templateObject_4$C, templateObject_5$o, templateObject_6$m, templateObject_7$f, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5678
5681
|
|
|
5679
5682
|
var radioIds = {
|
|
5680
5683
|
oneTime: {
|
|
@@ -5729,12 +5732,12 @@ var Autoship = function (_a) {
|
|
|
5729
5732
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __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, { 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));
|
|
5730
5733
|
};
|
|
5731
5734
|
|
|
5732
|
-
var Img = newStyled.img(templateObject_1$
|
|
5735
|
+
var Img = newStyled.img(templateObject_1$1x || (templateObject_1$1x = __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; });
|
|
5733
5736
|
var Image$3 = function (_a) {
|
|
5734
5737
|
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;
|
|
5735
5738
|
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));
|
|
5736
5739
|
};
|
|
5737
|
-
var templateObject_1$
|
|
5740
|
+
var templateObject_1$1x;
|
|
5738
5741
|
|
|
5739
5742
|
var _a$2;
|
|
5740
5743
|
exports.BeforeAfterVariant = void 0;
|
|
@@ -5749,13 +5752,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5749
5752
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5750
5753
|
_a$2);
|
|
5751
5754
|
|
|
5752
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5753
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5755
|
+
var CustomerDetails = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject([""], [""])));
|
|
5756
|
+
var CustomerInfo = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5754
5757
|
var Name = newStyled.h4(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
5755
5758
|
var StarIconContainer = newStyled.div(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
5756
5759
|
var Description$2 = newStyled.p(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
5757
5760
|
var ReviewDays = newStyled.span(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
5758
|
-
var templateObject_1$
|
|
5761
|
+
var templateObject_1$1w, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5759
5762
|
|
|
5760
5763
|
var NameWithStars = function (_a) {
|
|
5761
5764
|
var name = _a.name, size = _a.size;
|
|
@@ -5773,8 +5776,8 @@ var ResultFeedback = function (_a) {
|
|
|
5773
5776
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5774
5777
|
};
|
|
5775
5778
|
|
|
5776
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
5777
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5779
|
+
var Container$X = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
5780
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
5778
5781
|
var ImageCard = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
5779
5782
|
var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
5780
5783
|
var theme = _a.theme;
|
|
@@ -5786,7 +5789,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5786
5789
|
var theme = _a.theme, size = _a.size;
|
|
5787
5790
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5788
5791
|
});
|
|
5789
|
-
var templateObject_1$
|
|
5792
|
+
var templateObject_1$1v, templateObject_2$Z, templateObject_3$M, templateObject_4$A;
|
|
5790
5793
|
|
|
5791
5794
|
/* base styles & size variants */
|
|
5792
5795
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5864,7 +5867,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
5864
5867
|
return (jsxRuntime.jsxs(Container$X, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5865
5868
|
};
|
|
5866
5869
|
|
|
5867
|
-
var Section = newStyled.div(templateObject_1$
|
|
5870
|
+
var Section = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
5868
5871
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5869
5872
|
});
|
|
5870
5873
|
var CardHeader = function (_a) {
|
|
@@ -5875,16 +5878,16 @@ var CardFooter = function (_a) {
|
|
|
5875
5878
|
var children = _a.children;
|
|
5876
5879
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
5877
5880
|
};
|
|
5878
|
-
var templateObject_1$
|
|
5881
|
+
var templateObject_1$1u;
|
|
5879
5882
|
|
|
5880
|
-
var Body = newStyled.div(templateObject_1$
|
|
5883
|
+
var Body = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
5881
5884
|
var CardBody = function (_a) {
|
|
5882
5885
|
var children = _a.children;
|
|
5883
5886
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
5884
5887
|
};
|
|
5885
|
-
var templateObject_1$
|
|
5888
|
+
var templateObject_1$1t;
|
|
5886
5889
|
|
|
5887
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
5890
|
+
var Container$W = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
5888
5891
|
var flex = _a.flex;
|
|
5889
5892
|
return flex &&
|
|
5890
5893
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5906,16 +5909,16 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
5906
5909
|
Footer: CardFooter,
|
|
5907
5910
|
Body: CardBody,
|
|
5908
5911
|
});
|
|
5909
|
-
var templateObject_1$
|
|
5912
|
+
var templateObject_1$1s;
|
|
5910
5913
|
|
|
5911
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5912
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
5914
|
+
var StyledWrapper = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
5915
|
+
var StyledContainer = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5913
5916
|
var TextLabel = newStyled(Text$8)(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
5914
5917
|
var color = _a.color;
|
|
5915
5918
|
return color;
|
|
5916
5919
|
});
|
|
5917
5920
|
var YouAreSaving = newStyled(Text$8)(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
5918
|
-
var templateObject_1$
|
|
5921
|
+
var templateObject_1$1r, templateObject_2$Y, templateObject_3$L, templateObject_4$z;
|
|
5919
5922
|
|
|
5920
5923
|
var Minimalistic = function (_a) {
|
|
5921
5924
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
@@ -5923,8 +5926,8 @@ var Minimalistic = function (_a) {
|
|
|
5923
5926
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5924
5927
|
};
|
|
5925
5928
|
|
|
5926
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
5927
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5929
|
+
var Container$V = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5930
|
+
var Title$6 = newStyled.h1(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
5928
5931
|
var Details$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
5929
5932
|
var PriceContainer$1 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
5930
5933
|
var Simple = function (_a) {
|
|
@@ -5932,18 +5935,18 @@ var Simple = function (_a) {
|
|
|
5932
5935
|
var theme = useTheme();
|
|
5933
5936
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$V, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5934
5937
|
};
|
|
5935
|
-
var templateObject_1$
|
|
5938
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$K, templateObject_4$y;
|
|
5936
5939
|
|
|
5937
5940
|
var Bundle = {
|
|
5938
5941
|
Minimalistic: Minimalistic,
|
|
5939
5942
|
Simple: Simple,
|
|
5940
5943
|
};
|
|
5941
5944
|
|
|
5942
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
5945
|
+
var Container$U = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
5943
5946
|
var displayBNPL = _a.displayBNPL;
|
|
5944
5947
|
return (displayBNPL ? 'flex' : 'none');
|
|
5945
5948
|
});
|
|
5946
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5949
|
+
var TextContainer$1 = newStyled.div(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
5947
5950
|
var IconWrapper$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
5948
5951
|
var BuyNowPayLater = function (_a) {
|
|
5949
5952
|
var _b;
|
|
@@ -5956,41 +5959,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
5956
5959
|
}
|
|
5957
5960
|
return (jsxRuntime.jsx(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5958
5961
|
};
|
|
5959
|
-
var templateObject_1$
|
|
5962
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$J;
|
|
5960
5963
|
|
|
5961
|
-
var Text$7 = newStyled.span(templateObject_1$
|
|
5964
|
+
var Text$7 = newStyled.span(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5962
5965
|
var Title$5 = function (_a) {
|
|
5963
5966
|
var title = _a.title;
|
|
5964
5967
|
var theme = useTheme();
|
|
5965
5968
|
return jsxRuntime.jsx(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5966
5969
|
};
|
|
5967
|
-
var templateObject_1$
|
|
5970
|
+
var templateObject_1$1o;
|
|
5968
5971
|
|
|
5969
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5972
|
+
var P$3 = newStyled.p(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5970
5973
|
var Promo = function (_a) {
|
|
5971
5974
|
var text = _a.text;
|
|
5972
5975
|
var theme = useTheme();
|
|
5973
5976
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5974
5977
|
};
|
|
5975
|
-
var templateObject_1$
|
|
5978
|
+
var templateObject_1$1n;
|
|
5976
5979
|
|
|
5977
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5980
|
+
var Text$6 = newStyled.span(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
5978
5981
|
var Description$1 = function (_a) {
|
|
5979
5982
|
var text = _a.text;
|
|
5980
5983
|
var theme = useTheme();
|
|
5981
5984
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5982
5985
|
};
|
|
5983
|
-
var templateObject_1$
|
|
5986
|
+
var templateObject_1$1m;
|
|
5984
5987
|
|
|
5985
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
5988
|
+
var Container$T = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
5986
5989
|
var CloseButton$1 = function (_a) {
|
|
5987
5990
|
var onClick = _a.onClick, size = _a.size;
|
|
5988
5991
|
var theme = useTheme();
|
|
5989
5992
|
return (jsxRuntime.jsx(Container$T, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5990
5993
|
};
|
|
5991
|
-
var templateObject_1$
|
|
5994
|
+
var templateObject_1$1l;
|
|
5992
5995
|
|
|
5993
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
5996
|
+
var Text$5 = newStyled.h3(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
5994
5997
|
var backgroundColor = _a.backgroundColor;
|
|
5995
5998
|
return backgroundColor;
|
|
5996
5999
|
}, function (_a) {
|
|
@@ -6005,7 +6008,7 @@ var OfferBanner = function (_a) {
|
|
|
6005
6008
|
var theme = useTheme();
|
|
6006
6009
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6007
6010
|
};
|
|
6008
|
-
var templateObject_1$
|
|
6011
|
+
var templateObject_1$1k;
|
|
6009
6012
|
|
|
6010
6013
|
var CartProductItem = {
|
|
6011
6014
|
Title: Title$5,
|
|
@@ -6015,8 +6018,8 @@ var CartProductItem = {
|
|
|
6015
6018
|
CloseButton: CloseButton$1,
|
|
6016
6019
|
};
|
|
6017
6020
|
|
|
6018
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
6019
|
-
var MobileContainer = newStyled(Container$S)(templateObject_2$
|
|
6021
|
+
var Container$S = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6022
|
+
var MobileContainer = newStyled(Container$S)(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6020
6023
|
var DollarPart = newStyled.span(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6021
6024
|
var ClubMembersText = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6022
6025
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6028,7 +6031,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6028
6031
|
var isMobile = useWindowDimensions().isMobile;
|
|
6029
6032
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$S, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6030
6033
|
};
|
|
6031
|
-
var templateObject_1$
|
|
6034
|
+
var templateObject_1$1j, templateObject_2$V, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$k, templateObject_7$e, templateObject_8$a;
|
|
6032
6035
|
|
|
6033
6036
|
var Spacing = function (_a) {
|
|
6034
6037
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6036,8 +6039,8 @@ var Spacing = function (_a) {
|
|
|
6036
6039
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6037
6040
|
};
|
|
6038
6041
|
|
|
6039
|
-
var Container$R = newStyled('div')(templateObject_1$
|
|
6040
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6042
|
+
var Container$R = newStyled('div')(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6043
|
+
var Content$2 = newStyled('div')(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6041
6044
|
var BarContainer$1 = newStyled('div')(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6042
6045
|
var Bar$2 = newStyled('div')(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6043
6046
|
var index = _a.index;
|
|
@@ -6050,12 +6053,12 @@ var StrengthBars = function (_a) {
|
|
|
6050
6053
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6051
6054
|
return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6052
6055
|
};
|
|
6053
|
-
var templateObject_1$
|
|
6056
|
+
var templateObject_1$1i, templateObject_2$U, templateObject_3$H, templateObject_4$w;
|
|
6054
6057
|
|
|
6055
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
6056
|
-
var templateObject_1$
|
|
6058
|
+
var Container$Q = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6059
|
+
var templateObject_1$1h;
|
|
6057
6060
|
|
|
6058
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6061
|
+
var StarContainer = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6059
6062
|
var marginRight = _a.marginRight;
|
|
6060
6063
|
return marginRight;
|
|
6061
6064
|
});
|
|
@@ -6071,7 +6074,7 @@ var StarList = function (_a) {
|
|
|
6071
6074
|
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)));
|
|
6072
6075
|
}) }, void 0));
|
|
6073
6076
|
};
|
|
6074
|
-
var templateObject_1$
|
|
6077
|
+
var templateObject_1$1g;
|
|
6075
6078
|
|
|
6076
6079
|
/* base styles & size variants */
|
|
6077
6080
|
var LabelStyles = {
|
|
@@ -6112,8 +6115,8 @@ var LabelStyles = {
|
|
|
6112
6115
|
});
|
|
6113
6116
|
},
|
|
6114
6117
|
};
|
|
6115
|
-
var Container$P = newStyled.a(templateObject_1$
|
|
6116
|
-
var templateObject_1$
|
|
6118
|
+
var Container$P = newStyled.a(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
6119
|
+
var templateObject_1$1f;
|
|
6117
6120
|
|
|
6118
6121
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6119
6122
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6133,7 +6136,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6133
6136
|
}),
|
|
6134
6137
|
];
|
|
6135
6138
|
});
|
|
6136
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6139
|
+
var RatingLabel = newStyled.span(templateObject_1$1e || (templateObject_1$1e = __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; });
|
|
6137
6140
|
var starsNumber = 5;
|
|
6138
6141
|
var Rating = function (_a) {
|
|
6139
6142
|
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;
|
|
@@ -6156,7 +6159,45 @@ var Rating = function (_a) {
|
|
|
6156
6159
|
: {};
|
|
6157
6160
|
return (jsxRuntime.jsxs(Container$P, __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));
|
|
6158
6161
|
};
|
|
6159
|
-
var templateObject_1$
|
|
6162
|
+
var templateObject_1$1e;
|
|
6163
|
+
|
|
6164
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
6165
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
6166
|
+
var RegularPriceTag = function () {
|
|
6167
|
+
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6168
|
+
};
|
|
6169
|
+
var ClubPriceTag = function () {
|
|
6170
|
+
return jsxRuntime.jsx(ClubPriceTagSpan, { children: "CLUB MEMBERS" }, void 0);
|
|
6171
|
+
};
|
|
6172
|
+
function getTestId() {
|
|
6173
|
+
var args = [];
|
|
6174
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
6175
|
+
args[_i] = arguments[_i];
|
|
6176
|
+
}
|
|
6177
|
+
return args.filter(Boolean).join('-');
|
|
6178
|
+
}
|
|
6179
|
+
var PriceLabelV4 = function (_a) {
|
|
6180
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, _f = _a.clubStyle, clubStyle = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle"]);
|
|
6181
|
+
var theme = useTheme();
|
|
6182
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
6183
|
+
var priceCommonProps = {
|
|
6184
|
+
size: finalPriceStyled ? exports.ComponentSize.Small : size,
|
|
6185
|
+
color: color || theme.colors.pallete.secondary.color,
|
|
6186
|
+
weight: 700,
|
|
6187
|
+
};
|
|
6188
|
+
var OriginalPrice = function () {
|
|
6189
|
+
var sizeProp = !clubStyle
|
|
6190
|
+
? originalPriceStyled
|
|
6191
|
+
? size
|
|
6192
|
+
: exports.ComponentSize.Small
|
|
6193
|
+
: isMobile
|
|
6194
|
+
? exports.ComponentSize.Small
|
|
6195
|
+
: exports.ComponentSize.XSmall;
|
|
6196
|
+
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6197
|
+
};
|
|
6198
|
+
return (jsxRuntime.jsxs(Container$Z, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex', flexDirection: 'column' } }, { children: [jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex', gap: '5px' } }, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }), void 0), jsxRuntime.jsxs("div", __assign$1({ style: { display: 'flex', gap: '5px' } }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }), void 0)] }), void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(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, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6199
|
+
};
|
|
6200
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6160
6201
|
|
|
6161
6202
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6162
6203
|
var width = _a.width, height = _a.height;
|
|
@@ -6221,7 +6262,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6221
6262
|
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
6222
6263
|
strength: -1,
|
|
6223
6264
|
description: '',
|
|
6224
|
-
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading;
|
|
6265
|
+
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading, _k = _a.version, version = _k === void 0 ? 1 : _k;
|
|
6225
6266
|
var theme = useTheme();
|
|
6226
6267
|
var styles = getStylesBySize$9(size);
|
|
6227
6268
|
var isMobile = useWindowDimensions().isMobile;
|
|
@@ -6234,16 +6275,20 @@ var ProductItemMobile = function (_a) {
|
|
|
6234
6275
|
_a)[size];
|
|
6235
6276
|
}, [size]);
|
|
6236
6277
|
var PriceLabelDisplay = function () {
|
|
6237
|
-
|
|
6278
|
+
if (priceDisplayType === 'styled') {
|
|
6279
|
+
return (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0));
|
|
6280
|
+
}
|
|
6281
|
+
if (version === 4) {
|
|
6282
|
+
return (jsx(PriceLabelV4, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
6283
|
+
? !isMobile
|
|
6284
|
+
? { fontSize: '16px', fontWeight: 700, color: '#C64844' }
|
|
6285
|
+
: { fontSize: '12px', fontWeight: 700, color: '#C64844' }
|
|
6286
|
+
: undefined }, void 0));
|
|
6287
|
+
}
|
|
6288
|
+
return (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
6238
6289
|
? !isMobile
|
|
6239
|
-
? {
|
|
6240
|
-
|
|
6241
|
-
fontWeight: 700,
|
|
6242
|
-
}
|
|
6243
|
-
: {
|
|
6244
|
-
fontSize: '12px',
|
|
6245
|
-
fontWeight: 700,
|
|
6246
|
-
}
|
|
6290
|
+
? { fontSize: '16px', fontWeight: 700 }
|
|
6291
|
+
: { fontSize: '12px', fontWeight: 700 }
|
|
6247
6292
|
: undefined }, void 0));
|
|
6248
6293
|
};
|
|
6249
6294
|
var RatingDisplay = function () {
|
|
@@ -6253,7 +6298,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6253
6298
|
return jsx(Fragment, {}, void 0);
|
|
6254
6299
|
return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6255
6300
|
};
|
|
6256
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$O, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$O, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) :
|
|
6301
|
+
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$O, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$O, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6257
6302
|
};
|
|
6258
6303
|
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6259
6304
|
|