@trafilea/afrodita-components 6.5.12 → 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 +1 -0
- package/build/index.esm.js +165 -123
- package/build/index.esm.js.map +1 -1
- package/build/index.js +165 -123
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3125,7 +3125,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3125
3125
|
desktop: 1280,
|
|
3126
3126
|
};
|
|
3127
3127
|
|
|
3128
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
3128
|
+
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) {
|
|
3129
3129
|
var height = _a.height;
|
|
3130
3130
|
return (height ? height : '1.5em');
|
|
3131
3131
|
}, function (_a) {
|
|
@@ -3152,9 +3152,9 @@ var SkeletonBox = function (_a) {
|
|
|
3152
3152
|
var theme = useTheme();
|
|
3153
3153
|
return jsx$1(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3154
3154
|
};
|
|
3155
|
-
var templateObject_1$
|
|
3155
|
+
var templateObject_1$1S;
|
|
3156
3156
|
|
|
3157
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3157
|
+
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) {
|
|
3158
3158
|
var width = _a.width;
|
|
3159
3159
|
return width;
|
|
3160
3160
|
}, function (_a) {
|
|
@@ -3170,7 +3170,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1Q || (templateObject_1$1Q
|
|
|
3170
3170
|
var opacity = _a.opacity;
|
|
3171
3171
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3172
3172
|
});
|
|
3173
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3173
|
+
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) {
|
|
3174
3174
|
var width = _a.width;
|
|
3175
3175
|
return width;
|
|
3176
3176
|
}, function (_a) {
|
|
@@ -3183,7 +3183,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1c || (templateObject_2$
|
|
|
3183
3183
|
var opacity = _a.opacity;
|
|
3184
3184
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3185
3185
|
});
|
|
3186
|
-
var templateObject_1$
|
|
3186
|
+
var templateObject_1$1R, templateObject_2$1d;
|
|
3187
3187
|
|
|
3188
3188
|
/* eslint-disable no-undef */
|
|
3189
3189
|
var cache = new Map();
|
|
@@ -4068,8 +4068,8 @@ function jsxs(type, props, key) {
|
|
|
4068
4068
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4069
4069
|
// `variants` styles that are consistent through all themes.
|
|
4070
4070
|
var TAGS = {
|
|
4071
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4072
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4071
|
+
hero1: newStyled.h1(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject([""], [""]))),
|
|
4072
|
+
hero2: newStyled.h2(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject([""], [""]))),
|
|
4073
4073
|
hero3: newStyled.h3(templateObject_3$V || (templateObject_3$V = __makeTemplateObject([""], [""]))),
|
|
4074
4074
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
4075
4075
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
@@ -4204,10 +4204,10 @@ var DEFAULTS = {
|
|
|
4204
4204
|
size: 'regular',
|
|
4205
4205
|
},
|
|
4206
4206
|
};
|
|
4207
|
-
var templateObject_1$
|
|
4207
|
+
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;
|
|
4208
4208
|
|
|
4209
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4210
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4209
|
+
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"])));
|
|
4210
|
+
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"])));
|
|
4211
4211
|
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"])));
|
|
4212
4212
|
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"])));
|
|
4213
4213
|
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"])));
|
|
@@ -4236,27 +4236,27 @@ var PackCard$1 = function (_a) {
|
|
|
4236
4236
|
currency: currencyCode || 'USD',
|
|
4237
4237
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4238
4238
|
};
|
|
4239
|
-
var templateObject_1$
|
|
4239
|
+
var templateObject_1$1P, templateObject_2$1b, templateObject_3$U, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4240
4240
|
|
|
4241
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4242
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4241
|
+
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"])));
|
|
4242
|
+
var DropContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4243
4243
|
var DropList = function (_a) {
|
|
4244
4244
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4245
4245
|
return (jsx$1(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4246
4246
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4247
4247
|
}) }, void 0));
|
|
4248
4248
|
};
|
|
4249
|
-
var templateObject_1$
|
|
4249
|
+
var templateObject_1$1O, templateObject_2$1a;
|
|
4250
4250
|
|
|
4251
4251
|
var DROPS_TOTAL = 5;
|
|
4252
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4253
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4252
|
+
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"])));
|
|
4253
|
+
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"])));
|
|
4254
4254
|
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"])));
|
|
4255
4255
|
var AbsorbencyLevel = function (_a) {
|
|
4256
4256
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4257
4257
|
return (jsxs$1(Container$14, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4258
4258
|
};
|
|
4259
|
-
var templateObject_1$
|
|
4259
|
+
var templateObject_1$1N, templateObject_2$19, templateObject_3$T;
|
|
4260
4260
|
|
|
4261
4261
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4262
4262
|
`),"","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(`
|
|
@@ -4332,7 +4332,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4332
4332
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4333
4333
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4334
4334
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4335
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4335
|
+
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"])));
|
|
4336
4336
|
var Accordion$1 = function (_a) {
|
|
4337
4337
|
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;
|
|
4338
4338
|
var theme = useTheme();
|
|
@@ -4356,9 +4356,9 @@ var Accordion$1 = function (_a) {
|
|
|
4356
4356
|
} }, { children: jsx$1(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4357
4357
|
} }), void 0));
|
|
4358
4358
|
};
|
|
4359
|
-
var templateObject_1$
|
|
4359
|
+
var templateObject_1$1M;
|
|
4360
4360
|
|
|
4361
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4361
|
+
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"])));
|
|
4362
4362
|
var AccordionOptions = function (_a) {
|
|
4363
4363
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4364
4364
|
var _b = useState({
|
|
@@ -4382,7 +4382,7 @@ var AccordionOptions = function (_a) {
|
|
|
4382
4382
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4383
4383
|
}) }, void 0));
|
|
4384
4384
|
};
|
|
4385
|
-
var templateObject_1$
|
|
4385
|
+
var templateObject_1$1L;
|
|
4386
4386
|
|
|
4387
4387
|
var CardSectionType;
|
|
4388
4388
|
(function (CardSectionType) {
|
|
@@ -4544,14 +4544,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4544
4544
|
literal: true,
|
|
4545
4545
|
});
|
|
4546
4546
|
|
|
4547
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4548
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4547
|
+
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; });
|
|
4548
|
+
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"])));
|
|
4549
4549
|
var Error$1 = function (_a) {
|
|
4550
4550
|
var error = _a.error;
|
|
4551
4551
|
var theme = useTheme();
|
|
4552
4552
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4553
4553
|
};
|
|
4554
|
-
var templateObject_1$
|
|
4554
|
+
var templateObject_1$1K, templateObject_2$18;
|
|
4555
4555
|
|
|
4556
4556
|
var BaseSelectButton = function (_a) {
|
|
4557
4557
|
var children = _a.children, as = _a.as;
|
|
@@ -4568,7 +4568,7 @@ function BaseSelectOption(_a) {
|
|
|
4568
4568
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4569
4569
|
}
|
|
4570
4570
|
|
|
4571
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4571
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4572
4572
|
function BaseSelect(_a) {
|
|
4573
4573
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4574
4574
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4578,7 +4578,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4578
4578
|
Options: BaseSelectOptions,
|
|
4579
4579
|
Option: BaseSelectOption,
|
|
4580
4580
|
});
|
|
4581
|
-
var templateObject_1$
|
|
4581
|
+
var templateObject_1$1J;
|
|
4582
4582
|
|
|
4583
4583
|
var CustomButton = newStyled.button(function (_a) {
|
|
4584
4584
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4617,7 +4617,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4617
4617
|
});
|
|
4618
4618
|
});
|
|
4619
4619
|
//TODO Remove this when we find the real solution
|
|
4620
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4620
|
+
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) {
|
|
4621
4621
|
var open = _a.open;
|
|
4622
4622
|
return open &&
|
|
4623
4623
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4637,7 +4637,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4637
4637
|
} }), void 0));
|
|
4638
4638
|
};
|
|
4639
4639
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4640
|
-
var templateObject_1$
|
|
4640
|
+
var templateObject_1$1I;
|
|
4641
4641
|
|
|
4642
4642
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4643
4643
|
var theme = _a.theme;
|
|
@@ -4804,7 +4804,7 @@ var CustomCheckboxStyles = {
|
|
|
4804
4804
|
},
|
|
4805
4805
|
};
|
|
4806
4806
|
|
|
4807
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
4807
|
+
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"])));
|
|
4808
4808
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4809
4809
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4810
4810
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4815,7 +4815,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4815
4815
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4816
4816
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4817
4817
|
]; });
|
|
4818
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4818
|
+
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) {
|
|
4819
4819
|
var disabled = _a.disabled;
|
|
4820
4820
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4821
4821
|
});
|
|
@@ -4831,7 +4831,7 @@ var Checkbox = function (_a) {
|
|
|
4831
4831
|
};
|
|
4832
4832
|
return (jsxs$1(Container$12, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4833
4833
|
};
|
|
4834
|
-
var templateObject_1$
|
|
4834
|
+
var templateObject_1$1H, templateObject_2$17;
|
|
4835
4835
|
|
|
4836
4836
|
var CustomOption = newStyled.li(function (_a) {
|
|
4837
4837
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4880,8 +4880,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4880
4880
|
Option: BaseDropdownOption,
|
|
4881
4881
|
});
|
|
4882
4882
|
|
|
4883
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
4884
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4883
|
+
var Container$11 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject([""], [""])));
|
|
4884
|
+
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"])));
|
|
4885
4885
|
function SimpleDropdown(_a) {
|
|
4886
4886
|
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;
|
|
4887
4887
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4913,7 +4913,7 @@ function SimpleDropdown(_a) {
|
|
|
4913
4913
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : Fragment$1;
|
|
4914
4914
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4915
4915
|
}
|
|
4916
|
-
var templateObject_1$
|
|
4916
|
+
var templateObject_1$1G, templateObject_2$16;
|
|
4917
4917
|
|
|
4918
4918
|
/* base styles & size variants */
|
|
4919
4919
|
var CustomRadioStyles$2 = {
|
|
@@ -4978,9 +4978,9 @@ var ContainerStyles$2 = {
|
|
|
4978
4978
|
},
|
|
4979
4979
|
};
|
|
4980
4980
|
|
|
4981
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
4981
|
+
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"])));
|
|
4982
4982
|
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4983
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
4983
|
+
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) {
|
|
4984
4984
|
var disabled = _a.disabled;
|
|
4985
4985
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4986
4986
|
});
|
|
@@ -5004,7 +5004,7 @@ var RadioInput = function (_a) {
|
|
|
5004
5004
|
};
|
|
5005
5005
|
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$10, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5006
5006
|
};
|
|
5007
|
-
var templateObject_1$
|
|
5007
|
+
var templateObject_1$1F, templateObject_2$15, templateObject_3$S;
|
|
5008
5008
|
|
|
5009
5009
|
var getWrapperFlexDirection = function (position) {
|
|
5010
5010
|
switch (position) {
|
|
@@ -5055,7 +5055,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5055
5055
|
}
|
|
5056
5056
|
};
|
|
5057
5057
|
|
|
5058
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5058
|
+
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) {
|
|
5059
5059
|
var position = _a.position;
|
|
5060
5060
|
return getWrapperFlexDirection(position);
|
|
5061
5061
|
}, function (_a) {
|
|
@@ -5065,7 +5065,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __ma
|
|
|
5065
5065
|
var disableHover = _a.disableHover;
|
|
5066
5066
|
return (disableHover ? 0 : 1);
|
|
5067
5067
|
});
|
|
5068
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5068
|
+
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) {
|
|
5069
5069
|
var position = _a.position;
|
|
5070
5070
|
return getContainerFlexDirection(position);
|
|
5071
5071
|
}, function (_a) {
|
|
@@ -5111,7 +5111,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5111
5111
|
});
|
|
5112
5112
|
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"])));
|
|
5113
5113
|
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"])));
|
|
5114
|
-
var templateObject_1$
|
|
5114
|
+
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;
|
|
5115
5115
|
|
|
5116
5116
|
var useOnClickOutside = function (ref, handler) {
|
|
5117
5117
|
useEffect(function () {
|
|
@@ -5253,7 +5253,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5253
5253
|
};
|
|
5254
5254
|
}
|
|
5255
5255
|
};
|
|
5256
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
5256
|
+
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) {
|
|
5257
5257
|
var backgroundColor = _a.backgroundColor;
|
|
5258
5258
|
return backgroundColor;
|
|
5259
5259
|
}, function (_a) {
|
|
@@ -5275,7 +5275,7 @@ var Container$$ = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __
|
|
|
5275
5275
|
var size = _a.size;
|
|
5276
5276
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5277
5277
|
});
|
|
5278
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5278
|
+
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) {
|
|
5279
5279
|
var textColor = _a.textColor;
|
|
5280
5280
|
return textColor;
|
|
5281
5281
|
}, function (_a) {
|
|
@@ -5292,7 +5292,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5292
5292
|
var theme = useTheme();
|
|
5293
5293
|
return (jsx$1(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: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5294
5294
|
};
|
|
5295
|
-
var templateObject_1$
|
|
5295
|
+
var templateObject_1$1D, templateObject_2$13;
|
|
5296
5296
|
|
|
5297
5297
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5298
5298
|
var _a, _b, _c;
|
|
@@ -5323,7 +5323,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5323
5323
|
};
|
|
5324
5324
|
}
|
|
5325
5325
|
};
|
|
5326
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
5326
|
+
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) {
|
|
5327
5327
|
var backgroundColor = _a.backgroundColor;
|
|
5328
5328
|
return backgroundColor;
|
|
5329
5329
|
}, function (_a) {
|
|
@@ -5345,7 +5345,7 @@ var Container$_ = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __
|
|
|
5345
5345
|
var size = _a.size;
|
|
5346
5346
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5347
5347
|
});
|
|
5348
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5348
|
+
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) {
|
|
5349
5349
|
var textColor = _a.textColor;
|
|
5350
5350
|
return textColor;
|
|
5351
5351
|
}, function (_a) {
|
|
@@ -5362,7 +5362,7 @@ var DiscountTag = function (_a) {
|
|
|
5362
5362
|
var theme = useTheme();
|
|
5363
5363
|
return (jsx$1(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: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5364
5364
|
};
|
|
5365
|
-
var templateObject_1$
|
|
5365
|
+
var templateObject_1$1C, templateObject_2$12;
|
|
5366
5366
|
|
|
5367
5367
|
var getStylesBySize$b = function (size, theme) {
|
|
5368
5368
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5404,8 +5404,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5404
5404
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5405
5405
|
}
|
|
5406
5406
|
};
|
|
5407
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
5408
|
-
var Price = newStyled.p(templateObject_2$
|
|
5407
|
+
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"])));
|
|
5408
|
+
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) {
|
|
5409
5409
|
var weight = _a.weight;
|
|
5410
5410
|
return (weight ? weight : '400');
|
|
5411
5411
|
}, function (_a) {
|
|
@@ -5434,7 +5434,7 @@ var TagContainer = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __m
|
|
|
5434
5434
|
var size = _a.size;
|
|
5435
5435
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
5436
5436
|
});
|
|
5437
|
-
function getTestId() {
|
|
5437
|
+
function getTestId$1() {
|
|
5438
5438
|
var args = [];
|
|
5439
5439
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
5440
5440
|
args[_i] = arguments[_i];
|
|
@@ -5458,13 +5458,13 @@ var PriceLabel = function (_a) {
|
|
|
5458
5458
|
: isMobile
|
|
5459
5459
|
? ComponentSize.Small
|
|
5460
5460
|
: ComponentSize.XSmall;
|
|
5461
|
-
return (jsx$1(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));
|
|
5461
|
+
return (jsx$1(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));
|
|
5462
5462
|
};
|
|
5463
|
-
return (jsxs$1(Container$Z, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5463
|
+
return (jsxs$1(Container$Z, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5464
5464
|
};
|
|
5465
|
-
var templateObject_1$
|
|
5465
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$Q;
|
|
5466
5466
|
|
|
5467
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5467
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5468
5468
|
var PriceLabelV2 = function (_a) {
|
|
5469
5469
|
var _b;
|
|
5470
5470
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem"]);
|
|
@@ -5514,8 +5514,8 @@ var PriceLabelV2 = function (_a) {
|
|
|
5514
5514
|
}
|
|
5515
5515
|
var savetoString = saveto.toFixed(2);
|
|
5516
5516
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5517
|
-
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5518
|
-
return (jsxs$1(Container$Z, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5517
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5518
|
+
return (jsxs$1(Container$Z, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5519
5519
|
marginTop: '-5px',
|
|
5520
5520
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5521
5521
|
? finalPriceArray[0]
|
|
@@ -5533,10 +5533,10 @@ var PriceLabelV2 = function (_a) {
|
|
|
5533
5533
|
lineHeight: '22px',
|
|
5534
5534
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5535
5535
|
};
|
|
5536
|
-
var templateObject_1$
|
|
5536
|
+
var templateObject_1$1A;
|
|
5537
5537
|
|
|
5538
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5539
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2
|
|
5538
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5539
|
+
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"])));
|
|
5540
5540
|
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"])));
|
|
5541
5541
|
var PriceLabelV3 = function (_a) {
|
|
5542
5542
|
var _b;
|
|
@@ -5586,13 +5586,13 @@ var PriceLabelV3 = function (_a) {
|
|
|
5586
5586
|
}
|
|
5587
5587
|
var savetoString = saveto.toFixed(2);
|
|
5588
5588
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5589
|
-
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5589
|
+
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5590
5590
|
var DiscountedPriceOfEach = function () {
|
|
5591
5591
|
if (!itemsQuantity || itemsQuantity < 2)
|
|
5592
5592
|
return null;
|
|
5593
|
-
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5593
|
+
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5594
5594
|
};
|
|
5595
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$Z, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$Z, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5595
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$Z, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$Z, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5596
5596
|
marginTop: '-5px',
|
|
5597
5597
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(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), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5598
5598
|
marginTop: '-6px',
|
|
@@ -5608,10 +5608,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5608
5608
|
lineHeight: '22px',
|
|
5609
5609
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5610
5610
|
};
|
|
5611
|
-
var templateObject_1$
|
|
5611
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$P;
|
|
5612
5612
|
|
|
5613
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5614
|
-
var ContainerBase = newStyled.div(templateObject_2
|
|
5613
|
+
var FlexContainer = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5614
|
+
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) {
|
|
5615
5615
|
var selected = _a.selected, theme = _a.theme;
|
|
5616
5616
|
return selected
|
|
5617
5617
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5648,7 +5648,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5648
5648
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5649
5649
|
});
|
|
5650
5650
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5651
|
-
var templateObject_1$
|
|
5651
|
+
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;
|
|
5652
5652
|
|
|
5653
5653
|
var radioIds = {
|
|
5654
5654
|
oneTime: {
|
|
@@ -5703,12 +5703,12 @@ var Autoship = function (_a) {
|
|
|
5703
5703
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5704
5704
|
};
|
|
5705
5705
|
|
|
5706
|
-
var Img = newStyled.img(templateObject_1$
|
|
5706
|
+
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; });
|
|
5707
5707
|
var Image$3 = function (_a) {
|
|
5708
5708
|
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;
|
|
5709
5709
|
return (jsx$1(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
5710
5710
|
};
|
|
5711
|
-
var templateObject_1$
|
|
5711
|
+
var templateObject_1$1x;
|
|
5712
5712
|
|
|
5713
5713
|
var _a$2;
|
|
5714
5714
|
var BeforeAfterVariant;
|
|
@@ -5723,13 +5723,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5723
5723
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5724
5724
|
_a$2);
|
|
5725
5725
|
|
|
5726
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5727
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5726
|
+
var CustomerDetails = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject([""], [""])));
|
|
5727
|
+
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"])));
|
|
5728
5728
|
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"])));
|
|
5729
5729
|
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"])));
|
|
5730
5730
|
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"])));
|
|
5731
5731
|
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"])));
|
|
5732
|
-
var templateObject_1$
|
|
5732
|
+
var templateObject_1$1w, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5733
5733
|
|
|
5734
5734
|
var NameWithStars = function (_a) {
|
|
5735
5735
|
var name = _a.name, size = _a.size;
|
|
@@ -5747,8 +5747,8 @@ var ResultFeedback = function (_a) {
|
|
|
5747
5747
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5748
5748
|
};
|
|
5749
5749
|
|
|
5750
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
5751
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5750
|
+
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; });
|
|
5751
|
+
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"])));
|
|
5752
5752
|
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; });
|
|
5753
5753
|
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) {
|
|
5754
5754
|
var theme = _a.theme;
|
|
@@ -5760,7 +5760,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5760
5760
|
var theme = _a.theme, size = _a.size;
|
|
5761
5761
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5762
5762
|
});
|
|
5763
|
-
var templateObject_1$
|
|
5763
|
+
var templateObject_1$1v, templateObject_2$Z, templateObject_3$M, templateObject_4$A;
|
|
5764
5764
|
|
|
5765
5765
|
/* base styles & size variants */
|
|
5766
5766
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5838,7 +5838,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
5838
5838
|
return (jsxs$1(Container$X, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5839
5839
|
};
|
|
5840
5840
|
|
|
5841
|
-
var Section = newStyled.div(templateObject_1$
|
|
5841
|
+
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) {
|
|
5842
5842
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5843
5843
|
});
|
|
5844
5844
|
var CardHeader = function (_a) {
|
|
@@ -5849,16 +5849,16 @@ var CardFooter = function (_a) {
|
|
|
5849
5849
|
var children = _a.children;
|
|
5850
5850
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
5851
5851
|
};
|
|
5852
|
-
var templateObject_1$
|
|
5852
|
+
var templateObject_1$1u;
|
|
5853
5853
|
|
|
5854
|
-
var Body = newStyled.div(templateObject_1$
|
|
5854
|
+
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"])));
|
|
5855
5855
|
var CardBody = function (_a) {
|
|
5856
5856
|
var children = _a.children;
|
|
5857
5857
|
return jsx$1(Body, { children: children }, void 0);
|
|
5858
5858
|
};
|
|
5859
|
-
var templateObject_1$
|
|
5859
|
+
var templateObject_1$1t;
|
|
5860
5860
|
|
|
5861
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
5861
|
+
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) {
|
|
5862
5862
|
var flex = _a.flex;
|
|
5863
5863
|
return flex &&
|
|
5864
5864
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5880,16 +5880,16 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
5880
5880
|
Footer: CardFooter,
|
|
5881
5881
|
Body: CardBody,
|
|
5882
5882
|
});
|
|
5883
|
-
var templateObject_1$
|
|
5883
|
+
var templateObject_1$1s;
|
|
5884
5884
|
|
|
5885
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5886
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
5885
|
+
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"])));
|
|
5886
|
+
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"])));
|
|
5887
5887
|
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) {
|
|
5888
5888
|
var color = _a.color;
|
|
5889
5889
|
return color;
|
|
5890
5890
|
});
|
|
5891
5891
|
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"])));
|
|
5892
|
-
var templateObject_1$
|
|
5892
|
+
var templateObject_1$1r, templateObject_2$Y, templateObject_3$L, templateObject_4$z;
|
|
5893
5893
|
|
|
5894
5894
|
var Minimalistic = function (_a) {
|
|
5895
5895
|
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;
|
|
@@ -5897,8 +5897,8 @@ var Minimalistic = function (_a) {
|
|
|
5897
5897
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5898
5898
|
};
|
|
5899
5899
|
|
|
5900
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
5901
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5900
|
+
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"])));
|
|
5901
|
+
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; });
|
|
5902
5902
|
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; });
|
|
5903
5903
|
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"])));
|
|
5904
5904
|
var Simple = function (_a) {
|
|
@@ -5906,18 +5906,18 @@ var Simple = function (_a) {
|
|
|
5906
5906
|
var theme = useTheme();
|
|
5907
5907
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$V, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5908
5908
|
};
|
|
5909
|
-
var templateObject_1$
|
|
5909
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$K, templateObject_4$y;
|
|
5910
5910
|
|
|
5911
5911
|
var Bundle = {
|
|
5912
5912
|
Minimalistic: Minimalistic,
|
|
5913
5913
|
Simple: Simple,
|
|
5914
5914
|
};
|
|
5915
5915
|
|
|
5916
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
5916
|
+
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) {
|
|
5917
5917
|
var displayBNPL = _a.displayBNPL;
|
|
5918
5918
|
return (displayBNPL ? 'flex' : 'none');
|
|
5919
5919
|
});
|
|
5920
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5920
|
+
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"])));
|
|
5921
5921
|
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"])));
|
|
5922
5922
|
var BuyNowPayLater = function (_a) {
|
|
5923
5923
|
var _b;
|
|
@@ -5930,41 +5930,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
5930
5930
|
}
|
|
5931
5931
|
return (jsx$1(Container$U, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5932
5932
|
};
|
|
5933
|
-
var templateObject_1$
|
|
5933
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$J;
|
|
5934
5934
|
|
|
5935
|
-
var Text$7 = newStyled.span(templateObject_1$
|
|
5935
|
+
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; });
|
|
5936
5936
|
var Title$5 = function (_a) {
|
|
5937
5937
|
var title = _a.title;
|
|
5938
5938
|
var theme = useTheme();
|
|
5939
5939
|
return jsx$1(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5940
5940
|
};
|
|
5941
|
-
var templateObject_1$
|
|
5941
|
+
var templateObject_1$1o;
|
|
5942
5942
|
|
|
5943
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5943
|
+
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; });
|
|
5944
5944
|
var Promo = function (_a) {
|
|
5945
5945
|
var text = _a.text;
|
|
5946
5946
|
var theme = useTheme();
|
|
5947
5947
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5948
5948
|
};
|
|
5949
|
-
var templateObject_1$
|
|
5949
|
+
var templateObject_1$1n;
|
|
5950
5950
|
|
|
5951
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5951
|
+
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; });
|
|
5952
5952
|
var Description$1 = function (_a) {
|
|
5953
5953
|
var text = _a.text;
|
|
5954
5954
|
var theme = useTheme();
|
|
5955
5955
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5956
5956
|
};
|
|
5957
|
-
var templateObject_1$
|
|
5957
|
+
var templateObject_1$1m;
|
|
5958
5958
|
|
|
5959
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
5959
|
+
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"); });
|
|
5960
5960
|
var CloseButton$1 = function (_a) {
|
|
5961
5961
|
var onClick = _a.onClick, size = _a.size;
|
|
5962
5962
|
var theme = useTheme();
|
|
5963
5963
|
return (jsx$1(Container$T, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5964
5964
|
};
|
|
5965
|
-
var templateObject_1$
|
|
5965
|
+
var templateObject_1$1l;
|
|
5966
5966
|
|
|
5967
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
5967
|
+
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) {
|
|
5968
5968
|
var backgroundColor = _a.backgroundColor;
|
|
5969
5969
|
return backgroundColor;
|
|
5970
5970
|
}, function (_a) {
|
|
@@ -5979,7 +5979,7 @@ var OfferBanner = function (_a) {
|
|
|
5979
5979
|
var theme = useTheme();
|
|
5980
5980
|
return (jsx$1(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));
|
|
5981
5981
|
};
|
|
5982
|
-
var templateObject_1$
|
|
5982
|
+
var templateObject_1$1k;
|
|
5983
5983
|
|
|
5984
5984
|
var CartProductItem = {
|
|
5985
5985
|
Title: Title$5,
|
|
@@ -5989,8 +5989,8 @@ var CartProductItem = {
|
|
|
5989
5989
|
CloseButton: CloseButton$1,
|
|
5990
5990
|
};
|
|
5991
5991
|
|
|
5992
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
5993
|
-
var MobileContainer = newStyled(Container$S)(templateObject_2$
|
|
5992
|
+
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"])));
|
|
5993
|
+
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"])));
|
|
5994
5994
|
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"])));
|
|
5995
5995
|
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"])));
|
|
5996
5996
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6002,7 +6002,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6002
6002
|
var isMobile = useWindowDimensions().isMobile;
|
|
6003
6003
|
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$S, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6004
6004
|
};
|
|
6005
|
-
var templateObject_1$
|
|
6005
|
+
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;
|
|
6006
6006
|
|
|
6007
6007
|
var Spacing = function (_a) {
|
|
6008
6008
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6010,8 +6010,8 @@ var Spacing = function (_a) {
|
|
|
6010
6010
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6011
6011
|
};
|
|
6012
6012
|
|
|
6013
|
-
var Container$R = newStyled('div')(templateObject_1$
|
|
6014
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6013
|
+
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"])));
|
|
6014
|
+
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"])));
|
|
6015
6015
|
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"])));
|
|
6016
6016
|
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) {
|
|
6017
6017
|
var index = _a.index;
|
|
@@ -6024,12 +6024,12 @@ var StrengthBars = function (_a) {
|
|
|
6024
6024
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6025
6025
|
return (jsxs$1(Container$R, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6026
6026
|
};
|
|
6027
|
-
var templateObject_1$
|
|
6027
|
+
var templateObject_1$1i, templateObject_2$U, templateObject_3$H, templateObject_4$w;
|
|
6028
6028
|
|
|
6029
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
6030
|
-
var templateObject_1$
|
|
6029
|
+
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"])));
|
|
6030
|
+
var templateObject_1$1h;
|
|
6031
6031
|
|
|
6032
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6032
|
+
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) {
|
|
6033
6033
|
var marginRight = _a.marginRight;
|
|
6034
6034
|
return marginRight;
|
|
6035
6035
|
});
|
|
@@ -6045,7 +6045,7 @@ var StarList = function (_a) {
|
|
|
6045
6045
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6046
6046
|
}) }, void 0));
|
|
6047
6047
|
};
|
|
6048
|
-
var templateObject_1$
|
|
6048
|
+
var templateObject_1$1g;
|
|
6049
6049
|
|
|
6050
6050
|
/* base styles & size variants */
|
|
6051
6051
|
var LabelStyles = {
|
|
@@ -6086,8 +6086,8 @@ var LabelStyles = {
|
|
|
6086
6086
|
});
|
|
6087
6087
|
},
|
|
6088
6088
|
};
|
|
6089
|
-
var Container$P = newStyled.a(templateObject_1$
|
|
6090
|
-
var templateObject_1$
|
|
6089
|
+
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"])));
|
|
6090
|
+
var templateObject_1$1f;
|
|
6091
6091
|
|
|
6092
6092
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6093
6093
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6107,7 +6107,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6107
6107
|
}),
|
|
6108
6108
|
];
|
|
6109
6109
|
});
|
|
6110
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6110
|
+
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; });
|
|
6111
6111
|
var starsNumber = 5;
|
|
6112
6112
|
var Rating = function (_a) {
|
|
6113
6113
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6130,7 +6130,45 @@ var Rating = function (_a) {
|
|
|
6130
6130
|
: {};
|
|
6131
6131
|
return (jsxs$1(Container$P, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6132
6132
|
};
|
|
6133
|
-
var templateObject_1$
|
|
6133
|
+
var templateObject_1$1e;
|
|
6134
|
+
|
|
6135
|
+
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"])));
|
|
6136
|
+
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"])));
|
|
6137
|
+
var RegularPriceTag = function () {
|
|
6138
|
+
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6139
|
+
};
|
|
6140
|
+
var ClubPriceTag = function () {
|
|
6141
|
+
return jsx$1(ClubPriceTagSpan, { children: "CLUB MEMBERS" }, void 0);
|
|
6142
|
+
};
|
|
6143
|
+
function getTestId() {
|
|
6144
|
+
var args = [];
|
|
6145
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
6146
|
+
args[_i] = arguments[_i];
|
|
6147
|
+
}
|
|
6148
|
+
return args.filter(Boolean).join('-');
|
|
6149
|
+
}
|
|
6150
|
+
var PriceLabelV4 = function (_a) {
|
|
6151
|
+
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 ? 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"]);
|
|
6152
|
+
var theme = useTheme();
|
|
6153
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
6154
|
+
var priceCommonProps = {
|
|
6155
|
+
size: finalPriceStyled ? ComponentSize.Small : size,
|
|
6156
|
+
color: color || theme.colors.pallete.secondary.color,
|
|
6157
|
+
weight: 700,
|
|
6158
|
+
};
|
|
6159
|
+
var OriginalPrice = function () {
|
|
6160
|
+
var sizeProp = !clubStyle
|
|
6161
|
+
? originalPriceStyled
|
|
6162
|
+
? size
|
|
6163
|
+
: ComponentSize.Small
|
|
6164
|
+
: isMobile
|
|
6165
|
+
? ComponentSize.Small
|
|
6166
|
+
: ComponentSize.XSmall;
|
|
6167
|
+
return (jsx$1(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));
|
|
6168
|
+
};
|
|
6169
|
+
return (jsxs$1(Container$Z, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1("div", __assign$1({ style: { display: 'flex', flexDirection: 'column' } }, { children: [jsxs$1("div", __assign$1({ style: { display: 'flex', gap: '5px' } }, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }), void 0), jsxs$1("div", __assign$1({ style: { display: 'flex', gap: '5px' } }, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }), void 0)] }), void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6170
|
+
};
|
|
6171
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6134
6172
|
|
|
6135
6173
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6136
6174
|
var width = _a.width, height = _a.height;
|
|
@@ -6195,7 +6233,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6195
6233
|
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
6196
6234
|
strength: -1,
|
|
6197
6235
|
description: '',
|
|
6198
|
-
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j, isRatingLoading = _a.isRatingLoading;
|
|
6236
|
+
} : _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;
|
|
6199
6237
|
var theme = useTheme();
|
|
6200
6238
|
var styles = getStylesBySize$9(size);
|
|
6201
6239
|
var isMobile = useWindowDimensions().isMobile;
|
|
@@ -6208,16 +6246,20 @@ var ProductItemMobile = function (_a) {
|
|
|
6208
6246
|
_a)[size];
|
|
6209
6247
|
}, [size]);
|
|
6210
6248
|
var PriceLabelDisplay = function () {
|
|
6211
|
-
|
|
6249
|
+
if (priceDisplayType === 'styled') {
|
|
6250
|
+
return (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0));
|
|
6251
|
+
}
|
|
6252
|
+
if (version === 4) {
|
|
6253
|
+
return (jsx(PriceLabelV4, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
6254
|
+
? !isMobile
|
|
6255
|
+
? { fontSize: '16px', fontWeight: 700, color: '#C64844' }
|
|
6256
|
+
: { fontSize: '12px', fontWeight: 700, color: '#C64844' }
|
|
6257
|
+
: undefined }, void 0));
|
|
6258
|
+
}
|
|
6259
|
+
return (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
6212
6260
|
? !isMobile
|
|
6213
|
-
? {
|
|
6214
|
-
|
|
6215
|
-
fontWeight: 700,
|
|
6216
|
-
}
|
|
6217
|
-
: {
|
|
6218
|
-
fontSize: '12px',
|
|
6219
|
-
fontWeight: 700,
|
|
6220
|
-
}
|
|
6261
|
+
? { fontSize: '16px', fontWeight: 700 }
|
|
6262
|
+
: { fontSize: '12px', fontWeight: 700 }
|
|
6221
6263
|
: undefined }, void 0));
|
|
6222
6264
|
};
|
|
6223
6265
|
var RatingDisplay = function () {
|
|
@@ -6227,7 +6269,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6227
6269
|
return jsx(Fragment, {}, void 0);
|
|
6228
6270
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6229
6271
|
};
|
|
6230
|
-
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) :
|
|
6272
|
+
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));
|
|
6231
6273
|
};
|
|
6232
6274
|
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6233
6275
|
|