@trafilea/afrodita-components 6.8.7 → 6.8.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +1 -0
- package/build/index.esm.js +222 -222
- package/build/index.esm.js.map +1 -1
- package/build/index.js +222 -222
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3151,7 +3151,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3151
3151
|
desktop: 1280,
|
|
3152
3152
|
};
|
|
3153
3153
|
|
|
3154
|
-
var Container$1a = newStyled.div(templateObject_1$
|
|
3154
|
+
var Container$1a = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3155
3155
|
var height = _a.height;
|
|
3156
3156
|
return (height ? height : '1.5em');
|
|
3157
3157
|
}, function (_a) {
|
|
@@ -3178,9 +3178,9 @@ var SkeletonBox = function (_a) {
|
|
|
3178
3178
|
var theme = useTheme();
|
|
3179
3179
|
return jsxRuntime.jsx(Container$1a, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3180
3180
|
};
|
|
3181
|
-
var templateObject_1$
|
|
3181
|
+
var templateObject_1$1W;
|
|
3182
3182
|
|
|
3183
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3183
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3184
3184
|
var width = _a.width;
|
|
3185
3185
|
return width;
|
|
3186
3186
|
}, function (_a) {
|
|
@@ -3196,7 +3196,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1U || (templateObject_1$1U
|
|
|
3196
3196
|
var opacity = _a.opacity;
|
|
3197
3197
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3198
3198
|
});
|
|
3199
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3199
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3200
3200
|
var width = _a.width;
|
|
3201
3201
|
return width;
|
|
3202
3202
|
}, function (_a) {
|
|
@@ -3209,7 +3209,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1f || (templateObject_2$
|
|
|
3209
3209
|
var opacity = _a.opacity;
|
|
3210
3210
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3211
3211
|
});
|
|
3212
|
-
var templateObject_1$
|
|
3212
|
+
var templateObject_1$1V, templateObject_2$1g;
|
|
3213
3213
|
|
|
3214
3214
|
/* eslint-disable no-undef */
|
|
3215
3215
|
var cache = new Map();
|
|
@@ -4112,13 +4112,13 @@ function jsxs(type, props, key) {
|
|
|
4112
4112
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4113
4113
|
// `variants` styles that are consistent through all themes.
|
|
4114
4114
|
var TAGS = {
|
|
4115
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4116
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4115
|
+
hero1: newStyled.h1(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject([""], [""]))),
|
|
4116
|
+
hero2: newStyled.h2(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject([""], [""]))),
|
|
4117
4117
|
hero3: newStyled.h3(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject([""], [""]))),
|
|
4118
4118
|
display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
|
|
4119
4119
|
display2: newStyled.h2(templateObject_5$s || (templateObject_5$s = __makeTemplateObject([""], [""]))),
|
|
4120
|
-
display3: newStyled.h3(templateObject_6$
|
|
4121
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4120
|
+
display3: newStyled.h3(templateObject_6$o || (templateObject_6$o = __makeTemplateObject([""], [""]))),
|
|
4121
|
+
heading1: newStyled.h1(templateObject_7$g || (templateObject_7$g = __makeTemplateObject([""], [""]))),
|
|
4122
4122
|
heading2: newStyled.h2(templateObject_8$d || (templateObject_8$d = __makeTemplateObject([""], [""]))),
|
|
4123
4123
|
heading3: newStyled.h3(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4124
4124
|
heading4: newStyled.h4(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject([""], [""]))),
|
|
@@ -4248,14 +4248,14 @@ var DEFAULTS = {
|
|
|
4248
4248
|
size: 'regular',
|
|
4249
4249
|
},
|
|
4250
4250
|
};
|
|
4251
|
-
var templateObject_1$
|
|
4251
|
+
var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$I, templateObject_5$s, templateObject_6$o, templateObject_7$g, 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;
|
|
4252
4252
|
|
|
4253
|
-
var Container$19 = newStyled.div(templateObject_1$
|
|
4254
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4253
|
+
var Container$19 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4254
|
+
var Card$3 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
4255
4255
|
var Tag$2 = newStyled.div(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
4256
4256
|
var Label$4 = newStyled.div(templateObject_4$H || (templateObject_4$H = __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"])));
|
|
4257
4257
|
var Check$1 = newStyled.div(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
4258
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4258
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4259
4259
|
var PackSelectorV2 = function (_a) {
|
|
4260
4260
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4261
4261
|
return (jsxRuntime.jsx(Container$19, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -4280,27 +4280,27 @@ var PackCard$1 = function (_a) {
|
|
|
4280
4280
|
currency: currencyCode || 'USD',
|
|
4281
4281
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4282
4282
|
};
|
|
4283
|
-
var templateObject_1$
|
|
4283
|
+
var templateObject_1$1T, templateObject_2$1e, templateObject_3$X, templateObject_4$H, templateObject_5$r, templateObject_6$n;
|
|
4284
4284
|
|
|
4285
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
4286
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4285
|
+
var Container$18 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4286
|
+
var DropContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4287
4287
|
var DropList = function (_a) {
|
|
4288
4288
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4289
4289
|
return (jsxRuntime.jsx(Container$18, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4290
4290
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4291
4291
|
}) }, void 0));
|
|
4292
4292
|
};
|
|
4293
|
-
var templateObject_1$
|
|
4293
|
+
var templateObject_1$1S, templateObject_2$1d;
|
|
4294
4294
|
|
|
4295
4295
|
var DROPS_TOTAL = 5;
|
|
4296
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
4297
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4296
|
+
var Container$17 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4297
|
+
var Title$8 = newStyled.p(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
4298
4298
|
var Description$3 = newStyled.p(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
4299
4299
|
var AbsorbencyLevel = function (_a) {
|
|
4300
4300
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4301
4301
|
return (jsxRuntime.jsxs(Container$17, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4302
4302
|
};
|
|
4303
|
-
var templateObject_1$
|
|
4303
|
+
var templateObject_1$1R, templateObject_2$1c, templateObject_3$W;
|
|
4304
4304
|
|
|
4305
4305
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4306
4306
|
`),"","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(`
|
|
@@ -4376,7 +4376,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4376
4376
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4377
4377
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4378
4378
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4379
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4379
|
+
var StyledContent = newStyled.button(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
4380
4380
|
var Accordion$1 = function (_a) {
|
|
4381
4381
|
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;
|
|
4382
4382
|
var theme = useTheme();
|
|
@@ -4400,9 +4400,9 @@ var Accordion$1 = function (_a) {
|
|
|
4400
4400
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4401
4401
|
} }), void 0));
|
|
4402
4402
|
};
|
|
4403
|
-
var templateObject_1$
|
|
4403
|
+
var templateObject_1$1Q;
|
|
4404
4404
|
|
|
4405
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4405
|
+
var Container$16 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4406
4406
|
var AccordionOptions = function (_a) {
|
|
4407
4407
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4408
4408
|
var _b = React$2.useState({
|
|
@@ -4426,7 +4426,7 @@ var AccordionOptions = function (_a) {
|
|
|
4426
4426
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4427
4427
|
}) }, void 0));
|
|
4428
4428
|
};
|
|
4429
|
-
var templateObject_1$
|
|
4429
|
+
var templateObject_1$1P;
|
|
4430
4430
|
|
|
4431
4431
|
exports.CardSectionType = void 0;
|
|
4432
4432
|
(function (CardSectionType) {
|
|
@@ -4588,14 +4588,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4588
4588
|
literal: true,
|
|
4589
4589
|
});
|
|
4590
4590
|
|
|
4591
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4592
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4591
|
+
var ErrorText = newStyled.h3(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
4592
|
+
var ErrorContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
4593
4593
|
var Error$1 = function (_a) {
|
|
4594
4594
|
var error = _a.error;
|
|
4595
4595
|
var theme = useTheme();
|
|
4596
4596
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4597
4597
|
};
|
|
4598
|
-
var templateObject_1$
|
|
4598
|
+
var templateObject_1$1O, templateObject_2$1b;
|
|
4599
4599
|
|
|
4600
4600
|
var BaseSelectButton = function (_a) {
|
|
4601
4601
|
var children = _a.children, as = _a.as;
|
|
@@ -4612,7 +4612,7 @@ function BaseSelectOption(_a) {
|
|
|
4612
4612
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4613
4613
|
}
|
|
4614
4614
|
|
|
4615
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4615
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4616
4616
|
function BaseSelect(_a) {
|
|
4617
4617
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4618
4618
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4622,7 +4622,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4622
4622
|
Options: BaseSelectOptions,
|
|
4623
4623
|
Option: BaseSelectOption,
|
|
4624
4624
|
});
|
|
4625
|
-
var templateObject_1$
|
|
4625
|
+
var templateObject_1$1N;
|
|
4626
4626
|
|
|
4627
4627
|
var CustomButton = newStyled.button(function (_a) {
|
|
4628
4628
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4661,7 +4661,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4661
4661
|
});
|
|
4662
4662
|
});
|
|
4663
4663
|
//TODO Remove this when we find the real solution
|
|
4664
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4664
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4665
4665
|
var open = _a.open;
|
|
4666
4666
|
return open &&
|
|
4667
4667
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4681,7 +4681,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4681
4681
|
} }), void 0));
|
|
4682
4682
|
};
|
|
4683
4683
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4684
|
-
var templateObject_1$
|
|
4684
|
+
var templateObject_1$1M;
|
|
4685
4685
|
|
|
4686
4686
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4687
4687
|
var theme = _a.theme;
|
|
@@ -4848,7 +4848,7 @@ var CustomCheckboxStyles = {
|
|
|
4848
4848
|
},
|
|
4849
4849
|
};
|
|
4850
4850
|
|
|
4851
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4851
|
+
var Container$15 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4852
4852
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4853
4853
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4854
4854
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4859,7 +4859,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4859
4859
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4860
4860
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4861
4861
|
]; });
|
|
4862
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4862
|
+
var Input$5 = newStyled.input(templateObject_2$1a || (templateObject_2$1a = __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) {
|
|
4863
4863
|
var disabled = _a.disabled;
|
|
4864
4864
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4865
4865
|
});
|
|
@@ -4875,7 +4875,7 @@ var Checkbox = function (_a) {
|
|
|
4875
4875
|
};
|
|
4876
4876
|
return (jsxRuntime.jsxs(Container$15, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4877
4877
|
};
|
|
4878
|
-
var templateObject_1$
|
|
4878
|
+
var templateObject_1$1L, templateObject_2$1a;
|
|
4879
4879
|
|
|
4880
4880
|
var CustomOption = newStyled.li(function (_a) {
|
|
4881
4881
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4924,8 +4924,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4924
4924
|
Option: BaseDropdownOption,
|
|
4925
4925
|
});
|
|
4926
4926
|
|
|
4927
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4928
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4927
|
+
var Container$14 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
4928
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
4929
4929
|
function SimpleDropdown(_a) {
|
|
4930
4930
|
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;
|
|
4931
4931
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4957,7 +4957,7 @@ function SimpleDropdown(_a) {
|
|
|
4957
4957
|
var DropdownContainer = showRequiredPlaceholder ? Container$14 : React$2.Fragment;
|
|
4958
4958
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4959
4959
|
}
|
|
4960
|
-
var templateObject_1$
|
|
4960
|
+
var templateObject_1$1K, templateObject_2$19;
|
|
4961
4961
|
|
|
4962
4962
|
/* base styles & size variants */
|
|
4963
4963
|
var CustomRadioStyles$2 = {
|
|
@@ -5022,9 +5022,9 @@ var ContainerStyles$2 = {
|
|
|
5022
5022
|
},
|
|
5023
5023
|
};
|
|
5024
5024
|
|
|
5025
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5025
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5026
5026
|
var Container$13 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5027
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5027
|
+
var Input$4 = newStyled.input(templateObject_2$18 || (templateObject_2$18 = __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) {
|
|
5028
5028
|
var disabled = _a.disabled;
|
|
5029
5029
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5030
5030
|
});
|
|
@@ -5048,7 +5048,7 @@ var RadioInput = function (_a) {
|
|
|
5048
5048
|
};
|
|
5049
5049
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$13, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5050
5050
|
};
|
|
5051
|
-
var templateObject_1$
|
|
5051
|
+
var templateObject_1$1J, templateObject_2$18, templateObject_3$V;
|
|
5052
5052
|
|
|
5053
5053
|
var getWrapperFlexDirection = function (position) {
|
|
5054
5054
|
switch (position) {
|
|
@@ -5099,7 +5099,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5099
5099
|
}
|
|
5100
5100
|
};
|
|
5101
5101
|
|
|
5102
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5102
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5103
5103
|
var position = _a.position;
|
|
5104
5104
|
return getWrapperFlexDirection(position);
|
|
5105
5105
|
}, function (_a) {
|
|
@@ -5109,7 +5109,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __ma
|
|
|
5109
5109
|
var disableHover = _a.disableHover;
|
|
5110
5110
|
return (disableHover ? 0 : 1);
|
|
5111
5111
|
});
|
|
5112
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5112
|
+
var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17 = __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) {
|
|
5113
5113
|
var position = _a.position;
|
|
5114
5114
|
return getContainerFlexDirection(position);
|
|
5115
5115
|
}, function (_a) {
|
|
@@ -5149,13 +5149,13 @@ var TooltipText = newStyled.div(templateObject_4$G || (templateObject_4$G = __ma
|
|
|
5149
5149
|
return color;
|
|
5150
5150
|
});
|
|
5151
5151
|
var TopSection = newStyled.div(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5152
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5152
|
+
var Title$7 = newStyled.h1(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5153
5153
|
var color = _a.color;
|
|
5154
5154
|
return color;
|
|
5155
5155
|
});
|
|
5156
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5156
|
+
var IconContainer$5 = newStyled.div(templateObject_7$f || (templateObject_7$f = __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"])));
|
|
5157
5157
|
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"])));
|
|
5158
|
-
var templateObject_1$
|
|
5158
|
+
var templateObject_1$1I, templateObject_2$17, templateObject_3$U, templateObject_4$G, templateObject_5$q, templateObject_6$m, templateObject_7$f, templateObject_8$c;
|
|
5159
5159
|
|
|
5160
5160
|
var useOnClickOutside = function (ref, handler) {
|
|
5161
5161
|
React$2.useEffect(function () {
|
|
@@ -5297,7 +5297,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5297
5297
|
};
|
|
5298
5298
|
}
|
|
5299
5299
|
};
|
|
5300
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
5300
|
+
var Container$12 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5301
5301
|
var backgroundColor = _a.backgroundColor;
|
|
5302
5302
|
return backgroundColor;
|
|
5303
5303
|
}, function (_a) {
|
|
@@ -5319,7 +5319,7 @@ var Container$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5319
5319
|
var size = _a.size;
|
|
5320
5320
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5321
5321
|
});
|
|
5322
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5322
|
+
var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __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) {
|
|
5323
5323
|
var textColor = _a.textColor;
|
|
5324
5324
|
return textColor;
|
|
5325
5325
|
}, function (_a) {
|
|
@@ -5336,7 +5336,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5336
5336
|
var theme = useTheme();
|
|
5337
5337
|
return (jsxRuntime.jsx(Container$12, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5338
5338
|
};
|
|
5339
|
-
var templateObject_1$
|
|
5339
|
+
var templateObject_1$1H, templateObject_2$16;
|
|
5340
5340
|
|
|
5341
5341
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5342
5342
|
var _a, _b, _c;
|
|
@@ -5367,7 +5367,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5367
5367
|
};
|
|
5368
5368
|
}
|
|
5369
5369
|
};
|
|
5370
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
5370
|
+
var Container$11 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5371
5371
|
var backgroundColor = _a.backgroundColor;
|
|
5372
5372
|
return backgroundColor;
|
|
5373
5373
|
}, function (_a) {
|
|
@@ -5389,7 +5389,7 @@ var Container$11 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = _
|
|
|
5389
5389
|
var size = _a.size;
|
|
5390
5390
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5391
5391
|
});
|
|
5392
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5392
|
+
var H3$2 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5393
5393
|
var textColor = _a.textColor;
|
|
5394
5394
|
return textColor;
|
|
5395
5395
|
}, function (_a) {
|
|
@@ -5406,7 +5406,7 @@ var DiscountTag = function (_a) {
|
|
|
5406
5406
|
var theme = useTheme();
|
|
5407
5407
|
return (jsxRuntime.jsx(Container$11, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5408
5408
|
};
|
|
5409
|
-
var templateObject_1$
|
|
5409
|
+
var templateObject_1$1G, templateObject_2$15;
|
|
5410
5410
|
|
|
5411
5411
|
var getStylesBySize$b = function (size, theme) {
|
|
5412
5412
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5448,8 +5448,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5448
5448
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5449
5449
|
}
|
|
5450
5450
|
};
|
|
5451
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
5452
|
-
var Price = newStyled.p(templateObject_2$
|
|
5451
|
+
var Container$10 = 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"])));
|
|
5452
|
+
var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __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) {
|
|
5453
5453
|
var weight = _a.weight;
|
|
5454
5454
|
return (weight ? weight : '400');
|
|
5455
5455
|
}, function (_a) {
|
|
@@ -5506,12 +5506,12 @@ var PriceLabel = function (_a) {
|
|
|
5506
5506
|
};
|
|
5507
5507
|
return (jsxRuntime.jsxs(Container$10, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5508
5508
|
};
|
|
5509
|
-
var templateObject_1$
|
|
5509
|
+
var templateObject_1$1F, templateObject_2$14, templateObject_3$T;
|
|
5510
5510
|
|
|
5511
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5511
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5512
5512
|
var PriceLabelV2 = function (_a) {
|
|
5513
5513
|
var _b;
|
|
5514
|
-
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem"]);
|
|
5514
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
5515
5515
|
var theme = useTheme();
|
|
5516
5516
|
var productFinalPrice = pricePerItem ? pricePerItem : finalPrice;
|
|
5517
5517
|
var isDiffFinalAndOriginalPrice = originalPrice !== productFinalPrice;
|
|
@@ -5549,12 +5549,14 @@ var PriceLabelV2 = function (_a) {
|
|
|
5549
5549
|
finalPriceNum = typeof productFinalPrice === 'number' ? productFinalPrice : 0;
|
|
5550
5550
|
}
|
|
5551
5551
|
var saveto = originalPriceNum - finalPriceNum;
|
|
5552
|
-
|
|
5553
|
-
|
|
5554
|
-
|
|
5555
|
-
|
|
5556
|
-
|
|
5557
|
-
|
|
5552
|
+
if (hasRoundedSavings) {
|
|
5553
|
+
var decimalPart = Number((saveto - Math.floor(saveto)).toFixed(2));
|
|
5554
|
+
if (decimalPart >= 0.01 && decimalPart < 0.5) {
|
|
5555
|
+
saveto = Math.floor(saveto) + 0.0;
|
|
5556
|
+
}
|
|
5557
|
+
else if (decimalPart >= 0.51 && decimalPart < 1.0) {
|
|
5558
|
+
saveto = Math.floor(saveto) + 0.5;
|
|
5559
|
+
}
|
|
5558
5560
|
}
|
|
5559
5561
|
var savetoString = saveto.toFixed(2);
|
|
5560
5562
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
@@ -5577,10 +5579,10 @@ var PriceLabelV2 = function (_a) {
|
|
|
5577
5579
|
lineHeight: '22px',
|
|
5578
5580
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5579
5581
|
};
|
|
5580
|
-
var templateObject_1$
|
|
5582
|
+
var templateObject_1$1E;
|
|
5581
5583
|
|
|
5582
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5583
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5584
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5585
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5584
5586
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5585
5587
|
var PriceLabelV3 = function (_a) {
|
|
5586
5588
|
var _b;
|
|
@@ -5652,10 +5654,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5652
5654
|
lineHeight: '22px',
|
|
5653
5655
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5654
5656
|
};
|
|
5655
|
-
var templateObject_1$
|
|
5657
|
+
var templateObject_1$1D, templateObject_2$13, templateObject_3$S;
|
|
5656
5658
|
|
|
5657
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5658
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5659
|
+
var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5660
|
+
var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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) {
|
|
5659
5661
|
var selected = _a.selected, theme = _a.theme;
|
|
5660
5662
|
return selected
|
|
5661
5663
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5681,8 +5683,8 @@ var SubscriptionHeader = newStyled.div(templateObject_5$p || (templateObject_5$p
|
|
|
5681
5683
|
var theme = _a.theme;
|
|
5682
5684
|
return theme.colors.pallete.primary.color;
|
|
5683
5685
|
});
|
|
5684
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5685
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5686
|
+
var BenefitsContainer = newStyled.div(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5687
|
+
var Benefit = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5686
5688
|
var BenefitText = newStyled(Text$7)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5687
5689
|
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5688
5690
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
@@ -5692,7 +5694,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5692
5694
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5693
5695
|
});
|
|
5694
5696
|
var Container$$ = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5695
|
-
var templateObject_1$
|
|
5697
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$p, templateObject_6$l, templateObject_7$e, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5696
5698
|
|
|
5697
5699
|
var radioIds = {
|
|
5698
5700
|
oneTime: {
|
|
@@ -5747,12 +5749,12 @@ var Autoship = function (_a) {
|
|
|
5747
5749
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5748
5750
|
};
|
|
5749
5751
|
|
|
5750
|
-
var Img = newStyled.img(templateObject_1$
|
|
5752
|
+
var Img = newStyled.img(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
5751
5753
|
var Image$3 = function (_a) {
|
|
5752
5754
|
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;
|
|
5753
5755
|
return (jsxRuntime.jsx(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
5754
5756
|
};
|
|
5755
|
-
var templateObject_1$
|
|
5757
|
+
var templateObject_1$1B;
|
|
5756
5758
|
|
|
5757
5759
|
var _a$2;
|
|
5758
5760
|
exports.BeforeAfterVariant = void 0;
|
|
@@ -5767,13 +5769,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5767
5769
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5768
5770
|
_a$2);
|
|
5769
5771
|
|
|
5770
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5771
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5772
|
+
var CustomerDetails = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject([""], [""])));
|
|
5773
|
+
var CustomerInfo = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
5772
5774
|
var Name = newStyled.h4(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
5773
5775
|
var StarIconContainer = newStyled.div(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
5774
5776
|
var Description$2 = newStyled.p(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
5775
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
5776
|
-
var templateObject_1$
|
|
5777
|
+
var ReviewDays = newStyled.span(templateObject_6$k || (templateObject_6$k = __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"])));
|
|
5778
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E, templateObject_5$o, templateObject_6$k;
|
|
5777
5779
|
|
|
5778
5780
|
var NameWithStars = function (_a) {
|
|
5779
5781
|
var name = _a.name, size = _a.size;
|
|
@@ -5791,8 +5793,8 @@ var ResultFeedback = function (_a) {
|
|
|
5791
5793
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5792
5794
|
};
|
|
5793
5795
|
|
|
5794
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
5795
|
-
var ImageContainer$5 = newStyled.div(templateObject_2
|
|
5796
|
+
var Container$_ = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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; });
|
|
5797
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
5796
5798
|
var ImageCard = newStyled.div(templateObject_3$P || (templateObject_3$P = __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; });
|
|
5797
5799
|
var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __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) {
|
|
5798
5800
|
var theme = _a.theme;
|
|
@@ -5804,7 +5806,7 @@ var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __m
|
|
|
5804
5806
|
var theme = _a.theme, size = _a.size;
|
|
5805
5807
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5806
5808
|
});
|
|
5807
|
-
var templateObject_1$
|
|
5809
|
+
var templateObject_1$1z, templateObject_2$10, templateObject_3$P, templateObject_4$D;
|
|
5808
5810
|
|
|
5809
5811
|
/* base styles & size variants */
|
|
5810
5812
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5882,7 +5884,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
5882
5884
|
return (jsxRuntime.jsxs(Container$_, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5883
5885
|
};
|
|
5884
5886
|
|
|
5885
|
-
var Section = newStyled.div(templateObject_1$
|
|
5887
|
+
var Section = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
5886
5888
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5887
5889
|
});
|
|
5888
5890
|
var CardHeader = function (_a) {
|
|
@@ -5893,16 +5895,16 @@ var CardFooter = function (_a) {
|
|
|
5893
5895
|
var children = _a.children;
|
|
5894
5896
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
5895
5897
|
};
|
|
5896
|
-
var templateObject_1$
|
|
5898
|
+
var templateObject_1$1y;
|
|
5897
5899
|
|
|
5898
|
-
var Body = newStyled.div(templateObject_1$
|
|
5900
|
+
var Body = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
5899
5901
|
var CardBody = function (_a) {
|
|
5900
5902
|
var children = _a.children;
|
|
5901
5903
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
5902
5904
|
};
|
|
5903
|
-
var templateObject_1$
|
|
5905
|
+
var templateObject_1$1x;
|
|
5904
5906
|
|
|
5905
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
5907
|
+
var Container$Z = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
5906
5908
|
var flex = _a.flex;
|
|
5907
5909
|
return flex &&
|
|
5908
5910
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5924,16 +5926,16 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
5924
5926
|
Footer: CardFooter,
|
|
5925
5927
|
Body: CardBody,
|
|
5926
5928
|
});
|
|
5927
|
-
var templateObject_1$
|
|
5929
|
+
var templateObject_1$1w;
|
|
5928
5930
|
|
|
5929
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5930
|
-
var StyledContainer = newStyled.div(templateObject_2
|
|
5931
|
+
var StyledWrapper = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
5932
|
+
var StyledContainer = 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"])));
|
|
5931
5933
|
var TextLabel = newStyled(Text$7)(templateObject_3$O || (templateObject_3$O = __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) {
|
|
5932
5934
|
var color = _a.color;
|
|
5933
5935
|
return color;
|
|
5934
5936
|
});
|
|
5935
5937
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
5936
|
-
var templateObject_1$
|
|
5938
|
+
var templateObject_1$1v, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
5937
5939
|
|
|
5938
5940
|
var Minimalistic = function (_a) {
|
|
5939
5941
|
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;
|
|
@@ -5941,8 +5943,8 @@ var Minimalistic = function (_a) {
|
|
|
5941
5943
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5942
5944
|
};
|
|
5943
5945
|
|
|
5944
|
-
var Container$Y = newStyled.div(templateObject_1$
|
|
5945
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5946
|
+
var Container$Y = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5947
|
+
var Title$6 = newStyled.h1(templateObject_2$_ || (templateObject_2$_ = __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; });
|
|
5946
5948
|
var Details$1 = newStyled.span(templateObject_3$N || (templateObject_3$N = __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; });
|
|
5947
5949
|
var PriceContainer$2 = newStyled.span(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
5948
5950
|
var Simple = function (_a) {
|
|
@@ -5950,18 +5952,18 @@ var Simple = function (_a) {
|
|
|
5950
5952
|
var theme = useTheme();
|
|
5951
5953
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$Y, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5952
5954
|
};
|
|
5953
|
-
var templateObject_1$
|
|
5955
|
+
var templateObject_1$1u, templateObject_2$_, templateObject_3$N, templateObject_4$B;
|
|
5954
5956
|
|
|
5955
5957
|
var Bundle = {
|
|
5956
5958
|
Minimalistic: Minimalistic,
|
|
5957
5959
|
Simple: Simple,
|
|
5958
5960
|
};
|
|
5959
5961
|
|
|
5960
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
5962
|
+
var Container$X = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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) {
|
|
5961
5963
|
var displayBNPL = _a.displayBNPL;
|
|
5962
5964
|
return (displayBNPL ? 'flex' : 'none');
|
|
5963
5965
|
});
|
|
5964
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5966
|
+
var TextContainer$1 = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
5965
5967
|
var IconWrapper$1 = newStyled.div(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
5966
5968
|
var BuyNowPayLater = function (_a) {
|
|
5967
5969
|
var _b;
|
|
@@ -5974,41 +5976,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
5974
5976
|
}
|
|
5975
5977
|
return (jsxRuntime.jsx(Container$X, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5976
5978
|
};
|
|
5977
|
-
var templateObject_1$
|
|
5979
|
+
var templateObject_1$1t, templateObject_2$Z, templateObject_3$M;
|
|
5978
5980
|
|
|
5979
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5981
|
+
var Text$6 = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
5980
5982
|
var Title$5 = function (_a) {
|
|
5981
5983
|
var title = _a.title;
|
|
5982
5984
|
var theme = useTheme();
|
|
5983
5985
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5984
5986
|
};
|
|
5985
|
-
var templateObject_1$
|
|
5987
|
+
var templateObject_1$1s;
|
|
5986
5988
|
|
|
5987
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5989
|
+
var P$3 = newStyled.p(templateObject_1$1r || (templateObject_1$1r = __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; });
|
|
5988
5990
|
var Promo = function (_a) {
|
|
5989
5991
|
var text = _a.text;
|
|
5990
5992
|
var theme = useTheme();
|
|
5991
5993
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5992
5994
|
};
|
|
5993
|
-
var templateObject_1$
|
|
5995
|
+
var templateObject_1$1r;
|
|
5994
5996
|
|
|
5995
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
5997
|
+
var Text$5 = newStyled.span(templateObject_1$1q || (templateObject_1$1q = __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; });
|
|
5996
5998
|
var Description$1 = function (_a) {
|
|
5997
5999
|
var text = _a.text;
|
|
5998
6000
|
var theme = useTheme();
|
|
5999
6001
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6000
6002
|
};
|
|
6001
|
-
var templateObject_1$
|
|
6003
|
+
var templateObject_1$1q;
|
|
6002
6004
|
|
|
6003
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
6005
|
+
var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"); });
|
|
6004
6006
|
var CloseButton$1 = function (_a) {
|
|
6005
6007
|
var onClick = _a.onClick, size = _a.size;
|
|
6006
6008
|
var theme = useTheme();
|
|
6007
6009
|
return (jsxRuntime.jsx(Container$W, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6008
6010
|
};
|
|
6009
|
-
var templateObject_1$
|
|
6011
|
+
var templateObject_1$1p;
|
|
6010
6012
|
|
|
6011
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6013
|
+
var Text$4 = newStyled.h3(templateObject_1$1o || (templateObject_1$1o = __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) {
|
|
6012
6014
|
var backgroundColor = _a.backgroundColor;
|
|
6013
6015
|
return backgroundColor;
|
|
6014
6016
|
}, function (_a) {
|
|
@@ -6023,7 +6025,7 @@ var OfferBanner = function (_a) {
|
|
|
6023
6025
|
var theme = useTheme();
|
|
6024
6026
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6025
6027
|
};
|
|
6026
|
-
var templateObject_1$
|
|
6028
|
+
var templateObject_1$1o;
|
|
6027
6029
|
|
|
6028
6030
|
var CartProductItem = {
|
|
6029
6031
|
Title: Title$5,
|
|
@@ -6033,20 +6035,20 @@ var CartProductItem = {
|
|
|
6033
6035
|
CloseButton: CloseButton$1,
|
|
6034
6036
|
};
|
|
6035
6037
|
|
|
6036
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6037
|
-
var MobileContainer = newStyled(Container$V)(templateObject_2$
|
|
6038
|
+
var Container$V = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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"])));
|
|
6039
|
+
var MobileContainer = newStyled(Container$V)(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6038
6040
|
var DollarPart = newStyled.span(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
6039
6041
|
var ClubMembersText = newStyled.span(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
6040
6042
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6041
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6042
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6043
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6044
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6043
6045
|
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6044
6046
|
var ClubPriceLabel = function (_a) {
|
|
6045
6047
|
var clubPrice = _a.clubPrice;
|
|
6046
6048
|
var isMobile = useWindowDimensions().isMobile;
|
|
6047
6049
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$V, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6048
6050
|
};
|
|
6049
|
-
var templateObject_1$
|
|
6051
|
+
var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$n, templateObject_6$j, templateObject_7$d, templateObject_8$a;
|
|
6050
6052
|
|
|
6051
6053
|
var Spacing = function (_a) {
|
|
6052
6054
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6054,8 +6056,8 @@ var Spacing = function (_a) {
|
|
|
6054
6056
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6055
6057
|
};
|
|
6056
6058
|
|
|
6057
|
-
var Container$U = newStyled('div')(templateObject_1$
|
|
6058
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6059
|
+
var Container$U = newStyled('div')(templateObject_1$1m || (templateObject_1$1m = __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"])));
|
|
6060
|
+
var Content$2 = newStyled('div')(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
6059
6061
|
var BarContainer$1 = newStyled('div')(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
6060
6062
|
var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __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) {
|
|
6061
6063
|
var index = _a.index;
|
|
@@ -6068,12 +6070,12 @@ var StrengthBars = function (_a) {
|
|
|
6068
6070
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6069
6071
|
return (jsxRuntime.jsxs(Container$U, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6070
6072
|
};
|
|
6071
|
-
var templateObject_1$
|
|
6073
|
+
var templateObject_1$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z;
|
|
6072
6074
|
|
|
6073
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
6074
|
-
var templateObject_1$
|
|
6075
|
+
var Container$T = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6076
|
+
var templateObject_1$1l;
|
|
6075
6077
|
|
|
6076
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6078
|
+
var StarContainer = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6077
6079
|
var marginRight = _a.marginRight;
|
|
6078
6080
|
return marginRight;
|
|
6079
6081
|
});
|
|
@@ -6089,7 +6091,7 @@ var StarList = function (_a) {
|
|
|
6089
6091
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6090
6092
|
}) }, void 0));
|
|
6091
6093
|
};
|
|
6092
|
-
var templateObject_1$
|
|
6094
|
+
var templateObject_1$1k;
|
|
6093
6095
|
|
|
6094
6096
|
/* base styles & size variants */
|
|
6095
6097
|
var LabelStyles = {
|
|
@@ -6130,8 +6132,8 @@ var LabelStyles = {
|
|
|
6130
6132
|
});
|
|
6131
6133
|
},
|
|
6132
6134
|
};
|
|
6133
|
-
var Container$S = newStyled.a(templateObject_1$
|
|
6134
|
-
var templateObject_1$
|
|
6135
|
+
var Container$S = newStyled.a(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6136
|
+
var templateObject_1$1j;
|
|
6135
6137
|
|
|
6136
6138
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6137
6139
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6151,7 +6153,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6151
6153
|
}),
|
|
6152
6154
|
];
|
|
6153
6155
|
});
|
|
6154
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6156
|
+
var RatingLabel = newStyled.span(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6155
6157
|
var starsNumber = 5;
|
|
6156
6158
|
var Rating = function (_a) {
|
|
6157
6159
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6174,10 +6176,10 @@ var Rating = function (_a) {
|
|
|
6174
6176
|
: {};
|
|
6175
6177
|
return (jsxRuntime.jsxs(Container$S, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6176
6178
|
};
|
|
6177
|
-
var templateObject_1$
|
|
6179
|
+
var templateObject_1$1i;
|
|
6178
6180
|
|
|
6179
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6180
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6181
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6182
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6181
6183
|
var PriceContainer$1 = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6182
6184
|
var PriceWithTagContainer = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n gap: 5px;\n"], ["\n display: flex;\n gap: 5px;\n"])));
|
|
6183
6185
|
var RegularPriceTag = function () {
|
|
@@ -6232,7 +6234,7 @@ var PriceLabelV4 = function (_a) {
|
|
|
6232
6234
|
? finalPriceArray[0]
|
|
6233
6235
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6234
6236
|
};
|
|
6235
|
-
var templateObject_1$
|
|
6237
|
+
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y;
|
|
6236
6238
|
|
|
6237
6239
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6238
6240
|
var width = _a.width, height = _a.height;
|
|
@@ -6242,8 +6244,8 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6242
6244
|
height: height,
|
|
6243
6245
|
});
|
|
6244
6246
|
});
|
|
6245
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6246
|
-
var Container$R = newStyled.a(templateObject_2$
|
|
6247
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6248
|
+
var Container$R = newStyled.a(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6247
6249
|
var ProdCardContainer$1 = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6248
6250
|
var Title$4 = newStyled.p(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6249
6251
|
var getStylesBySize$9 = function (size) {
|
|
@@ -6275,11 +6277,11 @@ var TopTagContainer$5 = newStyled.div(templateObject_5$m || (templateObject_5$m
|
|
|
6275
6277
|
var style = _a.style;
|
|
6276
6278
|
return style.width;
|
|
6277
6279
|
});
|
|
6278
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_6$
|
|
6280
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6279
6281
|
var style = _a.style;
|
|
6280
6282
|
return style.width;
|
|
6281
6283
|
});
|
|
6282
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6284
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6283
6285
|
var ProductItemMobile = function (_a) {
|
|
6284
6286
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6285
6287
|
display: false,
|
|
@@ -6338,7 +6340,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6338
6340
|
};
|
|
6339
6341
|
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$R, __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$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$5, __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$R, __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));
|
|
6340
6342
|
};
|
|
6341
|
-
var templateObject_1$
|
|
6343
|
+
var templateObject_1$1g, templateObject_2$V, templateObject_3$I, templateObject_4$x, templateObject_5$m, templateObject_6$i, templateObject_7$c;
|
|
6342
6344
|
|
|
6343
6345
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6344
6346
|
var width = _a.width, height = _a.height;
|
|
@@ -6348,8 +6350,8 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6348
6350
|
height: height,
|
|
6349
6351
|
});
|
|
6350
6352
|
});
|
|
6351
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6352
|
-
var Container$Q = newStyled.a(templateObject_2$
|
|
6353
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6354
|
+
var Container$Q = newStyled.a(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6353
6355
|
var ProdCardContainer = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6354
6356
|
var Title$3 = newStyled.p(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6355
6357
|
var getStylesBySize$8 = function (size) {
|
|
@@ -6381,11 +6383,11 @@ var TopTagContainer$4 = newStyled.div(templateObject_5$l || (templateObject_5$l
|
|
|
6381
6383
|
var style = _a.style;
|
|
6382
6384
|
return style.width;
|
|
6383
6385
|
});
|
|
6384
|
-
var BottomTagContainer$4 = newStyled.div(templateObject_6$
|
|
6386
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6385
6387
|
var style = _a.style;
|
|
6386
6388
|
return style.width;
|
|
6387
6389
|
});
|
|
6388
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
6390
|
+
var MarginTopContainer = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6389
6391
|
var ProductItemTK = function (_a) {
|
|
6390
6392
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
6391
6393
|
display: false,
|
|
@@ -6436,9 +6438,9 @@ var ProductItemTK = function (_a) {
|
|
|
6436
6438
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6437
6439
|
} }, { children: title }), void 0)) : (jsx(Title$3, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.display && colorPicker.position === 'middle' && jsx(Fragment, { children: colorPicker.component }, void 0), (hasStrength === null || hasStrength === void 0 ? void 0 : 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: [customSizeRating ? (jsx(Rating, { size: customSizeRating, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)) : (jsx(RatingDisplay, {}, void 0)), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), 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), hasSpacing && jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6438
6440
|
};
|
|
6439
|
-
var templateObject_1$
|
|
6441
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$l, templateObject_6$h, templateObject_7$b;
|
|
6440
6442
|
|
|
6441
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
6443
|
+
var Container$P = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6442
6444
|
function withProductGrid(ProductItemComponent, data) {
|
|
6443
6445
|
function WithProductGrid(props) {
|
|
6444
6446
|
return (jsxRuntime.jsx(Container$P, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6448,7 +6450,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6448
6450
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6449
6451
|
return WithProductGrid;
|
|
6450
6452
|
}
|
|
6451
|
-
var templateObject_1$
|
|
6453
|
+
var templateObject_1$1e;
|
|
6452
6454
|
|
|
6453
6455
|
var Collection = {
|
|
6454
6456
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6495,8 +6497,8 @@ var OutOfStock = function (_a) {
|
|
|
6495
6497
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6496
6498
|
};
|
|
6497
6499
|
|
|
6498
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6499
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6500
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6501
|
+
newStyled(lt.Label)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6500
6502
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6501
6503
|
var Span = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6502
6504
|
var OptionsContainer = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
@@ -6517,23 +6519,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6517
6519
|
Option: Option,
|
|
6518
6520
|
OptionsContainer: OptionsContainer,
|
|
6519
6521
|
});
|
|
6520
|
-
var templateObject_1$
|
|
6522
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$G, templateObject_4$v, templateObject_5$k;
|
|
6521
6523
|
|
|
6522
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
6524
|
+
var Container$O = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
6523
6525
|
var borderColor = _a.borderColor;
|
|
6524
6526
|
return borderColor;
|
|
6525
6527
|
}, function (_a) {
|
|
6526
6528
|
var noStock = _a.noStock;
|
|
6527
6529
|
return (noStock ? '0.4' : '1');
|
|
6528
6530
|
});
|
|
6529
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6531
|
+
var Image$2 = newStyled.img(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6530
6532
|
var PatternSelector = function (_a) {
|
|
6531
6533
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6532
6534
|
var theme = useTheme();
|
|
6533
6535
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6534
6536
|
return (jsxRuntime.jsx(Container$O, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6535
6537
|
};
|
|
6536
|
-
var templateObject_1$
|
|
6538
|
+
var templateObject_1$1c, templateObject_2$S;
|
|
6537
6539
|
|
|
6538
6540
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6539
6541
|
if (options == null || options.length === 0) {
|
|
@@ -6592,21 +6594,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6592
6594
|
return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
|
|
6593
6595
|
};
|
|
6594
6596
|
|
|
6595
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6596
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6597
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
6598
|
+
var Col$1 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6597
6599
|
var Row$2 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
6598
6600
|
return props.rightToLeft &&
|
|
6599
6601
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6600
6602
|
});
|
|
6601
6603
|
var H5 = newStyled.h5(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6602
6604
|
var H3$1 = newStyled.h3(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6603
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6605
|
+
var FreeShipping = newStyled.span(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6604
6606
|
var CrossSellCheckbox = function (_a) {
|
|
6605
6607
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6606
6608
|
var theme = useTheme();
|
|
6607
6609
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6608
6610
|
};
|
|
6609
|
-
var templateObject_1$
|
|
6611
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$j, templateObject_6$g;
|
|
6610
6612
|
|
|
6611
6613
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6612
6614
|
__proto__: null,
|
|
@@ -6634,7 +6636,7 @@ var sizeMapper = (_a = {},
|
|
|
6634
6636
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6635
6637
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6636
6638
|
_a);
|
|
6637
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6639
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
6638
6640
|
var wide = _a.wide;
|
|
6639
6641
|
return (wide ? '100%' : 'fit-content');
|
|
6640
6642
|
}, function (_a) {
|
|
@@ -6656,8 +6658,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$19 || (templateObj
|
|
|
6656
6658
|
var theme = _a.theme;
|
|
6657
6659
|
return theme.colors.text.disabled;
|
|
6658
6660
|
});
|
|
6659
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6660
|
-
var templateObject_1$
|
|
6661
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6662
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
6661
6663
|
|
|
6662
6664
|
var BaseCTA = function (_a) {
|
|
6663
6665
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6724,8 +6726,8 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6724
6726
|
} }), void 0));
|
|
6725
6727
|
};
|
|
6726
6728
|
|
|
6727
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
6728
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6729
|
+
var Container$N = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
6730
|
+
var IconContainer$4 = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
6729
6731
|
var Text$3 = newStyled.p(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6730
6732
|
var Details = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
6731
6733
|
var Note = function (_a) {
|
|
@@ -6733,13 +6735,13 @@ var Note = function (_a) {
|
|
|
6733
6735
|
var theme = useTheme();
|
|
6734
6736
|
return (jsxRuntime.jsxs(Container$N, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6735
6737
|
};
|
|
6736
|
-
var templateObject_1$
|
|
6738
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t;
|
|
6737
6739
|
|
|
6738
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6740
|
+
var Title$2 = newStyled.h1(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
6739
6741
|
var theme = _a.theme;
|
|
6740
6742
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
6741
6743
|
});
|
|
6742
|
-
var Line = newStyled.div(templateObject_2$
|
|
6744
|
+
var Line = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
6743
6745
|
var Row$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
6744
6746
|
flexDirection: ['column', 'row'],
|
|
6745
6747
|
}));
|
|
@@ -6755,13 +6757,13 @@ var IconContainer$3 = newStyled.div(templateObject_5$i || (templateObject_5$i =
|
|
|
6755
6757
|
marginBottom: ['10px', '0'],
|
|
6756
6758
|
width: ['auto', '1.5rem'],
|
|
6757
6759
|
}));
|
|
6758
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6760
|
+
var SectionTitle = newStyled.h1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
6759
6761
|
display: ['block', 'flex'],
|
|
6760
6762
|
}), function (_a) {
|
|
6761
6763
|
var theme = _a.theme;
|
|
6762
6764
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
6763
6765
|
});
|
|
6764
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6766
|
+
var SectionDetails = newStyled.p(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
6765
6767
|
var theme = _a.theme;
|
|
6766
6768
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
6767
6769
|
}, function (_a) {
|
|
@@ -6778,16 +6780,16 @@ var DeliveryDetails = function (_a) {
|
|
|
6778
6780
|
var theme = useTheme();
|
|
6779
6781
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6780
6782
|
};
|
|
6781
|
-
var templateObject_1$
|
|
6783
|
+
var templateObject_1$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$i, templateObject_6$f, templateObject_7$a, templateObject_8$9;
|
|
6782
6784
|
|
|
6783
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6785
|
+
var Backdrop = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
6784
6786
|
var top = _a.top;
|
|
6785
6787
|
return top;
|
|
6786
6788
|
}, function (_a) {
|
|
6787
6789
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6788
6790
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6789
6791
|
});
|
|
6790
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6792
|
+
var Sidebar = newStyled.div(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
6791
6793
|
var height = _a.height;
|
|
6792
6794
|
return height;
|
|
6793
6795
|
}, function (_a) {
|
|
@@ -6834,20 +6836,20 @@ var Drawer = function (_a) {
|
|
|
6834
6836
|
}, [isOpen, onClose, onOpen]);
|
|
6835
6837
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6836
6838
|
};
|
|
6837
|
-
var templateObject_1$
|
|
6839
|
+
var templateObject_1$17, templateObject_2$N;
|
|
6838
6840
|
|
|
6839
6841
|
var TooltipArrow = function (_a) {
|
|
6840
6842
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6841
6843
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
6842
6844
|
};
|
|
6843
6845
|
|
|
6844
|
-
var List = newStyled.ul(templateObject_1$
|
|
6845
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6846
|
+
var List = newStyled.ul(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6847
|
+
var Item$2 = newStyled.li(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
6846
6848
|
var DropdownWrapper = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
6847
6849
|
var ArrowContainer$1 = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
6848
6850
|
var StyledDropdown = newStyled.ul(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
6849
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
6850
|
-
var templateObject_1$
|
|
6851
|
+
var DropdownItem = newStyled.li(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
6852
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$h, templateObject_6$e;
|
|
6851
6853
|
|
|
6852
6854
|
var DropdownListIcons = function (_a) {
|
|
6853
6855
|
var items = _a.items;
|
|
@@ -6860,13 +6862,13 @@ var Dropdown = function (_a) {
|
|
|
6860
6862
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
6861
6863
|
};
|
|
6862
6864
|
|
|
6863
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
6864
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6865
|
+
var DropdownContainer = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
6866
|
+
var DropdownLabel = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
6865
6867
|
var SizeLabel = newStyled.span(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6866
6868
|
var DetailLabel = newStyled.span(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
6867
6869
|
var DropdownOptions = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
6868
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
6869
|
-
var templateObject_1$
|
|
6870
|
+
var DropdownOption = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
6871
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$B, templateObject_4$q, templateObject_5$g, templateObject_6$d;
|
|
6870
6872
|
|
|
6871
6873
|
var SizeDropdown = function (_a) {
|
|
6872
6874
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6889,8 +6891,8 @@ var SizeDropdown = function (_a) {
|
|
|
6889
6891
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
6890
6892
|
};
|
|
6891
6893
|
|
|
6892
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6893
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6894
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6895
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6894
6896
|
var DialogDropdownListItem = newStyled.li(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
6895
6897
|
var DialogDropdownLink = newStyled.a(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
6896
6898
|
var DropdownDialog = function (_a) {
|
|
@@ -6901,7 +6903,7 @@ var DropdownDialog = function (_a) {
|
|
|
6901
6903
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6902
6904
|
}) }), void 0) }), void 0));
|
|
6903
6905
|
};
|
|
6904
|
-
var templateObject_1$
|
|
6906
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$A, templateObject_4$p;
|
|
6905
6907
|
|
|
6906
6908
|
function FilteringDropdown(_a) {
|
|
6907
6909
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -6934,8 +6936,8 @@ function FilteringDropdown(_a) {
|
|
|
6934
6936
|
}) }, void 0)] }), void 0));
|
|
6935
6937
|
}
|
|
6936
6938
|
|
|
6937
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
6938
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6939
|
+
var Title$1 = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
6940
|
+
var H3 = newStyled.h3(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
6939
6941
|
var ArrowContainer = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6940
6942
|
var Container$M = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
6941
6943
|
var Accordion = function (_a) {
|
|
@@ -6944,19 +6946,19 @@ var Accordion = function (_a) {
|
|
|
6944
6946
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6945
6947
|
return (jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
6946
6948
|
};
|
|
6947
|
-
var templateObject_1$
|
|
6949
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$z, templateObject_4$o;
|
|
6948
6950
|
|
|
6949
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6950
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6951
|
+
var SectionContent = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
6952
|
+
var Header$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
6951
6953
|
var MobileHeader = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
6952
6954
|
var MobileIconsContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
6953
6955
|
var H4 = newStyled.h4(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6954
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
6955
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
6956
|
+
var FilterLink = newStyled.a(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6957
|
+
var OptionContainer = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
6956
6958
|
var ClearAll = newStyled.span(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
6957
6959
|
var MobileFooter = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6958
6960
|
var MobileClearContainer = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
6959
|
-
var templateObject_1$
|
|
6961
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$y, templateObject_4$n, templateObject_5$f, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$4, templateObject_10$3;
|
|
6960
6962
|
|
|
6961
6963
|
var getStylesBySize$7 = function (size, theme) {
|
|
6962
6964
|
switch (size) {
|
|
@@ -7021,8 +7023,8 @@ var SelectorSecondary = function (_a) {
|
|
|
7021
7023
|
} }), id: id }, void 0));
|
|
7022
7024
|
};
|
|
7023
7025
|
|
|
7024
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7025
|
-
var LI = newStyled.li(templateObject_2$
|
|
7026
|
+
var UL = newStyled.ul(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
7027
|
+
var LI = newStyled.li(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
7026
7028
|
var CloseIconContainer = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
7027
7029
|
var Tags = function (_a) {
|
|
7028
7030
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
@@ -7031,7 +7033,7 @@ var Tags = function (_a) {
|
|
|
7031
7033
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7032
7034
|
}) }), void 0));
|
|
7033
7035
|
};
|
|
7034
|
-
var templateObject_1$
|
|
7036
|
+
var templateObject_1$11, templateObject_2$H, templateObject_3$x;
|
|
7035
7037
|
|
|
7036
7038
|
var Filters = function (_a) {
|
|
7037
7039
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, _c = _a.showSelectedNumberInSection, showSelectedNumberInSection = _c === void 0 ? false : _c, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -7167,8 +7169,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7167
7169
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7168
7170
|
};
|
|
7169
7171
|
|
|
7170
|
-
var Wrapper$4 = newStyled.div(templateObject_1
|
|
7171
|
-
var Container$L = newStyled.div(templateObject_2$
|
|
7172
|
+
var Wrapper$4 = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
7173
|
+
var Container$L = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7172
7174
|
var FitGuarantee = function (_a) {
|
|
7173
7175
|
var _b;
|
|
7174
7176
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#FFF6EF' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '#E7C9B2' : _d, title = _a.title, description = _a.description, _e = _a.widthAuto, widthAuto = _e === void 0 ? false : _e, _f = _a.testId, testId = _f === void 0 ? 'FitGuarantee' : _f, _g = _a.iconFolder, iconFolder = _g === void 0 ? 'Custom' : _g, _h = _a.iconName, iconName = _h === void 0 ? 'SixtyDaysGuarantee' : _h, _j = _a.iconWidth, iconWidth = _j === void 0 ? 3.7 : _j, _k = _a.iconHeight, iconHeight = _k === void 0 ? 3.38 : _k;
|
|
@@ -7186,10 +7188,10 @@ var FitGuarantee = function (_a) {
|
|
|
7186
7188
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7187
7189
|
} }, { children: title }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7188
7190
|
};
|
|
7189
|
-
var templateObject_1
|
|
7191
|
+
var templateObject_1$10, templateObject_2$G;
|
|
7190
7192
|
|
|
7191
|
-
var Container$K = newStyled.div(templateObject_1
|
|
7192
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7193
|
+
var Container$K = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
7194
|
+
var P$2 = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7193
7195
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7194
7196
|
border: 'none',
|
|
7195
7197
|
background: 'transparent',
|
|
@@ -7204,7 +7206,7 @@ var FitPredictor = function (_a) {
|
|
|
7204
7206
|
var theme = useTheme();
|
|
7205
7207
|
return (jsxs(Container$K, __assign$1({ theme: theme }, { children: [jsx(Container$K, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7206
7208
|
};
|
|
7207
|
-
var templateObject_1
|
|
7209
|
+
var templateObject_1$$, templateObject_2$F;
|
|
7208
7210
|
|
|
7209
7211
|
var Button$6 = newStyled.button(function () { return ({
|
|
7210
7212
|
background: 'transparent',
|
|
@@ -11448,14 +11450,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11448
11450
|
return Slider;
|
|
11449
11451
|
}(React__default["default"].Component);
|
|
11450
11452
|
|
|
11451
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11453
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
11452
11454
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11453
11455
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11454
11456
|
}, function (_a) {
|
|
11455
11457
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11456
11458
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11457
11459
|
});
|
|
11458
|
-
var templateObject_1$
|
|
11460
|
+
var templateObject_1$_;
|
|
11459
11461
|
|
|
11460
11462
|
var getStylesBySize$6 = function (size) {
|
|
11461
11463
|
// rem units
|
|
@@ -11514,7 +11516,7 @@ var SliderNavigation = function (_a) {
|
|
|
11514
11516
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
11515
11517
|
};
|
|
11516
11518
|
|
|
11517
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11519
|
+
var Image$1 = newStyled.img(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11518
11520
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11519
11521
|
return borderRadiusVariant &&
|
|
11520
11522
|
"\nborder-radius: 20px;\n";
|
|
@@ -11529,10 +11531,10 @@ var ImageSmallPreview = function (_a) {
|
|
|
11529
11531
|
var theme = useTheme();
|
|
11530
11532
|
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
11531
11533
|
};
|
|
11532
|
-
var templateObject_1$
|
|
11534
|
+
var templateObject_1$Z;
|
|
11533
11535
|
|
|
11534
|
-
var horizontalStyles = css(templateObject_1$
|
|
11535
|
-
var verticalStyles = css(templateObject_2$
|
|
11536
|
+
var horizontalStyles = css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
11537
|
+
var verticalStyles = css(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
11536
11538
|
var Container$J = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11537
11539
|
var position = _a.position;
|
|
11538
11540
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
@@ -11543,8 +11545,8 @@ var Container$J = newStyled.div(templateObject_3$w || (templateObject_3$w = __ma
|
|
|
11543
11545
|
});
|
|
11544
11546
|
var Button$5 = newStyled.button(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
11545
11547
|
var ArrowsContainer = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
11546
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11547
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11548
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11549
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11548
11550
|
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11549
11551
|
var ImagePreviewList = function (_a) {
|
|
11550
11552
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows;
|
|
@@ -11562,7 +11564,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11562
11564
|
arrowPadding: 1.625,
|
|
11563
11565
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11564
11566
|
};
|
|
11565
|
-
var templateObject_1$
|
|
11567
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$7;
|
|
11566
11568
|
|
|
11567
11569
|
var propTypes = {exports: {}};
|
|
11568
11570
|
|
|
@@ -13155,27 +13157,33 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13155
13157
|
afterZoomOut: PropTypes.func
|
|
13156
13158
|
} : {};
|
|
13157
13159
|
|
|
13158
|
-
var
|
|
13159
|
-
var
|
|
13160
|
-
var
|
|
13161
|
-
var HTMLVideo = newStyled.video(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13162
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13163
|
-
var PlayContainer = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13164
|
-
var PauseContainer = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"])));
|
|
13165
|
-
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$d, templateObject_6$b, templateObject_7$8;
|
|
13160
|
+
var ProgressContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: relative;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: relative;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
13161
|
+
var ProgressFiller = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13162
|
+
var templateObject_1$X, templateObject_2$D;
|
|
13166
13163
|
|
|
13167
13164
|
var ProgressBar$1 = function (_a) {
|
|
13168
|
-
var
|
|
13169
|
-
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar" }, { children: jsxRuntime.jsx(ProgressFiller, { progress:
|
|
13170
|
-
};
|
|
13165
|
+
var progress = _a.progress, hide = _a.hide;
|
|
13166
|
+
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13167
|
+
};
|
|
13168
|
+
|
|
13169
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13170
|
+
var HTMLVideo = newStyled.video(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13171
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13172
|
+
var PlayContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13173
|
+
var PauseContainer = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"])));
|
|
13174
|
+
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$d;
|
|
13175
|
+
|
|
13171
13176
|
var Video$1 = function (_a) {
|
|
13177
|
+
var _b, _c, _d, _e;
|
|
13172
13178
|
var source = _a.source, thumbnail = _a.thumbnail;
|
|
13173
13179
|
var videoRef = React$2.useRef(null);
|
|
13174
|
-
var
|
|
13175
|
-
var
|
|
13176
|
-
var
|
|
13177
|
-
var
|
|
13180
|
+
var _f = React$2.useState(true), isLoading = _f[0], setIsLoading = _f[1];
|
|
13181
|
+
var _g = React$2.useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
|
|
13182
|
+
var _h = React$2.useState(0), videoProgress = _h[0], setVideoProgress = _h[1];
|
|
13183
|
+
var _j = React$2.useState(false), debouncePlay = _j[0], setDebouncePlay = _j[1];
|
|
13178
13184
|
var isStarted = videoProgress > 0;
|
|
13185
|
+
var progress = videoProgress / ((_c = (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.duration) !== null && _c !== void 0 ? _c : 0);
|
|
13186
|
+
var hideProgressBar = videoProgress === ((_e = (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 0) || videoProgress === 0;
|
|
13179
13187
|
var handlePlayClick = function () {
|
|
13180
13188
|
if (videoRef.current && !debouncePlay) {
|
|
13181
13189
|
setDebouncePlay(true);
|
|
@@ -13197,20 +13205,12 @@ var Video$1 = function (_a) {
|
|
|
13197
13205
|
setIsPlaying(false);
|
|
13198
13206
|
}
|
|
13199
13207
|
};
|
|
13200
|
-
// useEffect(() => {
|
|
13201
|
-
// const interval = setInterval(() => {
|
|
13202
|
-
// if (videoRef.current) {
|
|
13203
|
-
// setVideoProgress(videoRef.current.currentTime / videoRef.current.duration);
|
|
13204
|
-
// }
|
|
13205
|
-
// }, 25);
|
|
13206
|
-
// return () => clearInterval(interval);
|
|
13207
|
-
// }, []);
|
|
13208
13208
|
var onTimeUpdate = function () {
|
|
13209
13209
|
if (videoRef.current) {
|
|
13210
|
-
setVideoProgress(videoRef.current.currentTime
|
|
13210
|
+
setVideoProgress(videoRef.current.currentTime);
|
|
13211
13211
|
}
|
|
13212
13212
|
};
|
|
13213
|
-
return (jsxRuntime.jsxs(Container$I, { children: [!isLoading && jsxRuntime.jsx(ProgressBar$1, {
|
|
13213
|
+
return (jsxRuntime.jsxs(Container$I, { children: [!isLoading && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({ "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); } }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13214
13214
|
};
|
|
13215
13215
|
|
|
13216
13216
|
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|