@trafilea/afrodita-components 6.5.11 → 6.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +6 -1
- package/build/index.esm.js +168 -123
- package/build/index.esm.js.map +1 -1
- package/build/index.js +168 -123
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/build/theme/thespadr.theme.js +1 -1
- package/build/theme/truekind.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();
|
|
@@ -3694,6 +3694,8 @@ var Messaging = /*#__PURE__*/Object.freeze({
|
|
|
3694
3694
|
|
|
3695
3695
|
var BirthdayGifts = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "myaccount/birthday_gifts" }), void 0)); };
|
|
3696
3696
|
|
|
3697
|
+
var Cart = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "myaccount/cart" }), void 0); };
|
|
3698
|
+
|
|
3697
3699
|
var Community = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "myaccount/community" }), void 0); };
|
|
3698
3700
|
|
|
3699
3701
|
var DealsOffers = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "myaccount/deals_offers" }), void 0)); };
|
|
@@ -3725,6 +3727,7 @@ var VIP = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props,
|
|
|
3725
3727
|
var MyAccount = /*#__PURE__*/Object.freeze({
|
|
3726
3728
|
__proto__: null,
|
|
3727
3729
|
BirthdayGifts: BirthdayGifts,
|
|
3730
|
+
Cart: Cart,
|
|
3728
3731
|
Community: Community,
|
|
3729
3732
|
DealsOffers: DealsOffers,
|
|
3730
3733
|
FreeReturns: FreeReturns,
|
|
@@ -4091,8 +4094,8 @@ function jsxs(type, props, key) {
|
|
|
4091
4094
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4092
4095
|
// `variants` styles that are consistent through all themes.
|
|
4093
4096
|
var TAGS = {
|
|
4094
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4095
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4097
|
+
hero1: newStyled.h1(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject([""], [""]))),
|
|
4098
|
+
hero2: newStyled.h2(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject([""], [""]))),
|
|
4096
4099
|
hero3: newStyled.h3(templateObject_3$V || (templateObject_3$V = __makeTemplateObject([""], [""]))),
|
|
4097
4100
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
4098
4101
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
@@ -4227,10 +4230,10 @@ var DEFAULTS = {
|
|
|
4227
4230
|
size: 'regular',
|
|
4228
4231
|
},
|
|
4229
4232
|
};
|
|
4230
|
-
var templateObject_1$
|
|
4233
|
+
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;
|
|
4231
4234
|
|
|
4232
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4233
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4235
|
+
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"])));
|
|
4236
|
+
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"])));
|
|
4234
4237
|
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"])));
|
|
4235
4238
|
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"])));
|
|
4236
4239
|
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"])));
|
|
@@ -4259,27 +4262,27 @@ var PackCard$1 = function (_a) {
|
|
|
4259
4262
|
currency: currencyCode || 'USD',
|
|
4260
4263
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4261
4264
|
};
|
|
4262
|
-
var templateObject_1$
|
|
4265
|
+
var templateObject_1$1P, templateObject_2$1b, templateObject_3$U, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4263
4266
|
|
|
4264
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4265
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4267
|
+
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"])));
|
|
4268
|
+
var DropContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4266
4269
|
var DropList = function (_a) {
|
|
4267
4270
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4268
4271
|
return (jsxRuntime.jsx(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4269
4272
|
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));
|
|
4270
4273
|
}) }, void 0));
|
|
4271
4274
|
};
|
|
4272
|
-
var templateObject_1$
|
|
4275
|
+
var templateObject_1$1O, templateObject_2$1a;
|
|
4273
4276
|
|
|
4274
4277
|
var DROPS_TOTAL = 5;
|
|
4275
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4276
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4278
|
+
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"])));
|
|
4279
|
+
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"])));
|
|
4277
4280
|
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"])));
|
|
4278
4281
|
var AbsorbencyLevel = function (_a) {
|
|
4279
4282
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4280
4283
|
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));
|
|
4281
4284
|
};
|
|
4282
|
-
var templateObject_1$
|
|
4285
|
+
var templateObject_1$1N, templateObject_2$19, templateObject_3$T;
|
|
4283
4286
|
|
|
4284
4287
|
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(`
|
|
4285
4288
|
`),"","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(`
|
|
@@ -4355,7 +4358,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4355
4358
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4356
4359
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4357
4360
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4358
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4361
|
+
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"])));
|
|
4359
4362
|
var Accordion$1 = function (_a) {
|
|
4360
4363
|
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;
|
|
4361
4364
|
var theme = useTheme();
|
|
@@ -4379,9 +4382,9 @@ var Accordion$1 = function (_a) {
|
|
|
4379
4382
|
} }, { 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));
|
|
4380
4383
|
} }), void 0));
|
|
4381
4384
|
};
|
|
4382
|
-
var templateObject_1$
|
|
4385
|
+
var templateObject_1$1M;
|
|
4383
4386
|
|
|
4384
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4387
|
+
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"])));
|
|
4385
4388
|
var AccordionOptions = function (_a) {
|
|
4386
4389
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4387
4390
|
var _b = React$2.useState({
|
|
@@ -4405,7 +4408,7 @@ var AccordionOptions = function (_a) {
|
|
|
4405
4408
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4406
4409
|
}) }, void 0));
|
|
4407
4410
|
};
|
|
4408
|
-
var templateObject_1$
|
|
4411
|
+
var templateObject_1$1L;
|
|
4409
4412
|
|
|
4410
4413
|
exports.CardSectionType = void 0;
|
|
4411
4414
|
(function (CardSectionType) {
|
|
@@ -4567,14 +4570,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4567
4570
|
literal: true,
|
|
4568
4571
|
});
|
|
4569
4572
|
|
|
4570
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4571
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4573
|
+
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; });
|
|
4574
|
+
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"])));
|
|
4572
4575
|
var Error$1 = function (_a) {
|
|
4573
4576
|
var error = _a.error;
|
|
4574
4577
|
var theme = useTheme();
|
|
4575
4578
|
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));
|
|
4576
4579
|
};
|
|
4577
|
-
var templateObject_1$
|
|
4580
|
+
var templateObject_1$1K, templateObject_2$18;
|
|
4578
4581
|
|
|
4579
4582
|
var BaseSelectButton = function (_a) {
|
|
4580
4583
|
var children = _a.children, as = _a.as;
|
|
@@ -4591,7 +4594,7 @@ function BaseSelectOption(_a) {
|
|
|
4591
4594
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4592
4595
|
}
|
|
4593
4596
|
|
|
4594
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4597
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4595
4598
|
function BaseSelect(_a) {
|
|
4596
4599
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4597
4600
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4601,7 +4604,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4601
4604
|
Options: BaseSelectOptions,
|
|
4602
4605
|
Option: BaseSelectOption,
|
|
4603
4606
|
});
|
|
4604
|
-
var templateObject_1$
|
|
4607
|
+
var templateObject_1$1J;
|
|
4605
4608
|
|
|
4606
4609
|
var CustomButton = newStyled.button(function (_a) {
|
|
4607
4610
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4640,7 +4643,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4640
4643
|
});
|
|
4641
4644
|
});
|
|
4642
4645
|
//TODO Remove this when we find the real solution
|
|
4643
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4646
|
+
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) {
|
|
4644
4647
|
var open = _a.open;
|
|
4645
4648
|
return open &&
|
|
4646
4649
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4660,7 +4663,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4660
4663
|
} }), void 0));
|
|
4661
4664
|
};
|
|
4662
4665
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4663
|
-
var templateObject_1$
|
|
4666
|
+
var templateObject_1$1I;
|
|
4664
4667
|
|
|
4665
4668
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4666
4669
|
var theme = _a.theme;
|
|
@@ -4827,7 +4830,7 @@ var CustomCheckboxStyles = {
|
|
|
4827
4830
|
},
|
|
4828
4831
|
};
|
|
4829
4832
|
|
|
4830
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
4833
|
+
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"])));
|
|
4831
4834
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4832
4835
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4833
4836
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4838,7 +4841,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4838
4841
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4839
4842
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4840
4843
|
]; });
|
|
4841
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4844
|
+
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) {
|
|
4842
4845
|
var disabled = _a.disabled;
|
|
4843
4846
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4844
4847
|
});
|
|
@@ -4854,7 +4857,7 @@ var Checkbox = function (_a) {
|
|
|
4854
4857
|
};
|
|
4855
4858
|
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));
|
|
4856
4859
|
};
|
|
4857
|
-
var templateObject_1$
|
|
4860
|
+
var templateObject_1$1H, templateObject_2$17;
|
|
4858
4861
|
|
|
4859
4862
|
var CustomOption = newStyled.li(function (_a) {
|
|
4860
4863
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4903,8 +4906,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4903
4906
|
Option: BaseDropdownOption,
|
|
4904
4907
|
});
|
|
4905
4908
|
|
|
4906
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
4907
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4909
|
+
var Container$11 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject([""], [""])));
|
|
4910
|
+
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"])));
|
|
4908
4911
|
function SimpleDropdown(_a) {
|
|
4909
4912
|
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;
|
|
4910
4913
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4936,7 +4939,7 @@ function SimpleDropdown(_a) {
|
|
|
4936
4939
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : React$2.Fragment;
|
|
4937
4940
|
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));
|
|
4938
4941
|
}
|
|
4939
|
-
var templateObject_1$
|
|
4942
|
+
var templateObject_1$1G, templateObject_2$16;
|
|
4940
4943
|
|
|
4941
4944
|
/* base styles & size variants */
|
|
4942
4945
|
var CustomRadioStyles$2 = {
|
|
@@ -5001,9 +5004,9 @@ var ContainerStyles$2 = {
|
|
|
5001
5004
|
},
|
|
5002
5005
|
};
|
|
5003
5006
|
|
|
5004
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5007
|
+
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"])));
|
|
5005
5008
|
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5006
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5009
|
+
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) {
|
|
5007
5010
|
var disabled = _a.disabled;
|
|
5008
5011
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5009
5012
|
});
|
|
@@ -5027,7 +5030,7 @@ var RadioInput = function (_a) {
|
|
|
5027
5030
|
};
|
|
5028
5031
|
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));
|
|
5029
5032
|
};
|
|
5030
|
-
var templateObject_1$
|
|
5033
|
+
var templateObject_1$1F, templateObject_2$15, templateObject_3$S;
|
|
5031
5034
|
|
|
5032
5035
|
var getWrapperFlexDirection = function (position) {
|
|
5033
5036
|
switch (position) {
|
|
@@ -5078,7 +5081,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5078
5081
|
}
|
|
5079
5082
|
};
|
|
5080
5083
|
|
|
5081
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5084
|
+
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) {
|
|
5082
5085
|
var position = _a.position;
|
|
5083
5086
|
return getWrapperFlexDirection(position);
|
|
5084
5087
|
}, function (_a) {
|
|
@@ -5088,7 +5091,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __ma
|
|
|
5088
5091
|
var disableHover = _a.disableHover;
|
|
5089
5092
|
return (disableHover ? 0 : 1);
|
|
5090
5093
|
});
|
|
5091
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5094
|
+
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) {
|
|
5092
5095
|
var position = _a.position;
|
|
5093
5096
|
return getContainerFlexDirection(position);
|
|
5094
5097
|
}, function (_a) {
|
|
@@ -5134,7 +5137,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5134
5137
|
});
|
|
5135
5138
|
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"])));
|
|
5136
5139
|
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"])));
|
|
5137
|
-
var templateObject_1$
|
|
5140
|
+
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;
|
|
5138
5141
|
|
|
5139
5142
|
var useOnClickOutside = function (ref, handler) {
|
|
5140
5143
|
React$2.useEffect(function () {
|
|
@@ -5276,7 +5279,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5276
5279
|
};
|
|
5277
5280
|
}
|
|
5278
5281
|
};
|
|
5279
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
5282
|
+
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) {
|
|
5280
5283
|
var backgroundColor = _a.backgroundColor;
|
|
5281
5284
|
return backgroundColor;
|
|
5282
5285
|
}, function (_a) {
|
|
@@ -5298,7 +5301,7 @@ var Container$$ = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __
|
|
|
5298
5301
|
var size = _a.size;
|
|
5299
5302
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5300
5303
|
});
|
|
5301
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5304
|
+
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) {
|
|
5302
5305
|
var textColor = _a.textColor;
|
|
5303
5306
|
return textColor;
|
|
5304
5307
|
}, function (_a) {
|
|
@@ -5315,7 +5318,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5315
5318
|
var theme = useTheme();
|
|
5316
5319
|
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));
|
|
5317
5320
|
};
|
|
5318
|
-
var templateObject_1$
|
|
5321
|
+
var templateObject_1$1D, templateObject_2$13;
|
|
5319
5322
|
|
|
5320
5323
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5321
5324
|
var _a, _b, _c;
|
|
@@ -5346,7 +5349,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5346
5349
|
};
|
|
5347
5350
|
}
|
|
5348
5351
|
};
|
|
5349
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
5352
|
+
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) {
|
|
5350
5353
|
var backgroundColor = _a.backgroundColor;
|
|
5351
5354
|
return backgroundColor;
|
|
5352
5355
|
}, function (_a) {
|
|
@@ -5368,7 +5371,7 @@ var Container$_ = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __
|
|
|
5368
5371
|
var size = _a.size;
|
|
5369
5372
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5370
5373
|
});
|
|
5371
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5374
|
+
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) {
|
|
5372
5375
|
var textColor = _a.textColor;
|
|
5373
5376
|
return textColor;
|
|
5374
5377
|
}, function (_a) {
|
|
@@ -5385,7 +5388,7 @@ var DiscountTag = function (_a) {
|
|
|
5385
5388
|
var theme = useTheme();
|
|
5386
5389
|
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));
|
|
5387
5390
|
};
|
|
5388
|
-
var templateObject_1$
|
|
5391
|
+
var templateObject_1$1C, templateObject_2$12;
|
|
5389
5392
|
|
|
5390
5393
|
var getStylesBySize$b = function (size, theme) {
|
|
5391
5394
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5427,8 +5430,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5427
5430
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5428
5431
|
}
|
|
5429
5432
|
};
|
|
5430
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
5431
|
-
var Price = newStyled.p(templateObject_2$
|
|
5433
|
+
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"])));
|
|
5434
|
+
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) {
|
|
5432
5435
|
var weight = _a.weight;
|
|
5433
5436
|
return (weight ? weight : '400');
|
|
5434
5437
|
}, function (_a) {
|
|
@@ -5457,7 +5460,7 @@ var TagContainer = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __m
|
|
|
5457
5460
|
var size = _a.size;
|
|
5458
5461
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
5459
5462
|
});
|
|
5460
|
-
function getTestId() {
|
|
5463
|
+
function getTestId$1() {
|
|
5461
5464
|
var args = [];
|
|
5462
5465
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
5463
5466
|
args[_i] = arguments[_i];
|
|
@@ -5481,13 +5484,13 @@ var PriceLabel = function (_a) {
|
|
|
5481
5484
|
: isMobile
|
|
5482
5485
|
? exports.ComponentSize.Small
|
|
5483
5486
|
: exports.ComponentSize.XSmall;
|
|
5484
|
-
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));
|
|
5487
|
+
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));
|
|
5485
5488
|
};
|
|
5486
|
-
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));
|
|
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$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));
|
|
5487
5490
|
};
|
|
5488
|
-
var templateObject_1$
|
|
5491
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$Q;
|
|
5489
5492
|
|
|
5490
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5493
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5491
5494
|
var PriceLabelV2 = function (_a) {
|
|
5492
5495
|
var _b;
|
|
5493
5496
|
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"]);
|
|
@@ -5537,8 +5540,8 @@ var PriceLabelV2 = function (_a) {
|
|
|
5537
5540
|
}
|
|
5538
5541
|
var savetoString = saveto.toFixed(2);
|
|
5539
5542
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5540
|
-
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5541
|
-
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: {
|
|
5543
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(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$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5542
5545
|
marginTop: '-5px',
|
|
5543
5546
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5544
5547
|
? finalPriceArray[0]
|
|
@@ -5556,10 +5559,10 @@ var PriceLabelV2 = function (_a) {
|
|
|
5556
5559
|
lineHeight: '22px',
|
|
5557
5560
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5558
5561
|
};
|
|
5559
|
-
var templateObject_1$
|
|
5562
|
+
var templateObject_1$1A;
|
|
5560
5563
|
|
|
5561
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5562
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2
|
|
5564
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5565
|
+
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"])));
|
|
5563
5566
|
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"])));
|
|
5564
5567
|
var PriceLabelV3 = function (_a) {
|
|
5565
5568
|
var _b;
|
|
@@ -5609,13 +5612,13 @@ var PriceLabelV3 = function (_a) {
|
|
|
5609
5612
|
}
|
|
5610
5613
|
var savetoString = saveto.toFixed(2);
|
|
5611
5614
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5612
|
-
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5615
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5613
5616
|
var DiscountedPriceOfEach = function () {
|
|
5614
5617
|
if (!itemsQuantity || itemsQuantity < 2)
|
|
5615
5618
|
return null;
|
|
5616
|
-
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));
|
|
5619
|
+
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));
|
|
5617
5620
|
};
|
|
5618
|
-
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: {
|
|
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$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5619
5622
|
marginTop: '-5px',
|
|
5620
5623
|
} }, 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: {
|
|
5621
5624
|
marginTop: '-6px',
|
|
@@ -5631,10 +5634,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5631
5634
|
lineHeight: '22px',
|
|
5632
5635
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5633
5636
|
};
|
|
5634
|
-
var templateObject_1$
|
|
5637
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$P;
|
|
5635
5638
|
|
|
5636
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5637
|
-
var ContainerBase = newStyled.div(templateObject_2
|
|
5639
|
+
var FlexContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5640
|
+
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) {
|
|
5638
5641
|
var selected = _a.selected, theme = _a.theme;
|
|
5639
5642
|
return selected
|
|
5640
5643
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5671,7 +5674,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5671
5674
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5672
5675
|
});
|
|
5673
5676
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5674
|
-
var templateObject_1$
|
|
5677
|
+
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;
|
|
5675
5678
|
|
|
5676
5679
|
var radioIds = {
|
|
5677
5680
|
oneTime: {
|
|
@@ -5726,12 +5729,12 @@ var Autoship = function (_a) {
|
|
|
5726
5729
|
: 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));
|
|
5727
5730
|
};
|
|
5728
5731
|
|
|
5729
|
-
var Img = newStyled.img(templateObject_1$
|
|
5732
|
+
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; });
|
|
5730
5733
|
var Image$3 = function (_a) {
|
|
5731
5734
|
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;
|
|
5732
5735
|
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));
|
|
5733
5736
|
};
|
|
5734
|
-
var templateObject_1$
|
|
5737
|
+
var templateObject_1$1x;
|
|
5735
5738
|
|
|
5736
5739
|
var _a$2;
|
|
5737
5740
|
exports.BeforeAfterVariant = void 0;
|
|
@@ -5746,13 +5749,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5746
5749
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5747
5750
|
_a$2);
|
|
5748
5751
|
|
|
5749
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5750
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5752
|
+
var CustomerDetails = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject([""], [""])));
|
|
5753
|
+
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"])));
|
|
5751
5754
|
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"])));
|
|
5752
5755
|
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"])));
|
|
5753
5756
|
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"])));
|
|
5754
5757
|
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"])));
|
|
5755
|
-
var templateObject_1$
|
|
5758
|
+
var templateObject_1$1w, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5756
5759
|
|
|
5757
5760
|
var NameWithStars = function (_a) {
|
|
5758
5761
|
var name = _a.name, size = _a.size;
|
|
@@ -5770,8 +5773,8 @@ var ResultFeedback = function (_a) {
|
|
|
5770
5773
|
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));
|
|
5771
5774
|
};
|
|
5772
5775
|
|
|
5773
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
5774
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5776
|
+
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; });
|
|
5777
|
+
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"])));
|
|
5775
5778
|
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; });
|
|
5776
5779
|
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) {
|
|
5777
5780
|
var theme = _a.theme;
|
|
@@ -5783,7 +5786,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5783
5786
|
var theme = _a.theme, size = _a.size;
|
|
5784
5787
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5785
5788
|
});
|
|
5786
|
-
var templateObject_1$
|
|
5789
|
+
var templateObject_1$1v, templateObject_2$Z, templateObject_3$M, templateObject_4$A;
|
|
5787
5790
|
|
|
5788
5791
|
/* base styles & size variants */
|
|
5789
5792
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5861,7 +5864,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
5861
5864
|
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));
|
|
5862
5865
|
};
|
|
5863
5866
|
|
|
5864
|
-
var Section = newStyled.div(templateObject_1$
|
|
5867
|
+
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) {
|
|
5865
5868
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5866
5869
|
});
|
|
5867
5870
|
var CardHeader = function (_a) {
|
|
@@ -5872,16 +5875,16 @@ var CardFooter = function (_a) {
|
|
|
5872
5875
|
var children = _a.children;
|
|
5873
5876
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
5874
5877
|
};
|
|
5875
|
-
var templateObject_1$
|
|
5878
|
+
var templateObject_1$1u;
|
|
5876
5879
|
|
|
5877
|
-
var Body = newStyled.div(templateObject_1$
|
|
5880
|
+
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"])));
|
|
5878
5881
|
var CardBody = function (_a) {
|
|
5879
5882
|
var children = _a.children;
|
|
5880
5883
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
5881
5884
|
};
|
|
5882
|
-
var templateObject_1$
|
|
5885
|
+
var templateObject_1$1t;
|
|
5883
5886
|
|
|
5884
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
5887
|
+
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) {
|
|
5885
5888
|
var flex = _a.flex;
|
|
5886
5889
|
return flex &&
|
|
5887
5890
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5903,16 +5906,16 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
5903
5906
|
Footer: CardFooter,
|
|
5904
5907
|
Body: CardBody,
|
|
5905
5908
|
});
|
|
5906
|
-
var templateObject_1$
|
|
5909
|
+
var templateObject_1$1s;
|
|
5907
5910
|
|
|
5908
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5909
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
5911
|
+
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"])));
|
|
5912
|
+
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"])));
|
|
5910
5913
|
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) {
|
|
5911
5914
|
var color = _a.color;
|
|
5912
5915
|
return color;
|
|
5913
5916
|
});
|
|
5914
5917
|
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"])));
|
|
5915
|
-
var templateObject_1$
|
|
5918
|
+
var templateObject_1$1r, templateObject_2$Y, templateObject_3$L, templateObject_4$z;
|
|
5916
5919
|
|
|
5917
5920
|
var Minimalistic = function (_a) {
|
|
5918
5921
|
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;
|
|
@@ -5920,8 +5923,8 @@ var Minimalistic = function (_a) {
|
|
|
5920
5923
|
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));
|
|
5921
5924
|
};
|
|
5922
5925
|
|
|
5923
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
5924
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5926
|
+
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"])));
|
|
5927
|
+
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; });
|
|
5925
5928
|
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; });
|
|
5926
5929
|
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"])));
|
|
5927
5930
|
var Simple = function (_a) {
|
|
@@ -5929,18 +5932,18 @@ var Simple = function (_a) {
|
|
|
5929
5932
|
var theme = useTheme();
|
|
5930
5933
|
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));
|
|
5931
5934
|
};
|
|
5932
|
-
var templateObject_1$
|
|
5935
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$K, templateObject_4$y;
|
|
5933
5936
|
|
|
5934
5937
|
var Bundle = {
|
|
5935
5938
|
Minimalistic: Minimalistic,
|
|
5936
5939
|
Simple: Simple,
|
|
5937
5940
|
};
|
|
5938
5941
|
|
|
5939
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
5942
|
+
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) {
|
|
5940
5943
|
var displayBNPL = _a.displayBNPL;
|
|
5941
5944
|
return (displayBNPL ? 'flex' : 'none');
|
|
5942
5945
|
});
|
|
5943
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5946
|
+
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"])));
|
|
5944
5947
|
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"])));
|
|
5945
5948
|
var BuyNowPayLater = function (_a) {
|
|
5946
5949
|
var _b;
|
|
@@ -5953,41 +5956,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
5953
5956
|
}
|
|
5954
5957
|
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));
|
|
5955
5958
|
};
|
|
5956
|
-
var templateObject_1$
|
|
5959
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$J;
|
|
5957
5960
|
|
|
5958
|
-
var Text$7 = newStyled.span(templateObject_1$
|
|
5961
|
+
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; });
|
|
5959
5962
|
var Title$5 = function (_a) {
|
|
5960
5963
|
var title = _a.title;
|
|
5961
5964
|
var theme = useTheme();
|
|
5962
5965
|
return jsxRuntime.jsx(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5963
5966
|
};
|
|
5964
|
-
var templateObject_1$
|
|
5967
|
+
var templateObject_1$1o;
|
|
5965
5968
|
|
|
5966
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5969
|
+
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; });
|
|
5967
5970
|
var Promo = function (_a) {
|
|
5968
5971
|
var text = _a.text;
|
|
5969
5972
|
var theme = useTheme();
|
|
5970
5973
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5971
5974
|
};
|
|
5972
|
-
var templateObject_1$
|
|
5975
|
+
var templateObject_1$1n;
|
|
5973
5976
|
|
|
5974
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5977
|
+
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; });
|
|
5975
5978
|
var Description$1 = function (_a) {
|
|
5976
5979
|
var text = _a.text;
|
|
5977
5980
|
var theme = useTheme();
|
|
5978
5981
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5979
5982
|
};
|
|
5980
|
-
var templateObject_1$
|
|
5983
|
+
var templateObject_1$1m;
|
|
5981
5984
|
|
|
5982
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
5985
|
+
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"); });
|
|
5983
5986
|
var CloseButton$1 = function (_a) {
|
|
5984
5987
|
var onClick = _a.onClick, size = _a.size;
|
|
5985
5988
|
var theme = useTheme();
|
|
5986
5989
|
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));
|
|
5987
5990
|
};
|
|
5988
|
-
var templateObject_1$
|
|
5991
|
+
var templateObject_1$1l;
|
|
5989
5992
|
|
|
5990
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
5993
|
+
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) {
|
|
5991
5994
|
var backgroundColor = _a.backgroundColor;
|
|
5992
5995
|
return backgroundColor;
|
|
5993
5996
|
}, function (_a) {
|
|
@@ -6002,7 +6005,7 @@ var OfferBanner = function (_a) {
|
|
|
6002
6005
|
var theme = useTheme();
|
|
6003
6006
|
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));
|
|
6004
6007
|
};
|
|
6005
|
-
var templateObject_1$
|
|
6008
|
+
var templateObject_1$1k;
|
|
6006
6009
|
|
|
6007
6010
|
var CartProductItem = {
|
|
6008
6011
|
Title: Title$5,
|
|
@@ -6012,8 +6015,8 @@ var CartProductItem = {
|
|
|
6012
6015
|
CloseButton: CloseButton$1,
|
|
6013
6016
|
};
|
|
6014
6017
|
|
|
6015
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
6016
|
-
var MobileContainer = newStyled(Container$S)(templateObject_2$
|
|
6018
|
+
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"])));
|
|
6019
|
+
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"])));
|
|
6017
6020
|
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"])));
|
|
6018
6021
|
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"])));
|
|
6019
6022
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6025,7 +6028,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6025
6028
|
var isMobile = useWindowDimensions().isMobile;
|
|
6026
6029
|
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));
|
|
6027
6030
|
};
|
|
6028
|
-
var templateObject_1$
|
|
6031
|
+
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;
|
|
6029
6032
|
|
|
6030
6033
|
var Spacing = function (_a) {
|
|
6031
6034
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6033,8 +6036,8 @@ var Spacing = function (_a) {
|
|
|
6033
6036
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6034
6037
|
};
|
|
6035
6038
|
|
|
6036
|
-
var Container$R = newStyled('div')(templateObject_1$
|
|
6037
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6039
|
+
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"])));
|
|
6040
|
+
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"])));
|
|
6038
6041
|
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"])));
|
|
6039
6042
|
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) {
|
|
6040
6043
|
var index = _a.index;
|
|
@@ -6047,12 +6050,12 @@ var StrengthBars = function (_a) {
|
|
|
6047
6050
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6048
6051
|
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));
|
|
6049
6052
|
};
|
|
6050
|
-
var templateObject_1$
|
|
6053
|
+
var templateObject_1$1i, templateObject_2$U, templateObject_3$H, templateObject_4$w;
|
|
6051
6054
|
|
|
6052
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
6053
|
-
var templateObject_1$
|
|
6055
|
+
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"])));
|
|
6056
|
+
var templateObject_1$1h;
|
|
6054
6057
|
|
|
6055
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6058
|
+
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) {
|
|
6056
6059
|
var marginRight = _a.marginRight;
|
|
6057
6060
|
return marginRight;
|
|
6058
6061
|
});
|
|
@@ -6068,7 +6071,7 @@ var StarList = function (_a) {
|
|
|
6068
6071
|
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)));
|
|
6069
6072
|
}) }, void 0));
|
|
6070
6073
|
};
|
|
6071
|
-
var templateObject_1$
|
|
6074
|
+
var templateObject_1$1g;
|
|
6072
6075
|
|
|
6073
6076
|
/* base styles & size variants */
|
|
6074
6077
|
var LabelStyles = {
|
|
@@ -6109,8 +6112,8 @@ var LabelStyles = {
|
|
|
6109
6112
|
});
|
|
6110
6113
|
},
|
|
6111
6114
|
};
|
|
6112
|
-
var Container$P = newStyled.a(templateObject_1$
|
|
6113
|
-
var templateObject_1$
|
|
6115
|
+
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"])));
|
|
6116
|
+
var templateObject_1$1f;
|
|
6114
6117
|
|
|
6115
6118
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6116
6119
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6130,7 +6133,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6130
6133
|
}),
|
|
6131
6134
|
];
|
|
6132
6135
|
});
|
|
6133
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6136
|
+
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; });
|
|
6134
6137
|
var starsNumber = 5;
|
|
6135
6138
|
var Rating = function (_a) {
|
|
6136
6139
|
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;
|
|
@@ -6153,7 +6156,45 @@ var Rating = function (_a) {
|
|
|
6153
6156
|
: {};
|
|
6154
6157
|
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));
|
|
6155
6158
|
};
|
|
6156
|
-
var templateObject_1$
|
|
6159
|
+
var templateObject_1$1e;
|
|
6160
|
+
|
|
6161
|
+
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"])));
|
|
6162
|
+
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"])));
|
|
6163
|
+
var RegularPriceTag = function () {
|
|
6164
|
+
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6165
|
+
};
|
|
6166
|
+
var ClubPriceTag = function () {
|
|
6167
|
+
return jsxRuntime.jsx(ClubPriceTagSpan, { children: "CLUB MEMBERS" }, void 0);
|
|
6168
|
+
};
|
|
6169
|
+
function getTestId() {
|
|
6170
|
+
var args = [];
|
|
6171
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
6172
|
+
args[_i] = arguments[_i];
|
|
6173
|
+
}
|
|
6174
|
+
return args.filter(Boolean).join('-');
|
|
6175
|
+
}
|
|
6176
|
+
var PriceLabelV4 = function (_a) {
|
|
6177
|
+
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"]);
|
|
6178
|
+
var theme = useTheme();
|
|
6179
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
6180
|
+
var priceCommonProps = {
|
|
6181
|
+
size: finalPriceStyled ? exports.ComponentSize.Small : size,
|
|
6182
|
+
color: color || theme.colors.pallete.secondary.color,
|
|
6183
|
+
weight: 700,
|
|
6184
|
+
};
|
|
6185
|
+
var OriginalPrice = function () {
|
|
6186
|
+
var sizeProp = !clubStyle
|
|
6187
|
+
? originalPriceStyled
|
|
6188
|
+
? size
|
|
6189
|
+
: exports.ComponentSize.Small
|
|
6190
|
+
: isMobile
|
|
6191
|
+
? exports.ComponentSize.Small
|
|
6192
|
+
: exports.ComponentSize.XSmall;
|
|
6193
|
+
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));
|
|
6194
|
+
};
|
|
6195
|
+
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));
|
|
6196
|
+
};
|
|
6197
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6157
6198
|
|
|
6158
6199
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6159
6200
|
var width = _a.width, height = _a.height;
|
|
@@ -6218,7 +6259,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6218
6259
|
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
6219
6260
|
strength: -1,
|
|
6220
6261
|
description: '',
|
|
6221
|
-
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading;
|
|
6262
|
+
} : _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;
|
|
6222
6263
|
var theme = useTheme();
|
|
6223
6264
|
var styles = getStylesBySize$9(size);
|
|
6224
6265
|
var isMobile = useWindowDimensions().isMobile;
|
|
@@ -6231,16 +6272,20 @@ var ProductItemMobile = function (_a) {
|
|
|
6231
6272
|
_a)[size];
|
|
6232
6273
|
}, [size]);
|
|
6233
6274
|
var PriceLabelDisplay = function () {
|
|
6234
|
-
|
|
6275
|
+
if (priceDisplayType === 'styled') {
|
|
6276
|
+
return (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0));
|
|
6277
|
+
}
|
|
6278
|
+
if (version === 4) {
|
|
6279
|
+
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
|
|
6280
|
+
? !isMobile
|
|
6281
|
+
? { fontSize: '16px', fontWeight: 700, color: '#C64844' }
|
|
6282
|
+
: { fontSize: '12px', fontWeight: 700, color: '#C64844' }
|
|
6283
|
+
: undefined }, void 0));
|
|
6284
|
+
}
|
|
6285
|
+
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
|
|
6235
6286
|
? !isMobile
|
|
6236
|
-
? {
|
|
6237
|
-
|
|
6238
|
-
fontWeight: 700,
|
|
6239
|
-
}
|
|
6240
|
-
: {
|
|
6241
|
-
fontSize: '12px',
|
|
6242
|
-
fontWeight: 700,
|
|
6243
|
-
}
|
|
6287
|
+
? { fontSize: '16px', fontWeight: 700 }
|
|
6288
|
+
: { fontSize: '12px', fontWeight: 700 }
|
|
6244
6289
|
: undefined }, void 0));
|
|
6245
6290
|
};
|
|
6246
6291
|
var RatingDisplay = function () {
|
|
@@ -6250,7 +6295,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6250
6295
|
return jsx(Fragment, {}, void 0);
|
|
6251
6296
|
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));
|
|
6252
6297
|
};
|
|
6253
|
-
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) :
|
|
6298
|
+
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));
|
|
6254
6299
|
};
|
|
6255
6300
|
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6256
6301
|
|