@trafilea/afrodita-components 6.8.13 → 6.8.14
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.css +2 -1
- package/build/index.d.ts +55 -44
- package/build/index.esm.css +2 -1
- package/build/index.esm.js +677 -567
- package/build/index.esm.js.map +1 -1
- package/build/index.js +677 -566
- 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$
|
|
3154
|
+
var Container$1c = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __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) {
|
|
@@ -3176,11 +3176,11 @@ var Container$1a = newStyled.div(templateObject_1$1W || (templateObject_1$1W = _
|
|
|
3176
3176
|
var SkeletonBox = function (_a) {
|
|
3177
3177
|
var width = _a.width, height = _a.height;
|
|
3178
3178
|
var theme = useTheme();
|
|
3179
|
-
return jsxRuntime.jsx(Container$
|
|
3179
|
+
return jsxRuntime.jsx(Container$1c, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3180
3180
|
};
|
|
3181
|
-
var templateObject_1$
|
|
3181
|
+
var templateObject_1$1Y;
|
|
3182
3182
|
|
|
3183
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3183
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1X || (templateObject_1$1X = __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$1V || (templateObject_1$1V
|
|
|
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$1h || (templateObject_2$1h = __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$1g || (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$1X, templateObject_2$1h;
|
|
3213
3213
|
|
|
3214
3214
|
/* eslint-disable no-undef */
|
|
3215
3215
|
var cache = new Map();
|
|
@@ -4127,9 +4127,9 @@ function jsxs(type, props, key) {
|
|
|
4127
4127
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4128
4128
|
// `variants` styles that are consistent through all themes.
|
|
4129
4129
|
var TAGS = {
|
|
4130
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4131
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4132
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4130
|
+
hero1: newStyled.h1(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject([""], [""]))),
|
|
4131
|
+
hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
|
|
4132
|
+
hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
|
|
4133
4133
|
display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
|
|
4134
4134
|
display2: newStyled.h2(templateObject_5$t || (templateObject_5$t = __makeTemplateObject([""], [""]))),
|
|
4135
4135
|
display3: newStyled.h3(templateObject_6$o || (templateObject_6$o = __makeTemplateObject([""], [""]))),
|
|
@@ -4263,17 +4263,17 @@ var DEFAULTS = {
|
|
|
4263
4263
|
size: 'regular',
|
|
4264
4264
|
},
|
|
4265
4265
|
};
|
|
4266
|
-
var templateObject_1$
|
|
4266
|
+
var templateObject_1$1W, templateObject_2$1g, templateObject_3$Z, templateObject_4$I, templateObject_5$t, 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;
|
|
4267
4267
|
|
|
4268
|
-
var Container$
|
|
4269
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4270
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4268
|
+
var Container$1b = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __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"])));
|
|
4269
|
+
var Card$3 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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"])));
|
|
4270
|
+
var Tag$2 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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"])));
|
|
4271
4271
|
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"])));
|
|
4272
4272
|
var Check$1 = newStyled.div(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
4273
4273
|
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"])));
|
|
4274
4274
|
var PackSelectorV2 = function (_a) {
|
|
4275
4275
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4276
|
-
return (jsxRuntime.jsx(Container$
|
|
4276
|
+
return (jsxRuntime.jsx(Container$1b, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4277
4277
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4278
4278
|
}) }), void 0));
|
|
4279
4279
|
};
|
|
@@ -4295,27 +4295,27 @@ var PackCard$1 = function (_a) {
|
|
|
4295
4295
|
currency: currencyCode || 'USD',
|
|
4296
4296
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4297
4297
|
};
|
|
4298
|
-
var templateObject_1$
|
|
4298
|
+
var templateObject_1$1V, templateObject_2$1f, templateObject_3$Y, templateObject_4$H, templateObject_5$s, templateObject_6$n;
|
|
4299
4299
|
|
|
4300
|
-
var Container$
|
|
4301
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4300
|
+
var Container$1a = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4301
|
+
var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4302
4302
|
var DropList = function (_a) {
|
|
4303
4303
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4304
|
-
return (jsxRuntime.jsx(Container$
|
|
4304
|
+
return (jsxRuntime.jsx(Container$1a, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4305
4305
|
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));
|
|
4306
4306
|
}) }, void 0));
|
|
4307
4307
|
};
|
|
4308
|
-
var templateObject_1$
|
|
4308
|
+
var templateObject_1$1U, templateObject_2$1e;
|
|
4309
4309
|
|
|
4310
4310
|
var DROPS_TOTAL = 5;
|
|
4311
|
-
var Container$
|
|
4312
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4313
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4311
|
+
var Container$19 = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4312
|
+
var Title$8 = newStyled.p(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
4313
|
+
var Description$3 = newStyled.p(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
4314
4314
|
var AbsorbencyLevel = function (_a) {
|
|
4315
4315
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4316
|
-
return (jsxRuntime.jsxs(Container$
|
|
4316
|
+
return (jsxRuntime.jsxs(Container$19, { 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));
|
|
4317
4317
|
};
|
|
4318
|
-
var templateObject_1$
|
|
4318
|
+
var templateObject_1$1T, templateObject_2$1d, templateObject_3$X;
|
|
4319
4319
|
|
|
4320
4320
|
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(`
|
|
4321
4321
|
`),"","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(`
|
|
@@ -4391,7 +4391,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4391
4391
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4392
4392
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4393
4393
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4394
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4394
|
+
var StyledContent = newStyled.button(templateObject_1$1S || (templateObject_1$1S = __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"])));
|
|
4395
4395
|
var Accordion$1 = function (_a) {
|
|
4396
4396
|
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;
|
|
4397
4397
|
var theme = useTheme();
|
|
@@ -4415,9 +4415,9 @@ var Accordion$1 = function (_a) {
|
|
|
4415
4415
|
} }, { 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));
|
|
4416
4416
|
} }), void 0));
|
|
4417
4417
|
};
|
|
4418
|
-
var templateObject_1$
|
|
4418
|
+
var templateObject_1$1S;
|
|
4419
4419
|
|
|
4420
|
-
var Container$
|
|
4420
|
+
var Container$18 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4421
4421
|
var AccordionOptions = function (_a) {
|
|
4422
4422
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4423
4423
|
var _b = React$2.useState({
|
|
@@ -4430,7 +4430,7 @@ var AccordionOptions = function (_a) {
|
|
|
4430
4430
|
}
|
|
4431
4431
|
return false;
|
|
4432
4432
|
};
|
|
4433
|
-
return (jsxRuntime.jsx(Container$
|
|
4433
|
+
return (jsxRuntime.jsx(Container$18, { children: accordions.map(function (accordion, index) {
|
|
4434
4434
|
var forceOpenValue = getForceOpen(index);
|
|
4435
4435
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4436
4436
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4441,7 +4441,7 @@ var AccordionOptions = function (_a) {
|
|
|
4441
4441
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4442
4442
|
}) }, void 0));
|
|
4443
4443
|
};
|
|
4444
|
-
var templateObject_1$
|
|
4444
|
+
var templateObject_1$1R;
|
|
4445
4445
|
|
|
4446
4446
|
exports.CardSectionType = void 0;
|
|
4447
4447
|
(function (CardSectionType) {
|
|
@@ -4603,14 +4603,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4603
4603
|
literal: true,
|
|
4604
4604
|
});
|
|
4605
4605
|
|
|
4606
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4607
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4606
|
+
var ErrorText = newStyled.h3(templateObject_1$1Q || (templateObject_1$1Q = __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; });
|
|
4607
|
+
var ErrorContainer = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
4608
4608
|
var Error$1 = function (_a) {
|
|
4609
4609
|
var error = _a.error;
|
|
4610
4610
|
var theme = useTheme();
|
|
4611
4611
|
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));
|
|
4612
4612
|
};
|
|
4613
|
-
var templateObject_1$
|
|
4613
|
+
var templateObject_1$1Q, templateObject_2$1c;
|
|
4614
4614
|
|
|
4615
4615
|
var BaseSelectButton = function (_a) {
|
|
4616
4616
|
var children = _a.children, as = _a.as;
|
|
@@ -4627,7 +4627,7 @@ function BaseSelectOption(_a) {
|
|
|
4627
4627
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4628
4628
|
}
|
|
4629
4629
|
|
|
4630
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4630
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4631
4631
|
function BaseSelect(_a) {
|
|
4632
4632
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4633
4633
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4637,7 +4637,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4637
4637
|
Options: BaseSelectOptions,
|
|
4638
4638
|
Option: BaseSelectOption,
|
|
4639
4639
|
});
|
|
4640
|
-
var templateObject_1$
|
|
4640
|
+
var templateObject_1$1P;
|
|
4641
4641
|
|
|
4642
4642
|
var CustomButton = newStyled.button(function (_a) {
|
|
4643
4643
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4676,7 +4676,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4676
4676
|
});
|
|
4677
4677
|
});
|
|
4678
4678
|
//TODO Remove this when we find the real solution
|
|
4679
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4679
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4680
4680
|
var open = _a.open;
|
|
4681
4681
|
return open &&
|
|
4682
4682
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4696,7 +4696,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4696
4696
|
} }), void 0));
|
|
4697
4697
|
};
|
|
4698
4698
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4699
|
-
var templateObject_1$
|
|
4699
|
+
var templateObject_1$1O;
|
|
4700
4700
|
|
|
4701
4701
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4702
4702
|
var theme = _a.theme;
|
|
@@ -4863,7 +4863,7 @@ var CustomCheckboxStyles = {
|
|
|
4863
4863
|
},
|
|
4864
4864
|
};
|
|
4865
4865
|
|
|
4866
|
-
var Container$
|
|
4866
|
+
var Container$17 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __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"])));
|
|
4867
4867
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4868
4868
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4869
4869
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4874,7 +4874,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4874
4874
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4875
4875
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4876
4876
|
]; });
|
|
4877
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4877
|
+
var Input$5 = newStyled.input(templateObject_2$1b || (templateObject_2$1b = __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) {
|
|
4878
4878
|
var disabled = _a.disabled;
|
|
4879
4879
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4880
4880
|
});
|
|
@@ -4888,9 +4888,9 @@ var Checkbox = function (_a) {
|
|
|
4888
4888
|
}
|
|
4889
4889
|
onChange(e.target.checked);
|
|
4890
4890
|
};
|
|
4891
|
-
return (jsxRuntime.jsxs(Container$
|
|
4891
|
+
return (jsxRuntime.jsxs(Container$17, { 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));
|
|
4892
4892
|
};
|
|
4893
|
-
var templateObject_1$
|
|
4893
|
+
var templateObject_1$1N, templateObject_2$1b;
|
|
4894
4894
|
|
|
4895
4895
|
var CustomOption = newStyled.li(function (_a) {
|
|
4896
4896
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4939,8 +4939,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4939
4939
|
Option: BaseDropdownOption,
|
|
4940
4940
|
});
|
|
4941
4941
|
|
|
4942
|
-
var Container$
|
|
4943
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4942
|
+
var Container$16 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
4943
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
4944
4944
|
function SimpleDropdown(_a) {
|
|
4945
4945
|
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;
|
|
4946
4946
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4969,10 +4969,10 @@ function SimpleDropdown(_a) {
|
|
|
4969
4969
|
}
|
|
4970
4970
|
setSelectedValue(value);
|
|
4971
4971
|
}, [value, options, initialValue]);
|
|
4972
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4972
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$16 : React$2.Fragment;
|
|
4973
4973
|
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));
|
|
4974
4974
|
}
|
|
4975
|
-
var templateObject_1$
|
|
4975
|
+
var templateObject_1$1M, templateObject_2$1a;
|
|
4976
4976
|
|
|
4977
4977
|
/* base styles & size variants */
|
|
4978
4978
|
var CustomRadioStyles$2 = {
|
|
@@ -5037,9 +5037,9 @@ var ContainerStyles$2 = {
|
|
|
5037
5037
|
},
|
|
5038
5038
|
};
|
|
5039
5039
|
|
|
5040
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5041
|
-
var Container$
|
|
5042
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5040
|
+
var Wrapper$7 = 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"])));
|
|
5041
|
+
var Container$15 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5042
|
+
var Input$4 = newStyled.input(templateObject_2$19 || (templateObject_2$19 = __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) {
|
|
5043
5043
|
var disabled = _a.disabled;
|
|
5044
5044
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5045
5045
|
});
|
|
@@ -5047,7 +5047,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5047
5047
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5048
5048
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5049
5049
|
]; });
|
|
5050
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
5050
|
+
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5051
5051
|
var theme = _a.theme;
|
|
5052
5052
|
return theme.component.radio.textSize;
|
|
5053
5053
|
}, function (_a) {
|
|
@@ -5061,9 +5061,9 @@ var RadioInput = function (_a) {
|
|
|
5061
5061
|
var value = event.currentTarget.value;
|
|
5062
5062
|
onChange({ value: value, label: label });
|
|
5063
5063
|
};
|
|
5064
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5064
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$15, __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));
|
|
5065
5065
|
};
|
|
5066
|
-
var templateObject_1$
|
|
5066
|
+
var templateObject_1$1L, templateObject_2$19, templateObject_3$W;
|
|
5067
5067
|
|
|
5068
5068
|
var getWrapperFlexDirection = function (position) {
|
|
5069
5069
|
switch (position) {
|
|
@@ -5114,7 +5114,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5114
5114
|
}
|
|
5115
5115
|
};
|
|
5116
5116
|
|
|
5117
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5117
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __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) {
|
|
5118
5118
|
var position = _a.position;
|
|
5119
5119
|
return getWrapperFlexDirection(position);
|
|
5120
5120
|
}, function (_a) {
|
|
@@ -5124,7 +5124,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __ma
|
|
|
5124
5124
|
var disableHover = _a.disableHover;
|
|
5125
5125
|
return (disableHover ? 0 : 1);
|
|
5126
5126
|
});
|
|
5127
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5127
|
+
var TooltipContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __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) {
|
|
5128
5128
|
var position = _a.position;
|
|
5129
5129
|
return getContainerFlexDirection(position);
|
|
5130
5130
|
}, function (_a) {
|
|
@@ -5152,7 +5152,7 @@ var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17
|
|
|
5152
5152
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5153
5153
|
return actual === expected ? margin : '0';
|
|
5154
5154
|
};
|
|
5155
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5155
|
+
var ContentWrapper = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5156
5156
|
var borderColor = _a.borderColor;
|
|
5157
5157
|
return borderColor;
|
|
5158
5158
|
}, function (_a) {
|
|
@@ -5170,7 +5170,7 @@ var Title$7 = newStyled.h1(templateObject_6$m || (templateObject_6$m = __makeTem
|
|
|
5170
5170
|
});
|
|
5171
5171
|
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"])));
|
|
5172
5172
|
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"])));
|
|
5173
|
-
var templateObject_1$
|
|
5173
|
+
var templateObject_1$1K, templateObject_2$18, templateObject_3$V, templateObject_4$G, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$c;
|
|
5174
5174
|
|
|
5175
5175
|
var useOnClickOutside = function (ref, handler) {
|
|
5176
5176
|
React$2.useEffect(function () {
|
|
@@ -5312,7 +5312,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5312
5312
|
};
|
|
5313
5313
|
}
|
|
5314
5314
|
};
|
|
5315
|
-
var Container$
|
|
5315
|
+
var Container$14 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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) {
|
|
5316
5316
|
var backgroundColor = _a.backgroundColor;
|
|
5317
5317
|
return backgroundColor;
|
|
5318
5318
|
}, function (_a) {
|
|
@@ -5334,7 +5334,7 @@ var Container$12 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5334
5334
|
var size = _a.size;
|
|
5335
5335
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5336
5336
|
});
|
|
5337
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5337
|
+
var H3$3 = newStyled.h3(templateObject_2$17 || (templateObject_2$17 = __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) {
|
|
5338
5338
|
var textColor = _a.textColor;
|
|
5339
5339
|
return textColor;
|
|
5340
5340
|
}, function (_a) {
|
|
@@ -5349,9 +5349,9 @@ var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5349
5349
|
var ClubOfferTag = function (_a) {
|
|
5350
5350
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5351
5351
|
var theme = useTheme();
|
|
5352
|
-
return (jsxRuntime.jsx(Container$
|
|
5352
|
+
return (jsxRuntime.jsx(Container$14, __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));
|
|
5353
5353
|
};
|
|
5354
|
-
var templateObject_1$
|
|
5354
|
+
var templateObject_1$1J, templateObject_2$17;
|
|
5355
5355
|
|
|
5356
5356
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5357
5357
|
var _a, _b, _c;
|
|
@@ -5382,7 +5382,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5382
5382
|
};
|
|
5383
5383
|
}
|
|
5384
5384
|
};
|
|
5385
|
-
var Container$
|
|
5385
|
+
var Container$13 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
5386
5386
|
var backgroundColor = _a.backgroundColor;
|
|
5387
5387
|
return backgroundColor;
|
|
5388
5388
|
}, function (_a) {
|
|
@@ -5404,7 +5404,7 @@ var Container$11 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5404
5404
|
var size = _a.size;
|
|
5405
5405
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5406
5406
|
});
|
|
5407
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5407
|
+
var H3$2 = 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) {
|
|
5408
5408
|
var textColor = _a.textColor;
|
|
5409
5409
|
return textColor;
|
|
5410
5410
|
}, function (_a) {
|
|
@@ -5419,9 +5419,9 @@ var H3$2 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __makeTemp
|
|
|
5419
5419
|
var DiscountTag = function (_a) {
|
|
5420
5420
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5421
5421
|
var theme = useTheme();
|
|
5422
|
-
return (jsxRuntime.jsx(Container$
|
|
5422
|
+
return (jsxRuntime.jsx(Container$13, __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));
|
|
5423
5423
|
};
|
|
5424
|
-
var templateObject_1$
|
|
5424
|
+
var templateObject_1$1I, templateObject_2$16;
|
|
5425
5425
|
|
|
5426
5426
|
var getStylesBySize$b = function (size, theme) {
|
|
5427
5427
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5463,8 +5463,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5463
5463
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5464
5464
|
}
|
|
5465
5465
|
};
|
|
5466
|
-
var Container$
|
|
5467
|
-
var Price = newStyled.p(templateObject_2$
|
|
5466
|
+
var Container$12 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5467
|
+
var Price = newStyled.p(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5468
5468
|
var weight = _a.weight;
|
|
5469
5469
|
return (weight ? weight : '400');
|
|
5470
5470
|
}, function (_a) {
|
|
@@ -5488,7 +5488,7 @@ var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemp
|
|
|
5488
5488
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5489
5489
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5490
5490
|
});
|
|
5491
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5491
|
+
var TagContainer = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5492
5492
|
var _b;
|
|
5493
5493
|
var size = _a.size;
|
|
5494
5494
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5519,11 +5519,11 @@ var PriceLabel = function (_a) {
|
|
|
5519
5519
|
: exports.ComponentSize.XSmall;
|
|
5520
5520
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5521
5521
|
};
|
|
5522
|
-
return (jsxRuntime.jsxs(Container$
|
|
5522
|
+
return (jsxRuntime.jsxs(Container$12, __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));
|
|
5523
5523
|
};
|
|
5524
|
-
var templateObject_1$
|
|
5524
|
+
var templateObject_1$1H, templateObject_2$15, templateObject_3$U;
|
|
5525
5525
|
|
|
5526
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5526
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5527
5527
|
var PriceLabelV2 = function (_a) {
|
|
5528
5528
|
var _b;
|
|
5529
5529
|
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"]);
|
|
@@ -5576,7 +5576,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5576
5576
|
var savetoString = saveto.toFixed(2);
|
|
5577
5577
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5578
5578
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5579
|
-
return (jsxRuntime.jsxs(Container$
|
|
5579
|
+
return (jsxRuntime.jsxs(Container$12, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5580
5580
|
marginTop: '-5px',
|
|
5581
5581
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5582
5582
|
? finalPriceArray[0]
|
|
@@ -5594,11 +5594,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5594
5594
|
lineHeight: '22px',
|
|
5595
5595
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5596
5596
|
};
|
|
5597
|
-
var templateObject_1$
|
|
5597
|
+
var templateObject_1$1G;
|
|
5598
5598
|
|
|
5599
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5600
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5601
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5599
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5600
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5601
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5602
5602
|
var PriceLabelV3 = function (_a) {
|
|
5603
5603
|
var _b;
|
|
5604
5604
|
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, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -5653,7 +5653,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5653
5653
|
return null;
|
|
5654
5654
|
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5655
5655
|
};
|
|
5656
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
5656
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$12, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$12, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5657
5657
|
marginTop: '-5px',
|
|
5658
5658
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5659
5659
|
marginTop: '-6px',
|
|
@@ -5669,10 +5669,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5669
5669
|
lineHeight: '22px',
|
|
5670
5670
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5671
5671
|
};
|
|
5672
|
-
var templateObject_1$
|
|
5672
|
+
var templateObject_1$1F, templateObject_2$14, templateObject_3$T;
|
|
5673
5673
|
|
|
5674
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5675
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5674
|
+
var FlexContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5675
|
+
var ContainerBase = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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) {
|
|
5676
5676
|
var selected = _a.selected, theme = _a.theme;
|
|
5677
5677
|
return selected
|
|
5678
5678
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5686,7 +5686,7 @@ var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 =
|
|
|
5686
5686
|
var theme = _a.theme;
|
|
5687
5687
|
return theme.colors.pallete.primary.color;
|
|
5688
5688
|
});
|
|
5689
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5689
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5690
5690
|
var onClick = _a.onClick;
|
|
5691
5691
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5692
5692
|
});
|
|
@@ -5708,8 +5708,8 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject
|
|
|
5708
5708
|
var selected = _a.selected, theme = _a.theme;
|
|
5709
5709
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5710
5710
|
});
|
|
5711
|
-
var Container
|
|
5712
|
-
var templateObject_1$
|
|
5711
|
+
var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5712
|
+
var templateObject_1$1E, templateObject_2$13, templateObject_3$S, templateObject_4$F, templateObject_5$q, templateObject_6$l, templateObject_7$e, templateObject_8$b, templateObject_9$5, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5713
5713
|
|
|
5714
5714
|
var radioIds = {
|
|
5715
5715
|
oneTime: {
|
|
@@ -5759,17 +5759,17 @@ var Autoship = function (_a) {
|
|
|
5759
5759
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5760
5760
|
};
|
|
5761
5761
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5762
|
-
return (jsxRuntime.jsxs(Container
|
|
5762
|
+
return (jsxRuntime.jsxs(Container$11, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5763
5763
|
? benefitsColor.selected
|
|
5764
5764
|
: 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));
|
|
5765
5765
|
};
|
|
5766
5766
|
|
|
5767
|
-
var Img = newStyled.img(templateObject_1$
|
|
5767
|
+
var Img = newStyled.img(templateObject_1$1D || (templateObject_1$1D = __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; });
|
|
5768
5768
|
var Image$3 = function (_a) {
|
|
5769
5769
|
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;
|
|
5770
5770
|
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));
|
|
5771
5771
|
};
|
|
5772
|
-
var templateObject_1$
|
|
5772
|
+
var templateObject_1$1D;
|
|
5773
5773
|
|
|
5774
5774
|
var _a$2;
|
|
5775
5775
|
exports.BeforeAfterVariant = void 0;
|
|
@@ -5784,13 +5784,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5784
5784
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5785
5785
|
_a$2);
|
|
5786
5786
|
|
|
5787
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5788
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5789
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5787
|
+
var CustomerDetails = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
|
|
5788
|
+
var CustomerInfo = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
5789
|
+
var Name = newStyled.h4(templateObject_3$R || (templateObject_3$R = __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"])));
|
|
5790
5790
|
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"])));
|
|
5791
5791
|
var Description$2 = newStyled.p(templateObject_5$p || (templateObject_5$p = __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"])));
|
|
5792
5792
|
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"])));
|
|
5793
|
-
var templateObject_1$
|
|
5793
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$E, templateObject_5$p, templateObject_6$k;
|
|
5794
5794
|
|
|
5795
5795
|
var NameWithStars = function (_a) {
|
|
5796
5796
|
var name = _a.name, size = _a.size;
|
|
@@ -5808,9 +5808,9 @@ var ResultFeedback = function (_a) {
|
|
|
5808
5808
|
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));
|
|
5809
5809
|
};
|
|
5810
5810
|
|
|
5811
|
-
var Container$
|
|
5812
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5813
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5811
|
+
var Container$10 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
5812
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
5813
|
+
var ImageCard = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __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; });
|
|
5814
5814
|
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) {
|
|
5815
5815
|
var theme = _a.theme;
|
|
5816
5816
|
return theme.colors.pallete.secondary.color;
|
|
@@ -5821,7 +5821,7 @@ var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __m
|
|
|
5821
5821
|
var theme = _a.theme, size = _a.size;
|
|
5822
5822
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5823
5823
|
});
|
|
5824
|
-
var templateObject_1$
|
|
5824
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$Q, templateObject_4$D;
|
|
5825
5825
|
|
|
5826
5826
|
/* base styles & size variants */
|
|
5827
5827
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5896,10 +5896,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
5896
5896
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5897
5897
|
var infoText = buildInfoText(name, age, months);
|
|
5898
5898
|
var Component = componentByVariant[variant];
|
|
5899
|
-
return (jsxRuntime.jsxs(Container$
|
|
5899
|
+
return (jsxRuntime.jsxs(Container$10, __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));
|
|
5900
5900
|
};
|
|
5901
5901
|
|
|
5902
|
-
var Section = newStyled.div(templateObject_1$
|
|
5902
|
+
var Section = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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) {
|
|
5903
5903
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5904
5904
|
});
|
|
5905
5905
|
var CardHeader = function (_a) {
|
|
@@ -5910,16 +5910,16 @@ var CardFooter = function (_a) {
|
|
|
5910
5910
|
var children = _a.children;
|
|
5911
5911
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
5912
5912
|
};
|
|
5913
|
-
var templateObject_1$
|
|
5913
|
+
var templateObject_1$1A;
|
|
5914
5914
|
|
|
5915
|
-
var Body = newStyled.div(templateObject_1$
|
|
5915
|
+
var Body = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
5916
5916
|
var CardBody = function (_a) {
|
|
5917
5917
|
var children = _a.children;
|
|
5918
5918
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
5919
5919
|
};
|
|
5920
|
-
var templateObject_1$
|
|
5920
|
+
var templateObject_1$1z;
|
|
5921
5921
|
|
|
5922
|
-
var Container
|
|
5922
|
+
var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
5923
5923
|
var flex = _a.flex;
|
|
5924
5924
|
return flex &&
|
|
5925
5925
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5934,23 +5934,23 @@ var Container$Z = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __
|
|
|
5934
5934
|
var Card$1 = function (_a) {
|
|
5935
5935
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
5936
5936
|
var theme = useTheme();
|
|
5937
|
-
return (jsxRuntime.jsx(Container
|
|
5937
|
+
return (jsxRuntime.jsx(Container$$, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
5938
5938
|
};
|
|
5939
5939
|
var Card$2 = Object.assign(Card$1, {
|
|
5940
5940
|
Header: CardHeader,
|
|
5941
5941
|
Footer: CardFooter,
|
|
5942
5942
|
Body: CardBody,
|
|
5943
5943
|
});
|
|
5944
|
-
var templateObject_1$
|
|
5944
|
+
var templateObject_1$1y;
|
|
5945
5945
|
|
|
5946
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5947
|
-
var StyledContainer = newStyled.div(templateObject_2
|
|
5948
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
5946
|
+
var StyledWrapper = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
5947
|
+
var StyledContainer = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
5948
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$P || (templateObject_3$P = __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) {
|
|
5949
5949
|
var color = _a.color;
|
|
5950
5950
|
return color;
|
|
5951
5951
|
});
|
|
5952
5952
|
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"])));
|
|
5953
|
-
var templateObject_1$
|
|
5953
|
+
var templateObject_1$1x, templateObject_2$10, templateObject_3$P, templateObject_4$C;
|
|
5954
5954
|
|
|
5955
5955
|
var Minimalistic = function (_a) {
|
|
5956
5956
|
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;
|
|
@@ -5958,28 +5958,28 @@ var Minimalistic = function (_a) {
|
|
|
5958
5958
|
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));
|
|
5959
5959
|
};
|
|
5960
5960
|
|
|
5961
|
-
var Container$
|
|
5962
|
-
var Title$6 = newStyled.h1(templateObject_2
|
|
5963
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5961
|
+
var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5962
|
+
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; });
|
|
5963
|
+
var Details$1 = newStyled.span(templateObject_3$O || (templateObject_3$O = __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; });
|
|
5964
5964
|
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"])));
|
|
5965
5965
|
var Simple = function (_a) {
|
|
5966
5966
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
5967
5967
|
var theme = useTheme();
|
|
5968
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
5968
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$_, { 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));
|
|
5969
5969
|
};
|
|
5970
|
-
var templateObject_1$
|
|
5970
|
+
var templateObject_1$1w, templateObject_2$$, templateObject_3$O, templateObject_4$B;
|
|
5971
5971
|
|
|
5972
5972
|
var Bundle = {
|
|
5973
5973
|
Minimalistic: Minimalistic,
|
|
5974
5974
|
Simple: Simple,
|
|
5975
5975
|
};
|
|
5976
5976
|
|
|
5977
|
-
var Container$
|
|
5977
|
+
var Container$Z = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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) {
|
|
5978
5978
|
var displayBNPL = _a.displayBNPL;
|
|
5979
5979
|
return (displayBNPL ? 'flex' : 'none');
|
|
5980
5980
|
});
|
|
5981
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5982
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
5981
|
+
var TextContainer$1 = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
5982
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
5983
5983
|
var BuyNowPayLater = function (_a) {
|
|
5984
5984
|
var _b;
|
|
5985
5985
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -5989,43 +5989,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
5989
5989
|
console.error('Icon', iconName, 'not found');
|
|
5990
5990
|
return null;
|
|
5991
5991
|
}
|
|
5992
|
-
return (jsxRuntime.jsx(Container$
|
|
5992
|
+
return (jsxRuntime.jsx(Container$Z, __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));
|
|
5993
5993
|
};
|
|
5994
|
-
var templateObject_1$
|
|
5994
|
+
var templateObject_1$1v, templateObject_2$_, templateObject_3$N;
|
|
5995
5995
|
|
|
5996
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5996
|
+
var Text$6 = newStyled.span(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
5997
5997
|
var Title$5 = function (_a) {
|
|
5998
5998
|
var title = _a.title;
|
|
5999
5999
|
var theme = useTheme();
|
|
6000
6000
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6001
6001
|
};
|
|
6002
|
-
var templateObject_1$
|
|
6002
|
+
var templateObject_1$1u;
|
|
6003
6003
|
|
|
6004
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6004
|
+
var P$3 = newStyled.p(templateObject_1$1t || (templateObject_1$1t = __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; });
|
|
6005
6005
|
var Promo = function (_a) {
|
|
6006
6006
|
var text = _a.text;
|
|
6007
6007
|
var theme = useTheme();
|
|
6008
6008
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6009
6009
|
};
|
|
6010
|
-
var templateObject_1$
|
|
6010
|
+
var templateObject_1$1t;
|
|
6011
6011
|
|
|
6012
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6012
|
+
var Text$5 = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
6013
6013
|
var Description$1 = function (_a) {
|
|
6014
6014
|
var text = _a.text;
|
|
6015
6015
|
var theme = useTheme();
|
|
6016
6016
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6017
6017
|
};
|
|
6018
|
-
var templateObject_1$
|
|
6018
|
+
var templateObject_1$1s;
|
|
6019
6019
|
|
|
6020
|
-
var Container$
|
|
6020
|
+
var Container$Y = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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"); });
|
|
6021
6021
|
var CloseButton$1 = function (_a) {
|
|
6022
6022
|
var onClick = _a.onClick, size = _a.size;
|
|
6023
6023
|
var theme = useTheme();
|
|
6024
|
-
return (jsxRuntime.jsx(Container$
|
|
6024
|
+
return (jsxRuntime.jsx(Container$Y, __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));
|
|
6025
6025
|
};
|
|
6026
|
-
var templateObject_1$
|
|
6026
|
+
var templateObject_1$1r;
|
|
6027
6027
|
|
|
6028
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6028
|
+
var Text$4 = newStyled.h3(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
6029
6029
|
var backgroundColor = _a.backgroundColor;
|
|
6030
6030
|
return backgroundColor;
|
|
6031
6031
|
}, function (_a) {
|
|
@@ -6040,7 +6040,7 @@ var OfferBanner = function (_a) {
|
|
|
6040
6040
|
var theme = useTheme();
|
|
6041
6041
|
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));
|
|
6042
6042
|
};
|
|
6043
|
-
var templateObject_1$
|
|
6043
|
+
var templateObject_1$1q;
|
|
6044
6044
|
|
|
6045
6045
|
var CartProductItem = {
|
|
6046
6046
|
Title: Title$5,
|
|
@@ -6050,9 +6050,9 @@ var CartProductItem = {
|
|
|
6050
6050
|
CloseButton: CloseButton$1,
|
|
6051
6051
|
};
|
|
6052
6052
|
|
|
6053
|
-
var Container$
|
|
6054
|
-
var MobileContainer = newStyled(Container$
|
|
6055
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6053
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"])));
|
|
6054
|
+
var MobileContainer = newStyled(Container$X)(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6055
|
+
var DollarPart = newStyled.span(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
6056
6056
|
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"])));
|
|
6057
6057
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6058
6058
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6061,9 +6061,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$a || (t
|
|
|
6061
6061
|
var ClubPriceLabel = function (_a) {
|
|
6062
6062
|
var clubPrice = _a.clubPrice;
|
|
6063
6063
|
var isMobile = useWindowDimensions().isMobile;
|
|
6064
|
-
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$
|
|
6064
|
+
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$X, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6065
6065
|
};
|
|
6066
|
-
var templateObject_1$
|
|
6066
|
+
var templateObject_1$1p, templateObject_2$Z, templateObject_3$M, templateObject_4$A, templateObject_5$o, templateObject_6$j, templateObject_7$d, templateObject_8$a;
|
|
6067
6067
|
|
|
6068
6068
|
var Spacing = function (_a) {
|
|
6069
6069
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6071,9 +6071,9 @@ var Spacing = function (_a) {
|
|
|
6071
6071
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6072
6072
|
};
|
|
6073
6073
|
|
|
6074
|
-
var Container$
|
|
6075
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6076
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6074
|
+
var Container$W = newStyled('div')(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
6075
|
+
var Content$2 = newStyled('div')(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
6076
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
6077
6077
|
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) {
|
|
6078
6078
|
var index = _a.index;
|
|
6079
6079
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -6083,14 +6083,14 @@ var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __makeT
|
|
|
6083
6083
|
});
|
|
6084
6084
|
var StrengthBars = function (_a) {
|
|
6085
6085
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6086
|
-
return (jsxRuntime.jsxs(Container$
|
|
6086
|
+
return (jsxRuntime.jsxs(Container$W, __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));
|
|
6087
6087
|
};
|
|
6088
|
-
var templateObject_1$
|
|
6088
|
+
var templateObject_1$1o, templateObject_2$Y, templateObject_3$L, templateObject_4$z;
|
|
6089
6089
|
|
|
6090
|
-
var Container$
|
|
6091
|
-
var templateObject_1$
|
|
6090
|
+
var Container$V = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6091
|
+
var templateObject_1$1n;
|
|
6092
6092
|
|
|
6093
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6093
|
+
var StarContainer = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6094
6094
|
var marginRight = _a.marginRight;
|
|
6095
6095
|
return marginRight;
|
|
6096
6096
|
});
|
|
@@ -6102,11 +6102,11 @@ var StarList = function (_a) {
|
|
|
6102
6102
|
width: theme.component.stars.element[size].width,
|
|
6103
6103
|
height: theme.component.stars.element[size].height,
|
|
6104
6104
|
};
|
|
6105
|
-
return (jsxRuntime.jsx(Container$
|
|
6105
|
+
return (jsxRuntime.jsx(Container$V, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6106
6106
|
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)));
|
|
6107
6107
|
}) }, void 0));
|
|
6108
6108
|
};
|
|
6109
|
-
var templateObject_1$
|
|
6109
|
+
var templateObject_1$1m;
|
|
6110
6110
|
|
|
6111
6111
|
/* base styles & size variants */
|
|
6112
6112
|
var LabelStyles = {
|
|
@@ -6147,8 +6147,8 @@ var LabelStyles = {
|
|
|
6147
6147
|
});
|
|
6148
6148
|
},
|
|
6149
6149
|
};
|
|
6150
|
-
var Container$
|
|
6151
|
-
var templateObject_1$
|
|
6150
|
+
var Container$U = newStyled.a(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
6151
|
+
var templateObject_1$1l;
|
|
6152
6152
|
|
|
6153
6153
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6154
6154
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6168,7 +6168,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6168
6168
|
}),
|
|
6169
6169
|
];
|
|
6170
6170
|
});
|
|
6171
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6171
|
+
var RatingLabel = newStyled.span(templateObject_1$1k || (templateObject_1$1k = __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; });
|
|
6172
6172
|
var starsNumber = 5;
|
|
6173
6173
|
var Rating = function (_a) {
|
|
6174
6174
|
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;
|
|
@@ -6189,13 +6189,13 @@ var Rating = function (_a) {
|
|
|
6189
6189
|
href: reviewsContainerId,
|
|
6190
6190
|
}
|
|
6191
6191
|
: {};
|
|
6192
|
-
return (jsxRuntime.jsxs(Container$
|
|
6192
|
+
return (jsxRuntime.jsxs(Container$U, __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));
|
|
6193
6193
|
};
|
|
6194
|
-
var templateObject_1$
|
|
6194
|
+
var templateObject_1$1k;
|
|
6195
6195
|
|
|
6196
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6197
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6198
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6196
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
6197
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
6198
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6199
6199
|
var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6200
6200
|
var PriceWithTagContainer = newStyled.span(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6201
6201
|
var RegularPriceTag = function () {
|
|
@@ -6246,11 +6246,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
6246
6246
|
: exports.ComponentSize.XSmall;
|
|
6247
6247
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6248
6248
|
};
|
|
6249
|
-
return (jsxRuntime.jsxs(Container$
|
|
6249
|
+
return (jsxRuntime.jsxs(Container$12, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsxs(PriceContainerV2, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6250
6250
|
? finalPriceArray[0]
|
|
6251
6251
|
: (_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)] }, 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));
|
|
6252
6252
|
};
|
|
6253
|
-
var templateObject_1$
|
|
6253
|
+
var templateObject_1$1j, templateObject_2$X, templateObject_3$K, templateObject_4$y, templateObject_5$n;
|
|
6254
6254
|
|
|
6255
6255
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6256
6256
|
var width = _a.width, height = _a.height;
|
|
@@ -6260,9 +6260,9 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6260
6260
|
height: height,
|
|
6261
6261
|
});
|
|
6262
6262
|
});
|
|
6263
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6264
|
-
var Container$
|
|
6265
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6263
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1i || (templateObject_1$1i = __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"])));
|
|
6264
|
+
var Container$T = newStyled.a(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
6265
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
6266
6266
|
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; });
|
|
6267
6267
|
var getStylesBySize$9 = function (size) {
|
|
6268
6268
|
switch (size) {
|
|
@@ -6289,11 +6289,11 @@ var getStylesBySize$9 = function (size) {
|
|
|
6289
6289
|
};
|
|
6290
6290
|
}
|
|
6291
6291
|
};
|
|
6292
|
-
var TopTagContainer$
|
|
6292
|
+
var TopTagContainer$6 = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6293
6293
|
var style = _a.style;
|
|
6294
6294
|
return style.width;
|
|
6295
6295
|
});
|
|
6296
|
-
var BottomTagContainer$
|
|
6296
|
+
var BottomTagContainer$6 = 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) {
|
|
6297
6297
|
var style = _a.style;
|
|
6298
6298
|
return style.width;
|
|
6299
6299
|
});
|
|
@@ -6354,9 +6354,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6354
6354
|
return jsx(Fragment, {}, void 0);
|
|
6355
6355
|
return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6356
6356
|
};
|
|
6357
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6357
|
+
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$T, __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$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$6, __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$T, __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));
|
|
6358
6358
|
};
|
|
6359
|
-
var templateObject_1$
|
|
6359
|
+
var templateObject_1$1i, templateObject_2$W, templateObject_3$J, templateObject_4$x, templateObject_5$m, templateObject_6$i, templateObject_7$c;
|
|
6360
6360
|
|
|
6361
6361
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6362
6362
|
var width = _a.width, height = _a.height;
|
|
@@ -6366,9 +6366,9 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6366
6366
|
height: height,
|
|
6367
6367
|
});
|
|
6368
6368
|
});
|
|
6369
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6370
|
-
var Container$
|
|
6371
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6369
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1h || (templateObject_1$1h = __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; });
|
|
6370
|
+
var Container$S = 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"])));
|
|
6371
|
+
var ProdCardContainer = 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"])));
|
|
6372
6372
|
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; });
|
|
6373
6373
|
var getStylesBySize$8 = function (size) {
|
|
6374
6374
|
switch (size) {
|
|
@@ -6395,11 +6395,11 @@ var getStylesBySize$8 = function (size) {
|
|
|
6395
6395
|
};
|
|
6396
6396
|
}
|
|
6397
6397
|
};
|
|
6398
|
-
var TopTagContainer$
|
|
6398
|
+
var TopTagContainer$5 = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6399
6399
|
var style = _a.style;
|
|
6400
6400
|
return style.width;
|
|
6401
6401
|
});
|
|
6402
|
-
var BottomTagContainer$
|
|
6402
|
+
var BottomTagContainer$5 = 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) {
|
|
6403
6403
|
var style = _a.style;
|
|
6404
6404
|
return style.width;
|
|
6405
6405
|
});
|
|
@@ -6447,26 +6447,26 @@ var ProductItemTK = function (_a) {
|
|
|
6447
6447
|
: undefined }, void 0));
|
|
6448
6448
|
};
|
|
6449
6449
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6450
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6450
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$S, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __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, borderRadius: ImageBorderRadius, 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, borderRadius: ImageBorderRadius, 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, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, 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: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$S, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
6451
6451
|
// @ts-ignore
|
|
6452
6452
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6453
6453
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6454
6454
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6455
6455
|
} }, { 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));
|
|
6456
6456
|
};
|
|
6457
|
-
var templateObject_1$
|
|
6457
|
+
var templateObject_1$1h, templateObject_2$V, templateObject_3$I, templateObject_4$w, templateObject_5$l, templateObject_6$h, templateObject_7$b;
|
|
6458
6458
|
|
|
6459
|
-
var Container$
|
|
6459
|
+
var Container$R = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
6460
6460
|
function withProductGrid(ProductItemComponent, data) {
|
|
6461
6461
|
function WithProductGrid(props) {
|
|
6462
|
-
return (jsxRuntime.jsx(Container$
|
|
6462
|
+
return (jsxRuntime.jsx(Container$R, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6463
6463
|
}
|
|
6464
6464
|
/* istanbul ignore next */
|
|
6465
6465
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6466
6466
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6467
6467
|
return WithProductGrid;
|
|
6468
6468
|
}
|
|
6469
|
-
var templateObject_1$
|
|
6469
|
+
var templateObject_1$1g;
|
|
6470
6470
|
|
|
6471
6471
|
var Collection = {
|
|
6472
6472
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6513,9 +6513,9 @@ var OutOfStock = function (_a) {
|
|
|
6513
6513
|
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));
|
|
6514
6514
|
};
|
|
6515
6515
|
|
|
6516
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6517
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6518
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6516
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6517
|
+
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6518
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
6519
6519
|
var Span = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6520
6520
|
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"])));
|
|
6521
6521
|
var Label$2 = function (_a) {
|
|
@@ -6535,23 +6535,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6535
6535
|
Option: Option,
|
|
6536
6536
|
OptionsContainer: OptionsContainer,
|
|
6537
6537
|
});
|
|
6538
|
-
var templateObject_1$
|
|
6538
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$v, templateObject_5$k;
|
|
6539
6539
|
|
|
6540
|
-
var Container$
|
|
6540
|
+
var Container$Q = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
6541
6541
|
var borderColor = _a.borderColor;
|
|
6542
6542
|
return borderColor;
|
|
6543
6543
|
}, function (_a) {
|
|
6544
6544
|
var noStock = _a.noStock;
|
|
6545
6545
|
return (noStock ? '0.4' : '1');
|
|
6546
6546
|
});
|
|
6547
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6547
|
+
var Image$2 = newStyled.img(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6548
6548
|
var PatternSelector = function (_a) {
|
|
6549
6549
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6550
6550
|
var theme = useTheme();
|
|
6551
6551
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6552
|
-
return (jsxRuntime.jsx(Container$
|
|
6552
|
+
return (jsxRuntime.jsx(Container$Q, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6553
6553
|
};
|
|
6554
|
-
var templateObject_1$
|
|
6554
|
+
var templateObject_1$1e, templateObject_2$T;
|
|
6555
6555
|
|
|
6556
6556
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6557
6557
|
if (options == null || options.length === 0) {
|
|
@@ -6610,9 +6610,9 @@ var SingleColorPicker = function (_a) {
|
|
|
6610
6610
|
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));
|
|
6611
6611
|
};
|
|
6612
6612
|
|
|
6613
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6614
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6615
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6613
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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'); });
|
|
6614
|
+
var Col$1 = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6615
|
+
var Row$2 = newStyled.div(templateObject_3$G || (templateObject_3$G = __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) {
|
|
6616
6616
|
return props.rightToLeft &&
|
|
6617
6617
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6618
6618
|
});
|
|
@@ -6624,7 +6624,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6624
6624
|
var theme = useTheme();
|
|
6625
6625
|
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));
|
|
6626
6626
|
};
|
|
6627
|
-
var templateObject_1$
|
|
6627
|
+
var templateObject_1$1d, templateObject_2$S, templateObject_3$G, templateObject_4$u, templateObject_5$j, templateObject_6$g;
|
|
6628
6628
|
|
|
6629
6629
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6630
6630
|
__proto__: null,
|
|
@@ -6652,7 +6652,7 @@ var sizeMapper = (_a = {},
|
|
|
6652
6652
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6653
6653
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6654
6654
|
_a);
|
|
6655
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6655
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
6656
6656
|
var wide = _a.wide;
|
|
6657
6657
|
return (wide ? '100%' : 'fit-content');
|
|
6658
6658
|
}, function (_a) {
|
|
@@ -6674,8 +6674,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1a || (templateObj
|
|
|
6674
6674
|
var theme = _a.theme;
|
|
6675
6675
|
return theme.colors.text.disabled;
|
|
6676
6676
|
});
|
|
6677
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6678
|
-
var templateObject_1$
|
|
6677
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6678
|
+
var templateObject_1$1c, templateObject_2$R;
|
|
6679
6679
|
|
|
6680
6680
|
var BaseCTA = function (_a) {
|
|
6681
6681
|
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"]);
|
|
@@ -6742,23 +6742,23 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6742
6742
|
} }), void 0));
|
|
6743
6743
|
};
|
|
6744
6744
|
|
|
6745
|
-
var Container$
|
|
6746
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6747
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
6745
|
+
var Container$P = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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; });
|
|
6746
|
+
var IconContainer$4 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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"])));
|
|
6747
|
+
var Text$3 = newStyled.p(templateObject_3$F || (templateObject_3$F = __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; });
|
|
6748
6748
|
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; });
|
|
6749
6749
|
var Note = function (_a) {
|
|
6750
6750
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6751
6751
|
var theme = useTheme();
|
|
6752
|
-
return (jsxRuntime.jsxs(Container$
|
|
6752
|
+
return (jsxRuntime.jsxs(Container$P, __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));
|
|
6753
6753
|
};
|
|
6754
|
-
var templateObject_1$
|
|
6754
|
+
var templateObject_1$1b, templateObject_2$Q, templateObject_3$F, templateObject_4$t;
|
|
6755
6755
|
|
|
6756
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6756
|
+
var Title$2 = newStyled.h1(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
6757
6757
|
var theme = _a.theme;
|
|
6758
6758
|
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 ");
|
|
6759
6759
|
});
|
|
6760
|
-
var Line = newStyled.div(templateObject_2$
|
|
6761
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6760
|
+
var Line = newStyled.div(templateObject_2$P || (templateObject_2$P = __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; });
|
|
6761
|
+
var Row$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __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({
|
|
6762
6762
|
flexDirection: ['column', 'row'],
|
|
6763
6763
|
}));
|
|
6764
6764
|
var Col = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
@@ -6796,16 +6796,16 @@ var DeliveryDetails = function (_a) {
|
|
|
6796
6796
|
var theme = useTheme();
|
|
6797
6797
|
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));
|
|
6798
6798
|
};
|
|
6799
|
-
var templateObject_1$
|
|
6799
|
+
var templateObject_1$1a, templateObject_2$P, templateObject_3$E, templateObject_4$s, templateObject_5$i, templateObject_6$f, templateObject_7$a, templateObject_8$9;
|
|
6800
6800
|
|
|
6801
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6801
|
+
var Backdrop = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
6802
6802
|
var top = _a.top;
|
|
6803
6803
|
return top;
|
|
6804
6804
|
}, function (_a) {
|
|
6805
6805
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6806
6806
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6807
6807
|
});
|
|
6808
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6808
|
+
var Sidebar = newStyled.div(templateObject_2$O || (templateObject_2$O = __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) {
|
|
6809
6809
|
var height = _a.height;
|
|
6810
6810
|
return height;
|
|
6811
6811
|
}, function (_a) {
|
|
@@ -6852,20 +6852,20 @@ var Drawer = function (_a) {
|
|
|
6852
6852
|
}, [isOpen, onClose, onOpen]);
|
|
6853
6853
|
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;
|
|
6854
6854
|
};
|
|
6855
|
-
var templateObject_1$
|
|
6855
|
+
var templateObject_1$19, templateObject_2$O;
|
|
6856
6856
|
|
|
6857
6857
|
var TooltipArrow = function (_a) {
|
|
6858
6858
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6859
6859
|
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));
|
|
6860
6860
|
};
|
|
6861
6861
|
|
|
6862
|
-
var List = newStyled.ul(templateObject_1$
|
|
6863
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6864
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
6862
|
+
var List = newStyled.ul(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6863
|
+
var Item$2 = newStyled.li(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
6864
|
+
var DropdownWrapper = newStyled.div(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
6865
6865
|
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"])));
|
|
6866
6866
|
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; });
|
|
6867
6867
|
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; });
|
|
6868
|
-
var templateObject_1$
|
|
6868
|
+
var templateObject_1$18, templateObject_2$N, templateObject_3$D, templateObject_4$r, templateObject_5$h, templateObject_6$e;
|
|
6869
6869
|
|
|
6870
6870
|
var DropdownListIcons = function (_a) {
|
|
6871
6871
|
var items = _a.items;
|
|
@@ -6878,13 +6878,13 @@ var Dropdown = function (_a) {
|
|
|
6878
6878
|
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));
|
|
6879
6879
|
};
|
|
6880
6880
|
|
|
6881
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
6882
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6883
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
6881
|
+
var DropdownContainer = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
6882
|
+
var DropdownLabel = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
6883
|
+
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6884
6884
|
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"])));
|
|
6885
6885
|
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"])));
|
|
6886
6886
|
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"])));
|
|
6887
|
-
var templateObject_1$
|
|
6887
|
+
var templateObject_1$17, templateObject_2$M, templateObject_3$C, templateObject_4$q, templateObject_5$g, templateObject_6$d;
|
|
6888
6888
|
|
|
6889
6889
|
var SizeDropdown = function (_a) {
|
|
6890
6890
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6907,9 +6907,9 @@ var SizeDropdown = function (_a) {
|
|
|
6907
6907
|
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));
|
|
6908
6908
|
};
|
|
6909
6909
|
|
|
6910
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6911
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6912
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
6910
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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; });
|
|
6911
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$L || (templateObject_2$L = __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; });
|
|
6912
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
6913
6913
|
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"])));
|
|
6914
6914
|
var DropdownDialog = function (_a) {
|
|
6915
6915
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -6919,7 +6919,7 @@ var DropdownDialog = function (_a) {
|
|
|
6919
6919
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6920
6920
|
}) }), void 0) }), void 0));
|
|
6921
6921
|
};
|
|
6922
|
-
var templateObject_1$
|
|
6922
|
+
var templateObject_1$16, templateObject_2$L, templateObject_3$B, templateObject_4$p;
|
|
6923
6923
|
|
|
6924
6924
|
function FilteringDropdown(_a) {
|
|
6925
6925
|
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;
|
|
@@ -6952,21 +6952,21 @@ function FilteringDropdown(_a) {
|
|
|
6952
6952
|
}) }, void 0)] }), void 0));
|
|
6953
6953
|
}
|
|
6954
6954
|
|
|
6955
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
6956
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6957
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
6958
|
-
var Container$
|
|
6955
|
+
var Title$1 = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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; });
|
|
6956
|
+
var H3 = newStyled.h3(templateObject_2$K || (templateObject_2$K = __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; });
|
|
6957
|
+
var ArrowContainer = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6958
|
+
var Container$O = 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'); });
|
|
6959
6959
|
var Accordion = function (_a) {
|
|
6960
6960
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
6961
6961
|
var theme = useTheme();
|
|
6962
6962
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6963
|
-
return (jsxRuntime.jsxs(Container$
|
|
6963
|
+
return (jsxRuntime.jsxs(Container$O, __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));
|
|
6964
6964
|
};
|
|
6965
|
-
var templateObject_1$
|
|
6965
|
+
var templateObject_1$15, templateObject_2$K, templateObject_3$A, templateObject_4$o;
|
|
6966
6966
|
|
|
6967
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6968
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6969
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
6967
|
+
var SectionContent = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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; });
|
|
6968
|
+
var Header$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
6969
|
+
var MobileHeader = newStyled.div(templateObject_3$z || (templateObject_3$z = __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"])));
|
|
6970
6970
|
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"])));
|
|
6971
6971
|
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; });
|
|
6972
6972
|
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; });
|
|
@@ -6974,7 +6974,7 @@ var OptionContainer = newStyled.div(templateObject_7$9 || (templateObject_7$9 =
|
|
|
6974
6974
|
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; });
|
|
6975
6975
|
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"])));
|
|
6976
6976
|
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"])));
|
|
6977
|
-
var templateObject_1$
|
|
6977
|
+
var templateObject_1$14, templateObject_2$J, templateObject_3$z, templateObject_4$n, templateObject_5$f, templateObject_6$c, templateObject_7$9, templateObject_8$8, templateObject_9$4, templateObject_10$3;
|
|
6978
6978
|
|
|
6979
6979
|
var getStylesBySize$7 = function (size, theme) {
|
|
6980
6980
|
switch (size) {
|
|
@@ -7039,9 +7039,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7039
7039
|
} }), id: id }, void 0));
|
|
7040
7040
|
};
|
|
7041
7041
|
|
|
7042
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7043
|
-
var LI = newStyled.li(templateObject_2$
|
|
7044
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7042
|
+
var UL = newStyled.ul(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
7043
|
+
var LI = newStyled.li(templateObject_2$I || (templateObject_2$I = __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; });
|
|
7044
|
+
var CloseIconContainer = newStyled.div(templateObject_3$y || (templateObject_3$y = __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"])));
|
|
7045
7045
|
var Tags = function (_a) {
|
|
7046
7046
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7047
7047
|
var theme = useTheme();
|
|
@@ -7049,7 +7049,7 @@ var Tags = function (_a) {
|
|
|
7049
7049
|
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));
|
|
7050
7050
|
}) }), void 0));
|
|
7051
7051
|
};
|
|
7052
|
-
var templateObject_1$
|
|
7052
|
+
var templateObject_1$13, templateObject_2$I, templateObject_3$y;
|
|
7053
7053
|
|
|
7054
7054
|
var Filters = function (_a) {
|
|
7055
7055
|
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;
|
|
@@ -7185,8 +7185,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7185
7185
|
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));
|
|
7186
7186
|
};
|
|
7187
7187
|
|
|
7188
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7189
|
-
var Container$
|
|
7188
|
+
var Wrapper$4 = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
7189
|
+
var Container$N = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
7190
7190
|
var FitGuarantee = function (_a) {
|
|
7191
7191
|
var _b;
|
|
7192
7192
|
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;
|
|
@@ -7197,17 +7197,17 @@ var FitGuarantee = function (_a) {
|
|
|
7197
7197
|
console.error('Icon', iconName, 'not found');
|
|
7198
7198
|
return null;
|
|
7199
7199
|
}
|
|
7200
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$
|
|
7200
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxRuntime.jsxs(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7201
7201
|
margin: '0.1rem 0',
|
|
7202
7202
|
width: '100%',
|
|
7203
7203
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7204
7204
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7205
7205
|
} }, { 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));
|
|
7206
7206
|
};
|
|
7207
|
-
var templateObject_1$
|
|
7207
|
+
var templateObject_1$12, templateObject_2$H;
|
|
7208
7208
|
|
|
7209
|
-
var Container$
|
|
7210
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7209
|
+
var Container$M = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
7210
|
+
var P$2 = newStyled.p(templateObject_2$G || (templateObject_2$G = __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; });
|
|
7211
7211
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7212
7212
|
border: 'none',
|
|
7213
7213
|
background: 'transparent',
|
|
@@ -7220,9 +7220,9 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7220
7220
|
var FitPredictor = function (_a) {
|
|
7221
7221
|
var onClick = _a.onClick;
|
|
7222
7222
|
var theme = useTheme();
|
|
7223
|
-
return (jsxs(Container$
|
|
7223
|
+
return (jsxs(Container$M, __assign$1({ theme: theme }, { children: [jsx(Container$M, { 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));
|
|
7224
7224
|
};
|
|
7225
|
-
var templateObject_1
|
|
7225
|
+
var templateObject_1$11, templateObject_2$G;
|
|
7226
7226
|
|
|
7227
7227
|
var Button$6 = newStyled.button(function () { return ({
|
|
7228
7228
|
background: 'transparent',
|
|
@@ -11466,14 +11466,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11466
11466
|
return Slider;
|
|
11467
11467
|
}(React__default["default"].Component);
|
|
11468
11468
|
|
|
11469
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11469
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
11470
11470
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11471
11471
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11472
11472
|
}, function (_a) {
|
|
11473
11473
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11474
11474
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11475
11475
|
});
|
|
11476
|
-
var templateObject_1$
|
|
11476
|
+
var templateObject_1$10;
|
|
11477
11477
|
|
|
11478
11478
|
var getStylesBySize$6 = function (size) {
|
|
11479
11479
|
// rem units
|
|
@@ -11532,7 +11532,7 @@ var SliderNavigation = function (_a) {
|
|
|
11532
11532
|
} }, { 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));
|
|
11533
11533
|
};
|
|
11534
11534
|
|
|
11535
|
-
var Image$1 = newStyled.img(templateObject_1
|
|
11535
|
+
var Image$1 = newStyled.img(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
11536
11536
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11537
11537
|
return borderRadiusVariant &&
|
|
11538
11538
|
"\nborder-radius: 20px;\n";
|
|
@@ -11547,11 +11547,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
11547
11547
|
var theme = useTheme();
|
|
11548
11548
|
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));
|
|
11549
11549
|
};
|
|
11550
|
-
var templateObject_1
|
|
11550
|
+
var templateObject_1$$;
|
|
11551
11551
|
|
|
11552
|
-
var horizontalStyles = css(templateObject_1$
|
|
11553
|
-
var verticalStyles = css(templateObject_2$
|
|
11554
|
-
var Container$
|
|
11552
|
+
var horizontalStyles = css(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
11553
|
+
var verticalStyles = css(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
11554
|
+
var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __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) {
|
|
11555
11555
|
var position = _a.position;
|
|
11556
11556
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11557
11557
|
}, function (_a) {
|
|
@@ -11574,13 +11574,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11574
11574
|
var element = document.querySelector(".imageListContainer");
|
|
11575
11575
|
element.scrollBy(0, 200);
|
|
11576
11576
|
};
|
|
11577
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
11577
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
11578
11578
|
arrowWidth: 0.75,
|
|
11579
11579
|
arrowHeight: 1.25,
|
|
11580
11580
|
arrowPadding: 1.625,
|
|
11581
11581
|
}, 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));
|
|
11582
11582
|
};
|
|
11583
|
-
var templateObject_1$
|
|
11583
|
+
var templateObject_1$_, templateObject_2$F, templateObject_3$x, templateObject_4$m, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$7;
|
|
11584
11584
|
|
|
11585
11585
|
var propTypes = {exports: {}};
|
|
11586
11586
|
|
|
@@ -13173,21 +13173,21 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13173
13173
|
afterZoomOut: PropTypes.func
|
|
13174
13174
|
} : {};
|
|
13175
13175
|
|
|
13176
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13177
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13178
|
-
var templateObject_1$
|
|
13176
|
+
var ProgressContainer = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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); });
|
|
13177
|
+
var ProgressFiller = newStyled.div(templateObject_2$E || (templateObject_2$E = __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; });
|
|
13178
|
+
var templateObject_1$Z, templateObject_2$E;
|
|
13179
13179
|
|
|
13180
13180
|
var ProgressBar$1 = function (_a) {
|
|
13181
13181
|
var progress = _a.progress, hide = _a.hide;
|
|
13182
13182
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13183
13183
|
};
|
|
13184
13184
|
|
|
13185
|
-
var Container$
|
|
13186
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13187
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13185
|
+
var Container$K = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13186
|
+
var HTMLVideo = newStyled.video(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13187
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
13188
13188
|
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"])));
|
|
13189
13189
|
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"])));
|
|
13190
|
-
var templateObject_1$
|
|
13190
|
+
var templateObject_1$Y, templateObject_2$D, templateObject_3$w, templateObject_4$l, templateObject_5$d;
|
|
13191
13191
|
|
|
13192
13192
|
var Video$1 = function (_a) {
|
|
13193
13193
|
var _b, _c, _d, _e;
|
|
@@ -13226,30 +13226,30 @@ var Video$1 = function (_a) {
|
|
|
13226
13226
|
setVideoProgress(videoRef.current.currentTime);
|
|
13227
13227
|
}
|
|
13228
13228
|
};
|
|
13229
|
-
return (jsxRuntime.jsxs(Container$
|
|
13229
|
+
return (jsxRuntime.jsxs(Container$K, { 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));
|
|
13230
13230
|
};
|
|
13231
13231
|
|
|
13232
|
-
var Container$
|
|
13232
|
+
var Container$J = newStyled.div(templateObject_1$X || (templateObject_1$X = __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) {
|
|
13233
13233
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13234
13234
|
return borderRadiusVariant &&
|
|
13235
13235
|
"\n border-radius: 40px;\n ";
|
|
13236
13236
|
});
|
|
13237
|
-
var TopTagContainer$
|
|
13238
|
-
var BottomTagContainer$
|
|
13237
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
13238
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13239
13239
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
13240
13240
|
var ImageProductWithTags$1 = function (_a) {
|
|
13241
13241
|
var _b;
|
|
13242
13242
|
var content = _a.content, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
13243
13243
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13244
13244
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13245
|
-
return (jsxRuntime.jsxs(Container$
|
|
13245
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13246
13246
|
alt: content.alt,
|
|
13247
13247
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13248
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$
|
|
13248
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13249
13249
|
};
|
|
13250
|
-
var templateObject_1$
|
|
13250
|
+
var templateObject_1$X, templateObject_2$C, templateObject_3$v, templateObject_4$k;
|
|
13251
13251
|
|
|
13252
|
-
var Container$
|
|
13252
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
13253
13253
|
var ProductGallery = function (_a) {
|
|
13254
13254
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
13255
13255
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13257,11 +13257,11 @@ var ProductGallery = function (_a) {
|
|
|
13257
13257
|
React$2.useEffect(function () {
|
|
13258
13258
|
setSelectedImage(initialValue);
|
|
13259
13259
|
}, [initialValue]);
|
|
13260
|
-
return (jsxRuntime.jsxs(Container$
|
|
13260
|
+
return (jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13261
13261
|
setSelectedImage(value);
|
|
13262
13262
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { content: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13263
13263
|
};
|
|
13264
|
-
var templateObject_1$
|
|
13264
|
+
var templateObject_1$W;
|
|
13265
13265
|
|
|
13266
13266
|
var getStylesBySize$5 = function (size) {
|
|
13267
13267
|
switch (size) {
|
|
@@ -13282,7 +13282,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13282
13282
|
};
|
|
13283
13283
|
}
|
|
13284
13284
|
};
|
|
13285
|
-
var Container$
|
|
13285
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13286
13286
|
var backgroundColor = _a.backgroundColor;
|
|
13287
13287
|
return backgroundColor;
|
|
13288
13288
|
}, function (_a) {
|
|
@@ -13310,11 +13310,11 @@ var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
13310
13310
|
var IconButton = function (_a) {
|
|
13311
13311
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13312
13312
|
var theme = useTheme();
|
|
13313
|
-
return (jsxRuntime.jsx(Container$
|
|
13313
|
+
return (jsxRuntime.jsx(Container$H, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13314
13314
|
};
|
|
13315
|
-
var templateObject_1$
|
|
13315
|
+
var templateObject_1$V;
|
|
13316
13316
|
|
|
13317
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13317
|
+
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13318
13318
|
var AmazonButton = function (_a) {
|
|
13319
13319
|
var onClick = _a.onClick;
|
|
13320
13320
|
return (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13323,9 +13323,9 @@ var PaypalButton = function (_a) {
|
|
|
13323
13323
|
var onClick = _a.onClick;
|
|
13324
13324
|
return (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13325
13325
|
};
|
|
13326
|
-
var templateObject_1$
|
|
13326
|
+
var templateObject_1$U;
|
|
13327
13327
|
|
|
13328
|
-
var Container$
|
|
13328
|
+
var Container$G = newStyled.div(function (props) { return ({
|
|
13329
13329
|
height: 'auto',
|
|
13330
13330
|
textAlign: 'center',
|
|
13331
13331
|
justifyContent: 'center',
|
|
@@ -13375,12 +13375,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13375
13375
|
textAlign: 'center',
|
|
13376
13376
|
lineHeight: '18px',
|
|
13377
13377
|
};
|
|
13378
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
13378
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$G, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13379
13379
|
};
|
|
13380
13380
|
|
|
13381
|
-
var Container$
|
|
13382
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13383
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13381
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13382
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13383
|
+
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13384
13384
|
var titlePosition = _a.titlePosition;
|
|
13385
13385
|
return titlePosition == 'center' &&
|
|
13386
13386
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13388,15 +13388,15 @@ var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
|
|
|
13388
13388
|
var ImageCardWithDescription = function (_a) {
|
|
13389
13389
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13390
13390
|
var isMobile = useWindowDimensions().isMobile;
|
|
13391
|
-
return (jsxRuntime.jsxs(Container$
|
|
13391
|
+
return (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13392
13392
|
};
|
|
13393
|
-
var templateObject_1$
|
|
13393
|
+
var templateObject_1$T, templateObject_2$B, templateObject_3$u;
|
|
13394
13394
|
|
|
13395
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
13395
|
+
var Label$1 = newStyled.span(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
13396
13396
|
var color = _a.color;
|
|
13397
13397
|
return color;
|
|
13398
13398
|
});
|
|
13399
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13399
|
+
var MandatoryIcon = newStyled.span(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13400
13400
|
var color = _a.color;
|
|
13401
13401
|
return color;
|
|
13402
13402
|
});
|
|
@@ -13405,7 +13405,7 @@ var InputLabel = function (_a) {
|
|
|
13405
13405
|
var theme = useTheme();
|
|
13406
13406
|
return (jsxRuntime.jsxs(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13407
13407
|
};
|
|
13408
|
-
var templateObject_1$
|
|
13408
|
+
var templateObject_1$S, templateObject_2$A;
|
|
13409
13409
|
|
|
13410
13410
|
var containerByStatus = function (theme, status) {
|
|
13411
13411
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13414,12 +13414,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13414
13414
|
return theme.colors.semantic.urgent.color;
|
|
13415
13415
|
return '';
|
|
13416
13416
|
};
|
|
13417
|
-
var Container$
|
|
13417
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13418
13418
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13419
13419
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13420
13420
|
});
|
|
13421
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13422
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13421
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
13422
|
+
var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
13423
13423
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13424
13424
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13425
13425
|
}, function (_a) {
|
|
@@ -13492,7 +13492,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$c || (templateObject_5
|
|
|
13492
13492
|
return theme.component.input.lineHeight;
|
|
13493
13493
|
});
|
|
13494
13494
|
var ClearInput = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
13495
|
-
var templateObject_1$
|
|
13495
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$c, templateObject_6$a;
|
|
13496
13496
|
|
|
13497
13497
|
var BaseInput = function (_a) {
|
|
13498
13498
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -13515,7 +13515,7 @@ var BaseInput = function (_a) {
|
|
|
13515
13515
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13516
13516
|
}, [status]);
|
|
13517
13517
|
var hasValue = Boolean(value);
|
|
13518
|
-
return (jsxRuntime.jsxs(Container$
|
|
13518
|
+
return (jsxRuntime.jsxs(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13519
13519
|
onChange(event.target.value, event);
|
|
13520
13520
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
13521
13521
|
onChange('', { target: { value: '' } });
|
|
@@ -13536,11 +13536,11 @@ var Button$4 = function (_a) {
|
|
|
13536
13536
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13537
13537
|
};
|
|
13538
13538
|
|
|
13539
|
-
var Container$
|
|
13539
|
+
var Container$D = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
13540
13540
|
var theme = _a.theme;
|
|
13541
13541
|
return theme.component.inputCustom.input.borderRadius;
|
|
13542
13542
|
});
|
|
13543
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13543
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
13544
13544
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13545
13545
|
return defaultRounded
|
|
13546
13546
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13555,23 +13555,23 @@ var Custom = function (_a) {
|
|
|
13555
13555
|
text: text,
|
|
13556
13556
|
disabled: rest.disabled,
|
|
13557
13557
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13558
|
-
return (jsxRuntime.jsx(Container$
|
|
13558
|
+
return (jsxRuntime.jsx(Container$D, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13559
13559
|
};
|
|
13560
|
-
var templateObject_1$
|
|
13560
|
+
var templateObject_1$Q, templateObject_2$y;
|
|
13561
13561
|
|
|
13562
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13562
|
+
var SuccessContainer = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13563
13563
|
var size = _a.size;
|
|
13564
13564
|
return (size === 'small' ? '36px' : '');
|
|
13565
13565
|
});
|
|
13566
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13567
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13566
|
+
var SuccessMessage = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
13567
|
+
var SuccessText = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
13568
13568
|
var Success = function (_a) {
|
|
13569
13569
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13570
13570
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13571
13571
|
};
|
|
13572
|
-
var templateObject_1$
|
|
13572
|
+
var templateObject_1$P, templateObject_2$x, templateObject_3$s;
|
|
13573
13573
|
|
|
13574
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13574
|
+
var ButtonContainer = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13575
13575
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13576
13576
|
return status === exports.InputValidationType.Empty &&
|
|
13577
13577
|
type === 'primary' &&
|
|
@@ -13588,16 +13588,16 @@ var BasePlusButton = function (_a) {
|
|
|
13588
13588
|
}
|
|
13589
13589
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13590
13590
|
};
|
|
13591
|
-
var templateObject_1$
|
|
13591
|
+
var templateObject_1$O;
|
|
13592
13592
|
|
|
13593
|
-
var Container$
|
|
13594
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13593
|
+
var Container$C = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13594
|
+
var IconContainer$2 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
13595
13595
|
var BasePlusIcon = function (_a) {
|
|
13596
13596
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13597
13597
|
var theme = useTheme();
|
|
13598
|
-
return (jsxRuntime.jsx(Container$
|
|
13598
|
+
return (jsxRuntime.jsx(Container$C, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13599
13599
|
};
|
|
13600
|
-
var templateObject_1$
|
|
13600
|
+
var templateObject_1$N, templateObject_2$w;
|
|
13601
13601
|
|
|
13602
13602
|
var Input$3 = {
|
|
13603
13603
|
Simple: BaseInput,
|
|
@@ -13606,7 +13606,7 @@ var Input$3 = {
|
|
|
13606
13606
|
SimplePlusIcon: BasePlusIcon,
|
|
13607
13607
|
};
|
|
13608
13608
|
|
|
13609
|
-
var Container$
|
|
13609
|
+
var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13610
13610
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13611
13611
|
return borderRadiusVariant &&
|
|
13612
13612
|
"\n border-radius: 40px;\n ";
|
|
@@ -13615,11 +13615,11 @@ var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13615
13615
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13616
13616
|
});
|
|
13617
13617
|
// max-height: 31.875rem;
|
|
13618
|
-
var TopTagContainer$
|
|
13619
|
-
var BottomTagContainer$
|
|
13618
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13619
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13620
13620
|
var NavButtonContainer$1 = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13621
13621
|
var Button$3 = newStyled.button(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
13622
|
-
var settings$
|
|
13622
|
+
var settings$2 = {
|
|
13623
13623
|
dots: true,
|
|
13624
13624
|
infinite: false,
|
|
13625
13625
|
speed: 200,
|
|
@@ -13633,7 +13633,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13633
13633
|
var sliderWrapper = React$2.useRef(null);
|
|
13634
13634
|
React$2.useRef(null);
|
|
13635
13635
|
var _c = React$2.useState(false); _c[0]; var setIsPlaying = _c[1];
|
|
13636
|
-
usePreventVerticalScroll$
|
|
13636
|
+
usePreventVerticalScroll$2(sliderWrapper);
|
|
13637
13637
|
var onButtonClick = React$2.useCallback(function (i) {
|
|
13638
13638
|
var _a;
|
|
13639
13639
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -13663,20 +13663,20 @@ var ImageProductWithTags = function (_a) {
|
|
|
13663
13663
|
}
|
|
13664
13664
|
}
|
|
13665
13665
|
}, [contents, selectedValue]);
|
|
13666
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
13666
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$B, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
13667
13667
|
var _a;
|
|
13668
13668
|
var activeSlide = contents[e];
|
|
13669
13669
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13670
13670
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13671
13671
|
autoplay ? _playVideo() : _stopVideo();
|
|
13672
|
-
} }, settings$
|
|
13672
|
+
} }, settings$2, { nextArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$3, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$3, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content) {
|
|
13673
13673
|
var _a;
|
|
13674
13674
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13675
13675
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
13676
|
-
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$
|
|
13676
|
+
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13677
13677
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13678
13678
|
};
|
|
13679
|
-
function usePreventVerticalScroll$
|
|
13679
|
+
function usePreventVerticalScroll$2(ref, dragThreshold) {
|
|
13680
13680
|
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13681
13681
|
var firstClientX = React$2.useRef(0);
|
|
13682
13682
|
var clientX = React$2.useRef(0);
|
|
@@ -13711,14 +13711,14 @@ function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
|
13711
13711
|
};
|
|
13712
13712
|
}, [preventTouch, ref, touchStart]);
|
|
13713
13713
|
}
|
|
13714
|
-
var templateObject_1$
|
|
13714
|
+
var templateObject_1$M, templateObject_2$v, templateObject_3$r, templateObject_4$i, templateObject_5$b;
|
|
13715
13715
|
|
|
13716
|
-
var Container$
|
|
13716
|
+
var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13717
13717
|
var ProductGalleryMobile = function (_a) {
|
|
13718
13718
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13719
|
-
return (jsxRuntime.jsx(Container$
|
|
13719
|
+
return (jsxRuntime.jsx(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductWithTags, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13720
13720
|
};
|
|
13721
|
-
var templateObject_1$
|
|
13721
|
+
var templateObject_1$L;
|
|
13722
13722
|
|
|
13723
13723
|
function _extends() {
|
|
13724
13724
|
_extends = Object.assign || function (target) {
|
|
@@ -13985,27 +13985,27 @@ function useSwipeable(options) {
|
|
|
13985
13985
|
return handlers;
|
|
13986
13986
|
}
|
|
13987
13987
|
|
|
13988
|
-
var Button$2 = newStyled.button(templateObject_1$
|
|
13988
|
+
var Button$2 = newStyled.button(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
13989
13989
|
var ArrowButton = function (_a) {
|
|
13990
13990
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13991
13991
|
return (jsxRuntime.jsx(Button$2, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13992
13992
|
};
|
|
13993
|
-
var templateObject_1$
|
|
13993
|
+
var templateObject_1$K;
|
|
13994
13994
|
|
|
13995
|
-
var Container$
|
|
13995
|
+
var Container$z = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
13996
13996
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13997
13997
|
var SlideDots = function (_a) {
|
|
13998
13998
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13999
13999
|
var theme = useTheme();
|
|
14000
|
-
return (jsxRuntime.jsx(Container$
|
|
14000
|
+
return (jsxRuntime.jsx(Container$z, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
14001
14001
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14002
14002
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
14003
14003
|
};
|
|
14004
|
-
var templateObject_1$
|
|
14004
|
+
var templateObject_1$J;
|
|
14005
14005
|
|
|
14006
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14007
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14008
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14006
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
14007
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14008
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14009
14009
|
var SlideNavigation = function (_a) {
|
|
14010
14010
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14011
14011
|
var theme = useTheme();
|
|
@@ -14017,23 +14017,23 @@ var SlideNavigation = function (_a) {
|
|
|
14017
14017
|
onNavigate(selectedIndex + 1);
|
|
14018
14018
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14019
14019
|
};
|
|
14020
|
-
var templateObject_1$
|
|
14020
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$q;
|
|
14021
14021
|
|
|
14022
|
-
var Container$
|
|
14022
|
+
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
14023
14023
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14024
14024
|
return borderRadiusVariant &&
|
|
14025
14025
|
"\n border-radius: 40px;\n ";
|
|
14026
14026
|
});
|
|
14027
|
-
var TopTagContainer$
|
|
14028
|
-
var BottomTagContainer$
|
|
14027
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14028
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14029
14029
|
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14030
14030
|
var _b, _c;
|
|
14031
14031
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14032
|
-
return (jsxRuntime.jsxs(Container$
|
|
14032
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14033
14033
|
});
|
|
14034
|
-
var templateObject_1$
|
|
14034
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$p;
|
|
14035
14035
|
|
|
14036
|
-
var Container$
|
|
14036
|
+
var Container$x = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14037
14037
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14038
14038
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14039
14039
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14055,11 +14055,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14055
14055
|
React$2.useEffect(function () {
|
|
14056
14056
|
setSelectedImage(images[index]);
|
|
14057
14057
|
}, [index, images]);
|
|
14058
|
-
return (jsxRuntime.jsxs(Container$
|
|
14058
|
+
return (jsxRuntime.jsxs(Container$x, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14059
14059
|
};
|
|
14060
|
-
var templateObject_1$
|
|
14060
|
+
var templateObject_1$G;
|
|
14061
14061
|
|
|
14062
|
-
var Container$
|
|
14062
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14063
14063
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14064
14064
|
return borderRadiusVariant &&
|
|
14065
14065
|
"\n border-radius: 40px;\n ";
|
|
@@ -14068,15 +14068,15 @@ var Container$u = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
14068
14068
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14069
14069
|
});
|
|
14070
14070
|
// max-height: 31.875rem;
|
|
14071
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
14072
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
14071
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14072
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14073
14073
|
var VideoOverlay$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14074
14074
|
var Video = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14075
14075
|
var VideoTag = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14076
14076
|
var Text$2 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14077
14077
|
var NavButtonContainer = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14078
14078
|
var Button$1 = newStyled.button(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14079
|
-
var settings = {
|
|
14079
|
+
var settings$1 = {
|
|
14080
14080
|
dots: true,
|
|
14081
14081
|
infinite: false,
|
|
14082
14082
|
speed: 200,
|
|
@@ -14090,7 +14090,7 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14090
14090
|
var sliderWrapper = React$2.useRef(null);
|
|
14091
14091
|
var iframeRef = React$2.useRef(null);
|
|
14092
14092
|
var _c = React$2.useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
|
|
14093
|
-
usePreventVerticalScroll(sliderWrapper);
|
|
14093
|
+
usePreventVerticalScroll$1(sliderWrapper);
|
|
14094
14094
|
var onButtonClick = React$2.useCallback(function (i) {
|
|
14095
14095
|
var _a;
|
|
14096
14096
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -14120,20 +14120,20 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14120
14120
|
}
|
|
14121
14121
|
}
|
|
14122
14122
|
}, [images, selectedValue]);
|
|
14123
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
14123
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$w, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
14124
14124
|
var _a;
|
|
14125
14125
|
var activeSlide = images[e];
|
|
14126
14126
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14127
14127
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14128
14128
|
autoplay ? _playVideo() : _stopVideo();
|
|
14129
|
-
} }, settings, { nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14129
|
+
} }, settings$1, { nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14130
14130
|
var _a, _b;
|
|
14131
|
-
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(Video, { children: [jsxRuntime.jsx("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsxRuntime.jsx(VideoOverlay$1, { onClick: function () {
|
|
14131
|
+
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(Video, { children: [jsxRuntime.jsx("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsxRuntime.jsx(VideoOverlay$1, { onClick: function () {
|
|
14132
14132
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14133
14133
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14134
14134
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14135
14135
|
};
|
|
14136
|
-
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
14136
|
+
function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
14137
14137
|
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14138
14138
|
var firstClientX = React$2.useRef(0);
|
|
14139
14139
|
var clientX = React$2.useRef(0);
|
|
@@ -14168,14 +14168,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14168
14168
|
};
|
|
14169
14169
|
}, [preventTouch, ref, touchStart]);
|
|
14170
14170
|
}
|
|
14171
|
-
var templateObject_1$
|
|
14171
|
+
var templateObject_1$F, templateObject_2$s, templateObject_3$o, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$3;
|
|
14172
14172
|
|
|
14173
|
-
var Container$
|
|
14173
|
+
var Container$v = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14174
14174
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14175
14175
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14176
|
-
return (jsxRuntime.jsx(Container$
|
|
14176
|
+
return (jsxRuntime.jsx(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14177
14177
|
};
|
|
14178
|
-
var templateObject_1$
|
|
14178
|
+
var templateObject_1$E;
|
|
14179
14179
|
|
|
14180
14180
|
var __defProp$1 = Object.defineProperty;
|
|
14181
14181
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14308,14 +14308,14 @@ var Portal = function (_a) {
|
|
|
14308
14308
|
var visibleStyle = function (_a) {
|
|
14309
14309
|
var opened = _a.opened;
|
|
14310
14310
|
return opened
|
|
14311
|
-
? css(templateObject_1$
|
|
14311
|
+
? css(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14312
14312
|
};
|
|
14313
14313
|
var transformStyle = function (_a) {
|
|
14314
14314
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14315
14315
|
return opened
|
|
14316
|
-
? css(templateObject_3$
|
|
14316
|
+
? css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14317
14317
|
};
|
|
14318
|
-
var Container$
|
|
14318
|
+
var Container$u = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
14319
14319
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14320
14320
|
}), visibleStyle, transformStyle);
|
|
14321
14321
|
var Overlay = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
@@ -14328,7 +14328,7 @@ var Modal = function (_a) {
|
|
|
14328
14328
|
}
|
|
14329
14329
|
close();
|
|
14330
14330
|
};
|
|
14331
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14331
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$u, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
14332
14332
|
};
|
|
14333
14333
|
var modalEvent = function (id, detail) {
|
|
14334
14334
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14356,9 +14356,220 @@ var useModal = function (id) {
|
|
|
14356
14356
|
close: close,
|
|
14357
14357
|
}); }, [close, open, opened]);
|
|
14358
14358
|
};
|
|
14359
|
-
var templateObject_1$
|
|
14359
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4$g, templateObject_5$9, templateObject_6$8;
|
|
14360
14360
|
|
|
14361
|
-
var
|
|
14361
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
14362
|
+
var timerColor = _a.timerColor;
|
|
14363
|
+
return timerColor || '';
|
|
14364
|
+
});
|
|
14365
|
+
var timeToSeconds = function (_a) {
|
|
14366
|
+
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
14367
|
+
return hours * 3600 + minutes * 60 + seconds;
|
|
14368
|
+
};
|
|
14369
|
+
var secondsToTime = function (secs) {
|
|
14370
|
+
var hours = Math.floor(secs / 3600);
|
|
14371
|
+
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
14372
|
+
var seconds = secs - hours * 3600 - minutes * 60;
|
|
14373
|
+
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
14374
|
+
};
|
|
14375
|
+
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
14376
|
+
var Timer = function (_a) {
|
|
14377
|
+
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.showHours, showHours = _d === void 0 ? true : _d, _e = _a.timerColor, timerColor = _e === void 0 ? '#292929' : _e, countdown = _a.countdown, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "showHours", "timerColor", "countdown"]);
|
|
14378
|
+
var _f = React$2.useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
14379
|
+
React$2.useEffect(function () {
|
|
14380
|
+
var timer = setInterval(function () {
|
|
14381
|
+
setSecs(function (seconds) {
|
|
14382
|
+
if (seconds === 1) {
|
|
14383
|
+
clearInterval(timer);
|
|
14384
|
+
onTimeUp();
|
|
14385
|
+
return 0;
|
|
14386
|
+
}
|
|
14387
|
+
return seconds - 1;
|
|
14388
|
+
});
|
|
14389
|
+
}, 1000);
|
|
14390
|
+
if (secs <= 0)
|
|
14391
|
+
clearInterval(timer);
|
|
14392
|
+
return function () { return clearInterval(timer); };
|
|
14393
|
+
}, [onTimeUp, secs]);
|
|
14394
|
+
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
14395
|
+
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
14396
|
+
};
|
|
14397
|
+
var templateObject_1$C;
|
|
14398
|
+
|
|
14399
|
+
var TimerContainer = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
14400
|
+
var textPosition = _a.textPosition;
|
|
14401
|
+
return textPosition;
|
|
14402
|
+
}, function (_a) {
|
|
14403
|
+
var backgroundColor = _a.backgroundColor;
|
|
14404
|
+
return backgroundColor;
|
|
14405
|
+
}, function (_a) {
|
|
14406
|
+
var borderRadius = _a.borderRadius;
|
|
14407
|
+
return borderRadius || 'unset';
|
|
14408
|
+
}, function (_a) {
|
|
14409
|
+
var borderRadius = _a.borderRadius;
|
|
14410
|
+
return borderRadius || '8px';
|
|
14411
|
+
});
|
|
14412
|
+
var templateObject_1$B;
|
|
14413
|
+
|
|
14414
|
+
var getDefaultCountdown = function () {
|
|
14415
|
+
var tomorrowDate = new Date();
|
|
14416
|
+
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
14417
|
+
tomorrowDate.setHours(0, 0, 0, 0);
|
|
14418
|
+
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
14419
|
+
return Number(totalSeconds.toFixed(0));
|
|
14420
|
+
};
|
|
14421
|
+
|
|
14422
|
+
var HurryUp = function (_a) {
|
|
14423
|
+
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.clockPosition, clockPosition = _e === void 0 ? 'left' : _e, _f = _a.countdown, countdown = _f === void 0 ? getDefaultCountdown() : _f, timerProps = __rest(_a, ["hurryUpText", "backgroundColor", "iconSize", "textPosition", "showTimer", "clockPosition", "countdown"]);
|
|
14424
|
+
var theme = useTheme();
|
|
14425
|
+
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
14426
|
+
};
|
|
14427
|
+
|
|
14428
|
+
var Container$t = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14429
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14430
|
+
return borderRadiusVariant &&
|
|
14431
|
+
"\n border-radius: 40px;\n ";
|
|
14432
|
+
}, function (_a) {
|
|
14433
|
+
var theme = _a.theme;
|
|
14434
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14435
|
+
});
|
|
14436
|
+
// max-height: 31.875rem;
|
|
14437
|
+
var TopTagContainer = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14438
|
+
var BottomTagContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n position: absolute;\n bottom: 0.75rem;\n left: 0;\n\n > div {\n padding: 4px 20px;\n width: 121px;\n height: 30px;\n border-radius: 0px 4px 4px 0px;\n background-color: #f2df78;\n }\n"], ["\n position: absolute;\n bottom: 0.75rem;\n left: 0;\n\n > div {\n padding: 4px 20px;\n width: 121px;\n height: 30px;\n border-radius: 0px 4px 4px 0px;\n background-color: #f2df78;\n }\n"])));
|
|
14439
|
+
var settings = {
|
|
14440
|
+
dots: true,
|
|
14441
|
+
infinite: false,
|
|
14442
|
+
speed: 200,
|
|
14443
|
+
slidesToShow: 1,
|
|
14444
|
+
slidesToScroll: 1,
|
|
14445
|
+
initialSlide: 0,
|
|
14446
|
+
centerMode: true,
|
|
14447
|
+
centerPadding: '22',
|
|
14448
|
+
};
|
|
14449
|
+
var ImageProductWithTagsV4 = function (_a) {
|
|
14450
|
+
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
14451
|
+
var slick = React$2.useRef(null);
|
|
14452
|
+
var sliderWrapper = React$2.useRef(null);
|
|
14453
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
14454
|
+
var onButtonClick = React$2.useCallback(function (i) {
|
|
14455
|
+
var _a;
|
|
14456
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
14457
|
+
}, [slick]);
|
|
14458
|
+
var _sendCommandToIframe = function (command) {
|
|
14459
|
+
var iframe = document.getElementById('vwo-video');
|
|
14460
|
+
(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
|
|
14461
|
+
iframe.contentWindow.postMessage(JSON.stringify({
|
|
14462
|
+
event: 'command',
|
|
14463
|
+
func: command,
|
|
14464
|
+
}), '*');
|
|
14465
|
+
};
|
|
14466
|
+
var _stopVideo = function () {
|
|
14467
|
+
_sendCommandToIframe('stopVideo');
|
|
14468
|
+
};
|
|
14469
|
+
var _playVideo = function () {
|
|
14470
|
+
_sendCommandToIframe('playVideo');
|
|
14471
|
+
};
|
|
14472
|
+
React$2.useEffect(function () {
|
|
14473
|
+
var _a;
|
|
14474
|
+
if (selectedValue) {
|
|
14475
|
+
var matchingIndex = contents.findIndex(function (image) { return image.url === selectedValue.url; });
|
|
14476
|
+
if (matchingIndex !== -1) {
|
|
14477
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(matchingIndex);
|
|
14478
|
+
}
|
|
14479
|
+
}
|
|
14480
|
+
}, [contents, selectedValue]);
|
|
14481
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$t, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
14482
|
+
var _a;
|
|
14483
|
+
var activeSlide = contents[e];
|
|
14484
|
+
// If autoplay is true and iframe is the active slide, play the video
|
|
14485
|
+
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14486
|
+
autoplay ? _playVideo() : _stopVideo();
|
|
14487
|
+
} }, settings, { ref: slick }, { children: contents.map(function (content) {
|
|
14488
|
+
var _a;
|
|
14489
|
+
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
14490
|
+
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
14491
|
+
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
14492
|
+
}) }), void 0) }), void 0)] }, void 0));
|
|
14493
|
+
};
|
|
14494
|
+
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
14495
|
+
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14496
|
+
var firstClientX = React$2.useRef(0);
|
|
14497
|
+
var clientX = React$2.useRef(0);
|
|
14498
|
+
var preventTouch = React$2.useCallback(function (e) {
|
|
14499
|
+
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
14500
|
+
// Vertical scrolling does not work when you start swiping horizontally.
|
|
14501
|
+
if (Math.abs(clientX.current) > dragThreshold) {
|
|
14502
|
+
if (e.cancelable) {
|
|
14503
|
+
e.preventDefault();
|
|
14504
|
+
e.returnValue = false;
|
|
14505
|
+
}
|
|
14506
|
+
return false;
|
|
14507
|
+
}
|
|
14508
|
+
return true;
|
|
14509
|
+
}, [dragThreshold]);
|
|
14510
|
+
var touchStart = React$2.useCallback(function (e) {
|
|
14511
|
+
firstClientX.current = e.touches[0].clientX;
|
|
14512
|
+
}, []);
|
|
14513
|
+
React$2.useEffect(function () {
|
|
14514
|
+
var current = ref.current;
|
|
14515
|
+
if (current) {
|
|
14516
|
+
current.addEventListener('touchstart', touchStart);
|
|
14517
|
+
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
14518
|
+
}
|
|
14519
|
+
return function () {
|
|
14520
|
+
if (current) {
|
|
14521
|
+
current.removeEventListener('touchstart', touchStart);
|
|
14522
|
+
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
14523
|
+
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
14524
|
+
current.removeEventListener('touchmove', preventTouch);
|
|
14525
|
+
}
|
|
14526
|
+
};
|
|
14527
|
+
}, [preventTouch, ref, touchStart]);
|
|
14528
|
+
}
|
|
14529
|
+
var templateObject_1$A, templateObject_2$q, templateObject_3$m;
|
|
14530
|
+
|
|
14531
|
+
var Container$s = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14532
|
+
var ProductGalleryMobileV4 = function (_a) {
|
|
14533
|
+
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14534
|
+
return (jsxRuntime.jsx(Container$s, __assign$1({ "data-testid": "product-gallery-mobile-v4" }, { children: jsxRuntime.jsx(ImageProductWithTagsV4, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14535
|
+
};
|
|
14536
|
+
var templateObject_1$z;
|
|
14537
|
+
|
|
14538
|
+
var Container$r = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
14539
|
+
var size = _a.size;
|
|
14540
|
+
return (size ? size : '100%');
|
|
14541
|
+
}, function (_a) {
|
|
14542
|
+
var size = _a.size;
|
|
14543
|
+
return (size ? size : '100%');
|
|
14544
|
+
});
|
|
14545
|
+
var borderSize = {
|
|
14546
|
+
xsmall: '1px',
|
|
14547
|
+
small: '1.5px',
|
|
14548
|
+
medium: '2px',
|
|
14549
|
+
large: '3px',
|
|
14550
|
+
};
|
|
14551
|
+
var DEFAULT_COLOR = '#5EAD9B';
|
|
14552
|
+
var StyledSpinner = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
14553
|
+
var size = _a.size;
|
|
14554
|
+
return borderSize[size];
|
|
14555
|
+
}, function (_a) {
|
|
14556
|
+
var _b = _a.background, background = _b === void 0 ? 'rgba(0, 0, 0, 0.2)' : _b;
|
|
14557
|
+
return background;
|
|
14558
|
+
}, function (_a) {
|
|
14559
|
+
var _b = _a.color, color = _b === void 0 ? DEFAULT_COLOR : _b;
|
|
14560
|
+
return color;
|
|
14561
|
+
}, function (_a) {
|
|
14562
|
+
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
14563
|
+
return duration;
|
|
14564
|
+
});
|
|
14565
|
+
var templateObject_1$y, templateObject_2$p;
|
|
14566
|
+
|
|
14567
|
+
var Spinner = function (_a) {
|
|
14568
|
+
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
14569
|
+
return (jsxRuntime.jsx(Container$r, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
14570
|
+
};
|
|
14571
|
+
|
|
14572
|
+
var Bar$1 = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14362
14573
|
var height = _a.height;
|
|
14363
14574
|
return height || '0.5rem';
|
|
14364
14575
|
}, function (_a) {
|
|
@@ -14397,7 +14608,7 @@ var BarContainer = newStyled.div({
|
|
|
14397
14608
|
padding: '0 16px',
|
|
14398
14609
|
position: 'relative',
|
|
14399
14610
|
});
|
|
14400
|
-
var Container$
|
|
14611
|
+
var Container$q = newStyled.div(function (_a) {
|
|
14401
14612
|
var backgroundColor = _a.backgroundColor;
|
|
14402
14613
|
return ({
|
|
14403
14614
|
width: '475px',
|
|
@@ -14428,21 +14639,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14428
14639
|
var theme = useTheme();
|
|
14429
14640
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14430
14641
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14431
|
-
return (jsxRuntime.jsxs(Container$
|
|
14642
|
+
return (jsxRuntime.jsxs(Container$q, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14432
14643
|
};
|
|
14433
|
-
var templateObject_1$
|
|
14644
|
+
var templateObject_1$x;
|
|
14434
14645
|
|
|
14435
|
-
var Container$
|
|
14646
|
+
var Container$p = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14436
14647
|
var theme = _a.theme;
|
|
14437
14648
|
return theme.component.orderBar.backgroundColor;
|
|
14438
14649
|
});
|
|
14439
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14650
|
+
var H1 = newStyled.h1(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14440
14651
|
var OrderBar = function (_a) {
|
|
14441
14652
|
var message = _a.message, color = _a.color;
|
|
14442
14653
|
var theme = useTheme();
|
|
14443
|
-
return (jsxRuntime.jsxs(Container$
|
|
14654
|
+
return (jsxRuntime.jsxs(Container$p, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14444
14655
|
};
|
|
14445
|
-
var templateObject_1$
|
|
14656
|
+
var templateObject_1$w, templateObject_2$o;
|
|
14446
14657
|
|
|
14447
14658
|
var htmlReactParser = {exports: {}};
|
|
14448
14659
|
|
|
@@ -18223,8 +18434,8 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18223
18434
|
HTMLReactParser$1.attributesToProps;
|
|
18224
18435
|
HTMLReactParser$1.Element;
|
|
18225
18436
|
|
|
18226
|
-
var Container$
|
|
18227
|
-
var Card = newStyled.div(templateObject_2$
|
|
18437
|
+
var Container$o = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
18438
|
+
var Card = newStyled.div(templateObject_2$n || (templateObject_2$n = __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: 20px 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: 20px 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"])));
|
|
18228
18439
|
var Tag$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __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"])));
|
|
18229
18440
|
var Label = newStyled.div(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
18230
18441
|
var Check = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
@@ -18233,7 +18444,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$6 || (templateObject_7$6 =
|
|
|
18233
18444
|
var DiscountContainer = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18234
18445
|
var PackSelector = function (_a) {
|
|
18235
18446
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18236
|
-
return (jsxRuntime.jsx(Container$
|
|
18447
|
+
return (jsxRuntime.jsx(Container$o, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18237
18448
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18238
18449
|
}) }), void 0));
|
|
18239
18450
|
};
|
|
@@ -18260,10 +18471,10 @@ var PackCard = function (_a) {
|
|
|
18260
18471
|
currency: currencyCode || 'USD',
|
|
18261
18472
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18262
18473
|
};
|
|
18263
|
-
var templateObject_1$
|
|
18474
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$8, templateObject_6$7, templateObject_7$6, templateObject_8$5;
|
|
18264
18475
|
|
|
18265
|
-
var Container$
|
|
18266
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18476
|
+
var Container$n = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18477
|
+
var IconContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18267
18478
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18268
18479
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18269
18480
|
}));
|
|
@@ -18284,7 +18495,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
18284
18495
|
var background = _a.background;
|
|
18285
18496
|
return background || 'unset';
|
|
18286
18497
|
});
|
|
18287
|
-
var templateObject_1$
|
|
18498
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$k, templateObject_4$e;
|
|
18288
18499
|
|
|
18289
18500
|
var Pagination = function (_a) {
|
|
18290
18501
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18330,7 +18541,7 @@ var Pagination = function (_a) {
|
|
|
18330
18541
|
}
|
|
18331
18542
|
return pages;
|
|
18332
18543
|
}, [from, page, showReducedPages, to]);
|
|
18333
|
-
return (jsxRuntime.jsxs(Container$
|
|
18544
|
+
return (jsxRuntime.jsxs(Container$n, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18334
18545
|
};
|
|
18335
18546
|
|
|
18336
18547
|
var PaginatorBlog = function (_a) {
|
|
@@ -18344,12 +18555,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18344
18555
|
setPage(page);
|
|
18345
18556
|
onChange(page);
|
|
18346
18557
|
};
|
|
18347
|
-
return (jsxRuntime.jsxs(Container$
|
|
18558
|
+
return (jsxRuntime.jsxs(Container$n, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18348
18559
|
? theme.colors.shades['white'].color
|
|
18349
18560
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18350
18561
|
};
|
|
18351
18562
|
|
|
18352
|
-
var Container$
|
|
18563
|
+
var Container$m = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18353
18564
|
var width = _a.width;
|
|
18354
18565
|
return width;
|
|
18355
18566
|
}, function (_a) {
|
|
@@ -18365,13 +18576,13 @@ var Container$n = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
18365
18576
|
var PaymentMethod = function (_a) {
|
|
18366
18577
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18367
18578
|
var theme = useTheme();
|
|
18368
|
-
return (jsxRuntime.jsx(Container$
|
|
18579
|
+
return (jsxRuntime.jsx(Container$m, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
18369
18580
|
};
|
|
18370
|
-
var templateObject_1$
|
|
18581
|
+
var templateObject_1$t;
|
|
18371
18582
|
|
|
18372
|
-
var Container$
|
|
18583
|
+
var Container$l = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18373
18584
|
var IMAGE_WIDTH = '63px';
|
|
18374
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18585
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18375
18586
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18376
18587
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18377
18588
|
}), IMAGE_WIDTH);
|
|
@@ -18409,9 +18620,9 @@ var StyledSpan = newStyled.span(templateObject_6$6 || (templateObject_6$6 = __ma
|
|
|
18409
18620
|
var SimpleOrderItem = function (_a) {
|
|
18410
18621
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
18411
18622
|
var theme = useTheme();
|
|
18412
|
-
return (jsxRuntime.jsxs(Container$
|
|
18623
|
+
return (jsxRuntime.jsxs(Container$l, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18413
18624
|
};
|
|
18414
|
-
var templateObject_1$
|
|
18625
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$j, templateObject_4$d, templateObject_5$7, templateObject_6$6;
|
|
18415
18626
|
|
|
18416
18627
|
var P$1 = newStyled.p(function (_a) {
|
|
18417
18628
|
var color = _a.color;
|
|
@@ -18425,7 +18636,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18425
18636
|
margin: '0.938rem 4.188rem',
|
|
18426
18637
|
});
|
|
18427
18638
|
});
|
|
18428
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18639
|
+
var Bar = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18429
18640
|
var height = _a.height;
|
|
18430
18641
|
return height || '0.5rem';
|
|
18431
18642
|
}, function (_a) {
|
|
@@ -18454,7 +18665,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18454
18665
|
position: 'absolute',
|
|
18455
18666
|
});
|
|
18456
18667
|
});
|
|
18457
|
-
var Container$
|
|
18668
|
+
var Container$k = newStyled.div(function (_a) {
|
|
18458
18669
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18459
18670
|
return ({
|
|
18460
18671
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18468,12 +18679,12 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18468
18679
|
var ProgressBar = function (_a) {
|
|
18469
18680
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
18470
18681
|
var theme = useTheme();
|
|
18471
|
-
return (jsxRuntime.jsxs(Container$
|
|
18682
|
+
return (jsxRuntime.jsxs(Container$k, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18472
18683
|
};
|
|
18473
|
-
var templateObject_1$
|
|
18684
|
+
var templateObject_1$r;
|
|
18474
18685
|
|
|
18475
|
-
var Container$
|
|
18476
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18686
|
+
var Container$j = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
18687
|
+
var Item$1 = newStyled.span(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
18477
18688
|
var Number$1 = newStyled(Item$1)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
18478
18689
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
18479
18690
|
var QuantityPicker = function (_a) {
|
|
@@ -18498,9 +18709,9 @@ var QuantityPicker = function (_a) {
|
|
|
18498
18709
|
return clamp(value);
|
|
18499
18710
|
});
|
|
18500
18711
|
}, [value, clamp]);
|
|
18501
|
-
return (jsxRuntime.jsxs(Container$
|
|
18712
|
+
return (jsxRuntime.jsxs(Container$j, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18502
18713
|
};
|
|
18503
|
-
var templateObject_1$
|
|
18714
|
+
var templateObject_1$q, templateObject_2$k, templateObject_3$i, templateObject_4$c;
|
|
18504
18715
|
|
|
18505
18716
|
/* base styles & size variants */
|
|
18506
18717
|
var CustomRadioStyles$1 = {
|
|
@@ -18569,9 +18780,9 @@ var ContainerStyles$1 = {
|
|
|
18569
18780
|
},
|
|
18570
18781
|
};
|
|
18571
18782
|
|
|
18572
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18573
|
-
var Container$
|
|
18574
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18783
|
+
var Wrapper$3 = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18784
|
+
var Container$i = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18785
|
+
var Input$2 = newStyled.input(templateObject_2$j || (templateObject_2$j = __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) {
|
|
18575
18786
|
var disabled = _a.disabled;
|
|
18576
18787
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18577
18788
|
});
|
|
@@ -18587,9 +18798,9 @@ var RadioPrimary = function (_a) {
|
|
|
18587
18798
|
var value = event.currentTarget.value;
|
|
18588
18799
|
onChange({ value: value, label: label });
|
|
18589
18800
|
};
|
|
18590
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
18801
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$i, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { 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$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18591
18802
|
};
|
|
18592
|
-
var templateObject_1$
|
|
18803
|
+
var templateObject_1$p, templateObject_2$j, templateObject_3$h;
|
|
18593
18804
|
|
|
18594
18805
|
var RadioGroupInput = function (_a) {
|
|
18595
18806
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18668,9 +18879,9 @@ var ContainerStyles = {
|
|
|
18668
18879
|
},
|
|
18669
18880
|
};
|
|
18670
18881
|
|
|
18671
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18672
|
-
var Container$
|
|
18673
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18882
|
+
var Wrapper$2 = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
18883
|
+
var Container$h = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18884
|
+
var Input$1 = newStyled.input(templateObject_2$i || (templateObject_2$i = __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) {
|
|
18674
18885
|
var disabled = _a.disabled;
|
|
18675
18886
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18676
18887
|
});
|
|
@@ -18692,9 +18903,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18692
18903
|
var value = event.currentTarget.value;
|
|
18693
18904
|
onChange({ value: value, label: label });
|
|
18694
18905
|
};
|
|
18695
|
-
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$
|
|
18906
|
+
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$h, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { 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, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18696
18907
|
};
|
|
18697
|
-
var templateObject_1$
|
|
18908
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$g;
|
|
18698
18909
|
|
|
18699
18910
|
var ClubRadioGroupInput = function (_a) {
|
|
18700
18911
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18722,8 +18933,8 @@ function formatDate(date, format) {
|
|
|
18722
18933
|
}
|
|
18723
18934
|
}
|
|
18724
18935
|
|
|
18725
|
-
var Container$
|
|
18726
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18936
|
+
var Container$g = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
18937
|
+
var Content$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
18727
18938
|
var StarsContent = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18728
18939
|
var ReviewContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
18729
18940
|
var DateText$1 = newStyled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
@@ -18760,15 +18971,15 @@ var Review$1 = function (_a) {
|
|
|
18760
18971
|
}
|
|
18761
18972
|
}
|
|
18762
18973
|
}, [opened]);
|
|
18763
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
18974
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18764
18975
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18765
18976
|
};
|
|
18766
|
-
var templateObject_1$
|
|
18977
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18767
18978
|
|
|
18768
18979
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18769
18980
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18770
|
-
var Container$
|
|
18771
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18981
|
+
var Container$f = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
18982
|
+
var Heading = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18772
18983
|
var Content = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18773
18984
|
var ReviewContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18774
18985
|
var DateText = newStyled.span(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -18809,7 +19020,7 @@ var Review = function (_a) {
|
|
|
18809
19020
|
});
|
|
18810
19021
|
};
|
|
18811
19022
|
}, [randomId]);
|
|
18812
|
-
return (jsxRuntime.jsxs(Container$
|
|
19023
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(ReviewerName, { children: reviewerName }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
18813
19024
|
__html: showMoreMobile
|
|
18814
19025
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18815
19026
|
: description,
|
|
@@ -18819,10 +19030,10 @@ var Review = function (_a) {
|
|
|
18819
19030
|
: description,
|
|
18820
19031
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
18821
19032
|
};
|
|
18822
|
-
var templateObject_1$
|
|
19033
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$e, templateObject_4$a, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18823
19034
|
|
|
18824
|
-
var Container$
|
|
18825
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19035
|
+
var Container$e = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19036
|
+
var ReviewsContainer = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
18826
19037
|
var ReviewsCount = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
18827
19038
|
var ReviewsStars = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
18828
19039
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
@@ -18835,19 +19046,19 @@ var ReviewsHeader = function (_a) {
|
|
|
18835
19046
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
18836
19047
|
var starsNumber = 5;
|
|
18837
19048
|
var theme = useTheme();
|
|
18838
|
-
return (jsxRuntime.jsxs(Container$
|
|
19049
|
+
return (jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18839
19050
|
};
|
|
18840
|
-
var templateObject_1$
|
|
19051
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18841
19052
|
|
|
18842
|
-
var Container$
|
|
18843
|
-
var Text = newStyled.p(templateObject_2$
|
|
19053
|
+
var Container$d = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19054
|
+
var Text = newStyled.p(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
18844
19055
|
var ScrollToTop = function (_a) {
|
|
18845
19056
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18846
19057
|
var theme = useTheme();
|
|
18847
19058
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18848
|
-
return (jsxRuntime.jsxs(Container$
|
|
19059
|
+
return (jsxRuntime.jsxs(Container$d, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18849
19060
|
};
|
|
18850
|
-
var templateObject_1$
|
|
19061
|
+
var templateObject_1$k, templateObject_2$e;
|
|
18851
19062
|
|
|
18852
19063
|
var Input = newStyled.input(function (props) { return ({
|
|
18853
19064
|
padding: props.theme.component.input.padding,
|
|
@@ -18878,7 +19089,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
18878
19089
|
},
|
|
18879
19090
|
}); });
|
|
18880
19091
|
|
|
18881
|
-
var Container$
|
|
19092
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
18882
19093
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
18883
19094
|
}));
|
|
18884
19095
|
var Description = newStyled.div({
|
|
@@ -18895,25 +19106,25 @@ var Description = newStyled.div({
|
|
|
18895
19106
|
var ProductItem = function (_a) {
|
|
18896
19107
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
18897
19108
|
var theme = useTheme();
|
|
18898
|
-
return (jsxRuntime.jsxs(Container$
|
|
19109
|
+
return (jsxRuntime.jsxs(Container$c, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
18899
19110
|
};
|
|
18900
|
-
var templateObject_1$
|
|
19111
|
+
var templateObject_1$j;
|
|
18901
19112
|
|
|
18902
|
-
var Container$
|
|
19113
|
+
var Container$b = newStyled.div({
|
|
18903
19114
|
display: 'flex',
|
|
18904
19115
|
justifyContent: 'center',
|
|
18905
19116
|
padding: '1rem',
|
|
18906
19117
|
});
|
|
18907
19118
|
var Footer = function (_a) {
|
|
18908
19119
|
var text = _a.text, onClick = _a.onClick;
|
|
18909
|
-
return (jsxRuntime.jsx(Container$
|
|
19120
|
+
return (jsxRuntime.jsx(Container$b, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
18910
19121
|
};
|
|
18911
19122
|
|
|
18912
19123
|
var Ul = newStyled.ul({
|
|
18913
19124
|
margin: '0px',
|
|
18914
19125
|
padding: '0px',
|
|
18915
19126
|
});
|
|
18916
|
-
var Li = newStyled.li(templateObject_1$
|
|
19127
|
+
var Li = newStyled.li(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
18917
19128
|
padding: [0, '0rem 1rem'],
|
|
18918
19129
|
borderRadius: [0, '0.5rem'],
|
|
18919
19130
|
}));
|
|
@@ -18925,7 +19136,7 @@ var Anchor = newStyled.a({
|
|
|
18925
19136
|
padding: 0,
|
|
18926
19137
|
textDecoration: 'none',
|
|
18927
19138
|
});
|
|
18928
|
-
var Container$
|
|
19139
|
+
var Container$a = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
18929
19140
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
18930
19141
|
marginTop: ['1.25rem', '0.125rem'],
|
|
18931
19142
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -18936,11 +19147,11 @@ var Header = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTem
|
|
|
18936
19147
|
var ResultsPanel = function (_a) {
|
|
18937
19148
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
18938
19149
|
var theme = useTheme();
|
|
18939
|
-
return (jsxRuntime.jsxs(Container$
|
|
19150
|
+
return (jsxRuntime.jsxs(Container$a, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
18940
19151
|
};
|
|
18941
|
-
var templateObject_1$
|
|
19152
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$c;
|
|
18942
19153
|
|
|
18943
|
-
var Button = newStyled.button(templateObject_1$
|
|
19154
|
+
var Button = newStyled.button(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
18944
19155
|
right: ['1rem', '7.75rem'],
|
|
18945
19156
|
top: ['0.75rem', '0.75rem'],
|
|
18946
19157
|
}));
|
|
@@ -18949,7 +19160,7 @@ var ClearButton = function (_a) {
|
|
|
18949
19160
|
var theme = useTheme();
|
|
18950
19161
|
return (jsxRuntime.jsx(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
18951
19162
|
};
|
|
18952
|
-
var templateObject_1$
|
|
19163
|
+
var templateObject_1$h;
|
|
18953
19164
|
|
|
18954
19165
|
var SearchIconContainer = newStyled.div({
|
|
18955
19166
|
display: 'flex',
|
|
@@ -18959,7 +19170,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
18959
19170
|
background: 'white',
|
|
18960
19171
|
alignSelf: 'center',
|
|
18961
19172
|
});
|
|
18962
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19173
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
18963
19174
|
var SearchControl = function (_a) {
|
|
18964
19175
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
18965
19176
|
var theme = useTheme();
|
|
@@ -18975,7 +19186,7 @@ var SearchControl = function (_a) {
|
|
|
18975
19186
|
}
|
|
18976
19187
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
18977
19188
|
};
|
|
18978
|
-
var templateObject_1$
|
|
19189
|
+
var templateObject_1$g;
|
|
18979
19190
|
|
|
18980
19191
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
18981
19192
|
var reducer = function (state, action) {
|
|
@@ -18991,7 +19202,7 @@ var reducer = function (state, action) {
|
|
|
18991
19202
|
}
|
|
18992
19203
|
}
|
|
18993
19204
|
};
|
|
18994
|
-
var Container$
|
|
19205
|
+
var Container$9 = newStyled.div({
|
|
18995
19206
|
position: 'relative',
|
|
18996
19207
|
display: 'flex',
|
|
18997
19208
|
});
|
|
@@ -19031,7 +19242,7 @@ var SearchBar = function (_a) {
|
|
|
19031
19242
|
if (e.cancelable) {
|
|
19032
19243
|
e.preventDefault();
|
|
19033
19244
|
}
|
|
19034
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
19245
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$9, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19035
19246
|
if (e.key === 'Enter') {
|
|
19036
19247
|
if (e.cancelable) {
|
|
19037
19248
|
e.preventDefault();
|
|
@@ -19042,20 +19253,20 @@ var SearchBar = function (_a) {
|
|
|
19042
19253
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19043
19254
|
};
|
|
19044
19255
|
|
|
19045
|
-
var Container$
|
|
19046
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19256
|
+
var Container$8 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19257
|
+
var BackArrow = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19047
19258
|
var BoldSpan = newStyled.span(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19048
19259
|
var NormalSpan = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19049
19260
|
var SearchNavigationParents = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19050
19261
|
var SearchNavigation = function (_a) {
|
|
19051
19262
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19052
|
-
return (jsxRuntime.jsxs(Container$
|
|
19263
|
+
return (jsxRuntime.jsxs(Container$8, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19053
19264
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19054
19265
|
}) }, void 0)] }, void 0));
|
|
19055
19266
|
};
|
|
19056
|
-
var templateObject_1$
|
|
19267
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$b, templateObject_4$8, templateObject_5$3;
|
|
19057
19268
|
|
|
19058
|
-
var Container$
|
|
19269
|
+
var Container$7 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19059
19270
|
var alignCenter = _a.alignCenter;
|
|
19060
19271
|
return alignCenter &&
|
|
19061
19272
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19065,17 +19276,17 @@ var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
19065
19276
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19066
19277
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19067
19278
|
});
|
|
19068
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19279
|
+
var TitleText = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19069
19280
|
var BannerText = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19070
19281
|
var ShortBanner = function (_a) {
|
|
19071
19282
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19072
19283
|
var theme = useTheme();
|
|
19073
|
-
return (jsxRuntime.jsxs(Container$
|
|
19284
|
+
return (jsxRuntime.jsxs(Container$7, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19074
19285
|
};
|
|
19075
|
-
var templateObject_1$
|
|
19286
|
+
var templateObject_1$e, templateObject_2$b, templateObject_3$a;
|
|
19076
19287
|
|
|
19077
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19078
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19288
|
+
var TableElement$1 = newStyled.table(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19289
|
+
var TableCell$1 = newStyled.td(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19079
19290
|
var TableHead$1 = newStyled.th(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19080
19291
|
var TableRow$1 = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19081
19292
|
var SizeChartTable = function (_a) {
|
|
@@ -19110,10 +19321,10 @@ var SizeChartTable = function (_a) {
|
|
|
19110
19321
|
backgroundColor: getCellColor(index, cell),
|
|
19111
19322
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
19112
19323
|
};
|
|
19113
|
-
var templateObject_1$
|
|
19324
|
+
var templateObject_1$d, templateObject_2$a, templateObject_3$9, templateObject_4$7;
|
|
19114
19325
|
|
|
19115
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19116
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19326
|
+
var TableElement = newStyled.table(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19327
|
+
var TableCell = newStyled.td(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19117
19328
|
var TableHead = newStyled.th(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19118
19329
|
var TableRow = newStyled.tr(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19119
19330
|
var SizeTable = function (_a) {
|
|
@@ -19121,7 +19332,7 @@ var SizeTable = function (_a) {
|
|
|
19121
19332
|
var theme = useTheme();
|
|
19122
19333
|
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19123
19334
|
};
|
|
19124
|
-
var templateObject_1$
|
|
19335
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$8, templateObject_4$6;
|
|
19125
19336
|
|
|
19126
19337
|
var getStylesBySize$4 = function (size) {
|
|
19127
19338
|
switch (size) {
|
|
@@ -19148,7 +19359,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19148
19359
|
} });
|
|
19149
19360
|
};
|
|
19150
19361
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19151
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19362
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19152
19363
|
};
|
|
19153
19364
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19154
19365
|
if (disabled)
|
|
@@ -19164,23 +19375,23 @@ var TextButton = function (_a) {
|
|
|
19164
19375
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19165
19376
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19166
19377
|
};
|
|
19167
|
-
var templateObject_1$
|
|
19378
|
+
var templateObject_1$b;
|
|
19168
19379
|
|
|
19169
|
-
var Container$
|
|
19170
|
-
var P = newStyled.p(templateObject_2$
|
|
19380
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19381
|
+
var P = newStyled.p(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19171
19382
|
var PercentageSpan = newStyled.span(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19172
19383
|
var SizeFitGuide = function (_a) {
|
|
19173
19384
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19174
|
-
return (jsxRuntime.jsxs(Container$
|
|
19385
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19175
19386
|
};
|
|
19176
|
-
var templateObject_1$
|
|
19387
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$7;
|
|
19177
19388
|
|
|
19178
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19389
|
+
var ButtonsContainer = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19179
19390
|
var inline = _a.inline;
|
|
19180
19391
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19181
19392
|
});
|
|
19182
|
-
var Row = newStyled.div(templateObject_2$
|
|
19183
|
-
var templateObject_1$
|
|
19393
|
+
var Row = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19394
|
+
var templateObject_1$9, templateObject_2$7;
|
|
19184
19395
|
|
|
19185
19396
|
var SizeSelector = function (_a) {
|
|
19186
19397
|
var _b;
|
|
@@ -19199,7 +19410,7 @@ var SizeSelector = function (_a) {
|
|
|
19199
19410
|
}) }), void 0)] }), void 0));
|
|
19200
19411
|
};
|
|
19201
19412
|
|
|
19202
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19413
|
+
var TabContainer = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19203
19414
|
var titleSize = _a.titleSize;
|
|
19204
19415
|
return titleSize;
|
|
19205
19416
|
}, function (_a) {
|
|
@@ -19216,10 +19427,10 @@ var Tab = function (_a) {
|
|
|
19216
19427
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19217
19428
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19218
19429
|
};
|
|
19219
|
-
var templateObject_1$
|
|
19430
|
+
var templateObject_1$8;
|
|
19220
19431
|
|
|
19221
|
-
var Container$
|
|
19222
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19432
|
+
var Container$5 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19433
|
+
var TabList = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19223
19434
|
var backgroundColor = _a.backgroundColor;
|
|
19224
19435
|
return backgroundColor;
|
|
19225
19436
|
}, function (_a) {
|
|
@@ -19236,16 +19447,16 @@ var Tabs = function (_a) {
|
|
|
19236
19447
|
return null;
|
|
19237
19448
|
}
|
|
19238
19449
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19239
|
-
return (jsxRuntime.jsxs(Container$
|
|
19450
|
+
return (jsxRuntime.jsxs(Container$5, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19240
19451
|
};
|
|
19241
|
-
var templateObject_1$
|
|
19452
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$6, templateObject_4$5;
|
|
19242
19453
|
|
|
19243
|
-
var Container$
|
|
19454
|
+
var Container$4 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19244
19455
|
var Tag = function (_a) {
|
|
19245
19456
|
var text = _a.text, className = _a.className;
|
|
19246
|
-
return jsxRuntime.jsx(Container$
|
|
19457
|
+
return jsxRuntime.jsx(Container$4, __assign$1({ className: className }, { children: text }), void 0);
|
|
19247
19458
|
};
|
|
19248
|
-
var templateObject_1$
|
|
19459
|
+
var templateObject_1$6;
|
|
19249
19460
|
|
|
19250
19461
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19251
19462
|
switch (size) {
|
|
@@ -19356,8 +19567,8 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19356
19567
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19357
19568
|
};
|
|
19358
19569
|
|
|
19359
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19360
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19570
|
+
var ImageWrapper = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19571
|
+
var VideoOverlay = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19361
19572
|
var FullscreenVideo = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19362
19573
|
var ImageVideo = function (_a) {
|
|
19363
19574
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
@@ -19378,11 +19589,11 @@ var ImageVideo = function (_a) {
|
|
|
19378
19589
|
height: '100%',
|
|
19379
19590
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19380
19591
|
};
|
|
19381
|
-
var templateObject_1$
|
|
19592
|
+
var templateObject_1$5, templateObject_2$5, templateObject_3$5;
|
|
19382
19593
|
|
|
19383
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19384
|
-
var ContainerMobile = css(templateObject_2$
|
|
19385
|
-
var Container$
|
|
19594
|
+
var ContainerDesktop = css(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19595
|
+
var ContainerMobile = css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19596
|
+
var Container$3 = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19386
19597
|
var TextContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19387
19598
|
var TextWithImage = function (_a) {
|
|
19388
19599
|
var _b, _c, _d, _e;
|
|
@@ -19403,7 +19614,7 @@ var TextWithImage = function (_a) {
|
|
|
19403
19614
|
// @ts-ignore
|
|
19404
19615
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19405
19616
|
};
|
|
19406
|
-
return (jsxs(Container$
|
|
19617
|
+
return (jsxs(Container$3, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
19407
19618
|
backgroundColor: props.btnBGColor,
|
|
19408
19619
|
color: '#ffffff',
|
|
19409
19620
|
border: props.btnBGColor,
|
|
@@ -19413,48 +19624,10 @@ var TextWithImage = function (_a) {
|
|
|
19413
19624
|
},
|
|
19414
19625
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19415
19626
|
};
|
|
19416
|
-
var templateObject_1$
|
|
19417
|
-
|
|
19418
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19419
|
-
var timerColor = _a.timerColor;
|
|
19420
|
-
return timerColor || '';
|
|
19421
|
-
});
|
|
19422
|
-
var timeToSeconds = function (_a) {
|
|
19423
|
-
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
19424
|
-
return hours * 3600 + minutes * 60 + seconds;
|
|
19425
|
-
};
|
|
19426
|
-
var secondsToTime = function (secs) {
|
|
19427
|
-
var hours = Math.floor(secs / 3600);
|
|
19428
|
-
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
19429
|
-
var seconds = secs - hours * 3600 - minutes * 60;
|
|
19430
|
-
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
19431
|
-
};
|
|
19432
|
-
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
19433
|
-
var Timer = function (_a) {
|
|
19434
|
-
var onTimeUp = _a.onTimeUp, _b = _a.displayZeroValues, displayZeroValues = _b === void 0 ? false : _b, _c = _a.showSeconds, showSeconds = _c === void 0 ? true : _c, _d = _a.showHours, showHours = _d === void 0 ? true : _d, _e = _a.timerColor, timerColor = _e === void 0 ? '#292929' : _e, countdown = _a.countdown, rest = __rest(_a, ["onTimeUp", "displayZeroValues", "showSeconds", "showHours", "timerColor", "countdown"]);
|
|
19435
|
-
var _f = React$2.useState(countdown !== null && countdown !== void 0 ? countdown : timeToSeconds(__assign$1(__assign$1({}, DEFAULT_TIME), rest))), secs = _f[0], setSecs = _f[1];
|
|
19436
|
-
React$2.useEffect(function () {
|
|
19437
|
-
var timer = setInterval(function () {
|
|
19438
|
-
setSecs(function (seconds) {
|
|
19439
|
-
if (seconds === 1) {
|
|
19440
|
-
clearInterval(timer);
|
|
19441
|
-
onTimeUp();
|
|
19442
|
-
return 0;
|
|
19443
|
-
}
|
|
19444
|
-
return seconds - 1;
|
|
19445
|
-
});
|
|
19446
|
-
}, 1000);
|
|
19447
|
-
if (secs <= 0)
|
|
19448
|
-
clearInterval(timer);
|
|
19449
|
-
return function () { return clearInterval(timer); };
|
|
19450
|
-
}, [onTimeUp, secs]);
|
|
19451
|
-
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19452
|
-
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19453
|
-
};
|
|
19454
|
-
var templateObject_1$6;
|
|
19627
|
+
var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$4;
|
|
19455
19628
|
|
|
19456
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19457
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19629
|
+
var Wrapper$1 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
19630
|
+
var GrandTotal = newStyled.h1(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
19458
19631
|
var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19459
19632
|
var theme = _a.theme;
|
|
19460
19633
|
return theme.component.total.basicTotal.currency.color;
|
|
@@ -19468,11 +19641,11 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19468
19641
|
var theme = _a.theme;
|
|
19469
19642
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19470
19643
|
});
|
|
19471
|
-
var Container$
|
|
19644
|
+
var Container$2 = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
19472
19645
|
var highlightColor = _a.highlightColor;
|
|
19473
19646
|
return highlightColor;
|
|
19474
19647
|
});
|
|
19475
|
-
var TotalContainer = newStyled(Container$
|
|
19648
|
+
var TotalContainer = newStyled(Container$2)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19476
19649
|
var showTotalLabel = _a.showTotalLabel;
|
|
19477
19650
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19478
19651
|
});
|
|
@@ -19482,19 +19655,19 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19482
19655
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19483
19656
|
});
|
|
19484
19657
|
var TotalLabel = newStyled(Text$7)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19485
|
-
var templateObject_1$
|
|
19658
|
+
var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
19486
19659
|
|
|
19487
19660
|
var Total = function (_a) {
|
|
19488
19661
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
19489
19662
|
var theme = useTheme();
|
|
19490
|
-
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
19663
|
+
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$2, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19491
19664
|
};
|
|
19492
19665
|
|
|
19493
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19666
|
+
var Wrapper = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19494
19667
|
var color = _a.color;
|
|
19495
19668
|
return color;
|
|
19496
19669
|
});
|
|
19497
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19670
|
+
var ItemContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
19498
19671
|
var Item = newStyled.h4(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
19499
19672
|
var theme = _a.theme;
|
|
19500
19673
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
@@ -19515,15 +19688,15 @@ var Subtotal = function (_a) {
|
|
|
19515
19688
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19516
19689
|
})] }), void 0));
|
|
19517
19690
|
};
|
|
19518
|
-
var templateObject_1$
|
|
19691
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2;
|
|
19519
19692
|
|
|
19520
19693
|
var Totals = {
|
|
19521
19694
|
Total: Total,
|
|
19522
19695
|
Subtotal: Subtotal,
|
|
19523
19696
|
};
|
|
19524
19697
|
|
|
19525
|
-
var Container$
|
|
19526
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19698
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19699
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19527
19700
|
var CheckpointDate$1 = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19528
19701
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19529
19702
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
@@ -19563,7 +19736,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19563
19736
|
}
|
|
19564
19737
|
return '30px';
|
|
19565
19738
|
};
|
|
19566
|
-
return (jsxRuntime.jsxs(Container$
|
|
19739
|
+
return (jsxRuntime.jsxs(Container$1, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19567
19740
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19568
19741
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsx(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
19569
19742
|
? activeCheckpointColor
|
|
@@ -19574,10 +19747,10 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19574
19747
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19575
19748
|
})] }), void 0));
|
|
19576
19749
|
};
|
|
19577
|
-
var templateObject_1$
|
|
19750
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11;
|
|
19578
19751
|
|
|
19579
|
-
var Container
|
|
19580
|
-
var CheckpointContainer = newStyled.div(templateObject_2
|
|
19752
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19753
|
+
var CheckpointContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19581
19754
|
var CheckpointDate = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19582
19755
|
var CheckpointDateLabel = newStyled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19583
19756
|
var CheckpointStatus = newStyled.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
@@ -19605,7 +19778,7 @@ var TrackingProgress = function (_a) {
|
|
|
19605
19778
|
}
|
|
19606
19779
|
return '30px';
|
|
19607
19780
|
};
|
|
19608
|
-
return (jsxRuntime.jsxs(Container
|
|
19781
|
+
return (jsxRuntime.jsxs(Container, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19609
19782
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19610
19783
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
19611
19784
|
? theme.colors.semantic.informative.color
|
|
@@ -19614,70 +19787,7 @@ var TrackingProgress = function (_a) {
|
|
|
19614
19787
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19615
19788
|
})] }), void 0));
|
|
19616
19789
|
};
|
|
19617
|
-
var templateObject_1
|
|
19618
|
-
|
|
19619
|
-
var TimerContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
19620
|
-
var textPosition = _a.textPosition;
|
|
19621
|
-
return textPosition;
|
|
19622
|
-
}, function (_a) {
|
|
19623
|
-
var backgroundColor = _a.backgroundColor;
|
|
19624
|
-
return backgroundColor;
|
|
19625
|
-
}, function (_a) {
|
|
19626
|
-
var borderRadius = _a.borderRadius;
|
|
19627
|
-
return borderRadius || 'unset';
|
|
19628
|
-
}, function (_a) {
|
|
19629
|
-
var borderRadius = _a.borderRadius;
|
|
19630
|
-
return borderRadius || '8px';
|
|
19631
|
-
});
|
|
19632
|
-
var templateObject_1$1;
|
|
19633
|
-
|
|
19634
|
-
var getDefaultCountdown = function () {
|
|
19635
|
-
var tomorrowDate = new Date();
|
|
19636
|
-
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
19637
|
-
tomorrowDate.setHours(0, 0, 0, 0);
|
|
19638
|
-
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
19639
|
-
return Number(totalSeconds.toFixed(0));
|
|
19640
|
-
};
|
|
19641
|
-
|
|
19642
|
-
var HurryUp = function (_a) {
|
|
19643
|
-
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.clockPosition, clockPosition = _e === void 0 ? 'left' : _e, _f = _a.countdown, countdown = _f === void 0 ? getDefaultCountdown() : _f, timerProps = __rest(_a, ["hurryUpText", "backgroundColor", "iconSize", "textPosition", "showTimer", "clockPosition", "countdown"]);
|
|
19644
|
-
var theme = useTheme();
|
|
19645
|
-
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
19646
|
-
};
|
|
19647
|
-
|
|
19648
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
19649
|
-
var size = _a.size;
|
|
19650
|
-
return (size ? size : '100%');
|
|
19651
|
-
}, function (_a) {
|
|
19652
|
-
var size = _a.size;
|
|
19653
|
-
return (size ? size : '100%');
|
|
19654
|
-
});
|
|
19655
|
-
var borderSize = {
|
|
19656
|
-
xsmall: '1px',
|
|
19657
|
-
small: '1.5px',
|
|
19658
|
-
medium: '2px',
|
|
19659
|
-
large: '3px',
|
|
19660
|
-
};
|
|
19661
|
-
var DEFAULT_COLOR = '#5EAD9B';
|
|
19662
|
-
var StyledSpinner = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
19663
|
-
var size = _a.size;
|
|
19664
|
-
return borderSize[size];
|
|
19665
|
-
}, function (_a) {
|
|
19666
|
-
var _b = _a.background, background = _b === void 0 ? 'rgba(0, 0, 0, 0.2)' : _b;
|
|
19667
|
-
return background;
|
|
19668
|
-
}, function (_a) {
|
|
19669
|
-
var _b = _a.color, color = _b === void 0 ? DEFAULT_COLOR : _b;
|
|
19670
|
-
return color;
|
|
19671
|
-
}, function (_a) {
|
|
19672
|
-
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
19673
|
-
return duration;
|
|
19674
|
-
});
|
|
19675
|
-
var templateObject_1, templateObject_2;
|
|
19676
|
-
|
|
19677
|
-
var Spinner = function (_a) {
|
|
19678
|
-
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
19679
|
-
return (jsxRuntime.jsx(Container, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
19680
|
-
};
|
|
19790
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19681
19791
|
|
|
19682
19792
|
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
19683
19793
|
exports.Accordion = Accordion$1;
|
|
@@ -19740,6 +19850,7 @@ exports.ProductGallery = ProductGallery;
|
|
|
19740
19850
|
exports.ProductGalleryMobile = ProductGalleryMobile;
|
|
19741
19851
|
exports.ProductGalleryMobileV2 = ProductGalleryMobileV2;
|
|
19742
19852
|
exports.ProductGalleryMobileV3 = ProductGalleryMobileV3;
|
|
19853
|
+
exports.ProductGalleryMobileV4 = ProductGalleryMobileV4;
|
|
19743
19854
|
exports.ProgressBar = ProgressBar;
|
|
19744
19855
|
exports.QuantityPicker = QuantityPicker;
|
|
19745
19856
|
exports.RadioGroupInput = RadioGroupInput;
|