@trafilea/afrodita-components 6.8.19 → 6.8.20
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 +1 -2
- package/build/index.d.ts +44 -55
- package/build/index.esm.css +1 -2
- package/build/index.esm.js +569 -679
- package/build/index.esm.js.map +1 -1
- package/build/index.js +568 -679
- 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$1b = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3155
3155
|
var height = _a.height;
|
|
3156
3156
|
return (height ? height : '1.5em');
|
|
3157
3157
|
}, function (_a) {
|
|
@@ -3176,11 +3176,11 @@ var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = _
|
|
|
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$1b, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3180
3180
|
};
|
|
3181
|
-
var templateObject_1$
|
|
3181
|
+
var templateObject_1$1W;
|
|
3182
3182
|
|
|
3183
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3183
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3184
3184
|
var width = _a.width;
|
|
3185
3185
|
return width;
|
|
3186
3186
|
}, function (_a) {
|
|
@@ -3196,7 +3196,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1X || (templateObject_1$1X
|
|
|
3196
3196
|
var opacity = _a.opacity;
|
|
3197
3197
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3198
3198
|
});
|
|
3199
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3199
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3200
3200
|
var width = _a.width;
|
|
3201
3201
|
return width;
|
|
3202
3202
|
}, function (_a) {
|
|
@@ -3209,7 +3209,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1h || (templateObject_2$
|
|
|
3209
3209
|
var opacity = _a.opacity;
|
|
3210
3210
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3211
3211
|
});
|
|
3212
|
-
var templateObject_1$
|
|
3212
|
+
var templateObject_1$1V, templateObject_2$1g;
|
|
3213
3213
|
|
|
3214
3214
|
/* eslint-disable no-undef */
|
|
3215
3215
|
var cache = new Map();
|
|
@@ -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$1U || (templateObject_1$1U = __makeTemplateObject([""], [""]))),
|
|
4131
|
+
hero2: newStyled.h2(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject([""], [""]))),
|
|
4132
|
+
hero3: newStyled.h3(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject([""], [""]))),
|
|
4133
4133
|
display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
|
|
4134
4134
|
display2: newStyled.h2(templateObject_5$u || (templateObject_5$u = __makeTemplateObject([""], [""]))),
|
|
4135
4135
|
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
@@ -4263,17 +4263,17 @@ var DEFAULTS = {
|
|
|
4263
4263
|
size: 'regular',
|
|
4264
4264
|
},
|
|
4265
4265
|
};
|
|
4266
|
-
var templateObject_1$
|
|
4266
|
+
var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$I, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$e, templateObject_9$7, templateObject_10$6, 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$1a = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4269
|
+
var Card$3 = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4270
|
+
var Tag$2 = newStyled.div(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4271
4271
|
var Label$5 = 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$t || (templateObject_5$t = __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$o || (templateObject_6$o = __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$1a, __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$1T, templateObject_2$1e, templateObject_3$X, templateObject_4$H, templateObject_5$t, templateObject_6$o;
|
|
4299
4299
|
|
|
4300
|
-
var Container$
|
|
4301
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4300
|
+
var Container$19 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4301
|
+
var DropContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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$19, { 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$1S, templateObject_2$1d;
|
|
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$18 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4312
|
+
var Title$8 = newStyled.p(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4313
|
+
var Description$3 = newStyled.p(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
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$18, { 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$1R, templateObject_2$1c, templateObject_3$W;
|
|
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$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
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$1Q;
|
|
4419
4419
|
|
|
4420
|
-
var Container$
|
|
4420
|
+
var Container$17 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
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$17, { 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$1P;
|
|
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$1O || (templateObject_1$1O = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
4607
|
+
var ErrorContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
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$1O, templateObject_2$1b;
|
|
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$1N || (templateObject_1$1N = __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$1N;
|
|
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$1M || (templateObject_1$1M = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
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$1M;
|
|
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$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
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$1a || (templateObject_2$1a = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
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$16, { 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$4, __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$1L, templateObject_2$1a;
|
|
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$15 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
4943
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
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$15 : 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$1K, templateObject_2$19;
|
|
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$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5041
|
+
var Container$14 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5042
|
+
var Input$4 = newStyled.input(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
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$4)(templateObject_3$
|
|
5050
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$V || (templateObject_3$V = __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$14, __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$1J, templateObject_2$18, templateObject_3$V;
|
|
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$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
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$1K || (templateObject_1$1K = __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$17 || (templateObject_2$17 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
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$18 || (templateObject_2$18
|
|
|
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$U || (templateObject_3$U = __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$n || (templateObject_6$n = __makeTem
|
|
|
5170
5170
|
});
|
|
5171
5171
|
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5172
5172
|
var CloseToolTip = newStyled.button(templateObject_8$d || (templateObject_8$d = __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$1I, templateObject_2$17, templateObject_3$U, templateObject_4$G, templateObject_5$s, templateObject_6$n, templateObject_7$g, templateObject_8$d;
|
|
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$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5316
5316
|
var backgroundColor = _a.backgroundColor;
|
|
5317
5317
|
return backgroundColor;
|
|
5318
5318
|
}, function (_a) {
|
|
@@ -5334,7 +5334,7 @@ var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = _
|
|
|
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$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) {
|
|
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$17 || (templateObject_2$17 = __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$13, __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$1H, templateObject_2$16;
|
|
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$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5386
5386
|
var backgroundColor = _a.backgroundColor;
|
|
5387
5387
|
return backgroundColor;
|
|
5388
5388
|
}, function (_a) {
|
|
@@ -5404,7 +5404,7 @@ var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = _
|
|
|
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$15 || (templateObject_2$15 = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
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$16 || (templateObject_2$16 = __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$12, __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$1G, templateObject_2$15;
|
|
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$11 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5467
|
+
var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
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$15 || (templateObject_2$15 = __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$T || (templateObject_3$T = __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$11, __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$1F, templateObject_2$14, templateObject_3$T;
|
|
5525
5525
|
|
|
5526
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5526
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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$11, __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$1E;
|
|
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$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5600
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5601
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
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$11, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$11, { 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$1D, templateObject_2$13, templateObject_3$S;
|
|
5673
5673
|
|
|
5674
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5675
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5674
|
+
var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5675
|
+
var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
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$13 || (templateObject_2$13 =
|
|
|
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$R || (templateObject_3$R = __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$10 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5712
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$c, templateObject_9$6, templateObject_10$5, 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$10, __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$1B || (templateObject_1$1B = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
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$1B;
|
|
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$1A || (templateObject_1$1A = __makeTemplateObject([""], [""])));
|
|
5788
|
+
var CustomerInfo = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5789
|
+
var Name = newStyled.h4(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
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$q || (templateObject_5$q = __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$l || (templateObject_6$l = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
5793
|
-
var templateObject_1$
|
|
5793
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E, templateObject_5$q, templateObject_6$l;
|
|
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$$ = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
5812
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
5813
|
+
var ImageCard = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
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$1z, templateObject_2$10, templateObject_3$P, 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$$, __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$1y || (templateObject_1$1y = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
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$1y;
|
|
5914
5914
|
|
|
5915
|
-
var Body = newStyled.div(templateObject_1$
|
|
5915
|
+
var Body = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
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$1x;
|
|
5921
5921
|
|
|
5922
|
-
var Container$
|
|
5922
|
+
var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
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$10 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = _
|
|
|
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$1w;
|
|
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$1v || (templateObject_1$1v = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 992px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
5947
|
+
var StyledContainer = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5948
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
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$1v, templateObject_2$$, templateObject_3$O, 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$Z = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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$N || (templateObject_3$N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
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$Z, { 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$1u, templateObject_2$_, templateObject_3$N, 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$Y = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
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$Z || (templateObject_2$Z = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
5982
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
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$Y, __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$1t, templateObject_2$Z, templateObject_3$M;
|
|
5995
5995
|
|
|
5996
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
5996
|
+
var Text$6 = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
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$1s;
|
|
6003
6003
|
|
|
6004
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6004
|
+
var P$3 = newStyled.p(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
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$1r;
|
|
6011
6011
|
|
|
6012
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6012
|
+
var Text$5 = newStyled.span(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
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$1q;
|
|
6019
6019
|
|
|
6020
|
-
var Container$
|
|
6020
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
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$X, __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$1p;
|
|
6027
6027
|
|
|
6028
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6028
|
+
var Text$4 = newStyled.h3(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: ", ";\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
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$1o;
|
|
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$W = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
6054
|
+
var MobileContainer = newStyled(Container$W)(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6055
|
+
var DollarPart = newStyled.span(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
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$p || (templateObject_5$p = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6058
6058
|
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6061,9 +6061,9 @@ var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$b || (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$W, { 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$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A, templateObject_5$p, templateObject_6$k, templateObject_7$e, templateObject_8$b;
|
|
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$V = newStyled('div')(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
6075
|
+
var Content$2 = newStyled('div')(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6076
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
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$V, __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$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z;
|
|
6089
6089
|
|
|
6090
|
-
var Container$
|
|
6091
|
-
var templateObject_1$
|
|
6090
|
+
var Container$U = 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"])));
|
|
6091
|
+
var templateObject_1$1l;
|
|
6092
6092
|
|
|
6093
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6093
|
+
var StarContainer = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
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$U, { 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$1k;
|
|
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$T = newStyled.a(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6151
|
+
var templateObject_1$1j;
|
|
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$1i || (templateObject_1$1i = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
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$T, __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$1i;
|
|
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$1h || (templateObject_1$1h = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6197
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6198
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
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$o || (templateObject_5$o = __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$11, __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$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
|
|
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$1g || (templateObject_1$1g = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
6264
|
+
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"])));
|
|
6265
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
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$5 = newStyled.div(templateObject_5$n || (templateObject_5$n = __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$5 = newStyled.div(templateObject_6$j || (templateObject_6$j = __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$S, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$S, __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$1g, templateObject_2$V, templateObject_3$I, templateObject_4$x, templateObject_5$n, templateObject_6$j, templateObject_7$d;
|
|
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$1f || (templateObject_1$1f = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n border-radius: ", ";\n"])), function (props) { return props.borderRadius; });
|
|
6370
|
+
var Container$R = newStyled.a(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6371
|
+
var ProdCardContainer = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
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$4 = 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) {
|
|
6399
6399
|
var style = _a.style;
|
|
6400
6400
|
return style.width;
|
|
6401
6401
|
});
|
|
6402
|
-
var BottomTagContainer$
|
|
6402
|
+
var BottomTagContainer$4 = 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) {
|
|
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$R, __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$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, 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$R, __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$1f, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$m, templateObject_6$i, templateObject_7$c;
|
|
6458
6458
|
|
|
6459
|
-
var Container$
|
|
6459
|
+
var Container$Q = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
6460
6460
|
function withProductGrid(ProductItemComponent, data) {
|
|
6461
6461
|
function WithProductGrid(props) {
|
|
6462
|
-
return (jsxRuntime.jsx(Container$
|
|
6462
|
+
return (jsxRuntime.jsx(Container$Q, __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$1e;
|
|
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$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6517
|
+
newStyled(lt.Label)(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6518
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
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$l || (templateObject_5$l = __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$3 = 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$1d, templateObject_2$T, templateObject_3$G, templateObject_4$v, templateObject_5$l;
|
|
6539
6539
|
|
|
6540
|
-
var Container$
|
|
6540
|
+
var Container$P = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"], ["\n width: 2rem;\n height: 2rem;\n border-radius: 50%;\n border: 0.081rem solid ", ";\n box-sizing: border-box;\n padding: 0.156rem;\n cursor: pointer;\n opacity: ", ";\n"])), function (_a) {
|
|
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$S || (templateObject_2$S = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
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$P, __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$1c, templateObject_2$S;
|
|
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$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
6614
|
+
var Col$1 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6615
|
+
var Row$2 = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
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$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$k, templateObject_6$h;
|
|
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$1a || (templateObject_1$1a = __makeTemplateObject(["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"], ["\n width: ", ";\n font-size: ", ";\n padding: ", ";\n font-weight: ", ";\n border-radius: ", ";\n cursor: pointer;\n &:disabled {\n background-color: ", ";\n color: ", ";\n cursor: not-allowed;\n }\n svg {\n color: inherit;\n }\n"])), function (_a) {
|
|
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$1c || (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$Q || (templateObject_2$Q = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6678
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
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$O = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
6746
|
+
var IconContainer$4 = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
6747
|
+
var Text$3 = newStyled.p(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
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$O, __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$19, templateObject_2$P, templateObject_3$E, templateObject_4$t;
|
|
6755
6755
|
|
|
6756
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6756
|
+
var Title$2 = newStyled.h1(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
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$O || (templateObject_2$O = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
6761
|
+
var Row$1 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
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$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$j, templateObject_6$g, templateObject_7$b, templateObject_8$a;
|
|
6800
6800
|
|
|
6801
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6801
|
+
var Backdrop = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: ", ";\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
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$N || (templateObject_2$N = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
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$17, templateObject_2$N;
|
|
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$16 || (templateObject_1$16 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6863
|
+
var Item$2 = newStyled.li(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
6864
|
+
var DropdownWrapper = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
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$i || (templateObject_5$i = __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$f || (templateObject_6$f = __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$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$i, templateObject_6$f;
|
|
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$15 || (templateObject_1$15 = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
6882
|
+
var DropdownLabel = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
6883
|
+
var SizeLabel = newStyled.span(templateObject_3$B || (templateObject_3$B = __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$h || (templateObject_5$h = __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$e || (templateObject_6$e = __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$15, templateObject_2$L, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$e;
|
|
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$14 || (templateObject_1$14 = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6911
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
6912
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
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$14, templateObject_2$K, templateObject_3$A, 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$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
6956
|
+
var H3 = newStyled.h3(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
6957
|
+
var ArrowContainer = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6958
|
+
var Container$N = 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$N, __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$13, templateObject_2$J, templateObject_3$z, 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$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
6968
|
+
var Header$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
6969
|
+
var MobileHeader = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
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$g || (templateObject_5$g = __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$d || (templateObject_6$d = __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$a || (templateObject_7$a =
|
|
|
6974
6974
|
var ClearAll = newStyled.span(templateObject_8$9 || (templateObject_8$9 = __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$5 || (templateObject_9$5 = __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$4 || (templateObject_10$4 = __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$12, templateObject_2$I, templateObject_3$y, templateObject_4$n, templateObject_5$g, templateObject_6$d, templateObject_7$a, templateObject_8$9, templateObject_9$5, templateObject_10$4;
|
|
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$11 || (templateObject_1$11 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
7043
|
+
var LI = newStyled.li(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
7044
|
+
var CloseIconContainer = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
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$11, templateObject_2$H, templateObject_3$x;
|
|
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$10 || (templateObject_1$10 = __makeTemplateObject(["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n display: flex;\n gap: 1.5em;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
7189
|
+
var Container$M = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
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$M, __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$M, __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$10, templateObject_2$G;
|
|
7208
7208
|
|
|
7209
|
-
var Container$
|
|
7210
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7209
|
+
var Container$L = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n font-size: 0.88rem;\n"])));
|
|
7210
|
+
var P$2 = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
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$L, __assign$1({ theme: theme }, { children: [jsx(Container$L, { 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$$, templateObject_2$F;
|
|
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$_ || (templateObject_1$_ = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
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$_;
|
|
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$Z || (templateObject_1$Z = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
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$Z;
|
|
11551
11551
|
|
|
11552
|
-
var horizontalStyles = css(templateObject_1$
|
|
11553
|
-
var verticalStyles = css(templateObject_2$
|
|
11554
|
-
var Container$
|
|
11552
|
+
var horizontalStyles = css(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"], ["\n grid-row: 2;\n grid-auto-flow: column;\n grid-column-gap: 6px;\n margin-top: 20px;\n max-width: 360px;\n overflow: auto;\n"])));
|
|
11553
|
+
var verticalStyles = css(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
11554
|
+
var Container$K = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
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$K, __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$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$f, templateObject_6$c, templateObject_7$9, templateObject_8$8;
|
|
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$X || (templateObject_1$X = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: relative;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: relative;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
13177
|
+
var ProgressFiller = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13178
|
+
var templateObject_1$X, templateObject_2$D;
|
|
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$J = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13186
|
+
var HTMLVideo = newStyled.video(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13187
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
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$e || (templateObject_5$e = __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$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$e;
|
|
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$J, { 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$I = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
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$3 = newStyled.div(templateObject_2$B || (templateObject_2$B = __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$3 = newStyled.div(templateObject_3$u || (templateObject_3$u = __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$I, __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$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { 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$V, templateObject_2$B, templateObject_3$u, templateObject_4$k;
|
|
13251
13251
|
|
|
13252
|
-
var Container$
|
|
13252
|
+
var Container$H = newStyled.div(templateObject_1$U || (templateObject_1$U = __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$H, { 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$U;
|
|
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$G = newStyled.div(templateObject_1$T || (templateObject_1$T = __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$I = newStyled.div(templateObject_1$V || (templateObject_1$V = __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$G, __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$T;
|
|
13316
13316
|
|
|
13317
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13317
|
+
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$S || (templateObject_1$S = __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$S;
|
|
13327
13327
|
|
|
13328
|
-
var Container$
|
|
13328
|
+
var Container$F = 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$F, __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$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __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$A || (templateObject_2$A = __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$t || (templateObject_3$t = __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$u || (templateObject_3$u = __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$E, __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$R, templateObject_2$A, templateObject_3$t;
|
|
13394
13394
|
|
|
13395
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
13395
|
+
var Label$2 = newStyled.span(templateObject_1$Q || (templateObject_1$Q = __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$z || (templateObject_2$z = __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$2, __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$Q, templateObject_2$z;
|
|
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$D = newStyled.div(templateObject_1$P || (templateObject_1$P = __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$y || (templateObject_2$y = __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$s || (templateObject_3$s = __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$d || (templateObject_5
|
|
|
13492
13492
|
return theme.component.input.lineHeight;
|
|
13493
13493
|
});
|
|
13494
13494
|
var ClearInput = newStyled.div(templateObject_6$b || (templateObject_6$b = __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$P, templateObject_2$y, templateObject_3$s, templateObject_4$j, templateObject_5$d, templateObject_6$b;
|
|
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$D, __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$C = newStyled.div(templateObject_1$O || (templateObject_1$O = __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$x || (templateObject_2$x = __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$C, __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$O, templateObject_2$x;
|
|
13561
13561
|
|
|
13562
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13562
|
+
var SuccessContainer = newStyled.div(templateObject_1$N || (templateObject_1$N = __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$w || (templateObject_2$w = __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$r || (templateObject_3$r = __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$N, templateObject_2$w, templateObject_3$r;
|
|
13573
13573
|
|
|
13574
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13574
|
+
var ButtonContainer = newStyled.div(templateObject_1$M || (templateObject_1$M = __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$M;
|
|
13592
13592
|
|
|
13593
|
-
var Container$
|
|
13594
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13593
|
+
var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __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$v || (templateObject_2$v = __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$B, { 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$L, templateObject_2$v;
|
|
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$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __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$C = newStyled.div(templateObject_1$M || (templateObject_1$M = __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$2 = newStyled.div(templateObject_2$u || (templateObject_2$u = __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$2 = newStyled.div(templateObject_3$q || (templateObject_3$q = __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$c || (templateObject_5$c = __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$1 = {
|
|
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$1(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$A, __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$1, { 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$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, __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$1(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$2(ref, dragThreshold) {
|
|
|
13711
13711
|
};
|
|
13712
13712
|
}, [preventTouch, ref, touchStart]);
|
|
13713
13713
|
}
|
|
13714
|
-
var templateObject_1$
|
|
13714
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$c;
|
|
13715
13715
|
|
|
13716
|
-
var Container$
|
|
13716
|
+
var Container$z = newStyled.div(templateObject_1$J || (templateObject_1$J = __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$z, __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$J;
|
|
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$I || (templateObject_1$I = __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$I;
|
|
13994
13994
|
|
|
13995
|
-
var Container$
|
|
13995
|
+
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __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$y, __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$H;
|
|
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$G || (templateObject_1$G = __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$t || (templateObject_2$t = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14008
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$p || (templateObject_3$p = __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$G, templateObject_2$t, templateObject_3$p;
|
|
14021
14021
|
|
|
14022
|
-
var Container$
|
|
14022
|
+
var Container$x = newStyled.div(templateObject_1$F || (templateObject_1$F = __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$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'); });
|
|
14028
|
+
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"])));
|
|
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$x, __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$1, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, { 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$F, templateObject_2$s, templateObject_3$o;
|
|
14035
14035
|
|
|
14036
|
-
var Container$
|
|
14036
|
+
var Container$w = 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"])));
|
|
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$w, __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$E;
|
|
14061
14061
|
|
|
14062
|
-
var Container$
|
|
14062
|
+
var Container$v = newStyled.div(templateObject_1$D || (templateObject_1$D = __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$x = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
14068
14068
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14069
14069
|
});
|
|
14070
14070
|
// max-height: 31.875rem;
|
|
14071
|
-
var TopTagContainer
|
|
14072
|
-
var BottomTagContainer
|
|
14071
|
+
var TopTagContainer = newStyled.div(templateObject_2$r || (templateObject_2$r = __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 = newStyled.div(templateObject_3$n || (templateObject_3$n = __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$b || (templateObject_5$b = __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$a || (templateObject_6$a = __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$8 || (templateObject_7$8 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14077
14077
|
var NavButtonContainer = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14078
14078
|
var Button$1 = newStyled.button(templateObject_9$4 || (templateObject_9$4 = __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 = {
|
|
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
|
|
14093
|
+
usePreventVerticalScroll(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$v, __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
|
|
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) {
|
|
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
|
|
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 () {
|
|
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
|
|
14136
|
+
function usePreventVerticalScroll(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$1(ref, dragThreshold) {
|
|
|
14168
14168
|
};
|
|
14169
14169
|
}, [preventTouch, ref, touchStart]);
|
|
14170
14170
|
}
|
|
14171
|
-
var templateObject_1$
|
|
14171
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$7, templateObject_9$4;
|
|
14172
14172
|
|
|
14173
|
-
var Container$
|
|
14173
|
+
var Container$u = newStyled.div(templateObject_1$C || (templateObject_1$C = __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$u, __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$C;
|
|
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$B || (templateObject_1$B = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$q || (templateObject_2$q = __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$m || (templateObject_3$m = __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$t = newStyled.div(templateObject_5$a || (templateObject_5$a = __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$9 || (templateObject_6$9 = __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$t, __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,220 +14356,9 @@ var useModal = function (id) {
|
|
|
14356
14356
|
close: close,
|
|
14357
14357
|
}); }, [close, open, opened]);
|
|
14358
14358
|
};
|
|
14359
|
-
var templateObject_1$
|
|
14359
|
+
var templateObject_1$B, templateObject_2$q, templateObject_3$m, templateObject_4$g, templateObject_5$a, templateObject_6$9;
|
|
14360
14360
|
|
|
14361
|
-
var
|
|
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$u = 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$u, __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$t = 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$t, __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$s = 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$s, __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) {
|
|
14361
|
+
var Bar$1 = newStyled.div(templateObject_1$A || (templateObject_1$A = __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) {
|
|
14573
14362
|
var height = _a.height;
|
|
14574
14363
|
return height || '0.5rem';
|
|
14575
14364
|
}, function (_a) {
|
|
@@ -14608,7 +14397,7 @@ var BarContainer = newStyled.div({
|
|
|
14608
14397
|
padding: '0 16px',
|
|
14609
14398
|
position: 'relative',
|
|
14610
14399
|
});
|
|
14611
|
-
var Container$
|
|
14400
|
+
var Container$s = newStyled.div(function (_a) {
|
|
14612
14401
|
var backgroundColor = _a.backgroundColor;
|
|
14613
14402
|
return ({
|
|
14614
14403
|
width: '475px',
|
|
@@ -14639,21 +14428,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14639
14428
|
var theme = useTheme();
|
|
14640
14429
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14641
14430
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14642
|
-
return (jsxRuntime.jsxs(Container$
|
|
14431
|
+
return (jsxRuntime.jsxs(Container$s, __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));
|
|
14643
14432
|
};
|
|
14644
|
-
var templateObject_1$
|
|
14433
|
+
var templateObject_1$A;
|
|
14645
14434
|
|
|
14646
|
-
var Container$
|
|
14435
|
+
var Container$r = newStyled.div(templateObject_1$z || (templateObject_1$z = __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) {
|
|
14647
14436
|
var theme = _a.theme;
|
|
14648
14437
|
return theme.component.orderBar.backgroundColor;
|
|
14649
14438
|
});
|
|
14650
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14439
|
+
var H1 = newStyled.h1(templateObject_2$p || (templateObject_2$p = __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; });
|
|
14651
14440
|
var OrderBar = function (_a) {
|
|
14652
14441
|
var message = _a.message, color = _a.color;
|
|
14653
14442
|
var theme = useTheme();
|
|
14654
|
-
return (jsxRuntime.jsxs(Container$
|
|
14443
|
+
return (jsxRuntime.jsxs(Container$r, __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));
|
|
14655
14444
|
};
|
|
14656
|
-
var templateObject_1$
|
|
14445
|
+
var templateObject_1$z, templateObject_2$p;
|
|
14657
14446
|
|
|
14658
14447
|
var htmlReactParser = {exports: {}};
|
|
14659
14448
|
|
|
@@ -18434,8 +18223,8 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18434
18223
|
HTMLReactParser$1.attributesToProps;
|
|
18435
18224
|
HTMLReactParser$1.Element;
|
|
18436
18225
|
|
|
18437
|
-
var Container$
|
|
18438
|
-
var Card = newStyled.div(templateObject_2$
|
|
18226
|
+
var Container$q = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
18227
|
+
var Card = newStyled.div(templateObject_2$o || (templateObject_2$o = __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"])));
|
|
18439
18228
|
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"])));
|
|
18440
18229
|
var Label$1 = 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"])));
|
|
18441
18230
|
var Check = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
@@ -18444,7 +18233,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$7 || (templateObject_7$7 =
|
|
|
18444
18233
|
var DiscountContainer = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __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"])));
|
|
18445
18234
|
var PackSelector = function (_a) {
|
|
18446
18235
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18447
|
-
return (jsxRuntime.jsx(Container$
|
|
18236
|
+
return (jsxRuntime.jsx(Container$q, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18448
18237
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18449
18238
|
}) }), void 0));
|
|
18450
18239
|
};
|
|
@@ -18471,10 +18260,10 @@ var PackCard = function (_a) {
|
|
|
18471
18260
|
currency: currencyCode || 'USD',
|
|
18472
18261
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18473
18262
|
};
|
|
18474
|
-
var templateObject_1$
|
|
18263
|
+
var templateObject_1$y, templateObject_2$o, templateObject_3$l, templateObject_4$f, templateObject_5$9, templateObject_6$8, templateObject_7$7, templateObject_8$6;
|
|
18475
18264
|
|
|
18476
|
-
var Container$
|
|
18477
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18265
|
+
var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
18266
|
+
var IconContainer = newStyled.div(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
18478
18267
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18479
18268
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18480
18269
|
}));
|
|
@@ -18495,7 +18284,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
18495
18284
|
var background = _a.background;
|
|
18496
18285
|
return background || 'unset';
|
|
18497
18286
|
});
|
|
18498
|
-
var templateObject_1$
|
|
18287
|
+
var templateObject_1$x, templateObject_2$n, templateObject_3$k, templateObject_4$e;
|
|
18499
18288
|
|
|
18500
18289
|
var Pagination = function (_a) {
|
|
18501
18290
|
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;
|
|
@@ -18541,7 +18330,7 @@ var Pagination = function (_a) {
|
|
|
18541
18330
|
}
|
|
18542
18331
|
return pages;
|
|
18543
18332
|
}, [from, page, showReducedPages, to]);
|
|
18544
|
-
return (jsxRuntime.jsxs(Container$
|
|
18333
|
+
return (jsxRuntime.jsxs(Container$p, __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));
|
|
18545
18334
|
};
|
|
18546
18335
|
|
|
18547
18336
|
var PaginatorBlog = function (_a) {
|
|
@@ -18555,12 +18344,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18555
18344
|
setPage(page);
|
|
18556
18345
|
onChange(page);
|
|
18557
18346
|
};
|
|
18558
|
-
return (jsxRuntime.jsxs(Container$
|
|
18347
|
+
return (jsxRuntime.jsxs(Container$p, __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
|
|
18559
18348
|
? theme.colors.shades['white'].color
|
|
18560
18349
|
: 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));
|
|
18561
18350
|
};
|
|
18562
18351
|
|
|
18563
|
-
var Container$
|
|
18352
|
+
var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __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) {
|
|
18564
18353
|
var width = _a.width;
|
|
18565
18354
|
return width;
|
|
18566
18355
|
}, function (_a) {
|
|
@@ -18576,13 +18365,13 @@ var Container$n = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
|
|
|
18576
18365
|
var PaymentMethod = function (_a) {
|
|
18577
18366
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18578
18367
|
var theme = useTheme();
|
|
18579
|
-
return (jsxRuntime.jsx(Container$
|
|
18368
|
+
return (jsxRuntime.jsx(Container$o, __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));
|
|
18580
18369
|
};
|
|
18581
|
-
var templateObject_1$
|
|
18370
|
+
var templateObject_1$w;
|
|
18582
18371
|
|
|
18583
|
-
var Container$
|
|
18372
|
+
var Container$n = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
18584
18373
|
var IMAGE_WIDTH = '63px';
|
|
18585
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18374
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __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);
|
|
18586
18375
|
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({
|
|
18587
18376
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18588
18377
|
}), IMAGE_WIDTH);
|
|
@@ -18620,9 +18409,9 @@ var StyledSpan = newStyled.span(templateObject_6$7 || (templateObject_6$7 = __ma
|
|
|
18620
18409
|
var SimpleOrderItem = function (_a) {
|
|
18621
18410
|
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;
|
|
18622
18411
|
var theme = useTheme();
|
|
18623
|
-
return (jsxRuntime.jsxs(Container$
|
|
18412
|
+
return (jsxRuntime.jsxs(Container$n, __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));
|
|
18624
18413
|
};
|
|
18625
|
-
var templateObject_1$
|
|
18414
|
+
var templateObject_1$v, templateObject_2$m, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$7;
|
|
18626
18415
|
|
|
18627
18416
|
var P$1 = newStyled.p(function (_a) {
|
|
18628
18417
|
var color = _a.color;
|
|
@@ -18636,7 +18425,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18636
18425
|
margin: '0.938rem 4.188rem',
|
|
18637
18426
|
});
|
|
18638
18427
|
});
|
|
18639
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18428
|
+
var Bar = newStyled.div(templateObject_1$u || (templateObject_1$u = __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) {
|
|
18640
18429
|
var height = _a.height;
|
|
18641
18430
|
return height || '0.5rem';
|
|
18642
18431
|
}, function (_a) {
|
|
@@ -18665,7 +18454,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18665
18454
|
position: 'absolute',
|
|
18666
18455
|
});
|
|
18667
18456
|
});
|
|
18668
|
-
var Container$
|
|
18457
|
+
var Container$m = newStyled.div(function (_a) {
|
|
18669
18458
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18670
18459
|
return ({
|
|
18671
18460
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18679,12 +18468,12 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18679
18468
|
var ProgressBar = function (_a) {
|
|
18680
18469
|
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;
|
|
18681
18470
|
var theme = useTheme();
|
|
18682
|
-
return (jsxRuntime.jsxs(Container$
|
|
18471
|
+
return (jsxRuntime.jsxs(Container$m, __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));
|
|
18683
18472
|
};
|
|
18684
|
-
var templateObject_1$
|
|
18473
|
+
var templateObject_1$u;
|
|
18685
18474
|
|
|
18686
|
-
var Container$
|
|
18687
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18475
|
+
var Container$l = newStyled.div(templateObject_1$t || (templateObject_1$t = __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; });
|
|
18476
|
+
var Item$1 = newStyled.span(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
18688
18477
|
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"])));
|
|
18689
18478
|
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)'; });
|
|
18690
18479
|
var QuantityPicker = function (_a) {
|
|
@@ -18709,9 +18498,9 @@ var QuantityPicker = function (_a) {
|
|
|
18709
18498
|
return clamp(value);
|
|
18710
18499
|
});
|
|
18711
18500
|
}, [value, clamp]);
|
|
18712
|
-
return (jsxRuntime.jsxs(Container$
|
|
18501
|
+
return (jsxRuntime.jsxs(Container$l, __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));
|
|
18713
18502
|
};
|
|
18714
|
-
var templateObject_1$
|
|
18503
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i, templateObject_4$c;
|
|
18715
18504
|
|
|
18716
18505
|
/* base styles & size variants */
|
|
18717
18506
|
var CustomRadioStyles$1 = {
|
|
@@ -18780,9 +18569,9 @@ var ContainerStyles$1 = {
|
|
|
18780
18569
|
},
|
|
18781
18570
|
};
|
|
18782
18571
|
|
|
18783
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18784
|
-
var Container$
|
|
18785
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18572
|
+
var Wrapper$3 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18573
|
+
var Container$k = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18574
|
+
var Input$2 = newStyled.input(templateObject_2$k || (templateObject_2$k = __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) {
|
|
18786
18575
|
var disabled = _a.disabled;
|
|
18787
18576
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18788
18577
|
});
|
|
@@ -18798,9 +18587,9 @@ var RadioPrimary = function (_a) {
|
|
|
18798
18587
|
var value = event.currentTarget.value;
|
|
18799
18588
|
onChange({ value: value, label: label });
|
|
18800
18589
|
};
|
|
18801
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
18590
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$k, __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));
|
|
18802
18591
|
};
|
|
18803
|
-
var templateObject_1$
|
|
18592
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h;
|
|
18804
18593
|
|
|
18805
18594
|
var RadioGroupInput = function (_a) {
|
|
18806
18595
|
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;
|
|
@@ -18879,9 +18668,9 @@ var ContainerStyles = {
|
|
|
18879
18668
|
},
|
|
18880
18669
|
};
|
|
18881
18670
|
|
|
18882
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18883
|
-
var Container$
|
|
18884
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18671
|
+
var Wrapper$2 = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
18672
|
+
var Container$j = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18673
|
+
var Input$1 = 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) {
|
|
18885
18674
|
var disabled = _a.disabled;
|
|
18886
18675
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18887
18676
|
});
|
|
@@ -18903,9 +18692,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18903
18692
|
var value = event.currentTarget.value;
|
|
18904
18693
|
onChange({ value: value, label: label });
|
|
18905
18694
|
};
|
|
18906
|
-
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$
|
|
18695
|
+
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$j, __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));
|
|
18907
18696
|
};
|
|
18908
|
-
var templateObject_1$
|
|
18697
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$g;
|
|
18909
18698
|
|
|
18910
18699
|
var ClubRadioGroupInput = function (_a) {
|
|
18911
18700
|
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;
|
|
@@ -18933,8 +18722,8 @@ function formatDate(date, format) {
|
|
|
18933
18722
|
}
|
|
18934
18723
|
}
|
|
18935
18724
|
|
|
18936
|
-
var Container$
|
|
18937
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18725
|
+
var Container$i = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
18726
|
+
var Content$1 = newStyled.div(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
18938
18727
|
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"])));
|
|
18939
18728
|
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"])));
|
|
18940
18729
|
var DateText$1 = newStyled.span(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
@@ -18971,15 +18760,15 @@ var Review$1 = function (_a) {
|
|
|
18971
18760
|
}
|
|
18972
18761
|
}
|
|
18973
18762
|
}, [opened]);
|
|
18974
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
18763
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$i, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18975
18764
|
(!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));
|
|
18976
18765
|
};
|
|
18977
|
-
var templateObject_1$
|
|
18766
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$f, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$5, templateObject_9$3, templateObject_10$3, 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;
|
|
18978
18767
|
|
|
18979
18768
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18980
18769
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18981
|
-
var Container$
|
|
18982
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18770
|
+
var Container$h = newStyled.div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
18771
|
+
var Heading = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
18983
18772
|
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"])));
|
|
18984
18773
|
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"])));
|
|
18985
18774
|
var DateText = newStyled.span(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
@@ -19020,7 +18809,7 @@ var Review = function (_a) {
|
|
|
19020
18809
|
});
|
|
19021
18810
|
};
|
|
19022
18811
|
}, [randomId]);
|
|
19023
|
-
return (jsxRuntime.jsxs(Container$
|
|
18812
|
+
return (jsxRuntime.jsxs(Container$h, { 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: {
|
|
19024
18813
|
__html: showMoreMobile
|
|
19025
18814
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
19026
18815
|
: description,
|
|
@@ -19030,10 +18819,10 @@ var Review = function (_a) {
|
|
|
19030
18819
|
: description,
|
|
19031
18820
|
} }, 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));
|
|
19032
18821
|
};
|
|
19033
|
-
var templateObject_1$
|
|
18822
|
+
var templateObject_1$p, templateObject_2$h, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
19034
18823
|
|
|
19035
|
-
var Container$
|
|
19036
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18824
|
+
var Container$g = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
18825
|
+
var ReviewsContainer = newStyled.div(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
19037
18826
|
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"])));
|
|
19038
18827
|
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"])));
|
|
19039
18828
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$5 || (templateObject_5$5 = __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"])));
|
|
@@ -19046,19 +18835,19 @@ var ReviewsHeader = function (_a) {
|
|
|
19046
18835
|
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;
|
|
19047
18836
|
var starsNumber = 5;
|
|
19048
18837
|
var theme = useTheme();
|
|
19049
|
-
return (jsxRuntime.jsxs(Container$
|
|
18838
|
+
return (jsxRuntime.jsxs(Container$g, { 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));
|
|
19050
18839
|
};
|
|
19051
|
-
var templateObject_1$
|
|
18840
|
+
var templateObject_1$o, templateObject_2$g, templateObject_3$d, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$4;
|
|
19052
18841
|
|
|
19053
|
-
var Container$
|
|
19054
|
-
var Text = newStyled.p(templateObject_2$
|
|
18842
|
+
var Container$f = newStyled.div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
18843
|
+
var Text = newStyled.p(templateObject_2$f || (templateObject_2$f = __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; });
|
|
19055
18844
|
var ScrollToTop = function (_a) {
|
|
19056
18845
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19057
18846
|
var theme = useTheme();
|
|
19058
18847
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19059
|
-
return (jsxRuntime.jsxs(Container$
|
|
18848
|
+
return (jsxRuntime.jsxs(Container$f, __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));
|
|
19060
18849
|
};
|
|
19061
|
-
var templateObject_1$
|
|
18850
|
+
var templateObject_1$n, templateObject_2$f;
|
|
19062
18851
|
|
|
19063
18852
|
var Input = newStyled.input(function (props) { return ({
|
|
19064
18853
|
padding: props.theme.component.input.padding,
|
|
@@ -19089,7 +18878,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19089
18878
|
},
|
|
19090
18879
|
}); });
|
|
19091
18880
|
|
|
19092
|
-
var Container$
|
|
18881
|
+
var Container$e = newStyled.div(templateObject_1$m || (templateObject_1$m = __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({
|
|
19093
18882
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19094
18883
|
}));
|
|
19095
18884
|
var Description = newStyled.div({
|
|
@@ -19106,25 +18895,25 @@ var Description = newStyled.div({
|
|
|
19106
18895
|
var ProductItem = function (_a) {
|
|
19107
18896
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19108
18897
|
var theme = useTheme();
|
|
19109
|
-
return (jsxRuntime.jsxs(Container$
|
|
18898
|
+
return (jsxRuntime.jsxs(Container$e, __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));
|
|
19110
18899
|
};
|
|
19111
|
-
var templateObject_1$
|
|
18900
|
+
var templateObject_1$m;
|
|
19112
18901
|
|
|
19113
|
-
var Container$
|
|
18902
|
+
var Container$d = newStyled.div({
|
|
19114
18903
|
display: 'flex',
|
|
19115
18904
|
justifyContent: 'center',
|
|
19116
18905
|
padding: '1rem',
|
|
19117
18906
|
});
|
|
19118
18907
|
var Footer = function (_a) {
|
|
19119
18908
|
var text = _a.text, onClick = _a.onClick;
|
|
19120
|
-
return (jsxRuntime.jsx(Container$
|
|
18909
|
+
return (jsxRuntime.jsx(Container$d, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19121
18910
|
};
|
|
19122
18911
|
|
|
19123
18912
|
var Ul = newStyled.ul({
|
|
19124
18913
|
margin: '0px',
|
|
19125
18914
|
padding: '0px',
|
|
19126
18915
|
});
|
|
19127
|
-
var Li = newStyled.li(templateObject_1$
|
|
18916
|
+
var Li = newStyled.li(templateObject_1$l || (templateObject_1$l = __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({
|
|
19128
18917
|
padding: [0, '0rem 1rem'],
|
|
19129
18918
|
borderRadius: [0, '0.5rem'],
|
|
19130
18919
|
}));
|
|
@@ -19136,7 +18925,7 @@ var Anchor = newStyled.a({
|
|
|
19136
18925
|
padding: 0,
|
|
19137
18926
|
textDecoration: 'none',
|
|
19138
18927
|
});
|
|
19139
|
-
var Container$
|
|
18928
|
+
var Container$c = newStyled.div(templateObject_2$e || (templateObject_2$e = __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({
|
|
19140
18929
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19141
18930
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19142
18931
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -19147,11 +18936,11 @@ var Header = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTem
|
|
|
19147
18936
|
var ResultsPanel = function (_a) {
|
|
19148
18937
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19149
18938
|
var theme = useTheme();
|
|
19150
|
-
return (jsxRuntime.jsxs(Container$
|
|
18939
|
+
return (jsxRuntime.jsxs(Container$c, __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));
|
|
19151
18940
|
};
|
|
19152
|
-
var templateObject_1$
|
|
18941
|
+
var templateObject_1$l, templateObject_2$e, templateObject_3$c;
|
|
19153
18942
|
|
|
19154
|
-
var Button = newStyled.button(templateObject_1$
|
|
18943
|
+
var Button = newStyled.button(templateObject_1$k || (templateObject_1$k = __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({
|
|
19155
18944
|
right: ['1rem', '7.75rem'],
|
|
19156
18945
|
top: ['0.75rem', '0.75rem'],
|
|
19157
18946
|
}));
|
|
@@ -19160,7 +18949,7 @@ var ClearButton = function (_a) {
|
|
|
19160
18949
|
var theme = useTheme();
|
|
19161
18950
|
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));
|
|
19162
18951
|
};
|
|
19163
|
-
var templateObject_1$
|
|
18952
|
+
var templateObject_1$k;
|
|
19164
18953
|
|
|
19165
18954
|
var SearchIconContainer = newStyled.div({
|
|
19166
18955
|
display: 'flex',
|
|
@@ -19170,7 +18959,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19170
18959
|
background: 'white',
|
|
19171
18960
|
alignSelf: 'center',
|
|
19172
18961
|
});
|
|
19173
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
18962
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
19174
18963
|
var SearchControl = function (_a) {
|
|
19175
18964
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19176
18965
|
var theme = useTheme();
|
|
@@ -19186,7 +18975,7 @@ var SearchControl = function (_a) {
|
|
|
19186
18975
|
}
|
|
19187
18976
|
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));
|
|
19188
18977
|
};
|
|
19189
|
-
var templateObject_1$
|
|
18978
|
+
var templateObject_1$j;
|
|
19190
18979
|
|
|
19191
18980
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19192
18981
|
var reducer = function (state, action) {
|
|
@@ -19202,7 +18991,7 @@ var reducer = function (state, action) {
|
|
|
19202
18991
|
}
|
|
19203
18992
|
}
|
|
19204
18993
|
};
|
|
19205
|
-
var Container$
|
|
18994
|
+
var Container$b = newStyled.div({
|
|
19206
18995
|
position: 'relative',
|
|
19207
18996
|
display: 'flex',
|
|
19208
18997
|
});
|
|
@@ -19242,7 +19031,7 @@ var SearchBar = function (_a) {
|
|
|
19242
19031
|
if (e.cancelable) {
|
|
19243
19032
|
e.preventDefault();
|
|
19244
19033
|
}
|
|
19245
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
19034
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$b, __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) {
|
|
19246
19035
|
if (e.key === 'Enter') {
|
|
19247
19036
|
if (e.cancelable) {
|
|
19248
19037
|
e.preventDefault();
|
|
@@ -19253,20 +19042,20 @@ var SearchBar = function (_a) {
|
|
|
19253
19042
|
} }, 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));
|
|
19254
19043
|
};
|
|
19255
19044
|
|
|
19256
|
-
var Container$
|
|
19257
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19045
|
+
var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
19046
|
+
var BackArrow = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19258
19047
|
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"])));
|
|
19259
19048
|
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"])));
|
|
19260
19049
|
var SearchNavigationParents = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
19261
19050
|
var SearchNavigation = function (_a) {
|
|
19262
19051
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19263
|
-
return (jsxRuntime.jsxs(Container$
|
|
19052
|
+
return (jsxRuntime.jsxs(Container$a, { 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) {
|
|
19264
19053
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19265
19054
|
}) }, void 0)] }, void 0));
|
|
19266
19055
|
};
|
|
19267
|
-
var templateObject_1$
|
|
19056
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$b, templateObject_4$8, templateObject_5$4;
|
|
19268
19057
|
|
|
19269
|
-
var Container$
|
|
19058
|
+
var Container$9 = newStyled.div(templateObject_1$h || (templateObject_1$h = __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) {
|
|
19270
19059
|
var alignCenter = _a.alignCenter;
|
|
19271
19060
|
return alignCenter &&
|
|
19272
19061
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19276,26 +19065,26 @@ var Container$8 = newStyled.div(templateObject_1$e || (templateObject_1$e = __ma
|
|
|
19276
19065
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19277
19066
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19278
19067
|
});
|
|
19279
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19068
|
+
var TitleText = newStyled.div(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
19280
19069
|
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"])));
|
|
19281
19070
|
var ShortBanner = function (_a) {
|
|
19282
19071
|
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;
|
|
19283
19072
|
var theme = useTheme();
|
|
19284
|
-
return (jsxRuntime.jsxs(Container$
|
|
19073
|
+
return (jsxRuntime.jsxs(Container$9, __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));
|
|
19285
19074
|
};
|
|
19286
|
-
var templateObject_1$
|
|
19075
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a;
|
|
19287
19076
|
|
|
19288
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19289
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19077
|
+
var TableElement$1 = newStyled.table(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n position: relative;\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 position: relative;\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; });
|
|
19078
|
+
var TableCell$1 = newStyled.td(templateObject_2$b || (templateObject_2$b = __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; });
|
|
19290
19079
|
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; });
|
|
19291
19080
|
var Label = newStyled('div')(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19292
19081
|
var TopLabel = newStyled(Label)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19293
19082
|
var LeftLabel = newStyled(Label)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19294
|
-
var Container$
|
|
19083
|
+
var Container$8 = newStyled('div')(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
19295
19084
|
var LabelText = newStyled('span')(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19296
19085
|
var Column = newStyled('div')(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19297
19086
|
var TableRow$1 = newStyled.tr(templateObject_10$1 || (templateObject_10$1 = __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; });
|
|
19298
|
-
var templateObject_1$
|
|
19087
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$7, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$1, templateObject_10$1;
|
|
19299
19088
|
|
|
19300
19089
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19301
19090
|
var getCellColor = function (index, cell) {
|
|
@@ -19331,13 +19120,13 @@ var SizeChartTable = function (_a) {
|
|
|
19331
19120
|
var theme = useTheme();
|
|
19332
19121
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
19333
19122
|
var isMultilabel = xLabel && yLabel;
|
|
19334
|
-
return (jsxRuntime.jsxs(Container$
|
|
19123
|
+
return (jsxRuntime.jsxs(Container$8, { children: [isMultilabel && (jsxRuntime.jsxs(LeftLabel, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText, { children: xLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(Column, { children: [isMultilabel && (jsxRuntime.jsxs(TopLabel, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText, { children: yLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ style: {
|
|
19335
19124
|
backgroundColor: getCellColor(index, cell),
|
|
19336
19125
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: getIsOdd(index) ? '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)] }, void 0)] }, void 0));
|
|
19337
19126
|
};
|
|
19338
19127
|
|
|
19339
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19340
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19128
|
+
var TableElement = newStyled.table(templateObject_1$f || (templateObject_1$f = __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; });
|
|
19129
|
+
var TableCell = newStyled.td(templateObject_2$a || (templateObject_2$a = __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; });
|
|
19341
19130
|
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; });
|
|
19342
19131
|
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; });
|
|
19343
19132
|
var SizeTable = function (_a) {
|
|
@@ -19345,7 +19134,7 @@ var SizeTable = function (_a) {
|
|
|
19345
19134
|
var theme = useTheme();
|
|
19346
19135
|
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));
|
|
19347
19136
|
};
|
|
19348
|
-
var templateObject_1$
|
|
19137
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$8, templateObject_4$6;
|
|
19349
19138
|
|
|
19350
19139
|
var getStylesBySize$4 = function (size) {
|
|
19351
19140
|
switch (size) {
|
|
@@ -19372,7 +19161,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19372
19161
|
} });
|
|
19373
19162
|
};
|
|
19374
19163
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19375
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19164
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$e || (templateObject_1$e = __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));
|
|
19376
19165
|
};
|
|
19377
19166
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19378
19167
|
if (disabled)
|
|
@@ -19388,23 +19177,23 @@ var TextButton = function (_a) {
|
|
|
19388
19177
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19389
19178
|
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));
|
|
19390
19179
|
};
|
|
19391
|
-
var templateObject_1$
|
|
19180
|
+
var templateObject_1$e;
|
|
19392
19181
|
|
|
19393
|
-
var Container$
|
|
19394
|
-
var P = newStyled.p(templateObject_2$
|
|
19182
|
+
var Container$7 = newStyled.div(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
19183
|
+
var P = newStyled.p(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19395
19184
|
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"])));
|
|
19396
19185
|
var SizeFitGuide = function (_a) {
|
|
19397
19186
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19398
|
-
return (jsxRuntime.jsxs(Container$
|
|
19187
|
+
return (jsxRuntime.jsxs(Container$7, { 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));
|
|
19399
19188
|
};
|
|
19400
|
-
var templateObject_1$
|
|
19189
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$7;
|
|
19401
19190
|
|
|
19402
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19191
|
+
var ButtonsContainer = newStyled.div(templateObject_1$c || (templateObject_1$c = __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) {
|
|
19403
19192
|
var inline = _a.inline;
|
|
19404
19193
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19405
19194
|
});
|
|
19406
|
-
var Row = newStyled.div(templateObject_2$
|
|
19407
|
-
var templateObject_1$
|
|
19195
|
+
var Row = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
19196
|
+
var templateObject_1$c, templateObject_2$8;
|
|
19408
19197
|
|
|
19409
19198
|
var SizeSelector = function (_a) {
|
|
19410
19199
|
var _b;
|
|
@@ -19423,7 +19212,7 @@ var SizeSelector = function (_a) {
|
|
|
19423
19212
|
}) }), void 0)] }), void 0));
|
|
19424
19213
|
};
|
|
19425
19214
|
|
|
19426
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19215
|
+
var TabContainer = newStyled.div(templateObject_1$b || (templateObject_1$b = __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) {
|
|
19427
19216
|
var titleSize = _a.titleSize;
|
|
19428
19217
|
return titleSize;
|
|
19429
19218
|
}, function (_a) {
|
|
@@ -19440,10 +19229,10 @@ var Tab = function (_a) {
|
|
|
19440
19229
|
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;
|
|
19441
19230
|
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));
|
|
19442
19231
|
};
|
|
19443
|
-
var templateObject_1$
|
|
19232
|
+
var templateObject_1$b;
|
|
19444
19233
|
|
|
19445
|
-
var Container$
|
|
19446
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19234
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19235
|
+
var TabList = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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) {
|
|
19447
19236
|
var backgroundColor = _a.backgroundColor;
|
|
19448
19237
|
return backgroundColor;
|
|
19449
19238
|
}, function (_a) {
|
|
@@ -19460,16 +19249,16 @@ var Tabs = function (_a) {
|
|
|
19460
19249
|
return null;
|
|
19461
19250
|
}
|
|
19462
19251
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19463
|
-
return (jsxRuntime.jsxs(Container$
|
|
19252
|
+
return (jsxRuntime.jsxs(Container$6, __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));
|
|
19464
19253
|
};
|
|
19465
|
-
var templateObject_1$
|
|
19254
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$6, templateObject_4$5;
|
|
19466
19255
|
|
|
19467
|
-
var Container$
|
|
19256
|
+
var Container$5 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
19468
19257
|
var Tag = function (_a) {
|
|
19469
19258
|
var text = _a.text, className = _a.className;
|
|
19470
|
-
return jsxRuntime.jsx(Container$
|
|
19259
|
+
return jsxRuntime.jsx(Container$5, __assign$1({ className: className }, { children: text }), void 0);
|
|
19471
19260
|
};
|
|
19472
|
-
var templateObject_1$
|
|
19261
|
+
var templateObject_1$9;
|
|
19473
19262
|
|
|
19474
19263
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19475
19264
|
switch (size) {
|
|
@@ -19580,8 +19369,8 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19580
19369
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19581
19370
|
};
|
|
19582
19371
|
|
|
19583
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19584
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19372
|
+
var ImageWrapper = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
19373
|
+
var VideoOverlay = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __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"])));
|
|
19585
19374
|
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"])));
|
|
19586
19375
|
var ImageVideo = function (_a) {
|
|
19587
19376
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
@@ -19602,11 +19391,11 @@ var ImageVideo = function (_a) {
|
|
|
19602
19391
|
height: '100%',
|
|
19603
19392
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19604
19393
|
};
|
|
19605
|
-
var templateObject_1$
|
|
19394
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$5;
|
|
19606
19395
|
|
|
19607
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19608
|
-
var ContainerMobile = css(templateObject_2$
|
|
19609
|
-
var Container$
|
|
19396
|
+
var ContainerDesktop = css(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
19397
|
+
var ContainerMobile = css(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
19398
|
+
var Container$4 = 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);
|
|
19610
19399
|
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"])));
|
|
19611
19400
|
var TextWithImage = function (_a) {
|
|
19612
19401
|
var _b, _c, _d, _e;
|
|
@@ -19627,7 +19416,7 @@ var TextWithImage = function (_a) {
|
|
|
19627
19416
|
// @ts-ignore
|
|
19628
19417
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19629
19418
|
};
|
|
19630
|
-
return (jsxs(Container$
|
|
19419
|
+
return (jsxs(Container$4, __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: {
|
|
19631
19420
|
backgroundColor: props.btnBGColor,
|
|
19632
19421
|
color: '#ffffff',
|
|
19633
19422
|
border: props.btnBGColor,
|
|
@@ -19637,10 +19426,48 @@ var TextWithImage = function (_a) {
|
|
|
19637
19426
|
},
|
|
19638
19427
|
} }, 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));
|
|
19639
19428
|
};
|
|
19640
|
-
var templateObject_1$
|
|
19429
|
+
var templateObject_1$7, templateObject_2$5, templateObject_3$4, templateObject_4$4;
|
|
19430
|
+
|
|
19431
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19432
|
+
var timerColor = _a.timerColor;
|
|
19433
|
+
return timerColor || '';
|
|
19434
|
+
});
|
|
19435
|
+
var timeToSeconds = function (_a) {
|
|
19436
|
+
var hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds;
|
|
19437
|
+
return hours * 3600 + minutes * 60 + seconds;
|
|
19438
|
+
};
|
|
19439
|
+
var secondsToTime = function (secs) {
|
|
19440
|
+
var hours = Math.floor(secs / 3600);
|
|
19441
|
+
var minutes = Math.floor((secs - hours * 3600) / 60);
|
|
19442
|
+
var seconds = secs - hours * 3600 - minutes * 60;
|
|
19443
|
+
return { hours: hours, minutes: minutes, seconds: seconds };
|
|
19444
|
+
};
|
|
19445
|
+
var DEFAULT_TIME = { hours: 0, minutes: 0, seconds: 0 };
|
|
19446
|
+
var Timer = function (_a) {
|
|
19447
|
+
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"]);
|
|
19448
|
+
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];
|
|
19449
|
+
React$2.useEffect(function () {
|
|
19450
|
+
var timer = setInterval(function () {
|
|
19451
|
+
setSecs(function (seconds) {
|
|
19452
|
+
if (seconds === 1) {
|
|
19453
|
+
clearInterval(timer);
|
|
19454
|
+
onTimeUp();
|
|
19455
|
+
return 0;
|
|
19456
|
+
}
|
|
19457
|
+
return seconds - 1;
|
|
19458
|
+
});
|
|
19459
|
+
}, 1000);
|
|
19460
|
+
if (secs <= 0)
|
|
19461
|
+
clearInterval(timer);
|
|
19462
|
+
return function () { return clearInterval(timer); };
|
|
19463
|
+
}, [onTimeUp, secs]);
|
|
19464
|
+
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19465
|
+
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));
|
|
19466
|
+
};
|
|
19467
|
+
var templateObject_1$6;
|
|
19641
19468
|
|
|
19642
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19643
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19469
|
+
var Wrapper$1 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
19470
|
+
var GrandTotal = newStyled.h1(templateObject_2$4 || (templateObject_2$4 = __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; });
|
|
19644
19471
|
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) {
|
|
19645
19472
|
var theme = _a.theme;
|
|
19646
19473
|
return theme.component.total.basicTotal.currency.color;
|
|
@@ -19654,11 +19481,11 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19654
19481
|
var theme = _a.theme;
|
|
19655
19482
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19656
19483
|
});
|
|
19657
|
-
var Container$
|
|
19484
|
+
var Container$3 = 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) {
|
|
19658
19485
|
var highlightColor = _a.highlightColor;
|
|
19659
19486
|
return highlightColor;
|
|
19660
19487
|
});
|
|
19661
|
-
var TotalContainer = newStyled(Container$
|
|
19488
|
+
var TotalContainer = newStyled(Container$3)(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) {
|
|
19662
19489
|
var showTotalLabel = _a.showTotalLabel;
|
|
19663
19490
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19664
19491
|
});
|
|
@@ -19668,19 +19495,19 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19668
19495
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19669
19496
|
});
|
|
19670
19497
|
var TotalLabel = newStyled(Text$7)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19671
|
-
var templateObject_1$
|
|
19498
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
19672
19499
|
|
|
19673
19500
|
var Total = function (_a) {
|
|
19674
19501
|
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;
|
|
19675
19502
|
var theme = useTheme();
|
|
19676
|
-
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$
|
|
19503
|
+
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$3, __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));
|
|
19677
19504
|
};
|
|
19678
19505
|
|
|
19679
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19506
|
+
var Wrapper = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19680
19507
|
var color = _a.color;
|
|
19681
19508
|
return color;
|
|
19682
19509
|
});
|
|
19683
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19510
|
+
var ItemContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __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"])));
|
|
19684
19511
|
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) {
|
|
19685
19512
|
var theme = _a.theme;
|
|
19686
19513
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
@@ -19701,15 +19528,15 @@ var Subtotal = function (_a) {
|
|
|
19701
19528
|
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));
|
|
19702
19529
|
})] }), void 0));
|
|
19703
19530
|
};
|
|
19704
|
-
var templateObject_1$
|
|
19531
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2;
|
|
19705
19532
|
|
|
19706
19533
|
var Totals = {
|
|
19707
19534
|
Total: Total,
|
|
19708
19535
|
Subtotal: Subtotal,
|
|
19709
19536
|
};
|
|
19710
19537
|
|
|
19711
|
-
var Container$
|
|
19712
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19538
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19539
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19713
19540
|
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; });
|
|
19714
19541
|
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'); });
|
|
19715
19542
|
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"])));
|
|
@@ -19749,7 +19576,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19749
19576
|
}
|
|
19750
19577
|
return '30px';
|
|
19751
19578
|
};
|
|
19752
|
-
return (jsxRuntime.jsxs(Container$
|
|
19579
|
+
return (jsxRuntime.jsxs(Container$2, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19753
19580
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19754
19581
|
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
|
|
19755
19582
|
? activeCheckpointColor
|
|
@@ -19760,10 +19587,10 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19760
19587
|
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));
|
|
19761
19588
|
})] }), void 0));
|
|
19762
19589
|
};
|
|
19763
|
-
var templateObject_1$
|
|
19590
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11;
|
|
19764
19591
|
|
|
19765
|
-
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"])));
|
|
19766
|
-
var CheckpointContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19592
|
+
var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19593
|
+
var CheckpointContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19767
19594
|
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; });
|
|
19768
19595
|
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'); });
|
|
19769
19596
|
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'); });
|
|
@@ -19791,7 +19618,7 @@ var TrackingProgress = function (_a) {
|
|
|
19791
19618
|
}
|
|
19792
19619
|
return '30px';
|
|
19793
19620
|
};
|
|
19794
|
-
return (jsxRuntime.jsxs(Container, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19621
|
+
return (jsxRuntime.jsxs(Container$1, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19795
19622
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19796
19623
|
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
|
|
19797
19624
|
? theme.colors.semantic.informative.color
|
|
@@ -19800,7 +19627,70 @@ var TrackingProgress = function (_a) {
|
|
|
19800
19627
|
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));
|
|
19801
19628
|
})] }), void 0));
|
|
19802
19629
|
};
|
|
19803
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19630
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
19631
|
+
|
|
19632
|
+
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) {
|
|
19633
|
+
var textPosition = _a.textPosition;
|
|
19634
|
+
return textPosition;
|
|
19635
|
+
}, function (_a) {
|
|
19636
|
+
var backgroundColor = _a.backgroundColor;
|
|
19637
|
+
return backgroundColor;
|
|
19638
|
+
}, function (_a) {
|
|
19639
|
+
var borderRadius = _a.borderRadius;
|
|
19640
|
+
return borderRadius || 'unset';
|
|
19641
|
+
}, function (_a) {
|
|
19642
|
+
var borderRadius = _a.borderRadius;
|
|
19643
|
+
return borderRadius || '8px';
|
|
19644
|
+
});
|
|
19645
|
+
var templateObject_1$1;
|
|
19646
|
+
|
|
19647
|
+
var getDefaultCountdown = function () {
|
|
19648
|
+
var tomorrowDate = new Date();
|
|
19649
|
+
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
19650
|
+
tomorrowDate.setHours(0, 0, 0, 0);
|
|
19651
|
+
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
19652
|
+
return Number(totalSeconds.toFixed(0));
|
|
19653
|
+
};
|
|
19654
|
+
|
|
19655
|
+
var HurryUp = function (_a) {
|
|
19656
|
+
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"]);
|
|
19657
|
+
var theme = useTheme();
|
|
19658
|
+
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));
|
|
19659
|
+
};
|
|
19660
|
+
|
|
19661
|
+
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) {
|
|
19662
|
+
var size = _a.size;
|
|
19663
|
+
return (size ? size : '100%');
|
|
19664
|
+
}, function (_a) {
|
|
19665
|
+
var size = _a.size;
|
|
19666
|
+
return (size ? size : '100%');
|
|
19667
|
+
});
|
|
19668
|
+
var borderSize = {
|
|
19669
|
+
xsmall: '1px',
|
|
19670
|
+
small: '1.5px',
|
|
19671
|
+
medium: '2px',
|
|
19672
|
+
large: '3px',
|
|
19673
|
+
};
|
|
19674
|
+
var DEFAULT_COLOR = '#5EAD9B';
|
|
19675
|
+
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) {
|
|
19676
|
+
var size = _a.size;
|
|
19677
|
+
return borderSize[size];
|
|
19678
|
+
}, function (_a) {
|
|
19679
|
+
var _b = _a.background, background = _b === void 0 ? 'rgba(0, 0, 0, 0.2)' : _b;
|
|
19680
|
+
return background;
|
|
19681
|
+
}, function (_a) {
|
|
19682
|
+
var _b = _a.color, color = _b === void 0 ? DEFAULT_COLOR : _b;
|
|
19683
|
+
return color;
|
|
19684
|
+
}, function (_a) {
|
|
19685
|
+
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
19686
|
+
return duration;
|
|
19687
|
+
});
|
|
19688
|
+
var templateObject_1, templateObject_2;
|
|
19689
|
+
|
|
19690
|
+
var Spinner = function (_a) {
|
|
19691
|
+
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;
|
|
19692
|
+
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));
|
|
19693
|
+
};
|
|
19804
19694
|
|
|
19805
19695
|
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
19806
19696
|
exports.Accordion = Accordion$1;
|
|
@@ -19863,7 +19753,6 @@ exports.ProductGallery = ProductGallery;
|
|
|
19863
19753
|
exports.ProductGalleryMobile = ProductGalleryMobile;
|
|
19864
19754
|
exports.ProductGalleryMobileV2 = ProductGalleryMobileV2;
|
|
19865
19755
|
exports.ProductGalleryMobileV3 = ProductGalleryMobileV3;
|
|
19866
|
-
exports.ProductGalleryMobileV4 = ProductGalleryMobileV4;
|
|
19867
19756
|
exports.ProgressBar = ProgressBar;
|
|
19868
19757
|
exports.QuantityPicker = QuantityPicker;
|
|
19869
19758
|
exports.RadioGroupInput = RadioGroupInput;
|