@trafilea/afrodita-components 6.5.11 → 6.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +6 -1
- package/build/index.esm.js +168 -123
- package/build/index.esm.js.map +1 -1
- package/build/index.js +168 -123
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/build/theme/thespadr.theme.js +1 -1
- package/build/theme/truekind.theme.js +1 -1
- package/package.json +1 -1
package/build/index.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();
|
|
@@ -3668,6 +3668,8 @@ var Messaging = /*#__PURE__*/Object.freeze({
|
|
|
3668
3668
|
|
|
3669
3669
|
var BirthdayGifts = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "myaccount/birthday_gifts" }), void 0)); };
|
|
3670
3670
|
|
|
3671
|
+
var Cart = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "myaccount/cart" }), void 0); };
|
|
3672
|
+
|
|
3671
3673
|
var Community = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "myaccount/community" }), void 0); };
|
|
3672
3674
|
|
|
3673
3675
|
var DealsOffers = function (props) { return (jsx$1(Icon$1, __assign$1({}, props, { name: "myaccount/deals_offers" }), void 0)); };
|
|
@@ -3699,6 +3701,7 @@ var VIP = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name:
|
|
|
3699
3701
|
var MyAccount = /*#__PURE__*/Object.freeze({
|
|
3700
3702
|
__proto__: null,
|
|
3701
3703
|
BirthdayGifts: BirthdayGifts,
|
|
3704
|
+
Cart: Cart,
|
|
3702
3705
|
Community: Community,
|
|
3703
3706
|
DealsOffers: DealsOffers,
|
|
3704
3707
|
FreeReturns: FreeReturns,
|
|
@@ -4065,8 +4068,8 @@ function jsxs(type, props, key) {
|
|
|
4065
4068
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4066
4069
|
// `variants` styles that are consistent through all themes.
|
|
4067
4070
|
var TAGS = {
|
|
4068
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4069
|
-
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([""], [""]))),
|
|
4070
4073
|
hero3: newStyled.h3(templateObject_3$V || (templateObject_3$V = __makeTemplateObject([""], [""]))),
|
|
4071
4074
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
4072
4075
|
display2: newStyled.h2(templateObject_5$r || (templateObject_5$r = __makeTemplateObject([""], [""]))),
|
|
@@ -4201,10 +4204,10 @@ var DEFAULTS = {
|
|
|
4201
4204
|
size: 'regular',
|
|
4202
4205
|
},
|
|
4203
4206
|
};
|
|
4204
|
-
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;
|
|
4205
4208
|
|
|
4206
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4207
|
-
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"])));
|
|
4208
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"])));
|
|
4209
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"])));
|
|
4210
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"])));
|
|
@@ -4233,27 +4236,27 @@ var PackCard$1 = function (_a) {
|
|
|
4233
4236
|
currency: currencyCode || 'USD',
|
|
4234
4237
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4235
4238
|
};
|
|
4236
|
-
var templateObject_1$
|
|
4239
|
+
var templateObject_1$1P, templateObject_2$1b, templateObject_3$U, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4237
4240
|
|
|
4238
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4239
|
-
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"])));
|
|
4240
4243
|
var DropList = function (_a) {
|
|
4241
4244
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4242
4245
|
return (jsx$1(Container$15, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4243
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));
|
|
4244
4247
|
}) }, void 0));
|
|
4245
4248
|
};
|
|
4246
|
-
var templateObject_1$
|
|
4249
|
+
var templateObject_1$1O, templateObject_2$1a;
|
|
4247
4250
|
|
|
4248
4251
|
var DROPS_TOTAL = 5;
|
|
4249
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4250
|
-
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"])));
|
|
4251
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"])));
|
|
4252
4255
|
var AbsorbencyLevel = function (_a) {
|
|
4253
4256
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4254
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));
|
|
4255
4258
|
};
|
|
4256
|
-
var templateObject_1$
|
|
4259
|
+
var templateObject_1$1N, templateObject_2$19, templateObject_3$T;
|
|
4257
4260
|
|
|
4258
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(`
|
|
4259
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(`
|
|
@@ -4329,7 +4332,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4329
4332
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4330
4333
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4331
4334
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4332
|
-
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"])));
|
|
4333
4336
|
var Accordion$1 = function (_a) {
|
|
4334
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;
|
|
4335
4338
|
var theme = useTheme();
|
|
@@ -4353,9 +4356,9 @@ var Accordion$1 = function (_a) {
|
|
|
4353
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));
|
|
4354
4357
|
} }), void 0));
|
|
4355
4358
|
};
|
|
4356
|
-
var templateObject_1$
|
|
4359
|
+
var templateObject_1$1M;
|
|
4357
4360
|
|
|
4358
|
-
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"])));
|
|
4359
4362
|
var AccordionOptions = function (_a) {
|
|
4360
4363
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4361
4364
|
var _b = useState({
|
|
@@ -4379,7 +4382,7 @@ var AccordionOptions = function (_a) {
|
|
|
4379
4382
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4380
4383
|
}) }, void 0));
|
|
4381
4384
|
};
|
|
4382
|
-
var templateObject_1$
|
|
4385
|
+
var templateObject_1$1L;
|
|
4383
4386
|
|
|
4384
4387
|
var CardSectionType;
|
|
4385
4388
|
(function (CardSectionType) {
|
|
@@ -4541,14 +4544,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4541
4544
|
literal: true,
|
|
4542
4545
|
});
|
|
4543
4546
|
|
|
4544
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4545
|
-
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"])));
|
|
4546
4549
|
var Error$1 = function (_a) {
|
|
4547
4550
|
var error = _a.error;
|
|
4548
4551
|
var theme = useTheme();
|
|
4549
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));
|
|
4550
4553
|
};
|
|
4551
|
-
var templateObject_1$
|
|
4554
|
+
var templateObject_1$1K, templateObject_2$18;
|
|
4552
4555
|
|
|
4553
4556
|
var BaseSelectButton = function (_a) {
|
|
4554
4557
|
var children = _a.children, as = _a.as;
|
|
@@ -4565,7 +4568,7 @@ function BaseSelectOption(_a) {
|
|
|
4565
4568
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4566
4569
|
}
|
|
4567
4570
|
|
|
4568
|
-
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"])));
|
|
4569
4572
|
function BaseSelect(_a) {
|
|
4570
4573
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4571
4574
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4575,7 +4578,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4575
4578
|
Options: BaseSelectOptions,
|
|
4576
4579
|
Option: BaseSelectOption,
|
|
4577
4580
|
});
|
|
4578
|
-
var templateObject_1$
|
|
4581
|
+
var templateObject_1$1J;
|
|
4579
4582
|
|
|
4580
4583
|
var CustomButton = newStyled.button(function (_a) {
|
|
4581
4584
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4614,7 +4617,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4614
4617
|
});
|
|
4615
4618
|
});
|
|
4616
4619
|
//TODO Remove this when we find the real solution
|
|
4617
|
-
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) {
|
|
4618
4621
|
var open = _a.open;
|
|
4619
4622
|
return open &&
|
|
4620
4623
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4634,7 +4637,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4634
4637
|
} }), void 0));
|
|
4635
4638
|
};
|
|
4636
4639
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4637
|
-
var templateObject_1$
|
|
4640
|
+
var templateObject_1$1I;
|
|
4638
4641
|
|
|
4639
4642
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4640
4643
|
var theme = _a.theme;
|
|
@@ -4801,7 +4804,7 @@ var CustomCheckboxStyles = {
|
|
|
4801
4804
|
},
|
|
4802
4805
|
};
|
|
4803
4806
|
|
|
4804
|
-
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"])));
|
|
4805
4808
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4806
4809
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4807
4810
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4812,7 +4815,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4812
4815
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4813
4816
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4814
4817
|
]; });
|
|
4815
|
-
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) {
|
|
4816
4819
|
var disabled = _a.disabled;
|
|
4817
4820
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4818
4821
|
});
|
|
@@ -4828,7 +4831,7 @@ var Checkbox = function (_a) {
|
|
|
4828
4831
|
};
|
|
4829
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));
|
|
4830
4833
|
};
|
|
4831
|
-
var templateObject_1$
|
|
4834
|
+
var templateObject_1$1H, templateObject_2$17;
|
|
4832
4835
|
|
|
4833
4836
|
var CustomOption = newStyled.li(function (_a) {
|
|
4834
4837
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4877,8 +4880,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4877
4880
|
Option: BaseDropdownOption,
|
|
4878
4881
|
});
|
|
4879
4882
|
|
|
4880
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
4881
|
-
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"])));
|
|
4882
4885
|
function SimpleDropdown(_a) {
|
|
4883
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;
|
|
4884
4887
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4910,7 +4913,7 @@ function SimpleDropdown(_a) {
|
|
|
4910
4913
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : Fragment$1;
|
|
4911
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));
|
|
4912
4915
|
}
|
|
4913
|
-
var templateObject_1$
|
|
4916
|
+
var templateObject_1$1G, templateObject_2$16;
|
|
4914
4917
|
|
|
4915
4918
|
/* base styles & size variants */
|
|
4916
4919
|
var CustomRadioStyles$2 = {
|
|
@@ -4975,9 +4978,9 @@ var ContainerStyles$2 = {
|
|
|
4975
4978
|
},
|
|
4976
4979
|
};
|
|
4977
4980
|
|
|
4978
|
-
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"])));
|
|
4979
4982
|
var Container$10 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4980
|
-
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) {
|
|
4981
4984
|
var disabled = _a.disabled;
|
|
4982
4985
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4983
4986
|
});
|
|
@@ -5001,7 +5004,7 @@ var RadioInput = function (_a) {
|
|
|
5001
5004
|
};
|
|
5002
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));
|
|
5003
5006
|
};
|
|
5004
|
-
var templateObject_1$
|
|
5007
|
+
var templateObject_1$1F, templateObject_2$15, templateObject_3$S;
|
|
5005
5008
|
|
|
5006
5009
|
var getWrapperFlexDirection = function (position) {
|
|
5007
5010
|
switch (position) {
|
|
@@ -5052,7 +5055,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5052
5055
|
}
|
|
5053
5056
|
};
|
|
5054
5057
|
|
|
5055
|
-
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) {
|
|
5056
5059
|
var position = _a.position;
|
|
5057
5060
|
return getWrapperFlexDirection(position);
|
|
5058
5061
|
}, function (_a) {
|
|
@@ -5062,7 +5065,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __ma
|
|
|
5062
5065
|
var disableHover = _a.disableHover;
|
|
5063
5066
|
return (disableHover ? 0 : 1);
|
|
5064
5067
|
});
|
|
5065
|
-
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) {
|
|
5066
5069
|
var position = _a.position;
|
|
5067
5070
|
return getContainerFlexDirection(position);
|
|
5068
5071
|
}, function (_a) {
|
|
@@ -5108,7 +5111,7 @@ var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTem
|
|
|
5108
5111
|
});
|
|
5109
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"])));
|
|
5110
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"])));
|
|
5111
|
-
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;
|
|
5112
5115
|
|
|
5113
5116
|
var useOnClickOutside = function (ref, handler) {
|
|
5114
5117
|
useEffect(function () {
|
|
@@ -5250,7 +5253,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5250
5253
|
};
|
|
5251
5254
|
}
|
|
5252
5255
|
};
|
|
5253
|
-
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) {
|
|
5254
5257
|
var backgroundColor = _a.backgroundColor;
|
|
5255
5258
|
return backgroundColor;
|
|
5256
5259
|
}, function (_a) {
|
|
@@ -5272,7 +5275,7 @@ var Container$$ = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __
|
|
|
5272
5275
|
var size = _a.size;
|
|
5273
5276
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5274
5277
|
});
|
|
5275
|
-
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) {
|
|
5276
5279
|
var textColor = _a.textColor;
|
|
5277
5280
|
return textColor;
|
|
5278
5281
|
}, function (_a) {
|
|
@@ -5289,7 +5292,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5289
5292
|
var theme = useTheme();
|
|
5290
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));
|
|
5291
5294
|
};
|
|
5292
|
-
var templateObject_1$
|
|
5295
|
+
var templateObject_1$1D, templateObject_2$13;
|
|
5293
5296
|
|
|
5294
5297
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5295
5298
|
var _a, _b, _c;
|
|
@@ -5320,7 +5323,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5320
5323
|
};
|
|
5321
5324
|
}
|
|
5322
5325
|
};
|
|
5323
|
-
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) {
|
|
5324
5327
|
var backgroundColor = _a.backgroundColor;
|
|
5325
5328
|
return backgroundColor;
|
|
5326
5329
|
}, function (_a) {
|
|
@@ -5342,7 +5345,7 @@ var Container$_ = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __
|
|
|
5342
5345
|
var size = _a.size;
|
|
5343
5346
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5344
5347
|
});
|
|
5345
|
-
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) {
|
|
5346
5349
|
var textColor = _a.textColor;
|
|
5347
5350
|
return textColor;
|
|
5348
5351
|
}, function (_a) {
|
|
@@ -5359,7 +5362,7 @@ var DiscountTag = function (_a) {
|
|
|
5359
5362
|
var theme = useTheme();
|
|
5360
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));
|
|
5361
5364
|
};
|
|
5362
|
-
var templateObject_1$
|
|
5365
|
+
var templateObject_1$1C, templateObject_2$12;
|
|
5363
5366
|
|
|
5364
5367
|
var getStylesBySize$b = function (size, theme) {
|
|
5365
5368
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5401,8 +5404,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5401
5404
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5402
5405
|
}
|
|
5403
5406
|
};
|
|
5404
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
5405
|
-
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) {
|
|
5406
5409
|
var weight = _a.weight;
|
|
5407
5410
|
return (weight ? weight : '400');
|
|
5408
5411
|
}, function (_a) {
|
|
@@ -5431,7 +5434,7 @@ var TagContainer = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __m
|
|
|
5431
5434
|
var size = _a.size;
|
|
5432
5435
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
5433
5436
|
});
|
|
5434
|
-
function getTestId() {
|
|
5437
|
+
function getTestId$1() {
|
|
5435
5438
|
var args = [];
|
|
5436
5439
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
5437
5440
|
args[_i] = arguments[_i];
|
|
@@ -5455,13 +5458,13 @@ var PriceLabel = function (_a) {
|
|
|
5455
5458
|
: isMobile
|
|
5456
5459
|
? ComponentSize.Small
|
|
5457
5460
|
: ComponentSize.XSmall;
|
|
5458
|
-
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));
|
|
5459
5462
|
};
|
|
5460
|
-
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));
|
|
5461
5464
|
};
|
|
5462
|
-
var templateObject_1$
|
|
5465
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$Q;
|
|
5463
5466
|
|
|
5464
|
-
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"])));
|
|
5465
5468
|
var PriceLabelV2 = function (_a) {
|
|
5466
5469
|
var _b;
|
|
5467
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"]);
|
|
@@ -5511,8 +5514,8 @@ var PriceLabelV2 = function (_a) {
|
|
|
5511
5514
|
}
|
|
5512
5515
|
var savetoString = saveto.toFixed(2);
|
|
5513
5516
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5514
|
-
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5515
|
-
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: {
|
|
5516
5519
|
marginTop: '-5px',
|
|
5517
5520
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5518
5521
|
? finalPriceArray[0]
|
|
@@ -5530,10 +5533,10 @@ var PriceLabelV2 = function (_a) {
|
|
|
5530
5533
|
lineHeight: '22px',
|
|
5531
5534
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5532
5535
|
};
|
|
5533
|
-
var templateObject_1$
|
|
5536
|
+
var templateObject_1$1A;
|
|
5534
5537
|
|
|
5535
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5536
|
-
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"])));
|
|
5537
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"])));
|
|
5538
5541
|
var PriceLabelV3 = function (_a) {
|
|
5539
5542
|
var _b;
|
|
@@ -5583,13 +5586,13 @@ var PriceLabelV3 = function (_a) {
|
|
|
5583
5586
|
}
|
|
5584
5587
|
var savetoString = saveto.toFixed(2);
|
|
5585
5588
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5586
|
-
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)); };
|
|
5587
5590
|
var DiscountedPriceOfEach = function () {
|
|
5588
5591
|
if (!itemsQuantity || itemsQuantity < 2)
|
|
5589
5592
|
return null;
|
|
5590
|
-
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));
|
|
5591
5594
|
};
|
|
5592
|
-
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: {
|
|
5593
5596
|
marginTop: '-5px',
|
|
5594
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: {
|
|
5595
5598
|
marginTop: '-6px',
|
|
@@ -5605,10 +5608,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5605
5608
|
lineHeight: '22px',
|
|
5606
5609
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5607
5610
|
};
|
|
5608
|
-
var templateObject_1$
|
|
5611
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$P;
|
|
5609
5612
|
|
|
5610
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5611
|
-
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) {
|
|
5612
5615
|
var selected = _a.selected, theme = _a.theme;
|
|
5613
5616
|
return selected
|
|
5614
5617
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5645,7 +5648,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5645
5648
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5646
5649
|
});
|
|
5647
5650
|
var Container$Y = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5648
|
-
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;
|
|
5649
5652
|
|
|
5650
5653
|
var radioIds = {
|
|
5651
5654
|
oneTime: {
|
|
@@ -5700,12 +5703,12 @@ var Autoship = function (_a) {
|
|
|
5700
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));
|
|
5701
5704
|
};
|
|
5702
5705
|
|
|
5703
|
-
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; });
|
|
5704
5707
|
var Image$3 = function (_a) {
|
|
5705
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;
|
|
5706
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));
|
|
5707
5710
|
};
|
|
5708
|
-
var templateObject_1$
|
|
5711
|
+
var templateObject_1$1x;
|
|
5709
5712
|
|
|
5710
5713
|
var _a$2;
|
|
5711
5714
|
var BeforeAfterVariant;
|
|
@@ -5720,13 +5723,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5720
5723
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5721
5724
|
_a$2);
|
|
5722
5725
|
|
|
5723
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5724
|
-
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"])));
|
|
5725
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"])));
|
|
5726
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"])));
|
|
5727
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"])));
|
|
5728
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"])));
|
|
5729
|
-
var templateObject_1$
|
|
5732
|
+
var templateObject_1$1w, templateObject_2$_, templateObject_3$N, templateObject_4$B, templateObject_5$n, templateObject_6$l;
|
|
5730
5733
|
|
|
5731
5734
|
var NameWithStars = function (_a) {
|
|
5732
5735
|
var name = _a.name, size = _a.size;
|
|
@@ -5744,8 +5747,8 @@ var ResultFeedback = function (_a) {
|
|
|
5744
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));
|
|
5745
5748
|
};
|
|
5746
5749
|
|
|
5747
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
5748
|
-
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"])));
|
|
5749
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; });
|
|
5750
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) {
|
|
5751
5754
|
var theme = _a.theme;
|
|
@@ -5757,7 +5760,7 @@ var UserInfoText = newStyled.div(templateObject_4$A || (templateObject_4$A = __m
|
|
|
5757
5760
|
var theme = _a.theme, size = _a.size;
|
|
5758
5761
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5759
5762
|
});
|
|
5760
|
-
var templateObject_1$
|
|
5763
|
+
var templateObject_1$1v, templateObject_2$Z, templateObject_3$M, templateObject_4$A;
|
|
5761
5764
|
|
|
5762
5765
|
/* base styles & size variants */
|
|
5763
5766
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5835,7 +5838,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
5835
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));
|
|
5836
5839
|
};
|
|
5837
5840
|
|
|
5838
|
-
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) {
|
|
5839
5842
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5840
5843
|
});
|
|
5841
5844
|
var CardHeader = function (_a) {
|
|
@@ -5846,16 +5849,16 @@ var CardFooter = function (_a) {
|
|
|
5846
5849
|
var children = _a.children;
|
|
5847
5850
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
5848
5851
|
};
|
|
5849
|
-
var templateObject_1$
|
|
5852
|
+
var templateObject_1$1u;
|
|
5850
5853
|
|
|
5851
|
-
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"])));
|
|
5852
5855
|
var CardBody = function (_a) {
|
|
5853
5856
|
var children = _a.children;
|
|
5854
5857
|
return jsx$1(Body, { children: children }, void 0);
|
|
5855
5858
|
};
|
|
5856
|
-
var templateObject_1$
|
|
5859
|
+
var templateObject_1$1t;
|
|
5857
5860
|
|
|
5858
|
-
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) {
|
|
5859
5862
|
var flex = _a.flex;
|
|
5860
5863
|
return flex &&
|
|
5861
5864
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5877,16 +5880,16 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
5877
5880
|
Footer: CardFooter,
|
|
5878
5881
|
Body: CardBody,
|
|
5879
5882
|
});
|
|
5880
|
-
var templateObject_1$
|
|
5883
|
+
var templateObject_1$1s;
|
|
5881
5884
|
|
|
5882
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5883
|
-
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"])));
|
|
5884
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) {
|
|
5885
5888
|
var color = _a.color;
|
|
5886
5889
|
return color;
|
|
5887
5890
|
});
|
|
5888
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"])));
|
|
5889
|
-
var templateObject_1$
|
|
5892
|
+
var templateObject_1$1r, templateObject_2$Y, templateObject_3$L, templateObject_4$z;
|
|
5890
5893
|
|
|
5891
5894
|
var Minimalistic = function (_a) {
|
|
5892
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;
|
|
@@ -5894,8 +5897,8 @@ var Minimalistic = function (_a) {
|
|
|
5894
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));
|
|
5895
5898
|
};
|
|
5896
5899
|
|
|
5897
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
5898
|
-
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; });
|
|
5899
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; });
|
|
5900
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"])));
|
|
5901
5904
|
var Simple = function (_a) {
|
|
@@ -5903,18 +5906,18 @@ var Simple = function (_a) {
|
|
|
5903
5906
|
var theme = useTheme();
|
|
5904
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));
|
|
5905
5908
|
};
|
|
5906
|
-
var templateObject_1$
|
|
5909
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$K, templateObject_4$y;
|
|
5907
5910
|
|
|
5908
5911
|
var Bundle = {
|
|
5909
5912
|
Minimalistic: Minimalistic,
|
|
5910
5913
|
Simple: Simple,
|
|
5911
5914
|
};
|
|
5912
5915
|
|
|
5913
|
-
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) {
|
|
5914
5917
|
var displayBNPL = _a.displayBNPL;
|
|
5915
5918
|
return (displayBNPL ? 'flex' : 'none');
|
|
5916
5919
|
});
|
|
5917
|
-
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"])));
|
|
5918
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"])));
|
|
5919
5922
|
var BuyNowPayLater = function (_a) {
|
|
5920
5923
|
var _b;
|
|
@@ -5927,41 +5930,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
5927
5930
|
}
|
|
5928
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));
|
|
5929
5932
|
};
|
|
5930
|
-
var templateObject_1$
|
|
5933
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$J;
|
|
5931
5934
|
|
|
5932
|
-
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; });
|
|
5933
5936
|
var Title$5 = function (_a) {
|
|
5934
5937
|
var title = _a.title;
|
|
5935
5938
|
var theme = useTheme();
|
|
5936
5939
|
return jsx$1(Text$7, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5937
5940
|
};
|
|
5938
|
-
var templateObject_1$
|
|
5941
|
+
var templateObject_1$1o;
|
|
5939
5942
|
|
|
5940
|
-
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; });
|
|
5941
5944
|
var Promo = function (_a) {
|
|
5942
5945
|
var text = _a.text;
|
|
5943
5946
|
var theme = useTheme();
|
|
5944
5947
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5945
5948
|
};
|
|
5946
|
-
var templateObject_1$
|
|
5949
|
+
var templateObject_1$1n;
|
|
5947
5950
|
|
|
5948
|
-
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; });
|
|
5949
5952
|
var Description$1 = function (_a) {
|
|
5950
5953
|
var text = _a.text;
|
|
5951
5954
|
var theme = useTheme();
|
|
5952
5955
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5953
5956
|
};
|
|
5954
|
-
var templateObject_1$
|
|
5957
|
+
var templateObject_1$1m;
|
|
5955
5958
|
|
|
5956
|
-
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"); });
|
|
5957
5960
|
var CloseButton$1 = function (_a) {
|
|
5958
5961
|
var onClick = _a.onClick, size = _a.size;
|
|
5959
5962
|
var theme = useTheme();
|
|
5960
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));
|
|
5961
5964
|
};
|
|
5962
|
-
var templateObject_1$
|
|
5965
|
+
var templateObject_1$1l;
|
|
5963
5966
|
|
|
5964
|
-
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) {
|
|
5965
5968
|
var backgroundColor = _a.backgroundColor;
|
|
5966
5969
|
return backgroundColor;
|
|
5967
5970
|
}, function (_a) {
|
|
@@ -5976,7 +5979,7 @@ var OfferBanner = function (_a) {
|
|
|
5976
5979
|
var theme = useTheme();
|
|
5977
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));
|
|
5978
5981
|
};
|
|
5979
|
-
var templateObject_1$
|
|
5982
|
+
var templateObject_1$1k;
|
|
5980
5983
|
|
|
5981
5984
|
var CartProductItem = {
|
|
5982
5985
|
Title: Title$5,
|
|
@@ -5986,8 +5989,8 @@ var CartProductItem = {
|
|
|
5986
5989
|
CloseButton: CloseButton$1,
|
|
5987
5990
|
};
|
|
5988
5991
|
|
|
5989
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
5990
|
-
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"])));
|
|
5991
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"])));
|
|
5992
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"])));
|
|
5993
5996
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -5999,7 +6002,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
5999
6002
|
var isMobile = useWindowDimensions().isMobile;
|
|
6000
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));
|
|
6001
6004
|
};
|
|
6002
|
-
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;
|
|
6003
6006
|
|
|
6004
6007
|
var Spacing = function (_a) {
|
|
6005
6008
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6007,8 +6010,8 @@ var Spacing = function (_a) {
|
|
|
6007
6010
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6008
6011
|
};
|
|
6009
6012
|
|
|
6010
|
-
var Container$R = newStyled('div')(templateObject_1$
|
|
6011
|
-
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"])));
|
|
6012
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"])));
|
|
6013
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) {
|
|
6014
6017
|
var index = _a.index;
|
|
@@ -6021,12 +6024,12 @@ var StrengthBars = function (_a) {
|
|
|
6021
6024
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6022
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));
|
|
6023
6026
|
};
|
|
6024
|
-
var templateObject_1$
|
|
6027
|
+
var templateObject_1$1i, templateObject_2$U, templateObject_3$H, templateObject_4$w;
|
|
6025
6028
|
|
|
6026
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
6027
|
-
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;
|
|
6028
6031
|
|
|
6029
|
-
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) {
|
|
6030
6033
|
var marginRight = _a.marginRight;
|
|
6031
6034
|
return marginRight;
|
|
6032
6035
|
});
|
|
@@ -6042,7 +6045,7 @@ var StarList = function (_a) {
|
|
|
6042
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)));
|
|
6043
6046
|
}) }, void 0));
|
|
6044
6047
|
};
|
|
6045
|
-
var templateObject_1$
|
|
6048
|
+
var templateObject_1$1g;
|
|
6046
6049
|
|
|
6047
6050
|
/* base styles & size variants */
|
|
6048
6051
|
var LabelStyles = {
|
|
@@ -6083,8 +6086,8 @@ var LabelStyles = {
|
|
|
6083
6086
|
});
|
|
6084
6087
|
},
|
|
6085
6088
|
};
|
|
6086
|
-
var Container$P = newStyled.a(templateObject_1$
|
|
6087
|
-
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;
|
|
6088
6091
|
|
|
6089
6092
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6090
6093
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6104,7 +6107,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6104
6107
|
}),
|
|
6105
6108
|
];
|
|
6106
6109
|
});
|
|
6107
|
-
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; });
|
|
6108
6111
|
var starsNumber = 5;
|
|
6109
6112
|
var Rating = function (_a) {
|
|
6110
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;
|
|
@@ -6127,7 +6130,45 @@ var Rating = function (_a) {
|
|
|
6127
6130
|
: {};
|
|
6128
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));
|
|
6129
6132
|
};
|
|
6130
|
-
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;
|
|
6131
6172
|
|
|
6132
6173
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6133
6174
|
var width = _a.width, height = _a.height;
|
|
@@ -6192,7 +6233,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6192
6233
|
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
6193
6234
|
strength: -1,
|
|
6194
6235
|
description: '',
|
|
6195
|
-
} : _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;
|
|
6196
6237
|
var theme = useTheme();
|
|
6197
6238
|
var styles = getStylesBySize$9(size);
|
|
6198
6239
|
var isMobile = useWindowDimensions().isMobile;
|
|
@@ -6205,16 +6246,20 @@ var ProductItemMobile = function (_a) {
|
|
|
6205
6246
|
_a)[size];
|
|
6206
6247
|
}, [size]);
|
|
6207
6248
|
var PriceLabelDisplay = function () {
|
|
6208
|
-
|
|
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
|
|
6209
6260
|
? !isMobile
|
|
6210
|
-
? {
|
|
6211
|
-
|
|
6212
|
-
fontWeight: 700,
|
|
6213
|
-
}
|
|
6214
|
-
: {
|
|
6215
|
-
fontSize: '12px',
|
|
6216
|
-
fontWeight: 700,
|
|
6217
|
-
}
|
|
6261
|
+
? { fontSize: '16px', fontWeight: 700 }
|
|
6262
|
+
: { fontSize: '12px', fontWeight: 700 }
|
|
6218
6263
|
: undefined }, void 0));
|
|
6219
6264
|
};
|
|
6220
6265
|
var RatingDisplay = function () {
|
|
@@ -6224,7 +6269,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6224
6269
|
return jsx(Fragment, {}, void 0);
|
|
6225
6270
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6226
6271
|
};
|
|
6227
|
-
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));
|
|
6228
6273
|
};
|
|
6229
6274
|
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6230
6275
|
|