@trafilea/afrodita-components 6.13.0 → 6.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +27 -9
- package/build/index.esm.js +784 -733
- package/build/index.esm.js.map +1 -1
- package/build/index.js +784 -732
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +7 -0
- package/build/theme/revel.theme.js +7 -0
- package/build/theme/shapermint.theme.d.ts +7 -0
- package/build/theme/shapermint.theme.js +7 -0
- package/build/theme/thebodcon.theme.d.ts +7 -0
- package/build/theme/thebodcon.theme.js +7 -0
- package/build/theme/thespadr.theme.d.ts +7 -0
- package/build/theme/thespadr.theme.js +7 -0
- package/build/theme/truekind.theme.d.ts +7 -0
- package/build/theme/truekind.theme.js +7 -0
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3153,7 +3153,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3153
3153
|
desktop: 1280,
|
|
3154
3154
|
};
|
|
3155
3155
|
|
|
3156
|
-
var Container$
|
|
3156
|
+
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3157
3157
|
var height = _a.height;
|
|
3158
3158
|
return (height ? height : '1.5em');
|
|
3159
3159
|
}, function (_a) {
|
|
@@ -3178,11 +3178,11 @@ var Container$1c = newStyled.div(templateObject_1$1X || (templateObject_1$1X = _
|
|
|
3178
3178
|
var SkeletonBox = function (_a) {
|
|
3179
3179
|
var width = _a.width, height = _a.height;
|
|
3180
3180
|
var theme = useTheme();
|
|
3181
|
-
return jsxRuntime.jsx(Container$
|
|
3181
|
+
return jsxRuntime.jsx(Container$1d, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3182
3182
|
};
|
|
3183
|
-
var templateObject_1$
|
|
3183
|
+
var templateObject_1$1Y;
|
|
3184
3184
|
|
|
3185
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3185
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3186
3186
|
var width = _a.width;
|
|
3187
3187
|
return width;
|
|
3188
3188
|
}, function (_a) {
|
|
@@ -3198,7 +3198,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1W || (templateObject_1$1W
|
|
|
3198
3198
|
var opacity = _a.opacity;
|
|
3199
3199
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3200
3200
|
});
|
|
3201
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3201
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1i || (templateObject_2$1i = __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) {
|
|
3202
3202
|
var width = _a.width;
|
|
3203
3203
|
return width;
|
|
3204
3204
|
}, function (_a) {
|
|
@@ -3211,7 +3211,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1h || (templateObject_2$
|
|
|
3211
3211
|
var opacity = _a.opacity;
|
|
3212
3212
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3213
3213
|
});
|
|
3214
|
-
var templateObject_1$
|
|
3214
|
+
var templateObject_1$1X, templateObject_2$1i;
|
|
3215
3215
|
|
|
3216
3216
|
/* eslint-disable no-undef */
|
|
3217
3217
|
var cache = new Map();
|
|
@@ -3387,7 +3387,7 @@ var buildImageUrl = function (_a) {
|
|
|
3387
3387
|
}
|
|
3388
3388
|
};
|
|
3389
3389
|
|
|
3390
|
-
var Img = newStyled.img(templateObject_1$
|
|
3390
|
+
var Img = newStyled.img(templateObject_1$1W || (templateObject_1$1W = __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; });
|
|
3391
3391
|
var Image$3 = function (_a) {
|
|
3392
3392
|
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, quality = _a.quality, className = _a.className;
|
|
3393
3393
|
var config = useTheme().config;
|
|
@@ -3396,7 +3396,7 @@ var Image$3 = function (_a) {
|
|
|
3396
3396
|
: src;
|
|
3397
3397
|
return (jsxRuntime.jsx(Img, { src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
3398
3398
|
};
|
|
3399
|
-
var templateObject_1$
|
|
3399
|
+
var templateObject_1$1W;
|
|
3400
3400
|
|
|
3401
3401
|
var Add = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3402
3402
|
|
|
@@ -4181,15 +4181,15 @@ function jsxs(type, props, key) {
|
|
|
4181
4181
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4182
4182
|
// `variants` styles that are consistent through all themes.
|
|
4183
4183
|
var TAGS = {
|
|
4184
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4185
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4186
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4187
|
-
display1: newStyled.h1(templateObject_4$
|
|
4188
|
-
display2: newStyled.h2(templateObject_5$
|
|
4189
|
-
display3: newStyled.h3(templateObject_6$
|
|
4190
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4191
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4192
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4184
|
+
hero1: newStyled.h1(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""]))),
|
|
4185
|
+
hero2: newStyled.h2(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject([""], [""]))),
|
|
4186
|
+
hero3: newStyled.h3(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject([""], [""]))),
|
|
4187
|
+
display1: newStyled.h1(templateObject_4$L || (templateObject_4$L = __makeTemplateObject([""], [""]))),
|
|
4188
|
+
display2: newStyled.h2(templateObject_5$x || (templateObject_5$x = __makeTemplateObject([""], [""]))),
|
|
4189
|
+
display3: newStyled.h3(templateObject_6$s || (templateObject_6$s = __makeTemplateObject([""], [""]))),
|
|
4190
|
+
heading1: newStyled.h1(templateObject_7$j || (templateObject_7$j = __makeTemplateObject([""], [""]))),
|
|
4191
|
+
heading2: newStyled.h2(templateObject_8$h || (templateObject_8$h = __makeTemplateObject([""], [""]))),
|
|
4192
|
+
heading3: newStyled.h3(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject([""], [""]))),
|
|
4193
4193
|
heading4: newStyled.h4(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject([""], [""]))),
|
|
4194
4194
|
heading5: newStyled.h5(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject([""], [""]))),
|
|
4195
4195
|
heading6: newStyled.h6(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject([""], [""]))),
|
|
@@ -4317,17 +4317,17 @@ var DEFAULTS = {
|
|
|
4317
4317
|
size: 'regular',
|
|
4318
4318
|
},
|
|
4319
4319
|
};
|
|
4320
|
-
var templateObject_1$
|
|
4321
|
-
|
|
4322
|
-
var Container$
|
|
4323
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4324
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4325
|
-
var Label$5 = newStyled.div(templateObject_4$
|
|
4326
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4327
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4320
|
+
var templateObject_1$1V, templateObject_2$1h, templateObject_3$_, templateObject_4$L, templateObject_5$x, templateObject_6$s, templateObject_7$j, templateObject_8$h, templateObject_9$9, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4321
|
+
|
|
4322
|
+
var Container$1c = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __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"])));
|
|
4323
|
+
var Card$3 = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __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"])));
|
|
4324
|
+
var Tag$2 = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __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"])));
|
|
4325
|
+
var Label$5 = newStyled.div(templateObject_4$K || (templateObject_4$K = __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"])));
|
|
4326
|
+
var Check$1 = newStyled.div(templateObject_5$w || (templateObject_5$w = __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"])));
|
|
4327
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$r || (templateObject_6$r = __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"])));
|
|
4328
4328
|
var PackSelectorV2 = function (_a) {
|
|
4329
4329
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4330
|
-
return (jsxRuntime.jsx(Container$
|
|
4330
|
+
return (jsxRuntime.jsx(Container$1c, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4331
4331
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4332
4332
|
}) }), void 0));
|
|
4333
4333
|
};
|
|
@@ -4349,27 +4349,27 @@ var PackCard$1 = function (_a) {
|
|
|
4349
4349
|
currency: currencyCode || 'USD',
|
|
4350
4350
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4351
4351
|
};
|
|
4352
|
-
var templateObject_1$
|
|
4352
|
+
var templateObject_1$1U, templateObject_2$1g, templateObject_3$Z, templateObject_4$K, templateObject_5$w, templateObject_6$r;
|
|
4353
4353
|
|
|
4354
|
-
var Container$
|
|
4355
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4354
|
+
var Container$1b = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4355
|
+
var DropContainer = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4356
4356
|
var DropList = function (_a) {
|
|
4357
4357
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4358
|
-
return (jsxRuntime.jsx(Container$
|
|
4358
|
+
return (jsxRuntime.jsx(Container$1b, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4359
4359
|
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));
|
|
4360
4360
|
}) }, void 0));
|
|
4361
4361
|
};
|
|
4362
|
-
var templateObject_1$
|
|
4362
|
+
var templateObject_1$1T, templateObject_2$1f;
|
|
4363
4363
|
|
|
4364
4364
|
var DROPS_TOTAL = 5;
|
|
4365
|
-
var Container$
|
|
4366
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4367
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4365
|
+
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4366
|
+
var Title$8 = newStyled.p(templateObject_2$1e || (templateObject_2$1e = __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"])));
|
|
4367
|
+
var Description$3 = newStyled.p(templateObject_3$Y || (templateObject_3$Y = __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"])));
|
|
4368
4368
|
var AbsorbencyLevel = function (_a) {
|
|
4369
4369
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4370
|
-
return (jsxRuntime.jsxs(Container$
|
|
4370
|
+
return (jsxRuntime.jsxs(Container$1a, { 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));
|
|
4371
4371
|
};
|
|
4372
|
-
var templateObject_1$
|
|
4372
|
+
var templateObject_1$1S, templateObject_2$1e, templateObject_3$Y;
|
|
4373
4373
|
|
|
4374
4374
|
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(`
|
|
4375
4375
|
`),"","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(`
|
|
@@ -4445,7 +4445,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4445
4445
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4446
4446
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4447
4447
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4448
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4448
|
+
var StyledContent = newStyled.button(templateObject_1$1R || (templateObject_1$1R = __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"])));
|
|
4449
4449
|
var Accordion$1 = function (_a) {
|
|
4450
4450
|
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;
|
|
4451
4451
|
var theme = useTheme();
|
|
@@ -4469,9 +4469,9 @@ var Accordion$1 = function (_a) {
|
|
|
4469
4469
|
} }, { 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));
|
|
4470
4470
|
} }), void 0));
|
|
4471
4471
|
};
|
|
4472
|
-
var templateObject_1$
|
|
4472
|
+
var templateObject_1$1R;
|
|
4473
4473
|
|
|
4474
|
-
var Container$
|
|
4474
|
+
var Container$19 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4475
4475
|
var AccordionOptions = function (_a) {
|
|
4476
4476
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4477
4477
|
var _b = React$2.useState({
|
|
@@ -4484,7 +4484,7 @@ var AccordionOptions = function (_a) {
|
|
|
4484
4484
|
}
|
|
4485
4485
|
return false;
|
|
4486
4486
|
};
|
|
4487
|
-
return (jsxRuntime.jsx(Container$
|
|
4487
|
+
return (jsxRuntime.jsx(Container$19, { children: accordions.map(function (accordion, index) {
|
|
4488
4488
|
var forceOpenValue = getForceOpen(index);
|
|
4489
4489
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4490
4490
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4495,7 +4495,7 @@ var AccordionOptions = function (_a) {
|
|
|
4495
4495
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4496
4496
|
}) }, void 0));
|
|
4497
4497
|
};
|
|
4498
|
-
var templateObject_1$
|
|
4498
|
+
var templateObject_1$1Q;
|
|
4499
4499
|
|
|
4500
4500
|
exports.CardSectionType = void 0;
|
|
4501
4501
|
(function (CardSectionType) {
|
|
@@ -4657,14 +4657,14 @@ var isValidDate = function (value) {
|
|
|
4657
4657
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
4658
4658
|
};
|
|
4659
4659
|
|
|
4660
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4661
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4660
|
+
var ErrorText = newStyled.h3(templateObject_1$1P || (templateObject_1$1P = __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; });
|
|
4661
|
+
var ErrorContainer = newStyled.div(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
4662
4662
|
var Error$1 = function (_a) {
|
|
4663
4663
|
var error = _a.error;
|
|
4664
4664
|
var theme = useTheme();
|
|
4665
4665
|
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));
|
|
4666
4666
|
};
|
|
4667
|
-
var templateObject_1$
|
|
4667
|
+
var templateObject_1$1P, templateObject_2$1d;
|
|
4668
4668
|
|
|
4669
4669
|
var BaseSelectButton = function (_a) {
|
|
4670
4670
|
var children = _a.children, as = _a.as;
|
|
@@ -4681,7 +4681,7 @@ function BaseSelectOption(_a) {
|
|
|
4681
4681
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4682
4682
|
}
|
|
4683
4683
|
|
|
4684
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4684
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4685
4685
|
function BaseSelect(_a) {
|
|
4686
4686
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4687
4687
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4691,7 +4691,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4691
4691
|
Options: BaseSelectOptions,
|
|
4692
4692
|
Option: BaseSelectOption,
|
|
4693
4693
|
});
|
|
4694
|
-
var templateObject_1$
|
|
4694
|
+
var templateObject_1$1O;
|
|
4695
4695
|
|
|
4696
4696
|
var CustomButton = newStyled.button(function (_a) {
|
|
4697
4697
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4730,7 +4730,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4730
4730
|
});
|
|
4731
4731
|
});
|
|
4732
4732
|
//TODO Remove this when we find the real solution
|
|
4733
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4733
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4734
4734
|
var open = _a.open;
|
|
4735
4735
|
return open &&
|
|
4736
4736
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4750,7 +4750,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4750
4750
|
} }), void 0));
|
|
4751
4751
|
};
|
|
4752
4752
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4753
|
-
var templateObject_1$
|
|
4753
|
+
var templateObject_1$1N;
|
|
4754
4754
|
|
|
4755
4755
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4756
4756
|
var theme = _a.theme;
|
|
@@ -4917,7 +4917,7 @@ var CustomCheckboxStyles = {
|
|
|
4917
4917
|
},
|
|
4918
4918
|
};
|
|
4919
4919
|
|
|
4920
|
-
var Container$
|
|
4920
|
+
var Container$18 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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"])));
|
|
4921
4921
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4922
4922
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4923
4923
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4928,7 +4928,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4928
4928
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4929
4929
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4930
4930
|
]; });
|
|
4931
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4931
|
+
var Input$5 = newStyled.input(templateObject_2$1c || (templateObject_2$1c = __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) {
|
|
4932
4932
|
var disabled = _a.disabled;
|
|
4933
4933
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4934
4934
|
});
|
|
@@ -4942,9 +4942,9 @@ var Checkbox = function (_a) {
|
|
|
4942
4942
|
}
|
|
4943
4943
|
onChange(e.target.checked);
|
|
4944
4944
|
};
|
|
4945
|
-
return (jsxRuntime.jsxs(Container$
|
|
4945
|
+
return (jsxRuntime.jsxs(Container$18, { 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));
|
|
4946
4946
|
};
|
|
4947
|
-
var templateObject_1$
|
|
4947
|
+
var templateObject_1$1M, templateObject_2$1c;
|
|
4948
4948
|
|
|
4949
4949
|
var CustomOption = newStyled.li(function (_a) {
|
|
4950
4950
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -4993,8 +4993,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4993
4993
|
Option: BaseDropdownOption,
|
|
4994
4994
|
});
|
|
4995
4995
|
|
|
4996
|
-
var Container$
|
|
4997
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4996
|
+
var Container$17 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject([""], [""])));
|
|
4997
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1b || (templateObject_2$1b = __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"])));
|
|
4998
4998
|
function SimpleDropdown(_a) {
|
|
4999
4999
|
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;
|
|
5000
5000
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -5023,10 +5023,10 @@ function SimpleDropdown(_a) {
|
|
|
5023
5023
|
}
|
|
5024
5024
|
setSelectedValue(value);
|
|
5025
5025
|
}, [value, options, initialValue]);
|
|
5026
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5026
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$17 : React$2.Fragment;
|
|
5027
5027
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionLabel] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5028
5028
|
}
|
|
5029
|
-
var templateObject_1$
|
|
5029
|
+
var templateObject_1$1L, templateObject_2$1b;
|
|
5030
5030
|
|
|
5031
5031
|
/* base styles & size variants */
|
|
5032
5032
|
var CustomRadioStyles$2 = {
|
|
@@ -5091,9 +5091,9 @@ var ContainerStyles$2 = {
|
|
|
5091
5091
|
},
|
|
5092
5092
|
};
|
|
5093
5093
|
|
|
5094
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5095
|
-
var Container$
|
|
5096
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5094
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5095
|
+
var Container$16 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5096
|
+
var Input$4 = newStyled.input(templateObject_2$1a || (templateObject_2$1a = __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) {
|
|
5097
5097
|
var disabled = _a.disabled;
|
|
5098
5098
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5099
5099
|
});
|
|
@@ -5101,14 +5101,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5101
5101
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5102
5102
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5103
5103
|
]; });
|
|
5104
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
5104
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5105
5105
|
var theme = _a.theme;
|
|
5106
5106
|
return theme.component.radio.textSize;
|
|
5107
5107
|
}, function (_a) {
|
|
5108
5108
|
var theme = _a.theme;
|
|
5109
5109
|
return theme.component.radio.lineHeight;
|
|
5110
5110
|
});
|
|
5111
|
-
var StyledLabelV2 = newStyled(Label$4)(templateObject_4$
|
|
5111
|
+
var StyledLabelV2 = newStyled(Label$4)(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"])), function (_a) {
|
|
5112
5112
|
var theme = _a.theme;
|
|
5113
5113
|
return theme.component.radio.textSize;
|
|
5114
5114
|
}, function (_a) {
|
|
@@ -5122,9 +5122,9 @@ var RadioInput = function (_a) {
|
|
|
5122
5122
|
var value = event.currentTarget.value;
|
|
5123
5123
|
onChange({ value: value, label: label });
|
|
5124
5124
|
};
|
|
5125
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5125
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$16, __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), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), 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));
|
|
5126
5126
|
};
|
|
5127
|
-
var templateObject_1$
|
|
5127
|
+
var templateObject_1$1K, templateObject_2$1a, templateObject_3$X, templateObject_4$J;
|
|
5128
5128
|
|
|
5129
5129
|
var getWrapperFlexDirection = function (position) {
|
|
5130
5130
|
switch (position) {
|
|
@@ -5175,7 +5175,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5175
5175
|
}
|
|
5176
5176
|
};
|
|
5177
5177
|
|
|
5178
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5178
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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) {
|
|
5179
5179
|
var position = _a.position;
|
|
5180
5180
|
return getWrapperFlexDirection(position);
|
|
5181
5181
|
}, function (_a) {
|
|
@@ -5185,7 +5185,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __ma
|
|
|
5185
5185
|
var disableHover = _a.disableHover;
|
|
5186
5186
|
return (disableHover ? 0 : 1);
|
|
5187
5187
|
});
|
|
5188
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5188
|
+
var TooltipContainer = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __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) {
|
|
5189
5189
|
var position = _a.position;
|
|
5190
5190
|
return getContainerFlexDirection(position);
|
|
5191
5191
|
}, function (_a) {
|
|
@@ -5213,25 +5213,25 @@ var TooltipContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18
|
|
|
5213
5213
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5214
5214
|
return actual === expected ? margin : '0';
|
|
5215
5215
|
};
|
|
5216
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5216
|
+
var ContentWrapper = newStyled.div(templateObject_3$W || (templateObject_3$W = __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) {
|
|
5217
5217
|
var borderColor = _a.borderColor;
|
|
5218
5218
|
return borderColor;
|
|
5219
5219
|
}, function (_a) {
|
|
5220
5220
|
var backgroundColor = _a.backgroundColor;
|
|
5221
5221
|
return backgroundColor;
|
|
5222
5222
|
});
|
|
5223
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5223
|
+
var TooltipText = newStyled.div(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"])), function (_a) {
|
|
5224
5224
|
var color = _a.color;
|
|
5225
5225
|
return color;
|
|
5226
5226
|
});
|
|
5227
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5228
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5227
|
+
var TopSection = newStyled.div(templateObject_5$v || (templateObject_5$v = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5228
|
+
var Title$7 = newStyled.h1(templateObject_6$q || (templateObject_6$q = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5229
5229
|
var color = _a.color;
|
|
5230
5230
|
return color;
|
|
5231
5231
|
});
|
|
5232
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5233
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5234
|
-
var templateObject_1$
|
|
5232
|
+
var IconContainer$5 = newStyled.div(templateObject_7$i || (templateObject_7$i = __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"])));
|
|
5233
|
+
var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g = __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"])));
|
|
5234
|
+
var templateObject_1$1J, templateObject_2$19, templateObject_3$W, templateObject_4$I, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$g;
|
|
5235
5235
|
|
|
5236
5236
|
var useOnClickOutside = function (ref, handler) {
|
|
5237
5237
|
React$2.useEffect(function () {
|
|
@@ -5374,7 +5374,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5374
5374
|
};
|
|
5375
5375
|
}
|
|
5376
5376
|
};
|
|
5377
|
-
var Container$
|
|
5377
|
+
var Container$15 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5378
5378
|
var backgroundColor = _a.backgroundColor;
|
|
5379
5379
|
return backgroundColor;
|
|
5380
5380
|
}, function (_a) {
|
|
@@ -5396,7 +5396,7 @@ var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5396
5396
|
var size = _a.size;
|
|
5397
5397
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5398
5398
|
});
|
|
5399
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5399
|
+
var H3$3 = newStyled.h3(templateObject_2$18 || (templateObject_2$18 = __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) {
|
|
5400
5400
|
var textColor = _a.textColor;
|
|
5401
5401
|
return textColor;
|
|
5402
5402
|
}, function (_a) {
|
|
@@ -5411,9 +5411,9 @@ var H3$3 = newStyled.h3(templateObject_2$17 || (templateObject_2$17 = __makeTemp
|
|
|
5411
5411
|
var ClubOfferTag = function (_a) {
|
|
5412
5412
|
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;
|
|
5413
5413
|
var theme = useTheme();
|
|
5414
|
-
return (jsxRuntime.jsx(Container$
|
|
5414
|
+
return (jsxRuntime.jsx(Container$15, __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));
|
|
5415
5415
|
};
|
|
5416
|
-
var templateObject_1$
|
|
5416
|
+
var templateObject_1$1I, templateObject_2$18;
|
|
5417
5417
|
|
|
5418
5418
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5419
5419
|
var _a, _b, _c;
|
|
@@ -5444,7 +5444,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5444
5444
|
};
|
|
5445
5445
|
}
|
|
5446
5446
|
};
|
|
5447
|
-
var Container$
|
|
5447
|
+
var Container$14 = 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) {
|
|
5448
5448
|
var backgroundColor = _a.backgroundColor;
|
|
5449
5449
|
return backgroundColor;
|
|
5450
5450
|
}, function (_a) {
|
|
@@ -5466,7 +5466,7 @@ var Container$13 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5466
5466
|
var size = _a.size;
|
|
5467
5467
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5468
5468
|
});
|
|
5469
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5469
|
+
var H3$2 = newStyled.h3(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5470
5470
|
var textColor = _a.textColor;
|
|
5471
5471
|
return textColor;
|
|
5472
5472
|
}, function (_a) {
|
|
@@ -5481,9 +5481,9 @@ var H3$2 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5481
5481
|
var DiscountTag$1 = function (_a) {
|
|
5482
5482
|
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;
|
|
5483
5483
|
var theme = useTheme();
|
|
5484
|
-
return (jsxRuntime.jsx(Container$
|
|
5484
|
+
return (jsxRuntime.jsx(Container$14, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "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));
|
|
5485
5485
|
};
|
|
5486
|
-
var templateObject_1$
|
|
5486
|
+
var templateObject_1$1H, templateObject_2$17;
|
|
5487
5487
|
|
|
5488
5488
|
var getStylesBySize$b = function (size, theme) {
|
|
5489
5489
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5525,8 +5525,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5525
5525
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5526
5526
|
}
|
|
5527
5527
|
};
|
|
5528
|
-
var Container$
|
|
5529
|
-
var Price = newStyled.p(templateObject_2$
|
|
5528
|
+
var Container$13 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5529
|
+
var Price = newStyled.p(templateObject_2$16 || (templateObject_2$16 = __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) {
|
|
5530
5530
|
var weight = _a.weight;
|
|
5531
5531
|
return (weight ? weight : '400');
|
|
5532
5532
|
}, function (_a) {
|
|
@@ -5550,7 +5550,7 @@ var Price = newStyled.p(templateObject_2$15 || (templateObject_2$15 = __makeTemp
|
|
|
5550
5550
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5551
5551
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5552
5552
|
});
|
|
5553
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5553
|
+
var TagContainer = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5554
5554
|
var _b;
|
|
5555
5555
|
var size = _a.size;
|
|
5556
5556
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5581,11 +5581,11 @@ var PriceLabel = function (_a) {
|
|
|
5581
5581
|
: exports.ComponentSize.XSmall;
|
|
5582
5582
|
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));
|
|
5583
5583
|
};
|
|
5584
|
-
return (jsxRuntime.jsxs(Container$
|
|
5584
|
+
return (jsxRuntime.jsxs(Container$13, __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$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5585
5585
|
};
|
|
5586
|
-
var templateObject_1$
|
|
5586
|
+
var templateObject_1$1G, templateObject_2$16, templateObject_3$V;
|
|
5587
5587
|
|
|
5588
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5588
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5589
5589
|
var PriceLabelV2 = function (_a) {
|
|
5590
5590
|
var _b;
|
|
5591
5591
|
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"]);
|
|
@@ -5638,7 +5638,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5638
5638
|
var savetoString = saveto.toFixed(2);
|
|
5639
5639
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5640
5640
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5641
|
-
return (jsxRuntime.jsxs(Container$
|
|
5641
|
+
return (jsxRuntime.jsxs(Container$13, __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: {
|
|
5642
5642
|
marginTop: '-5px',
|
|
5643
5643
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5644
5644
|
? finalPriceArray[0]
|
|
@@ -5656,11 +5656,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5656
5656
|
lineHeight: '22px',
|
|
5657
5657
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5658
5658
|
};
|
|
5659
|
-
var templateObject_1$
|
|
5659
|
+
var templateObject_1$1F;
|
|
5660
5660
|
|
|
5661
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5662
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5663
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5661
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5662
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5663
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5664
5664
|
var PriceLabelV3 = function (_a) {
|
|
5665
5665
|
var _b;
|
|
5666
5666
|
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"]);
|
|
@@ -5715,7 +5715,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5715
5715
|
return null;
|
|
5716
5716
|
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));
|
|
5717
5717
|
};
|
|
5718
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
5718
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$13, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$13, { 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: {
|
|
5719
5719
|
marginTop: '-5px',
|
|
5720
5720
|
} }, 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: {
|
|
5721
5721
|
marginTop: '-6px',
|
|
@@ -5731,10 +5731,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5731
5731
|
lineHeight: '22px',
|
|
5732
5732
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5733
5733
|
};
|
|
5734
|
-
var templateObject_1$
|
|
5734
|
+
var templateObject_1$1E, templateObject_2$15, templateObject_3$U;
|
|
5735
5735
|
|
|
5736
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
5737
|
-
var ContainerBase$1 = newStyled.div(templateObject_2$
|
|
5736
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5737
|
+
var ContainerBase$1 = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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) {
|
|
5738
5738
|
var selected = _a.selected, theme = _a.theme;
|
|
5739
5739
|
return selected
|
|
5740
5740
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5748,30 +5748,30 @@ var ContainerBase$1 = newStyled.div(templateObject_2$13 || (templateObject_2$13
|
|
|
5748
5748
|
var theme = _a.theme;
|
|
5749
5749
|
return theme.colors.pallete.primary.color;
|
|
5750
5750
|
});
|
|
5751
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$
|
|
5751
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$T || (templateObject_3$T = __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) {
|
|
5752
5752
|
var onClick = _a.onClick;
|
|
5753
5753
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5754
5754
|
});
|
|
5755
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
5756
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_5$
|
|
5755
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5756
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5757
5757
|
var theme = _a.theme;
|
|
5758
5758
|
return theme.colors.shades[200].color;
|
|
5759
5759
|
}, function (_a) {
|
|
5760
5760
|
var theme = _a.theme;
|
|
5761
5761
|
return theme.colors.pallete.primary.color;
|
|
5762
5762
|
});
|
|
5763
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_6$
|
|
5764
|
-
var Benefit$1 = newStyled.div(templateObject_7$
|
|
5765
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_8$
|
|
5766
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5763
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5764
|
+
var Benefit$1 = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5765
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_8$f || (templateObject_8$f = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5766
|
+
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5767
5767
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
5768
5768
|
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
5769
5769
|
var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5770
5770
|
var selected = _a.selected, theme = _a.theme;
|
|
5771
5771
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5772
5772
|
});
|
|
5773
|
-
var Container$
|
|
5774
|
-
var templateObject_1$
|
|
5773
|
+
var Container$12 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5774
|
+
var templateObject_1$1D, templateObject_2$14, templateObject_3$T, templateObject_4$H, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$f, templateObject_9$8, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
|
|
5775
5775
|
|
|
5776
5776
|
var radioIds$1 = {
|
|
5777
5777
|
oneTime: {
|
|
@@ -5821,14 +5821,14 @@ var Autoship = function (_a) {
|
|
|
5821
5821
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5822
5822
|
};
|
|
5823
5823
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5824
|
-
return (jsxRuntime.jsxs(Container$
|
|
5824
|
+
return (jsxRuntime.jsxs(Container$12, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer$1, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer$1, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer$1, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$1, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
5825
5825
|
? benefitsColor.selected
|
|
5826
5826
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$1, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __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$1, { 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));
|
|
5827
5827
|
};
|
|
5828
5828
|
|
|
5829
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5830
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
5831
|
-
var ContainerBase = newStyled.div(templateObject_3$
|
|
5829
|
+
var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5830
|
+
var DiscountTag = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n position: absolute;\n top: -25px;\n right: 5px;\n background-color: #c64844;\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: 5px;\n font-weight: 600;\n"], ["\n position: absolute;\n top: -25px;\n right: 5px;\n background-color: #c64844;\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: 5px;\n font-weight: 600;\n"])));
|
|
5831
|
+
var ContainerBase = newStyled.div(templateObject_3$S || (templateObject_3$S = __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) {
|
|
5832
5832
|
var selected = _a.selected, theme = _a.theme;
|
|
5833
5833
|
return selected
|
|
5834
5834
|
? "1.5px solid ".concat(theme.colors.shades['700'].color)
|
|
@@ -5842,28 +5842,28 @@ var ContainerBase = newStyled.div(templateObject_3$R || (templateObject_3$R = __
|
|
|
5842
5842
|
var theme = _a.theme;
|
|
5843
5843
|
return theme.colors.pallete.primary.color;
|
|
5844
5844
|
});
|
|
5845
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5845
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
5846
5846
|
var onClick = _a.onClick;
|
|
5847
5847
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5848
5848
|
});
|
|
5849
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
5850
|
-
var SubscriptionHeader = newStyled.div(templateObject_6$
|
|
5849
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
5850
|
+
var SubscriptionHeader = newStyled.div(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5851
5851
|
var theme = _a.theme;
|
|
5852
5852
|
return theme.colors.shades[200].color;
|
|
5853
5853
|
}, function (_a) {
|
|
5854
5854
|
var theme = _a.theme;
|
|
5855
5855
|
return theme.colors.pallete.primary.color;
|
|
5856
5856
|
});
|
|
5857
|
-
var BenefitsContainer = newStyled.div(templateObject_7$
|
|
5858
|
-
var Benefit = newStyled.div(templateObject_8$
|
|
5859
|
-
var BenefitText = newStyled(Text$7)(templateObject_9$
|
|
5857
|
+
var BenefitsContainer = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5858
|
+
var Benefit = newStyled.div(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
5859
|
+
var BenefitText = newStyled(Text$7)(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5860
5860
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
5861
5861
|
var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5862
5862
|
var selected = _a.selected, theme = _a.theme;
|
|
5863
5863
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5864
5864
|
});
|
|
5865
|
-
var Container$
|
|
5866
|
-
var templateObject_1$
|
|
5865
|
+
var Container$11 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5866
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$t, templateObject_6$o, templateObject_7$g, templateObject_8$e, templateObject_9$7, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
5867
5867
|
|
|
5868
5868
|
var radioIds = {
|
|
5869
5869
|
oneTime: {
|
|
@@ -5926,7 +5926,7 @@ var AutoshipV2 = function (_a) {
|
|
|
5926
5926
|
return (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0));
|
|
5927
5927
|
}
|
|
5928
5928
|
}
|
|
5929
|
-
return (jsxRuntime.jsxs(Container$
|
|
5929
|
+
return (jsxRuntime.jsxs(Container$11, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag, { children: "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }, void 0), jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsxs(FlexContainer, { 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'); }, style: { marginRight: '10px' }, useV2Style: true }, void 0), jsxRuntime.jsx("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: updatedAutoshipBenefits.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
|
|
5930
5930
|
? benefitsColor.selected
|
|
5931
5931
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(FlexContainer, { children: jsxRuntime.jsx(DeliveryFrequencySelector, {}, void 0) }, void 0) }, void 0))] }), void 0), 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'); }, useV2Style: true }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
5932
5932
|
};
|
|
@@ -5944,13 +5944,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5944
5944
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5945
5945
|
_a$2);
|
|
5946
5946
|
|
|
5947
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5948
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5949
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5950
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
5951
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
5952
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
5953
|
-
var templateObject_1$
|
|
5947
|
+
var CustomerDetails = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject([""], [""])));
|
|
5948
|
+
var CustomerInfo = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5949
|
+
var Name = newStyled.h4(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
5950
|
+
var StarIconContainer = newStyled.div(templateObject_4$F || (templateObject_4$F = __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"])));
|
|
5951
|
+
var Description$2 = newStyled.p(templateObject_5$s || (templateObject_5$s = __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"])));
|
|
5952
|
+
var ReviewDays = newStyled.span(templateObject_6$n || (templateObject_6$n = __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"])));
|
|
5953
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$s, templateObject_6$n;
|
|
5954
5954
|
|
|
5955
5955
|
var NameWithStars = function (_a) {
|
|
5956
5956
|
var name = _a.name, size = _a.size;
|
|
@@ -5968,10 +5968,10 @@ var ResultFeedback = function (_a) {
|
|
|
5968
5968
|
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));
|
|
5969
5969
|
};
|
|
5970
5970
|
|
|
5971
|
-
var Container
|
|
5972
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5973
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5974
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
5971
|
+
var Container$10 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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; });
|
|
5972
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
5973
|
+
var ImageCard = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
5974
|
+
var UserInfoText = newStyled.div(templateObject_4$E || (templateObject_4$E = __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) {
|
|
5975
5975
|
var theme = _a.theme;
|
|
5976
5976
|
return theme.colors.pallete.secondary.color;
|
|
5977
5977
|
}, function (_a) {
|
|
@@ -5981,7 +5981,7 @@ var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __m
|
|
|
5981
5981
|
var theme = _a.theme, size = _a.size;
|
|
5982
5982
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5983
5983
|
});
|
|
5984
|
-
var templateObject_1$
|
|
5984
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E;
|
|
5985
5985
|
|
|
5986
5986
|
/* base styles & size variants */
|
|
5987
5987
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6056,10 +6056,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6056
6056
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
6057
6057
|
var infoText = buildInfoText(name, age, months);
|
|
6058
6058
|
var Component = componentByVariant[variant];
|
|
6059
|
-
return (jsxRuntime.jsxs(Container
|
|
6059
|
+
return (jsxRuntime.jsxs(Container$10, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6060
6060
|
};
|
|
6061
6061
|
|
|
6062
|
-
var Section = newStyled.div(templateObject_1$
|
|
6062
|
+
var Section = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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) {
|
|
6063
6063
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6064
6064
|
});
|
|
6065
6065
|
var CardHeader = function (_a) {
|
|
@@ -6070,16 +6070,16 @@ var CardFooter = function (_a) {
|
|
|
6070
6070
|
var children = _a.children;
|
|
6071
6071
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6072
6072
|
};
|
|
6073
|
-
var templateObject_1$
|
|
6073
|
+
var templateObject_1$1z;
|
|
6074
6074
|
|
|
6075
|
-
var Body = newStyled.div(templateObject_1$
|
|
6075
|
+
var Body = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
6076
6076
|
var CardBody = function (_a) {
|
|
6077
6077
|
var children = _a.children;
|
|
6078
6078
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6079
6079
|
};
|
|
6080
|
-
var templateObject_1$
|
|
6080
|
+
var templateObject_1$1y;
|
|
6081
6081
|
|
|
6082
|
-
var Container
|
|
6082
|
+
var Container$$ = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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) {
|
|
6083
6083
|
var flex = _a.flex;
|
|
6084
6084
|
return flex &&
|
|
6085
6085
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6094,23 +6094,23 @@ var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __
|
|
|
6094
6094
|
var Card$1 = function (_a) {
|
|
6095
6095
|
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;
|
|
6096
6096
|
var theme = useTheme();
|
|
6097
|
-
return (jsxRuntime.jsx(Container
|
|
6097
|
+
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));
|
|
6098
6098
|
};
|
|
6099
6099
|
var Card$2 = Object.assign(Card$1, {
|
|
6100
6100
|
Header: CardHeader,
|
|
6101
6101
|
Footer: CardFooter,
|
|
6102
6102
|
Body: CardBody,
|
|
6103
6103
|
});
|
|
6104
|
-
var templateObject_1$
|
|
6104
|
+
var templateObject_1$1x;
|
|
6105
6105
|
|
|
6106
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6107
|
-
var StyledContainer = newStyled.div(templateObject_2
|
|
6108
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6106
|
+
var StyledWrapper = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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"])));
|
|
6107
|
+
var StyledContainer = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6108
|
+
var TextLabel = newStyled(Text$7)(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6109
6109
|
var color = _a.color;
|
|
6110
6110
|
return color;
|
|
6111
6111
|
});
|
|
6112
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6113
|
-
var templateObject_1$
|
|
6112
|
+
var YouAreSaving = newStyled(Text$7)(templateObject_4$D || (templateObject_4$D = __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"])));
|
|
6113
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$P, templateObject_4$D;
|
|
6114
6114
|
|
|
6115
6115
|
var Minimalistic = function (_a) {
|
|
6116
6116
|
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;
|
|
@@ -6118,28 +6118,28 @@ var Minimalistic = function (_a) {
|
|
|
6118
6118
|
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));
|
|
6119
6119
|
};
|
|
6120
6120
|
|
|
6121
|
-
var Container$
|
|
6122
|
-
var Title$6 = newStyled.h1(templateObject_2
|
|
6123
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6124
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6121
|
+
var Container$_ = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6122
|
+
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; });
|
|
6123
|
+
var Details$1 = newStyled.span(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6124
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$C || (templateObject_4$C = __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"])));
|
|
6125
6125
|
var Simple = function (_a) {
|
|
6126
6126
|
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;
|
|
6127
6127
|
var theme = useTheme();
|
|
6128
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
6128
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$_, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6129
6129
|
};
|
|
6130
|
-
var templateObject_1$
|
|
6130
|
+
var templateObject_1$1v, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
6131
6131
|
|
|
6132
6132
|
var Bundle = {
|
|
6133
6133
|
Minimalistic: Minimalistic,
|
|
6134
6134
|
Simple: Simple,
|
|
6135
6135
|
};
|
|
6136
6136
|
|
|
6137
|
-
var Container$
|
|
6137
|
+
var Container$Z = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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) {
|
|
6138
6138
|
var displayBNPL = _a.displayBNPL;
|
|
6139
6139
|
return (displayBNPL ? 'flex' : 'none');
|
|
6140
6140
|
});
|
|
6141
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6142
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6141
|
+
var TextContainer$1 = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6142
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6143
6143
|
var BuyNowPayLater = function (_a) {
|
|
6144
6144
|
var _b;
|
|
6145
6145
|
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;
|
|
@@ -6149,43 +6149,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6149
6149
|
console.error('Icon', iconName, 'not found');
|
|
6150
6150
|
return null;
|
|
6151
6151
|
}
|
|
6152
|
-
return (jsxRuntime.jsx(Container$
|
|
6152
|
+
return (jsxRuntime.jsx(Container$Z, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6153
6153
|
};
|
|
6154
|
-
var templateObject_1$
|
|
6154
|
+
var templateObject_1$1u, templateObject_2$_, templateObject_3$N;
|
|
6155
6155
|
|
|
6156
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6156
|
+
var Text$6 = newStyled.span(templateObject_1$1t || (templateObject_1$1t = __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; });
|
|
6157
6157
|
var Title$5 = function (_a) {
|
|
6158
6158
|
var title = _a.title;
|
|
6159
6159
|
var theme = useTheme();
|
|
6160
6160
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6161
6161
|
};
|
|
6162
|
-
var templateObject_1$
|
|
6162
|
+
var templateObject_1$1t;
|
|
6163
6163
|
|
|
6164
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6164
|
+
var P$3 = newStyled.p(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
6165
6165
|
var Promo = function (_a) {
|
|
6166
6166
|
var text = _a.text;
|
|
6167
6167
|
var theme = useTheme();
|
|
6168
6168
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6169
6169
|
};
|
|
6170
|
-
var templateObject_1$
|
|
6170
|
+
var templateObject_1$1s;
|
|
6171
6171
|
|
|
6172
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6172
|
+
var Text$5 = newStyled.span(templateObject_1$1r || (templateObject_1$1r = __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; });
|
|
6173
6173
|
var Description$1 = function (_a) {
|
|
6174
6174
|
var text = _a.text;
|
|
6175
6175
|
var theme = useTheme();
|
|
6176
6176
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6177
6177
|
};
|
|
6178
|
-
var templateObject_1$
|
|
6178
|
+
var templateObject_1$1r;
|
|
6179
6179
|
|
|
6180
|
-
var Container$
|
|
6180
|
+
var Container$Y = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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"); });
|
|
6181
6181
|
var CloseButton$1 = function (_a) {
|
|
6182
6182
|
var onClick = _a.onClick, size = _a.size;
|
|
6183
6183
|
var theme = useTheme();
|
|
6184
|
-
return (jsxRuntime.jsx(Container$
|
|
6184
|
+
return (jsxRuntime.jsx(Container$Y, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6185
6185
|
};
|
|
6186
|
-
var templateObject_1$
|
|
6186
|
+
var templateObject_1$1q;
|
|
6187
6187
|
|
|
6188
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6188
|
+
var Text$4 = newStyled.h3(templateObject_1$1p || (templateObject_1$1p = __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) {
|
|
6189
6189
|
var backgroundColor = _a.backgroundColor;
|
|
6190
6190
|
return backgroundColor;
|
|
6191
6191
|
}, function (_a) {
|
|
@@ -6200,7 +6200,7 @@ var OfferBanner = function (_a) {
|
|
|
6200
6200
|
var theme = useTheme();
|
|
6201
6201
|
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));
|
|
6202
6202
|
};
|
|
6203
|
-
var templateObject_1$
|
|
6203
|
+
var templateObject_1$1p;
|
|
6204
6204
|
|
|
6205
6205
|
var CartProductItem = {
|
|
6206
6206
|
Title: Title$5,
|
|
@@ -6210,20 +6210,20 @@ var CartProductItem = {
|
|
|
6210
6210
|
CloseButton: CloseButton$1,
|
|
6211
6211
|
};
|
|
6212
6212
|
|
|
6213
|
-
var Container$
|
|
6214
|
-
var MobileContainer = newStyled(Container$
|
|
6215
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6216
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6217
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6218
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6219
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6220
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6213
|
+
var Container$X = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
6214
|
+
var MobileContainer = newStyled(Container$X)(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6215
|
+
var DollarPart = newStyled.span(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6216
|
+
var ClubMembersText = newStyled.span(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
6217
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6218
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6219
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6220
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6221
6221
|
var ClubPriceLabel = function (_a) {
|
|
6222
6222
|
var clubPrice = _a.clubPrice;
|
|
6223
6223
|
var isMobile = useWindowDimensions().isMobile;
|
|
6224
|
-
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$
|
|
6224
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$X, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6225
6225
|
};
|
|
6226
|
-
var templateObject_1$
|
|
6226
|
+
var templateObject_1$1o, templateObject_2$Z, templateObject_3$M, templateObject_4$B, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$d;
|
|
6227
6227
|
|
|
6228
6228
|
var Spacing = function (_a) {
|
|
6229
6229
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6231,10 +6231,10 @@ var Spacing = function (_a) {
|
|
|
6231
6231
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6232
6232
|
};
|
|
6233
6233
|
|
|
6234
|
-
var Container$
|
|
6235
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6236
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6237
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6234
|
+
var Container$W = newStyled('div')(templateObject_1$1n || (templateObject_1$1n = __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"])));
|
|
6235
|
+
var Content$2 = newStyled('div')(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6236
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6237
|
+
var Bar$2 = newStyled('div')(templateObject_4$A || (templateObject_4$A = __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) {
|
|
6238
6238
|
var index = _a.index;
|
|
6239
6239
|
return "".concat(6 + 3 * index, "px");
|
|
6240
6240
|
}, function (_a) {
|
|
@@ -6243,15 +6243,15 @@ var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __makeT
|
|
|
6243
6243
|
});
|
|
6244
6244
|
var StrengthBars = function (_a) {
|
|
6245
6245
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6246
|
-
return (jsxRuntime.jsxs(Container$
|
|
6246
|
+
return (jsxRuntime.jsxs(Container$W, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6247
6247
|
};
|
|
6248
|
-
var templateObject_1$
|
|
6248
|
+
var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A;
|
|
6249
6249
|
|
|
6250
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6251
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6252
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6253
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6254
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6250
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1m || (templateObject_1$1m = __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"])));
|
|
6251
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6252
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6253
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6254
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6255
6255
|
var RegularPriceTag = function () {
|
|
6256
6256
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6257
6257
|
};
|
|
@@ -6300,16 +6300,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6300
6300
|
: exports.ComponentSize.XSmall;
|
|
6301
6301
|
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));
|
|
6302
6302
|
};
|
|
6303
|
-
return (jsxRuntime.jsxs(Container$
|
|
6303
|
+
return (jsxRuntime.jsxs(Container$13, __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]
|
|
6304
6304
|
? finalPriceArray[0]
|
|
6305
6305
|
: (_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$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6306
6306
|
};
|
|
6307
|
-
var templateObject_1$
|
|
6307
|
+
var templateObject_1$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z, templateObject_5$q;
|
|
6308
6308
|
|
|
6309
|
-
var Container$
|
|
6310
|
-
var templateObject_1$
|
|
6309
|
+
var Container$V = 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"])));
|
|
6310
|
+
var templateObject_1$1l;
|
|
6311
6311
|
|
|
6312
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6312
|
+
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) {
|
|
6313
6313
|
var marginRight = _a.marginRight;
|
|
6314
6314
|
return marginRight;
|
|
6315
6315
|
});
|
|
@@ -6321,11 +6321,11 @@ var StarList = function (_a) {
|
|
|
6321
6321
|
width: theme.component.stars.element[size].width,
|
|
6322
6322
|
height: theme.component.stars.element[size].height,
|
|
6323
6323
|
};
|
|
6324
|
-
return (jsxRuntime.jsx(Container$
|
|
6324
|
+
return (jsxRuntime.jsx(Container$V, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6325
6325
|
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)));
|
|
6326
6326
|
}) }, void 0));
|
|
6327
6327
|
};
|
|
6328
|
-
var templateObject_1$
|
|
6328
|
+
var templateObject_1$1k;
|
|
6329
6329
|
|
|
6330
6330
|
/* base styles & size variants */
|
|
6331
6331
|
var LabelStyles = {
|
|
@@ -6366,8 +6366,8 @@ var LabelStyles = {
|
|
|
6366
6366
|
});
|
|
6367
6367
|
},
|
|
6368
6368
|
};
|
|
6369
|
-
var Container$
|
|
6370
|
-
var templateObject_1$
|
|
6369
|
+
var Container$U = 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"])));
|
|
6370
|
+
var templateObject_1$1j;
|
|
6371
6371
|
|
|
6372
6372
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6373
6373
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6387,7 +6387,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6387
6387
|
}),
|
|
6388
6388
|
];
|
|
6389
6389
|
});
|
|
6390
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6390
|
+
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; });
|
|
6391
6391
|
var starsNumber = 5;
|
|
6392
6392
|
var Rating = function (_a) {
|
|
6393
6393
|
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;
|
|
@@ -6408,9 +6408,9 @@ var Rating = function (_a) {
|
|
|
6408
6408
|
href: reviewsContainerId,
|
|
6409
6409
|
}
|
|
6410
6410
|
: {};
|
|
6411
|
-
return (jsxRuntime.jsxs(Container$
|
|
6411
|
+
return (jsxRuntime.jsxs(Container$U, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6412
6412
|
};
|
|
6413
|
-
var templateObject_1$
|
|
6413
|
+
var templateObject_1$1i;
|
|
6414
6414
|
|
|
6415
6415
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6416
6416
|
var width = _a.width, height = _a.height;
|
|
@@ -6420,10 +6420,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6420
6420
|
height: height,
|
|
6421
6421
|
});
|
|
6422
6422
|
});
|
|
6423
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6424
|
-
var Container$
|
|
6425
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6426
|
-
var Title$4 = newStyled.p(templateObject_4$
|
|
6423
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
6424
|
+
var Container$T = newStyled.a(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6425
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6426
|
+
var Title$4 = newStyled.p(templateObject_4$y || (templateObject_4$y = __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; });
|
|
6427
6427
|
var getStylesBySize$9 = function (size) {
|
|
6428
6428
|
switch (size) {
|
|
6429
6429
|
case exports.ComponentSize.Medium:
|
|
@@ -6449,15 +6449,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6449
6449
|
};
|
|
6450
6450
|
}
|
|
6451
6451
|
};
|
|
6452
|
-
var TopTagContainer$
|
|
6452
|
+
var TopTagContainer$6 = newStyled.div(templateObject_5$p || (templateObject_5$p = __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) {
|
|
6453
6453
|
var style = _a.style;
|
|
6454
6454
|
return style.width;
|
|
6455
6455
|
});
|
|
6456
|
-
var BottomTagContainer$
|
|
6456
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_6$l || (templateObject_6$l = __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) {
|
|
6457
6457
|
var style = _a.style;
|
|
6458
6458
|
return style.width;
|
|
6459
6459
|
});
|
|
6460
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6460
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6461
6461
|
var ProductItemMobile = function (_a) {
|
|
6462
6462
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6463
6463
|
display: false,
|
|
@@ -6514,9 +6514,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6514
6514
|
return jsx(Fragment, {}, void 0);
|
|
6515
6515
|
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));
|
|
6516
6516
|
};
|
|
6517
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6517
|
+
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$T, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$T, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6518
6518
|
};
|
|
6519
|
-
var templateObject_1$
|
|
6519
|
+
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$l, templateObject_7$e;
|
|
6520
6520
|
|
|
6521
6521
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6522
6522
|
var width = _a.width, height = _a.height;
|
|
@@ -6526,10 +6526,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6526
6526
|
height: height,
|
|
6527
6527
|
});
|
|
6528
6528
|
});
|
|
6529
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6530
|
-
var Container$
|
|
6531
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6532
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
6529
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1g || (templateObject_1$1g = __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; });
|
|
6530
|
+
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"])));
|
|
6531
|
+
var ProdCardContainer = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6532
|
+
var Title$3 = 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; });
|
|
6533
6533
|
var getStylesBySize$8 = function (size) {
|
|
6534
6534
|
switch (size) {
|
|
6535
6535
|
case exports.ComponentSize.Medium:
|
|
@@ -6555,16 +6555,16 @@ var getStylesBySize$8 = function (size) {
|
|
|
6555
6555
|
};
|
|
6556
6556
|
}
|
|
6557
6557
|
};
|
|
6558
|
-
var TopTagContainer$
|
|
6558
|
+
var TopTagContainer$5 = newStyled.div(templateObject_5$o || (templateObject_5$o = __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) {
|
|
6559
6559
|
var style = _a.style;
|
|
6560
6560
|
return style.width;
|
|
6561
6561
|
});
|
|
6562
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6563
|
-
var BottomTagContainer$
|
|
6562
|
+
var TopRightTagContainer$2 = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n"])));
|
|
6563
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_7$d || (templateObject_7$d = __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) {
|
|
6564
6564
|
var style = _a.style;
|
|
6565
6565
|
return style.width;
|
|
6566
6566
|
});
|
|
6567
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
6567
|
+
var MarginTopContainer = newStyled.div(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6568
6568
|
var ProductItemTK = function (_a) {
|
|
6569
6569
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
6570
6570
|
display: false,
|
|
@@ -6608,26 +6608,26 @@ var ProductItemTK = function (_a) {
|
|
|
6608
6608
|
: undefined }, void 0));
|
|
6609
6609
|
};
|
|
6610
6610
|
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)); };
|
|
6611
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6611
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$S, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag || !!topRightTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0), !!topRightTag && jsx(TopRightTagContainer$2, { children: topRightTag }, void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$S, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
6612
6612
|
// @ts-ignore
|
|
6613
6613
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6614
6614
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6615
6615
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6616
6616
|
} }, { 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));
|
|
6617
6617
|
};
|
|
6618
|
-
var templateObject_1$
|
|
6618
|
+
var templateObject_1$1g, templateObject_2$V, templateObject_3$I, templateObject_4$x, templateObject_5$o, templateObject_6$k, templateObject_7$d, templateObject_8$c;
|
|
6619
6619
|
|
|
6620
|
-
var Container$
|
|
6620
|
+
var Container$R = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
6621
6621
|
function withProductGrid(ProductItemComponent, data) {
|
|
6622
6622
|
function WithProductGrid(props) {
|
|
6623
|
-
return (jsxRuntime.jsx(Container$
|
|
6623
|
+
return (jsxRuntime.jsx(Container$R, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6624
6624
|
}
|
|
6625
6625
|
/* istanbul ignore next */
|
|
6626
6626
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6627
6627
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6628
6628
|
return WithProductGrid;
|
|
6629
6629
|
}
|
|
6630
|
-
var templateObject_1$
|
|
6630
|
+
var templateObject_1$1f;
|
|
6631
6631
|
|
|
6632
6632
|
var Collection = {
|
|
6633
6633
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6674,11 +6674,11 @@ var OutOfStock = function (_a) {
|
|
|
6674
6674
|
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));
|
|
6675
6675
|
};
|
|
6676
6676
|
|
|
6677
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6678
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6679
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6680
|
-
var Span = newStyled.span(templateObject_4$
|
|
6681
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6677
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6678
|
+
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6679
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6680
|
+
var Span = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6681
|
+
var OptionsContainer = newStyled.div(templateObject_5$n || (templateObject_5$n = __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"])));
|
|
6682
6682
|
var Label$3 = function (_a) {
|
|
6683
6683
|
var label = _a.label, values = _a.values;
|
|
6684
6684
|
return (jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -6696,23 +6696,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6696
6696
|
Option: Option,
|
|
6697
6697
|
OptionsContainer: OptionsContainer,
|
|
6698
6698
|
});
|
|
6699
|
-
var templateObject_1$
|
|
6699
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$n;
|
|
6700
6700
|
|
|
6701
|
-
var Container$
|
|
6701
|
+
var Container$Q = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
6702
6702
|
var borderColor = _a.borderColor;
|
|
6703
6703
|
return borderColor;
|
|
6704
6704
|
}, function (_a) {
|
|
6705
6705
|
var noStock = _a.noStock;
|
|
6706
6706
|
return (noStock ? '0.4' : '1');
|
|
6707
6707
|
});
|
|
6708
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6708
|
+
var Image$2 = newStyled.img(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6709
6709
|
var PatternSelector = function (_a) {
|
|
6710
6710
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6711
6711
|
var theme = useTheme();
|
|
6712
6712
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6713
|
-
return (jsxRuntime.jsx(Container$
|
|
6713
|
+
return (jsxRuntime.jsx(Container$Q, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6714
6714
|
};
|
|
6715
|
-
var templateObject_1$
|
|
6715
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6716
6716
|
|
|
6717
6717
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6718
6718
|
if (options == null || options.length === 0) {
|
|
@@ -6771,21 +6771,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6771
6771
|
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));
|
|
6772
6772
|
};
|
|
6773
6773
|
|
|
6774
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6775
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6776
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6774
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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'); });
|
|
6775
|
+
var Col$1 = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6776
|
+
var Row$2 = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
6777
6777
|
return props.rightToLeft &&
|
|
6778
6778
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6779
6779
|
});
|
|
6780
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6781
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6782
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6780
|
+
var H5 = newStyled.h5(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6781
|
+
var H3$1 = newStyled.h3(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6782
|
+
var FreeShipping = newStyled.span(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6783
6783
|
var CrossSellCheckbox = function (_a) {
|
|
6784
6784
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6785
6785
|
var theme = useTheme();
|
|
6786
6786
|
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));
|
|
6787
6787
|
};
|
|
6788
|
-
var templateObject_1$
|
|
6788
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$m, templateObject_6$j;
|
|
6789
6789
|
|
|
6790
6790
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6791
6791
|
__proto__: null,
|
|
@@ -6813,7 +6813,7 @@ var sizeMapper = (_a = {},
|
|
|
6813
6813
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6814
6814
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6815
6815
|
_a);
|
|
6816
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6816
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
6817
6817
|
var wide = _a.wide;
|
|
6818
6818
|
return (wide ? '100%' : 'fit-content');
|
|
6819
6819
|
}, function (_a) {
|
|
@@ -6835,8 +6835,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1a || (templateObj
|
|
|
6835
6835
|
var theme = _a.theme;
|
|
6836
6836
|
return theme.colors.text.disabled;
|
|
6837
6837
|
});
|
|
6838
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6839
|
-
var templateObject_1$
|
|
6838
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6839
|
+
var templateObject_1$1b, templateObject_2$R;
|
|
6840
6840
|
|
|
6841
6841
|
var BaseCTA = function (_a) {
|
|
6842
6842
|
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"]);
|
|
@@ -6903,44 +6903,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6903
6903
|
} }), void 0));
|
|
6904
6904
|
};
|
|
6905
6905
|
|
|
6906
|
-
var Container$
|
|
6907
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6908
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
6909
|
-
var Details = newStyled.span(templateObject_4$
|
|
6906
|
+
var Container$P = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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; });
|
|
6907
|
+
var IconContainer$4 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
6908
|
+
var Text$3 = newStyled.p(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6909
|
+
var Details = newStyled.span(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
6910
6910
|
var Note = function (_a) {
|
|
6911
6911
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6912
6912
|
var theme = useTheme();
|
|
6913
|
-
return (jsxRuntime.jsxs(Container$
|
|
6913
|
+
return (jsxRuntime.jsxs(Container$P, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6914
6914
|
};
|
|
6915
|
-
var templateObject_1$
|
|
6915
|
+
var templateObject_1$1a, templateObject_2$Q, templateObject_3$F, templateObject_4$u;
|
|
6916
6916
|
|
|
6917
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6917
|
+
var Title$2 = newStyled.h1(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
6918
6918
|
var theme = _a.theme;
|
|
6919
6919
|
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 ");
|
|
6920
6920
|
});
|
|
6921
|
-
var Line = newStyled.div(templateObject_2$
|
|
6922
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6921
|
+
var Line = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
6922
|
+
var Row$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
6923
6923
|
flexDirection: ['column', 'row'],
|
|
6924
6924
|
}));
|
|
6925
|
-
var Col = newStyled.div(templateObject_4$
|
|
6925
|
+
var Col = newStyled.div(templateObject_4$t || (templateObject_4$t = __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({
|
|
6926
6926
|
margin: ['0', '0 1.25rem'],
|
|
6927
6927
|
marginBottom: ['1.875rem', '0'],
|
|
6928
6928
|
alignItems: ['center', 'flex-start'],
|
|
6929
6929
|
textAlign: ['center', 'inherit'],
|
|
6930
6930
|
width: ['100%', 'inherit'],
|
|
6931
6931
|
}));
|
|
6932
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
6932
|
+
var IconContainer$3 = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
6933
6933
|
marginRight: ['0', '0.438rem'],
|
|
6934
6934
|
marginBottom: ['10px', '0'],
|
|
6935
6935
|
width: ['auto', '1.5rem'],
|
|
6936
6936
|
}));
|
|
6937
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6937
|
+
var SectionTitle = newStyled.h1(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
6938
6938
|
display: ['block', 'flex'],
|
|
6939
6939
|
}), function (_a) {
|
|
6940
6940
|
var theme = _a.theme;
|
|
6941
6941
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
6942
6942
|
});
|
|
6943
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6943
|
+
var SectionDetails = newStyled.p(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
6944
6944
|
var theme = _a.theme;
|
|
6945
6945
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
6946
6946
|
}, function (_a) {
|
|
@@ -6951,22 +6951,22 @@ var SectionDetails = newStyled.p(templateObject_7$b || (templateObject_7$b = __m
|
|
|
6951
6951
|
})
|
|
6952
6952
|
: '';
|
|
6953
6953
|
});
|
|
6954
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
6954
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
6955
6955
|
var DeliveryDetails = function (_a) {
|
|
6956
6956
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6957
6957
|
var theme = useTheme();
|
|
6958
6958
|
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));
|
|
6959
6959
|
};
|
|
6960
|
-
var templateObject_1$
|
|
6960
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$l, templateObject_6$i, templateObject_7$c, templateObject_8$b;
|
|
6961
6961
|
|
|
6962
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6962
|
+
var Backdrop = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
6963
6963
|
var top = _a.top;
|
|
6964
6964
|
return top;
|
|
6965
6965
|
}, function (_a) {
|
|
6966
6966
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6967
6967
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6968
6968
|
});
|
|
6969
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6969
|
+
var Sidebar = newStyled.div(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: ", ";\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: ", ";\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
6970
6970
|
var height = _a.height;
|
|
6971
6971
|
return height;
|
|
6972
6972
|
}, function (_a) {
|
|
@@ -7013,20 +7013,20 @@ var Drawer = function (_a) {
|
|
|
7013
7013
|
}, [isOpen, onClose, onOpen]);
|
|
7014
7014
|
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;
|
|
7015
7015
|
};
|
|
7016
|
-
var templateObject_1$
|
|
7016
|
+
var templateObject_1$18, templateObject_2$O;
|
|
7017
7017
|
|
|
7018
7018
|
var TooltipArrow = function (_a) {
|
|
7019
7019
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7020
7020
|
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));
|
|
7021
7021
|
};
|
|
7022
7022
|
|
|
7023
|
-
var List = newStyled.ul(templateObject_1$
|
|
7024
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7025
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7026
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7027
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7028
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7029
|
-
var templateObject_1$
|
|
7023
|
+
var List = newStyled.ul(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7024
|
+
var Item$2 = newStyled.li(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
7025
|
+
var DropdownWrapper = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
7026
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
7027
|
+
var StyledDropdown = newStyled.ul(templateObject_5$k || (templateObject_5$k = __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; });
|
|
7028
|
+
var DropdownItem = newStyled.li(templateObject_6$h || (templateObject_6$h = __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; });
|
|
7029
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$k, templateObject_6$h;
|
|
7030
7030
|
|
|
7031
7031
|
var DropdownListIcons = function (_a) {
|
|
7032
7032
|
var items = _a.items;
|
|
@@ -7039,13 +7039,13 @@ var Dropdown = function (_a) {
|
|
|
7039
7039
|
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));
|
|
7040
7040
|
};
|
|
7041
7041
|
|
|
7042
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7043
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7044
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7045
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7046
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7047
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7048
|
-
var templateObject_1$
|
|
7042
|
+
var DropdownContainer = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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"])));
|
|
7043
|
+
var DropdownLabel = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
7044
|
+
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7045
|
+
var DetailLabel = newStyled.span(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
7046
|
+
var DropdownOptions = newStyled.div(templateObject_5$j || (templateObject_5$j = __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"])));
|
|
7047
|
+
var DropdownOption = newStyled.div(templateObject_6$g || (templateObject_6$g = __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"])));
|
|
7048
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$j, templateObject_6$g;
|
|
7049
7049
|
|
|
7050
7050
|
var SizeDropdown = function (_a) {
|
|
7051
7051
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7068,10 +7068,10 @@ var SizeDropdown = function (_a) {
|
|
|
7068
7068
|
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));
|
|
7069
7069
|
};
|
|
7070
7070
|
|
|
7071
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7072
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7073
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7074
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7071
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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; });
|
|
7072
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n border-radius: ", ";\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n\n overflow: hidden;\n"])), function (props) { return props.borderRadius; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
7073
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7074
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
7075
7075
|
var DropdownDialog = function (_a) {
|
|
7076
7076
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7077
7077
|
var theme = useTheme$1();
|
|
@@ -7080,7 +7080,7 @@ var DropdownDialog = function (_a) {
|
|
|
7080
7080
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7081
7081
|
}) }), void 0) }), void 0));
|
|
7082
7082
|
};
|
|
7083
|
-
var templateObject_1$
|
|
7083
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$B, templateObject_4$q;
|
|
7084
7084
|
|
|
7085
7085
|
function FilteringDropdown(_a) {
|
|
7086
7086
|
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;
|
|
@@ -7113,29 +7113,29 @@ function FilteringDropdown(_a) {
|
|
|
7113
7113
|
}) }, void 0)] }), void 0));
|
|
7114
7114
|
}
|
|
7115
7115
|
|
|
7116
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
7117
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7118
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7119
|
-
var Container$
|
|
7116
|
+
var Title$1 = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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; });
|
|
7117
|
+
var H3 = newStyled.h3(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
7118
|
+
var ArrowContainer = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7119
|
+
var Container$O = newStyled.div(templateObject_4$p || (templateObject_4$p = __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'); });
|
|
7120
7120
|
var Accordion = function (_a) {
|
|
7121
7121
|
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;
|
|
7122
7122
|
var theme = useTheme();
|
|
7123
7123
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7124
|
-
return (jsxRuntime.jsxs(Container$
|
|
7124
|
+
return (jsxRuntime.jsxs(Container$O, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7125
7125
|
};
|
|
7126
|
-
var templateObject_1$
|
|
7127
|
-
|
|
7128
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7129
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7130
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7131
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7132
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7133
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7134
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7135
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
7136
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
7126
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$A, templateObject_4$p;
|
|
7127
|
+
|
|
7128
|
+
var SectionContent = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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; });
|
|
7129
|
+
var Header$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
7130
|
+
var MobileHeader = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
7131
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
7132
|
+
var H4 = newStyled.h4(templateObject_5$i || (templateObject_5$i = __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; });
|
|
7133
|
+
var FilterLink = newStyled.a(templateObject_6$f || (templateObject_6$f = __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; });
|
|
7134
|
+
var OptionContainer = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
7135
|
+
var ClearAll = newStyled.span(templateObject_8$a || (templateObject_8$a = __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; });
|
|
7136
|
+
var MobileFooter = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __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"])));
|
|
7137
7137
|
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"])));
|
|
7138
|
-
var templateObject_1$
|
|
7138
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$z, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$b, templateObject_8$a, templateObject_9$6, templateObject_10$4;
|
|
7139
7139
|
|
|
7140
7140
|
var getStylesBySize$7 = function (size, theme) {
|
|
7141
7141
|
switch (size) {
|
|
@@ -7200,9 +7200,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7200
7200
|
} }), id: id }, void 0));
|
|
7201
7201
|
};
|
|
7202
7202
|
|
|
7203
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7204
|
-
var LI = newStyled.li(templateObject_2$
|
|
7205
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7203
|
+
var UL = newStyled.ul(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
7204
|
+
var LI = newStyled.li(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
7205
|
+
var CloseIconContainer = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
7206
7206
|
var Tags = function (_a) {
|
|
7207
7207
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7208
7208
|
var theme = useTheme();
|
|
@@ -7210,7 +7210,7 @@ var Tags = function (_a) {
|
|
|
7210
7210
|
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));
|
|
7211
7211
|
}) }), void 0));
|
|
7212
7212
|
};
|
|
7213
|
-
var templateObject_1$
|
|
7213
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$y;
|
|
7214
7214
|
|
|
7215
7215
|
var Filters = function (_a) {
|
|
7216
7216
|
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;
|
|
@@ -7346,8 +7346,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7346
7346
|
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));
|
|
7347
7347
|
};
|
|
7348
7348
|
|
|
7349
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7350
|
-
var Container$
|
|
7349
|
+
var Wrapper$4 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
7350
|
+
var Container$N = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7351
7351
|
var FitGuarantee = function (_a) {
|
|
7352
7352
|
var _b;
|
|
7353
7353
|
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;
|
|
@@ -7358,17 +7358,17 @@ var FitGuarantee = function (_a) {
|
|
|
7358
7358
|
console.error('Icon', iconName, 'not found');
|
|
7359
7359
|
return null;
|
|
7360
7360
|
}
|
|
7361
|
-
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$
|
|
7361
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxRuntime.jsxs(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7362
7362
|
margin: '0.1rem 0',
|
|
7363
7363
|
width: '100%',
|
|
7364
7364
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7365
7365
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7366
7366
|
} }, { 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));
|
|
7367
7367
|
};
|
|
7368
|
-
var templateObject_1$
|
|
7368
|
+
var templateObject_1$11, templateObject_2$H;
|
|
7369
7369
|
|
|
7370
|
-
var Container$
|
|
7371
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7370
|
+
var Container$M = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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"])));
|
|
7371
|
+
var P$2 = newStyled.p(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7372
7372
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7373
7373
|
border: 'none',
|
|
7374
7374
|
background: 'transparent',
|
|
@@ -7381,11 +7381,11 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7381
7381
|
var FitPredictor = function (_a) {
|
|
7382
7382
|
var onClick = _a.onClick;
|
|
7383
7383
|
var theme = useTheme();
|
|
7384
|
-
return (jsxs(Container$
|
|
7384
|
+
return (jsxs(Container$M, __assign$1({ theme: theme }, { children: [jsx(Container$M, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7385
7385
|
};
|
|
7386
|
-
var templateObject_1
|
|
7386
|
+
var templateObject_1$10, templateObject_2$G;
|
|
7387
7387
|
|
|
7388
|
-
var Button$
|
|
7388
|
+
var Button$7 = newStyled.button(function () { return ({
|
|
7389
7389
|
background: 'transparent',
|
|
7390
7390
|
border: 'none',
|
|
7391
7391
|
cursor: 'pointer',
|
|
@@ -7397,7 +7397,7 @@ var Direction;
|
|
|
7397
7397
|
})(Direction || (Direction = {}));
|
|
7398
7398
|
var ArrowButton$1 = function (_a) {
|
|
7399
7399
|
var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
|
|
7400
|
-
return (jsxRuntime.jsx(Button$
|
|
7400
|
+
return (jsxRuntime.jsx(Button$7, __assign$1({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { testId: "arrow-button-left", width: width, height: height, opacity: 0.5 }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronRight, { testId: "arrow-button-right", width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
|
|
7401
7401
|
};
|
|
7402
7402
|
|
|
7403
7403
|
function _defineProperty(obj, key, value) {
|
|
@@ -11627,14 +11627,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11627
11627
|
return Slider;
|
|
11628
11628
|
}(React__default["default"].Component);
|
|
11629
11629
|
|
|
11630
|
-
var StyledSlider = newStyled(Slider)(templateObject_1
|
|
11630
|
+
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) {
|
|
11631
11631
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11632
11632
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11633
11633
|
}, function (_a) {
|
|
11634
11634
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11635
11635
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11636
11636
|
});
|
|
11637
|
-
var templateObject_1
|
|
11637
|
+
var templateObject_1$$;
|
|
11638
11638
|
|
|
11639
11639
|
var getStylesBySize$6 = function (size) {
|
|
11640
11640
|
// rem units
|
|
@@ -11693,7 +11693,7 @@ var SliderNavigation = function (_a) {
|
|
|
11693
11693
|
} }, { 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));
|
|
11694
11694
|
};
|
|
11695
11695
|
|
|
11696
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11696
|
+
var Image$1 = newStyled.img(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11697
11697
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11698
11698
|
return borderRadiusVariant &&
|
|
11699
11699
|
"\nborder-radius: 20px;\n";
|
|
@@ -11708,11 +11708,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
11708
11708
|
var theme = useTheme();
|
|
11709
11709
|
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));
|
|
11710
11710
|
};
|
|
11711
|
-
var templateObject_1$
|
|
11711
|
+
var templateObject_1$_;
|
|
11712
11712
|
|
|
11713
|
-
var horizontalStyles = css(templateObject_1$
|
|
11714
|
-
var verticalStyles = css(templateObject_2$
|
|
11715
|
-
var Container$
|
|
11713
|
+
var horizontalStyles = css(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
11714
|
+
var verticalStyles = css(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
11715
|
+
var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11716
11716
|
var position = _a.position;
|
|
11717
11717
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11718
11718
|
}, function (_a) {
|
|
@@ -11720,11 +11720,11 @@ var Container$K = newStyled.div(templateObject_3$w || (templateObject_3$w = __ma
|
|
|
11720
11720
|
return hasOverflowArrows &&
|
|
11721
11721
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11722
11722
|
});
|
|
11723
|
-
var Button$
|
|
11724
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11725
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11726
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11727
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11723
|
+
var Button$6 = newStyled.button(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
11724
|
+
var ArrowsContainer = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
11725
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11726
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11727
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11728
11728
|
var ImagePreviewList = function (_a) {
|
|
11729
11729
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows;
|
|
11730
11730
|
var handleScrollVerticalPrev = function () {
|
|
@@ -11735,13 +11735,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11735
11735
|
var element = document.querySelector(".imageListContainer");
|
|
11736
11736
|
element.scrollBy(0, 200);
|
|
11737
11737
|
};
|
|
11738
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
11738
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
11739
11739
|
arrowWidth: 0.75,
|
|
11740
11740
|
arrowHeight: 1.25,
|
|
11741
11741
|
arrowPadding: 1.625,
|
|
11742
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$
|
|
11742
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$6, __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$6, __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));
|
|
11743
11743
|
};
|
|
11744
|
-
var templateObject_1$
|
|
11744
|
+
var templateObject_1$Z, templateObject_2$F, templateObject_3$x, templateObject_4$n, templateObject_5$h, templateObject_6$e, templateObject_7$a, templateObject_8$9;
|
|
11745
11745
|
|
|
11746
11746
|
var propTypes = {exports: {}};
|
|
11747
11747
|
|
|
@@ -13334,25 +13334,25 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13334
13334
|
afterZoomOut: PropTypes.func
|
|
13335
13335
|
} : {};
|
|
13336
13336
|
|
|
13337
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13338
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13339
|
-
var templateObject_1$
|
|
13337
|
+
var ProgressContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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); });
|
|
13338
|
+
var ProgressFiller = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13339
|
+
var templateObject_1$Y, templateObject_2$E;
|
|
13340
13340
|
|
|
13341
13341
|
var ProgressBar$1 = function (_a) {
|
|
13342
13342
|
var progress = _a.progress, hide = _a.hide;
|
|
13343
13343
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13344
13344
|
};
|
|
13345
13345
|
|
|
13346
|
-
var Container$
|
|
13347
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13348
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13349
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13350
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13351
|
-
var templateObject_1$
|
|
13346
|
+
var Container$K = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13347
|
+
var HTMLVideo = newStyled.video(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
13348
|
+
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13349
|
+
var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __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"])));
|
|
13350
|
+
var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
13351
|
+
var templateObject_1$X, templateObject_2$D, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13352
13352
|
|
|
13353
13353
|
var Video$1 = function (_a) {
|
|
13354
13354
|
var _b, _c, _d, _e;
|
|
13355
|
-
var source = _a.source, thumbnail = _a.thumbnail;
|
|
13355
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height;
|
|
13356
13356
|
var videoRef = React$2.useRef(null);
|
|
13357
13357
|
var _f = React$2.useState(true), isLoading = _f[0], setIsLoading = _f[1];
|
|
13358
13358
|
var _g = React$2.useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
|
|
@@ -13387,43 +13387,43 @@ var Video$1 = function (_a) {
|
|
|
13387
13387
|
setVideoProgress(videoRef.current.currentTime);
|
|
13388
13388
|
}
|
|
13389
13389
|
};
|
|
13390
|
-
return (jsxRuntime.jsxs(Container$
|
|
13390
|
+
return (jsxRuntime.jsxs(Container$K, { children: [!isLoading && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({ "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13391
13391
|
};
|
|
13392
13392
|
|
|
13393
|
-
var Container$
|
|
13393
|
+
var Container$J = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
13394
13394
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13395
13395
|
return borderRadiusVariant &&
|
|
13396
13396
|
"\n border-radius: 40px;\n ";
|
|
13397
13397
|
});
|
|
13398
|
-
var TopTagContainer$
|
|
13399
|
-
var BottomTagContainer$
|
|
13400
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13401
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13402
|
-
var
|
|
13398
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
13399
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13400
|
+
var TopRightTagContainer$1 = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13401
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
13402
|
+
var ImageProductSlide$1 = function (_a) {
|
|
13403
13403
|
var _b;
|
|
13404
|
-
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
13404
|
+
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom;
|
|
13405
13405
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13406
13406
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13407
|
-
return (jsxRuntime.jsxs(Container$
|
|
13407
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [withZoom ? (jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13408
13408
|
alt: content.alt,
|
|
13409
13409
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13410
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$
|
|
13410
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsxRuntime.jsx(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? '480px' : '720px', src: source, alt: content.alt }, void 0)), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { children: bottomTag }, void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, 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));
|
|
13411
13411
|
};
|
|
13412
|
-
var templateObject_1$
|
|
13412
|
+
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$f;
|
|
13413
13413
|
|
|
13414
|
-
var Container$
|
|
13414
|
+
var Container$I = newStyled.div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
13415
13415
|
var ProductGallery = function (_a) {
|
|
13416
|
-
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, 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;
|
|
13416
|
+
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, 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, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e;
|
|
13417
13417
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
13418
|
-
var
|
|
13418
|
+
var _f = React$2.useState(initialValue), selectedImage = _f[0], setSelectedImage = _f[1];
|
|
13419
13419
|
React$2.useEffect(function () {
|
|
13420
13420
|
setSelectedImage(initialValue);
|
|
13421
13421
|
}, [initialValue]);
|
|
13422
|
-
return (jsxRuntime.jsxs(Container$
|
|
13422
|
+
return (jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13423
13423
|
setSelectedImage(value);
|
|
13424
|
-
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(
|
|
13424
|
+
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13425
13425
|
};
|
|
13426
|
-
var templateObject_1$
|
|
13426
|
+
var templateObject_1$V;
|
|
13427
13427
|
|
|
13428
13428
|
var getStylesBySize$5 = function (size) {
|
|
13429
13429
|
switch (size) {
|
|
@@ -13444,7 +13444,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13444
13444
|
};
|
|
13445
13445
|
}
|
|
13446
13446
|
};
|
|
13447
|
-
var Container$
|
|
13447
|
+
var Container$H = newStyled.div(templateObject_1$U || (templateObject_1$U = __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) {
|
|
13448
13448
|
var backgroundColor = _a.backgroundColor;
|
|
13449
13449
|
return backgroundColor;
|
|
13450
13450
|
}, function (_a) {
|
|
@@ -13472,11 +13472,11 @@ var Container$G = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
13472
13472
|
var IconButton = function (_a) {
|
|
13473
13473
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13474
13474
|
var theme = useTheme();
|
|
13475
|
-
return (jsxRuntime.jsx(Container$
|
|
13475
|
+
return (jsxRuntime.jsx(Container$H, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13476
13476
|
};
|
|
13477
|
-
var templateObject_1$
|
|
13477
|
+
var templateObject_1$U;
|
|
13478
13478
|
|
|
13479
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13479
|
+
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$T || (templateObject_1$T = __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; });
|
|
13480
13480
|
var AmazonButton = function (_a) {
|
|
13481
13481
|
var onClick = _a.onClick;
|
|
13482
13482
|
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));
|
|
@@ -13485,9 +13485,9 @@ var PaypalButton = function (_a) {
|
|
|
13485
13485
|
var onClick = _a.onClick;
|
|
13486
13486
|
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));
|
|
13487
13487
|
};
|
|
13488
|
-
var templateObject_1$
|
|
13488
|
+
var templateObject_1$T;
|
|
13489
13489
|
|
|
13490
|
-
var Container$
|
|
13490
|
+
var Container$G = newStyled.div(function (props) { return ({
|
|
13491
13491
|
height: 'auto',
|
|
13492
13492
|
textAlign: 'center',
|
|
13493
13493
|
justifyContent: 'center',
|
|
@@ -13537,12 +13537,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13537
13537
|
textAlign: 'center',
|
|
13538
13538
|
lineHeight: '18px',
|
|
13539
13539
|
};
|
|
13540
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
13540
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$G, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13541
13541
|
};
|
|
13542
13542
|
|
|
13543
|
-
var Container$
|
|
13544
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13545
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13543
|
+
var Container$F = newStyled.div(templateObject_1$S || (templateObject_1$S = __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'); });
|
|
13544
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13545
|
+
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13546
13546
|
var titlePosition = _a.titlePosition;
|
|
13547
13547
|
return titlePosition == 'center' &&
|
|
13548
13548
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13550,15 +13550,15 @@ var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
|
|
|
13550
13550
|
var ImageCardWithDescription = function (_a) {
|
|
13551
13551
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13552
13552
|
var isMobile = useWindowDimensions().isMobile;
|
|
13553
|
-
return (jsxRuntime.jsxs(Container$
|
|
13553
|
+
return (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13554
13554
|
};
|
|
13555
|
-
var templateObject_1$
|
|
13555
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$u;
|
|
13556
13556
|
|
|
13557
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
13557
|
+
var Label$2 = newStyled.span(templateObject_1$R || (templateObject_1$R = __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) {
|
|
13558
13558
|
var color = _a.color;
|
|
13559
13559
|
return color;
|
|
13560
13560
|
});
|
|
13561
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13561
|
+
var MandatoryIcon = newStyled.span(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13562
13562
|
var color = _a.color;
|
|
13563
13563
|
return color;
|
|
13564
13564
|
});
|
|
@@ -13567,7 +13567,7 @@ var InputLabel = function (_a) {
|
|
|
13567
13567
|
var theme = useTheme();
|
|
13568
13568
|
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));
|
|
13569
13569
|
};
|
|
13570
|
-
var templateObject_1$
|
|
13570
|
+
var templateObject_1$R, templateObject_2$A;
|
|
13571
13571
|
|
|
13572
13572
|
var containerByStatus = function (theme, status) {
|
|
13573
13573
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13576,12 +13576,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13576
13576
|
return theme.colors.semantic.urgent.color;
|
|
13577
13577
|
return '';
|
|
13578
13578
|
};
|
|
13579
|
-
var Container$
|
|
13579
|
+
var Container$E = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13580
13580
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13581
13581
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13582
13582
|
});
|
|
13583
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13584
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13583
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
13584
|
+
var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
13585
13585
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13586
13586
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13587
13587
|
}, function (_a) {
|
|
@@ -13636,11 +13636,11 @@ var StyledInput = newStyled.input(templateObject_3$s || (templateObject_3$s = __
|
|
|
13636
13636
|
return hasValue &&
|
|
13637
13637
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13638
13638
|
});
|
|
13639
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13639
|
+
var InputWrapper = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
13640
13640
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13641
13641
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13642
13642
|
});
|
|
13643
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13643
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
13644
13644
|
var theme = _a.theme;
|
|
13645
13645
|
return theme.component.input.placeholderColor;
|
|
13646
13646
|
}, function (_a) {
|
|
@@ -13653,8 +13653,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$d || (templateObject_5
|
|
|
13653
13653
|
var theme = _a.theme;
|
|
13654
13654
|
return theme.component.input.lineHeight;
|
|
13655
13655
|
});
|
|
13656
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13657
|
-
var templateObject_1$
|
|
13656
|
+
var ClearInput = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
13657
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$t, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
13658
13658
|
|
|
13659
13659
|
var BaseInput = function (_a) {
|
|
13660
13660
|
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"]);
|
|
@@ -13677,14 +13677,14 @@ var BaseInput = function (_a) {
|
|
|
13677
13677
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13678
13678
|
}, [status]);
|
|
13679
13679
|
var hasValue = Boolean(value);
|
|
13680
|
-
return (jsxRuntime.jsxs(Container$
|
|
13680
|
+
return (jsxRuntime.jsxs(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13681
13681
|
onChange(event.target.value, event);
|
|
13682
13682
|
}, 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 () {
|
|
13683
13683
|
onChange('', { target: { value: '' } });
|
|
13684
13684
|
}, "data-testid": "clear-value" }, { children: jsxRuntime.jsx(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
13685
13685
|
};
|
|
13686
13686
|
|
|
13687
|
-
var Button$
|
|
13687
|
+
var Button$5 = function (_a) {
|
|
13688
13688
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
13689
13689
|
if (variant === 'primary') {
|
|
13690
13690
|
return jsxRuntime.jsx(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -13698,11 +13698,11 @@ var Button$4 = function (_a) {
|
|
|
13698
13698
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13699
13699
|
};
|
|
13700
13700
|
|
|
13701
|
-
var Container$
|
|
13701
|
+
var Container$D = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
13702
13702
|
var theme = _a.theme;
|
|
13703
13703
|
return theme.component.inputCustom.input.borderRadius;
|
|
13704
13704
|
});
|
|
13705
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13705
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
13706
13706
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13707
13707
|
return defaultRounded
|
|
13708
13708
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13717,23 +13717,23 @@ var Custom = function (_a) {
|
|
|
13717
13717
|
text: text,
|
|
13718
13718
|
disabled: rest.disabled,
|
|
13719
13719
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13720
|
-
return (jsxRuntime.jsx(Container$
|
|
13720
|
+
return (jsxRuntime.jsx(Container$D, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13721
13721
|
};
|
|
13722
|
-
var templateObject_1$
|
|
13722
|
+
var templateObject_1$P, templateObject_2$y;
|
|
13723
13723
|
|
|
13724
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13724
|
+
var SuccessContainer = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13725
13725
|
var size = _a.size;
|
|
13726
13726
|
return (size === 'small' ? '36px' : '');
|
|
13727
13727
|
});
|
|
13728
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13729
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13728
|
+
var SuccessMessage = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
13729
|
+
var SuccessText = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
13730
13730
|
var Success = function (_a) {
|
|
13731
13731
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13732
13732
|
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));
|
|
13733
13733
|
};
|
|
13734
|
-
var templateObject_1$
|
|
13734
|
+
var templateObject_1$O, templateObject_2$x, templateObject_3$s;
|
|
13735
13735
|
|
|
13736
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13736
|
+
var ButtonContainer = newStyled.div(templateObject_1$N || (templateObject_1$N = __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) {
|
|
13737
13737
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13738
13738
|
return status === exports.InputValidationType.Empty &&
|
|
13739
13739
|
type === 'primary' &&
|
|
@@ -13750,16 +13750,16 @@ var BasePlusButton = function (_a) {
|
|
|
13750
13750
|
}
|
|
13751
13751
|
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));
|
|
13752
13752
|
};
|
|
13753
|
-
var templateObject_1$
|
|
13753
|
+
var templateObject_1$N;
|
|
13754
13754
|
|
|
13755
|
-
var Container$
|
|
13756
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13755
|
+
var Container$C = newStyled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13756
|
+
var IconContainer$2 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
13757
13757
|
var BasePlusIcon = function (_a) {
|
|
13758
13758
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13759
13759
|
var theme = useTheme();
|
|
13760
|
-
return (jsxRuntime.jsx(Container$
|
|
13760
|
+
return (jsxRuntime.jsx(Container$C, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13761
13761
|
};
|
|
13762
|
-
var templateObject_1$
|
|
13762
|
+
var templateObject_1$M, templateObject_2$w;
|
|
13763
13763
|
|
|
13764
13764
|
var Input$3 = {
|
|
13765
13765
|
Simple: BaseInput,
|
|
@@ -13768,7 +13768,43 @@ var Input$3 = {
|
|
|
13768
13768
|
SimplePlusIcon: BasePlusIcon,
|
|
13769
13769
|
};
|
|
13770
13770
|
|
|
13771
|
-
|
|
13771
|
+
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
13772
|
+
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13773
|
+
var firstClientX = React$2.useRef(0);
|
|
13774
|
+
var clientX = React$2.useRef(0);
|
|
13775
|
+
var preventTouch = React$2.useCallback(function (e) {
|
|
13776
|
+
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
13777
|
+
// Vertical scrolling does not work when you start swiping horizontally.
|
|
13778
|
+
if (Math.abs(clientX.current) > dragThreshold) {
|
|
13779
|
+
if (e.cancelable) {
|
|
13780
|
+
e.preventDefault();
|
|
13781
|
+
e.returnValue = false;
|
|
13782
|
+
}
|
|
13783
|
+
return false;
|
|
13784
|
+
}
|
|
13785
|
+
return true;
|
|
13786
|
+
}, [dragThreshold]);
|
|
13787
|
+
var touchStart = React$2.useCallback(function (e) {
|
|
13788
|
+
firstClientX.current = e.touches[0].clientX;
|
|
13789
|
+
}, []);
|
|
13790
|
+
React$2.useEffect(function () {
|
|
13791
|
+
var current = ref.current;
|
|
13792
|
+
if (current) {
|
|
13793
|
+
current.addEventListener('touchstart', touchStart);
|
|
13794
|
+
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
13795
|
+
}
|
|
13796
|
+
return function () {
|
|
13797
|
+
if (current) {
|
|
13798
|
+
current.removeEventListener('touchstart', touchStart);
|
|
13799
|
+
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
13800
|
+
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
13801
|
+
current.removeEventListener('touchmove', preventTouch);
|
|
13802
|
+
}
|
|
13803
|
+
};
|
|
13804
|
+
}, [preventTouch, ref, touchStart]);
|
|
13805
|
+
}
|
|
13806
|
+
|
|
13807
|
+
var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __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) {
|
|
13772
13808
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13773
13809
|
return borderRadiusVariant &&
|
|
13774
13810
|
"\n border-radius: 40px;\n ";
|
|
@@ -13777,11 +13813,11 @@ var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13777
13813
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13778
13814
|
});
|
|
13779
13815
|
// max-height: 31.875rem;
|
|
13780
|
-
var TopTagContainer$
|
|
13781
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
13782
|
-
var BottomTagContainer$
|
|
13783
|
-
var NavButtonContainer$
|
|
13784
|
-
var Button$
|
|
13816
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13817
|
+
var TopRightTagContainer = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
13818
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13819
|
+
var NavButtonContainer$2 = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13820
|
+
var Button$4 = newStyled.button(templateObject_6$c || (templateObject_6$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"])));
|
|
13785
13821
|
var settings$1 = {
|
|
13786
13822
|
dots: true,
|
|
13787
13823
|
infinite: false,
|
|
@@ -13790,13 +13826,13 @@ var settings$1 = {
|
|
|
13790
13826
|
slidesToScroll: 1,
|
|
13791
13827
|
initialSlide: 0,
|
|
13792
13828
|
};
|
|
13793
|
-
var
|
|
13829
|
+
var ImageProductSlide = function (_a) {
|
|
13794
13830
|
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
13795
13831
|
var slick = React$2.useRef(null);
|
|
13796
13832
|
var sliderWrapper = React$2.useRef(null);
|
|
13797
13833
|
React$2.useRef(null);
|
|
13798
13834
|
var _c = React$2.useState(false); _c[0]; var setIsPlaying = _c[1];
|
|
13799
|
-
usePreventVerticalScroll
|
|
13835
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
13800
13836
|
var onButtonClick = React$2.useCallback(function (i) {
|
|
13801
13837
|
var _a;
|
|
13802
13838
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -13826,62 +13862,27 @@ var ImageProductWithTags = function (_a) {
|
|
|
13826
13862
|
}
|
|
13827
13863
|
}
|
|
13828
13864
|
}, [contents, selectedValue]);
|
|
13829
|
-
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$
|
|
13865
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$B, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
13830
13866
|
var _a;
|
|
13831
13867
|
var activeSlide = contents[e];
|
|
13832
13868
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13833
13869
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13834
13870
|
autoplay ? _playVideo() : _stopVideo();
|
|
13835
|
-
} }, settings$1, { nextArrow: jsxRuntime.jsx(NavButtonContainer$
|
|
13871
|
+
} }, settings$1, { nextArrow: jsxRuntime.jsx(NavButtonContainer$2, { children: jsxRuntime.jsx(Button$4, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$2, { children: jsxRuntime.jsx(Button$4, { 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) {
|
|
13836
13872
|
var _a;
|
|
13837
13873
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13838
13874
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
13839
|
-
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$
|
|
13875
|
+
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13840
13876
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13841
13877
|
};
|
|
13842
|
-
|
|
13843
|
-
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13844
|
-
var firstClientX = React$2.useRef(0);
|
|
13845
|
-
var clientX = React$2.useRef(0);
|
|
13846
|
-
var preventTouch = React$2.useCallback(function (e) {
|
|
13847
|
-
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
13848
|
-
// Vertical scrolling does not work when you start swiping horizontally.
|
|
13849
|
-
if (Math.abs(clientX.current) > dragThreshold) {
|
|
13850
|
-
if (e.cancelable) {
|
|
13851
|
-
e.preventDefault();
|
|
13852
|
-
e.returnValue = false;
|
|
13853
|
-
}
|
|
13854
|
-
return false;
|
|
13855
|
-
}
|
|
13856
|
-
return true;
|
|
13857
|
-
}, [dragThreshold]);
|
|
13858
|
-
var touchStart = React$2.useCallback(function (e) {
|
|
13859
|
-
firstClientX.current = e.touches[0].clientX;
|
|
13860
|
-
}, []);
|
|
13861
|
-
React$2.useEffect(function () {
|
|
13862
|
-
var current = ref.current;
|
|
13863
|
-
if (current) {
|
|
13864
|
-
current.addEventListener('touchstart', touchStart);
|
|
13865
|
-
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
13866
|
-
}
|
|
13867
|
-
return function () {
|
|
13868
|
-
if (current) {
|
|
13869
|
-
current.removeEventListener('touchstart', touchStart);
|
|
13870
|
-
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
13871
|
-
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
13872
|
-
current.removeEventListener('touchmove', preventTouch);
|
|
13873
|
-
}
|
|
13874
|
-
};
|
|
13875
|
-
}, [preventTouch, ref, touchStart]);
|
|
13876
|
-
}
|
|
13877
|
-
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$c, templateObject_6$b;
|
|
13878
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c;
|
|
13878
13879
|
|
|
13879
|
-
var Container$
|
|
13880
|
+
var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
13880
13881
|
var ProductGalleryMobile = function (_a) {
|
|
13881
13882
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13882
|
-
return (jsxRuntime.jsx(Container$
|
|
13883
|
+
return (jsxRuntime.jsx(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13883
13884
|
};
|
|
13884
|
-
var templateObject_1$
|
|
13885
|
+
var templateObject_1$K;
|
|
13885
13886
|
|
|
13886
13887
|
function _extends() {
|
|
13887
13888
|
_extends = Object.assign || function (target) {
|
|
@@ -14148,27 +14149,27 @@ function useSwipeable(options) {
|
|
|
14148
14149
|
return handlers;
|
|
14149
14150
|
}
|
|
14150
14151
|
|
|
14151
|
-
var Button$
|
|
14152
|
+
var Button$3 = newStyled.button(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
14152
14153
|
var ArrowButton = function (_a) {
|
|
14153
14154
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14154
|
-
return (jsxRuntime.jsx(Button$
|
|
14155
|
+
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14155
14156
|
};
|
|
14156
|
-
var templateObject_1$
|
|
14157
|
+
var templateObject_1$J;
|
|
14157
14158
|
|
|
14158
|
-
var Container$
|
|
14159
|
+
var Container$z = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
14159
14160
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14160
14161
|
var SlideDots = function (_a) {
|
|
14161
14162
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14162
14163
|
var theme = useTheme();
|
|
14163
|
-
return (jsxRuntime.jsx(Container$
|
|
14164
|
+
return (jsxRuntime.jsx(Container$z, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
14164
14165
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14165
14166
|
: 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));
|
|
14166
14167
|
};
|
|
14167
|
-
var templateObject_1$
|
|
14168
|
+
var templateObject_1$I;
|
|
14168
14169
|
|
|
14169
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14170
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14171
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14170
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
14171
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14172
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14172
14173
|
var SlideNavigation = function (_a) {
|
|
14173
14174
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14174
14175
|
var theme = useTheme();
|
|
@@ -14180,23 +14181,23 @@ var SlideNavigation = function (_a) {
|
|
|
14180
14181
|
onNavigate(selectedIndex + 1);
|
|
14181
14182
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14182
14183
|
};
|
|
14183
|
-
var templateObject_1$
|
|
14184
|
+
var templateObject_1$H, templateObject_2$u, templateObject_3$q;
|
|
14184
14185
|
|
|
14185
|
-
var Container$
|
|
14186
|
+
var Container$y = newStyled.div(templateObject_1$G || (templateObject_1$G = __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) {
|
|
14186
14187
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14187
14188
|
return borderRadiusVariant &&
|
|
14188
14189
|
"\n border-radius: 40px;\n ";
|
|
14189
14190
|
});
|
|
14190
|
-
var TopTagContainer$
|
|
14191
|
-
var BottomTagContainer$
|
|
14192
|
-
var
|
|
14191
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14192
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14193
|
+
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14193
14194
|
var _b, _c;
|
|
14194
14195
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14195
|
-
return (jsxRuntime.jsxs(Container$
|
|
14196
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14196
14197
|
});
|
|
14197
|
-
var templateObject_1$
|
|
14198
|
+
var templateObject_1$G, templateObject_2$t, templateObject_3$p;
|
|
14198
14199
|
|
|
14199
|
-
var Container$
|
|
14200
|
+
var Container$x = newStyled.div(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
14200
14201
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14201
14202
|
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;
|
|
14202
14203
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14218,11 +14219,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14218
14219
|
React$2.useEffect(function () {
|
|
14219
14220
|
setSelectedImage(images[index]);
|
|
14220
14221
|
}, [index, images]);
|
|
14221
|
-
return (jsxRuntime.jsxs(Container$
|
|
14222
|
+
return (jsxRuntime.jsxs(Container$x, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __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));
|
|
14222
14223
|
};
|
|
14223
|
-
var templateObject_1$
|
|
14224
|
+
var templateObject_1$F;
|
|
14224
14225
|
|
|
14225
|
-
var Container$
|
|
14226
|
+
var Container$w = newStyled.div(templateObject_1$E || (templateObject_1$E = __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) {
|
|
14226
14227
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14227
14228
|
return borderRadiusVariant &&
|
|
14228
14229
|
"\n border-radius: 40px;\n ";
|
|
@@ -14231,14 +14232,14 @@ var Container$v = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
14231
14232
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14232
14233
|
});
|
|
14233
14234
|
// max-height: 31.875rem;
|
|
14234
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
14235
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
14236
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14237
|
-
var Video = newStyled.div(templateObject_5$
|
|
14238
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14239
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14240
|
-
var NavButtonContainer = newStyled.div(templateObject_8$
|
|
14241
|
-
var Button$
|
|
14235
|
+
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'); });
|
|
14236
|
+
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"])));
|
|
14237
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$i || (templateObject_4$i = __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"])));
|
|
14238
|
+
var Video = newStyled.div(templateObject_5$c || (templateObject_5$c = __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"])));
|
|
14239
|
+
var VideoTag = newStyled.div(templateObject_6$b || (templateObject_6$b = __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"])));
|
|
14240
|
+
var Text$2 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14241
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14242
|
+
var Button$2 = newStyled.button(templateObject_9$5 || (templateObject_9$5 = __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"])));
|
|
14242
14243
|
var settings = {
|
|
14243
14244
|
dots: true,
|
|
14244
14245
|
infinite: false,
|
|
@@ -14247,7 +14248,7 @@ var settings = {
|
|
|
14247
14248
|
slidesToScroll: 1,
|
|
14248
14249
|
initialSlide: 0,
|
|
14249
14250
|
};
|
|
14250
|
-
var
|
|
14251
|
+
var ImageProductSlideV3 = function (_a) {
|
|
14251
14252
|
var images = _a.images, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
14252
14253
|
var slick = React$2.useRef(null);
|
|
14253
14254
|
var sliderWrapper = React$2.useRef(null);
|
|
@@ -14283,62 +14284,27 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14283
14284
|
}
|
|
14284
14285
|
}
|
|
14285
14286
|
}, [images, selectedValue]);
|
|
14286
|
-
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$
|
|
14287
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$w, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
14287
14288
|
var _a;
|
|
14288
14289
|
var activeSlide = images[e];
|
|
14289
14290
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14290
14291
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14291
14292
|
autoplay ? _playVideo() : _stopVideo();
|
|
14292
|
-
} }, settings, { nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$
|
|
14293
|
+
} }, settings, { nextArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$2, { 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$2, { 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) {
|
|
14293
14294
|
var _a, _b;
|
|
14294
|
-
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 () {
|
|
14295
|
+
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(Video, { children: [jsxRuntime.jsx("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsxRuntime.jsx(VideoOverlay$1, { onClick: function () {
|
|
14295
14296
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14296
14297
|
} }, 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));
|
|
14297
14298
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14298
14299
|
};
|
|
14299
|
-
|
|
14300
|
-
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14301
|
-
var firstClientX = React$2.useRef(0);
|
|
14302
|
-
var clientX = React$2.useRef(0);
|
|
14303
|
-
var preventTouch = React$2.useCallback(function (e) {
|
|
14304
|
-
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
14305
|
-
// Vertical scrolling does not work when you start swiping horizontally.
|
|
14306
|
-
if (Math.abs(clientX.current) > dragThreshold) {
|
|
14307
|
-
if (e.cancelable) {
|
|
14308
|
-
e.preventDefault();
|
|
14309
|
-
e.returnValue = false;
|
|
14310
|
-
}
|
|
14311
|
-
return false;
|
|
14312
|
-
}
|
|
14313
|
-
return true;
|
|
14314
|
-
}, [dragThreshold]);
|
|
14315
|
-
var touchStart = React$2.useCallback(function (e) {
|
|
14316
|
-
firstClientX.current = e.touches[0].clientX;
|
|
14317
|
-
}, []);
|
|
14318
|
-
React$2.useEffect(function () {
|
|
14319
|
-
var current = ref.current;
|
|
14320
|
-
if (current) {
|
|
14321
|
-
current.addEventListener('touchstart', touchStart);
|
|
14322
|
-
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
14323
|
-
}
|
|
14324
|
-
return function () {
|
|
14325
|
-
if (current) {
|
|
14326
|
-
current.removeEventListener('touchstart', touchStart);
|
|
14327
|
-
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
14328
|
-
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
14329
|
-
current.removeEventListener('touchmove', preventTouch);
|
|
14330
|
-
}
|
|
14331
|
-
};
|
|
14332
|
-
}, [preventTouch, ref, touchStart]);
|
|
14333
|
-
}
|
|
14334
|
-
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;
|
|
14300
|
+
var templateObject_1$E, templateObject_2$s, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$9, templateObject_8$8, templateObject_9$5;
|
|
14335
14301
|
|
|
14336
|
-
var Container$
|
|
14302
|
+
var Container$v = newStyled.div(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
14337
14303
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14338
14304
|
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;
|
|
14339
|
-
return (jsxRuntime.jsx(Container$
|
|
14305
|
+
return (jsxRuntime.jsx(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14340
14306
|
};
|
|
14341
|
-
var templateObject_1$
|
|
14307
|
+
var templateObject_1$D;
|
|
14342
14308
|
|
|
14343
14309
|
var __defProp$1 = Object.defineProperty;
|
|
14344
14310
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14471,17 +14437,17 @@ var Portal = function (_a) {
|
|
|
14471
14437
|
var visibleStyle = function (_a) {
|
|
14472
14438
|
var opened = _a.opened;
|
|
14473
14439
|
return opened
|
|
14474
|
-
? css(templateObject_1$
|
|
14440
|
+
? css(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14475
14441
|
};
|
|
14476
14442
|
var transformStyle = function (_a) {
|
|
14477
14443
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14478
14444
|
return opened
|
|
14479
|
-
? css(templateObject_3$
|
|
14445
|
+
? css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14480
14446
|
};
|
|
14481
|
-
var Container$
|
|
14447
|
+
var Container$u = newStyled.div(templateObject_5$b || (templateObject_5$b = __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({
|
|
14482
14448
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14483
14449
|
}), visibleStyle, transformStyle);
|
|
14484
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
14450
|
+
var Overlay = newStyled.div(templateObject_6$a || (templateObject_6$a = __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);
|
|
14485
14451
|
var Modal = function (_a) {
|
|
14486
14452
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding;
|
|
14487
14453
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14491,7 +14457,7 @@ var Modal = function (_a) {
|
|
|
14491
14457
|
}
|
|
14492
14458
|
close();
|
|
14493
14459
|
};
|
|
14494
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14460
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$u, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
14495
14461
|
};
|
|
14496
14462
|
var modalEvent = function (id, detail) {
|
|
14497
14463
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14519,9 +14485,9 @@ var useModal = function (id) {
|
|
|
14519
14485
|
close: close,
|
|
14520
14486
|
}); }, [close, open, opened]);
|
|
14521
14487
|
};
|
|
14522
|
-
var templateObject_1$
|
|
14488
|
+
var templateObject_1$C, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a;
|
|
14523
14489
|
|
|
14524
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14490
|
+
var Bar$1 = newStyled.div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
14525
14491
|
var height = _a.height;
|
|
14526
14492
|
return height || '0.5rem';
|
|
14527
14493
|
}, function (_a) {
|
|
@@ -14560,7 +14526,7 @@ var BarContainer = newStyled.div({
|
|
|
14560
14526
|
padding: '0 16px',
|
|
14561
14527
|
position: 'relative',
|
|
14562
14528
|
});
|
|
14563
|
-
var Container$
|
|
14529
|
+
var Container$t = newStyled.div(function (_a) {
|
|
14564
14530
|
var backgroundColor = _a.backgroundColor;
|
|
14565
14531
|
return ({
|
|
14566
14532
|
width: '475px',
|
|
@@ -14591,21 +14557,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14591
14557
|
var theme = useTheme();
|
|
14592
14558
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14593
14559
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14594
|
-
return (jsxRuntime.jsxs(Container$
|
|
14560
|
+
return (jsxRuntime.jsxs(Container$t, __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));
|
|
14595
14561
|
};
|
|
14596
|
-
var templateObject_1$
|
|
14562
|
+
var templateObject_1$B;
|
|
14597
14563
|
|
|
14598
|
-
var Container$
|
|
14564
|
+
var Container$s = newStyled.div(templateObject_1$A || (templateObject_1$A = __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) {
|
|
14599
14565
|
var theme = _a.theme;
|
|
14600
14566
|
return theme.component.orderBar.backgroundColor;
|
|
14601
14567
|
});
|
|
14602
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14568
|
+
var H1 = newStyled.h1(templateObject_2$q || (templateObject_2$q = __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; });
|
|
14603
14569
|
var OrderBar = function (_a) {
|
|
14604
14570
|
var message = _a.message, color = _a.color;
|
|
14605
14571
|
var theme = useTheme();
|
|
14606
|
-
return (jsxRuntime.jsxs(Container$
|
|
14572
|
+
return (jsxRuntime.jsxs(Container$s, __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));
|
|
14607
14573
|
};
|
|
14608
|
-
var templateObject_1$
|
|
14574
|
+
var templateObject_1$A, templateObject_2$q;
|
|
14609
14575
|
|
|
14610
14576
|
var htmlReactParser = {exports: {}};
|
|
14611
14577
|
|
|
@@ -18386,17 +18352,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18386
18352
|
HTMLReactParser$1.attributesToProps;
|
|
18387
18353
|
HTMLReactParser$1.Element;
|
|
18388
18354
|
|
|
18389
|
-
var Container$
|
|
18390
|
-
var Card = newStyled.div(templateObject_2$
|
|
18391
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18392
|
-
var Label$1 = newStyled.div(templateObject_4$
|
|
18393
|
-
var Check = newStyled.div(templateObject_5$
|
|
18394
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18395
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18396
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
18355
|
+
var Container$r = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
18356
|
+
var Card = newStyled.div(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
18357
|
+
var Tag$1 = newStyled.div(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
18358
|
+
var Label$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __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"])));
|
|
18359
|
+
var Check = newStyled.div(templateObject_5$a || (templateObject_5$a = __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"])));
|
|
18360
|
+
var IconContainer$1 = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18361
|
+
var IconPlaceholder = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
18362
|
+
var DiscountContainer = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __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"])));
|
|
18397
18363
|
var PackSelector = function (_a) {
|
|
18398
18364
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18399
|
-
return (jsxRuntime.jsx(Container$
|
|
18365
|
+
return (jsxRuntime.jsx(Container$r, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18400
18366
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18401
18367
|
}) }), void 0));
|
|
18402
18368
|
};
|
|
@@ -18423,14 +18389,14 @@ var PackCard = function (_a) {
|
|
|
18423
18389
|
currency: currencyCode || 'USD',
|
|
18424
18390
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18425
18391
|
};
|
|
18426
|
-
var templateObject_1$
|
|
18392
|
+
var templateObject_1$z, templateObject_2$p, templateObject_3$m, templateObject_4$g, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$7;
|
|
18427
18393
|
|
|
18428
|
-
var Container$
|
|
18429
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18430
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18394
|
+
var Container$q = newStyled.div(templateObject_1$y || (templateObject_1$y = __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"])));
|
|
18395
|
+
var IconContainer = newStyled.div(templateObject_2$o || (templateObject_2$o = __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"])));
|
|
18396
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18431
18397
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18432
18398
|
}));
|
|
18433
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18399
|
+
var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18434
18400
|
var bold = _a.bold;
|
|
18435
18401
|
return (bold ? '700' : '500');
|
|
18436
18402
|
}, function (_a) {
|
|
@@ -18447,7 +18413,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
18447
18413
|
var background = _a.background;
|
|
18448
18414
|
return background || 'unset';
|
|
18449
18415
|
});
|
|
18450
|
-
var templateObject_1$
|
|
18416
|
+
var templateObject_1$y, templateObject_2$o, templateObject_3$l, templateObject_4$f;
|
|
18451
18417
|
|
|
18452
18418
|
var Pagination = function (_a) {
|
|
18453
18419
|
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;
|
|
@@ -18493,7 +18459,7 @@ var Pagination = function (_a) {
|
|
|
18493
18459
|
}
|
|
18494
18460
|
return pages;
|
|
18495
18461
|
}, [from, page, showReducedPages, to]);
|
|
18496
|
-
return (jsxRuntime.jsxs(Container$
|
|
18462
|
+
return (jsxRuntime.jsxs(Container$q, __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));
|
|
18497
18463
|
};
|
|
18498
18464
|
|
|
18499
18465
|
var PaginatorBlog = function (_a) {
|
|
@@ -18507,12 +18473,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18507
18473
|
setPage(page);
|
|
18508
18474
|
onChange(page);
|
|
18509
18475
|
};
|
|
18510
|
-
return (jsxRuntime.jsxs(Container$
|
|
18476
|
+
return (jsxRuntime.jsxs(Container$q, __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
|
|
18511
18477
|
? theme.colors.shades['white'].color
|
|
18512
18478
|
: 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));
|
|
18513
18479
|
};
|
|
18514
18480
|
|
|
18515
|
-
var Container$
|
|
18481
|
+
var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __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) {
|
|
18516
18482
|
var width = _a.width;
|
|
18517
18483
|
return width;
|
|
18518
18484
|
}, function (_a) {
|
|
@@ -18528,14 +18494,14 @@ var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
18528
18494
|
var PaymentMethod = function (_a) {
|
|
18529
18495
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18530
18496
|
var theme = useTheme();
|
|
18531
|
-
return (jsxRuntime.jsx(Container$
|
|
18497
|
+
return (jsxRuntime.jsx(Container$p, __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));
|
|
18532
18498
|
};
|
|
18533
|
-
var templateObject_1$
|
|
18499
|
+
var templateObject_1$x;
|
|
18534
18500
|
|
|
18535
|
-
var Container$
|
|
18501
|
+
var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
18536
18502
|
var IMAGE_WIDTH = '63px';
|
|
18537
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18538
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18503
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$n || (templateObject_2$n = __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);
|
|
18504
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __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({
|
|
18539
18505
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18540
18506
|
}), IMAGE_WIDTH);
|
|
18541
18507
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -18558,7 +18524,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18558
18524
|
margin: '0.063rem 0',
|
|
18559
18525
|
});
|
|
18560
18526
|
});
|
|
18561
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18527
|
+
var PriceContainer = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
18562
18528
|
var withTag = _a.withTag; _a.theme;
|
|
18563
18529
|
return withTag
|
|
18564
18530
|
? mediaQueries({
|
|
@@ -18567,14 +18533,14 @@ var PriceContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = _
|
|
|
18567
18533
|
})
|
|
18568
18534
|
: 'justify-content: end';
|
|
18569
18535
|
});
|
|
18570
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18571
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18536
|
+
var Quantity = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
18537
|
+
var StyledSpan = newStyled.span(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18572
18538
|
var SimpleOrderItem = function (_a) {
|
|
18573
18539
|
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;
|
|
18574
18540
|
var theme = useTheme();
|
|
18575
|
-
return (jsxRuntime.jsxs(Container$
|
|
18541
|
+
return (jsxRuntime.jsxs(Container$o, __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));
|
|
18576
18542
|
};
|
|
18577
|
-
var templateObject_1$
|
|
18543
|
+
var templateObject_1$w, templateObject_2$n, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
18578
18544
|
|
|
18579
18545
|
var P$1 = newStyled.p(function (_a) {
|
|
18580
18546
|
var color = _a.color;
|
|
@@ -18588,7 +18554,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18588
18554
|
margin: '0.938rem 4.188rem',
|
|
18589
18555
|
});
|
|
18590
18556
|
});
|
|
18591
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18557
|
+
var Bar = newStyled.div(templateObject_1$v || (templateObject_1$v = __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) {
|
|
18592
18558
|
var height = _a.height;
|
|
18593
18559
|
return height || '0.5rem';
|
|
18594
18560
|
}, function (_a) {
|
|
@@ -18617,7 +18583,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18617
18583
|
position: 'absolute',
|
|
18618
18584
|
});
|
|
18619
18585
|
});
|
|
18620
|
-
var Container$
|
|
18586
|
+
var Container$n = newStyled.div(function (_a) {
|
|
18621
18587
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18622
18588
|
return ({
|
|
18623
18589
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18631,14 +18597,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18631
18597
|
var ProgressBar = function (_a) {
|
|
18632
18598
|
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;
|
|
18633
18599
|
var theme = useTheme();
|
|
18634
|
-
return (jsxRuntime.jsxs(Container$
|
|
18600
|
+
return (jsxRuntime.jsxs(Container$n, __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));
|
|
18635
18601
|
};
|
|
18636
|
-
var templateObject_1$
|
|
18602
|
+
var templateObject_1$v;
|
|
18637
18603
|
|
|
18638
|
-
var Container$
|
|
18639
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18640
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18641
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18604
|
+
var Container$m = newStyled.div(templateObject_1$u || (templateObject_1$u = __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; });
|
|
18605
|
+
var Item$1 = newStyled.span(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
18606
|
+
var Number$1 = newStyled(Item$1)(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
18607
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$d || (templateObject_4$d = __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)'; });
|
|
18642
18608
|
var QuantityPicker = function (_a) {
|
|
18643
18609
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
18644
18610
|
var theme = useTheme();
|
|
@@ -18661,9 +18627,9 @@ var QuantityPicker = function (_a) {
|
|
|
18661
18627
|
return clamp(value);
|
|
18662
18628
|
});
|
|
18663
18629
|
}, [value, clamp]);
|
|
18664
|
-
return (jsxRuntime.jsxs(Container$
|
|
18630
|
+
return (jsxRuntime.jsxs(Container$m, __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));
|
|
18665
18631
|
};
|
|
18666
|
-
var templateObject_1$
|
|
18632
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$j, templateObject_4$d;
|
|
18667
18633
|
|
|
18668
18634
|
/* base styles & size variants */
|
|
18669
18635
|
var CustomRadioStyles$1 = {
|
|
@@ -18732,9 +18698,9 @@ var ContainerStyles$1 = {
|
|
|
18732
18698
|
},
|
|
18733
18699
|
};
|
|
18734
18700
|
|
|
18735
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18736
|
-
var Container$
|
|
18737
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18701
|
+
var Wrapper$3 = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18702
|
+
var Container$l = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18703
|
+
var Input$2 = newStyled.input(templateObject_2$l || (templateObject_2$l = __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) {
|
|
18738
18704
|
var disabled = _a.disabled;
|
|
18739
18705
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18740
18706
|
});
|
|
@@ -18742,7 +18708,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18742
18708
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18743
18709
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18744
18710
|
]; });
|
|
18745
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
18711
|
+
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
18746
18712
|
var RadioPrimary = function (_a) {
|
|
18747
18713
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
|
|
18748
18714
|
var theme = useTheme();
|
|
@@ -18750,9 +18716,9 @@ var RadioPrimary = function (_a) {
|
|
|
18750
18716
|
var value = event.currentTarget.value;
|
|
18751
18717
|
onChange({ value: value, label: label });
|
|
18752
18718
|
};
|
|
18753
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
18719
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$l, __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));
|
|
18754
18720
|
};
|
|
18755
|
-
var templateObject_1$
|
|
18721
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i;
|
|
18756
18722
|
|
|
18757
18723
|
var RadioGroupInput = function (_a) {
|
|
18758
18724
|
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;
|
|
@@ -18831,9 +18797,9 @@ var ContainerStyles = {
|
|
|
18831
18797
|
},
|
|
18832
18798
|
};
|
|
18833
18799
|
|
|
18834
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18835
|
-
var Container$
|
|
18836
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18800
|
+
var Wrapper$2 = newStyled.div(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
18801
|
+
var Container$k = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18802
|
+
var Input$1 = 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) {
|
|
18837
18803
|
var disabled = _a.disabled;
|
|
18838
18804
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18839
18805
|
});
|
|
@@ -18841,7 +18807,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
18841
18807
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18842
18808
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
18843
18809
|
]; });
|
|
18844
|
-
var StyledLabel = newStyled(Label$4)(templateObject_3$
|
|
18810
|
+
var StyledLabel = newStyled(Label$4)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
18845
18811
|
var theme = _a.theme;
|
|
18846
18812
|
return theme.component.radio.textSize;
|
|
18847
18813
|
}, function (_a) {
|
|
@@ -18855,9 +18821,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18855
18821
|
var value = event.currentTarget.value;
|
|
18856
18822
|
onChange({ value: value, label: label });
|
|
18857
18823
|
};
|
|
18858
|
-
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$
|
|
18824
|
+
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$k, __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));
|
|
18859
18825
|
};
|
|
18860
|
-
var templateObject_1$
|
|
18826
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h;
|
|
18861
18827
|
|
|
18862
18828
|
var ClubRadioGroupInput = function (_a) {
|
|
18863
18829
|
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;
|
|
@@ -18885,15 +18851,15 @@ function formatDate(date, format) {
|
|
|
18885
18851
|
}
|
|
18886
18852
|
}
|
|
18887
18853
|
|
|
18888
|
-
var Container$
|
|
18889
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18890
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18891
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
18892
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
18893
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
18894
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
18895
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
18896
|
-
var ReviewDescription = newStyled.div(templateObject_9$
|
|
18854
|
+
var Container$j = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
18855
|
+
var Content$1 = newStyled.div(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
18856
|
+
var StarsContent = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18857
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
18858
|
+
var DateText$1 = newStyled.span(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
18859
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
18860
|
+
var VerifiedText = newStyled.h1(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
18861
|
+
var ReviewTitle$1 = newStyled.h2(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
18862
|
+
var ReviewDescription = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
18897
18863
|
var ImageContainer = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
18898
18864
|
var ImageWrapper$2 = newStyled(Image$3)(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
18899
18865
|
var VideoWrapper = newStyled.video(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
@@ -18923,22 +18889,22 @@ var Review$1 = function (_a) {
|
|
|
18923
18889
|
}
|
|
18924
18890
|
}
|
|
18925
18891
|
}, [opened]);
|
|
18926
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
18892
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$j, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18927
18893
|
(!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));
|
|
18928
18894
|
};
|
|
18929
|
-
var templateObject_1$
|
|
18895
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$g, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$6, templateObject_9$4, 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;
|
|
18930
18896
|
|
|
18931
18897
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18932
18898
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18933
|
-
var Container$
|
|
18934
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18935
|
-
var Content = newStyled.div(templateObject_3$
|
|
18936
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
18937
|
-
var DateText = newStyled.span(templateObject_5$
|
|
18938
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
18939
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
18940
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
18941
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
18899
|
+
var Container$i = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
18900
|
+
var Heading = newStyled.div(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
18901
|
+
var Content = 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"])));
|
|
18902
|
+
var ReviewContainer = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18903
|
+
var DateText = newStyled.span(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
18904
|
+
var VariantText = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18905
|
+
var ReviewerName = newStyled.h2(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
18906
|
+
var ReviewTitle = newStyled.h3(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18907
|
+
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
18942
18908
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
18943
18909
|
var ImagesContainer = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
18944
18910
|
var Images = newStyled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
@@ -18972,7 +18938,7 @@ var Review = function (_a) {
|
|
|
18972
18938
|
});
|
|
18973
18939
|
};
|
|
18974
18940
|
}, [randomId]);
|
|
18975
|
-
return (jsxRuntime.jsxs(Container$
|
|
18941
|
+
return (jsxRuntime.jsxs(Container$i, { 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: {
|
|
18976
18942
|
__html: showMoreMobile
|
|
18977
18943
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18978
18944
|
: description,
|
|
@@ -18982,15 +18948,15 @@ var Review = function (_a) {
|
|
|
18982
18948
|
: description,
|
|
18983
18949
|
} }, 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));
|
|
18984
18950
|
};
|
|
18985
|
-
var templateObject_1$
|
|
18986
|
-
|
|
18987
|
-
var Container$
|
|
18988
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18989
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18990
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18991
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
18992
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
18993
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
18951
|
+
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$2, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18952
|
+
|
|
18953
|
+
var Container$h = newStyled.div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
18954
|
+
var ReviewsContainer = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
18955
|
+
var ReviewsCount = newStyled.div(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
18956
|
+
var ReviewsStars = newStyled.div(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
18957
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
18958
|
+
var ReviewsImages = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
18959
|
+
var SummaryItem = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
18994
18960
|
var backgroundUrl = _a.backgroundUrl;
|
|
18995
18961
|
return "url(".concat(backgroundUrl, ")");
|
|
18996
18962
|
});
|
|
@@ -18998,19 +18964,19 @@ var ReviewsHeader = function (_a) {
|
|
|
18998
18964
|
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;
|
|
18999
18965
|
var starsNumber = 5;
|
|
19000
18966
|
var theme = useTheme();
|
|
19001
|
-
return (jsxRuntime.jsxs(Container$
|
|
18967
|
+
return (jsxRuntime.jsxs(Container$h, { 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));
|
|
19002
18968
|
};
|
|
19003
|
-
var templateObject_1$
|
|
18969
|
+
var templateObject_1$p, templateObject_2$h, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5;
|
|
19004
18970
|
|
|
19005
|
-
var Container$
|
|
19006
|
-
var Text = newStyled.p(templateObject_2$
|
|
18971
|
+
var Container$g = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
18972
|
+
var Text = newStyled.p(templateObject_2$g || (templateObject_2$g = __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; });
|
|
19007
18973
|
var ScrollToTop = function (_a) {
|
|
19008
18974
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19009
18975
|
var theme = useTheme();
|
|
19010
18976
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19011
|
-
return (jsxRuntime.jsxs(Container$
|
|
18977
|
+
return (jsxRuntime.jsxs(Container$g, __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));
|
|
19012
18978
|
};
|
|
19013
|
-
var templateObject_1$
|
|
18979
|
+
var templateObject_1$o, templateObject_2$g;
|
|
19014
18980
|
|
|
19015
18981
|
var Input = newStyled.input(function (props) { return ({
|
|
19016
18982
|
padding: props.theme.component.input.padding,
|
|
@@ -19041,7 +19007,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19041
19007
|
},
|
|
19042
19008
|
}); });
|
|
19043
19009
|
|
|
19044
|
-
var Container$
|
|
19010
|
+
var Container$f = newStyled.div(templateObject_1$n || (templateObject_1$n = __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({
|
|
19045
19011
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19046
19012
|
}));
|
|
19047
19013
|
var Description = newStyled.div({
|
|
@@ -19058,25 +19024,25 @@ var Description = newStyled.div({
|
|
|
19058
19024
|
var ProductItem = function (_a) {
|
|
19059
19025
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19060
19026
|
var theme = useTheme();
|
|
19061
|
-
return (jsxRuntime.jsxs(Container$
|
|
19027
|
+
return (jsxRuntime.jsxs(Container$f, __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));
|
|
19062
19028
|
};
|
|
19063
|
-
var templateObject_1$
|
|
19029
|
+
var templateObject_1$n;
|
|
19064
19030
|
|
|
19065
|
-
var Container$
|
|
19031
|
+
var Container$e = newStyled.div({
|
|
19066
19032
|
display: 'flex',
|
|
19067
19033
|
justifyContent: 'center',
|
|
19068
19034
|
padding: '1rem',
|
|
19069
19035
|
});
|
|
19070
19036
|
var Footer = function (_a) {
|
|
19071
19037
|
var text = _a.text, onClick = _a.onClick;
|
|
19072
|
-
return (jsxRuntime.jsx(Container$
|
|
19038
|
+
return (jsxRuntime.jsx(Container$e, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19073
19039
|
};
|
|
19074
19040
|
|
|
19075
19041
|
var Ul = newStyled.ul({
|
|
19076
19042
|
margin: '0px',
|
|
19077
19043
|
padding: '0px',
|
|
19078
19044
|
});
|
|
19079
|
-
var Li = newStyled.li(templateObject_1$
|
|
19045
|
+
var Li = newStyled.li(templateObject_1$m || (templateObject_1$m = __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({
|
|
19080
19046
|
padding: [0, '0rem 1rem'],
|
|
19081
19047
|
borderRadius: [0, '0.5rem'],
|
|
19082
19048
|
}));
|
|
@@ -19088,31 +19054,31 @@ var Anchor = newStyled.a({
|
|
|
19088
19054
|
padding: 0,
|
|
19089
19055
|
textDecoration: 'none',
|
|
19090
19056
|
});
|
|
19091
|
-
var Container$
|
|
19057
|
+
var Container$d = newStyled.div(templateObject_2$f || (templateObject_2$f = __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({
|
|
19092
19058
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19093
19059
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19094
19060
|
borderRadius: ['0', '0.5rem'],
|
|
19095
19061
|
}));
|
|
19096
|
-
var Header = newStyled.div(templateObject_3$
|
|
19062
|
+
var Header = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19097
19063
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19098
19064
|
}));
|
|
19099
19065
|
var ResultsPanel = function (_a) {
|
|
19100
19066
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19101
19067
|
var theme = useTheme();
|
|
19102
|
-
return (jsxRuntime.jsxs(Container$
|
|
19068
|
+
return (jsxRuntime.jsxs(Container$d, __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));
|
|
19103
19069
|
};
|
|
19104
|
-
var templateObject_1$
|
|
19070
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$d;
|
|
19105
19071
|
|
|
19106
|
-
var Button = newStyled.button(templateObject_1$
|
|
19072
|
+
var Button$1 = newStyled.button(templateObject_1$l || (templateObject_1$l = __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({
|
|
19107
19073
|
right: ['1rem', '7.75rem'],
|
|
19108
19074
|
top: ['0.75rem', '0.75rem'],
|
|
19109
19075
|
}));
|
|
19110
19076
|
var ClearButton = function (_a) {
|
|
19111
19077
|
var onClick = _a.onClick;
|
|
19112
19078
|
var theme = useTheme();
|
|
19113
|
-
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));
|
|
19079
|
+
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19114
19080
|
};
|
|
19115
|
-
var templateObject_1$
|
|
19081
|
+
var templateObject_1$l;
|
|
19116
19082
|
|
|
19117
19083
|
var SearchIconContainer = newStyled.div({
|
|
19118
19084
|
display: 'flex',
|
|
@@ -19122,7 +19088,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19122
19088
|
background: 'white',
|
|
19123
19089
|
alignSelf: 'center',
|
|
19124
19090
|
});
|
|
19125
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19091
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
19126
19092
|
var SearchControl = function (_a) {
|
|
19127
19093
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19128
19094
|
var theme = useTheme();
|
|
@@ -19138,7 +19104,7 @@ var SearchControl = function (_a) {
|
|
|
19138
19104
|
}
|
|
19139
19105
|
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));
|
|
19140
19106
|
};
|
|
19141
|
-
var templateObject_1$
|
|
19107
|
+
var templateObject_1$k;
|
|
19142
19108
|
|
|
19143
19109
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19144
19110
|
var reducer = function (state, action) {
|
|
@@ -19154,7 +19120,7 @@ var reducer = function (state, action) {
|
|
|
19154
19120
|
}
|
|
19155
19121
|
}
|
|
19156
19122
|
};
|
|
19157
|
-
var Container$
|
|
19123
|
+
var Container$c = newStyled.div({
|
|
19158
19124
|
position: 'relative',
|
|
19159
19125
|
display: 'flex',
|
|
19160
19126
|
});
|
|
@@ -19194,7 +19160,7 @@ var SearchBar = function (_a) {
|
|
|
19194
19160
|
if (e.cancelable) {
|
|
19195
19161
|
e.preventDefault();
|
|
19196
19162
|
}
|
|
19197
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
19163
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$c, __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) {
|
|
19198
19164
|
if (e.key === 'Enter') {
|
|
19199
19165
|
if (e.cancelable) {
|
|
19200
19166
|
e.preventDefault();
|
|
@@ -19205,20 +19171,20 @@ var SearchBar = function (_a) {
|
|
|
19205
19171
|
} }, 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));
|
|
19206
19172
|
};
|
|
19207
19173
|
|
|
19208
|
-
var Container$
|
|
19209
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19210
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19211
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19212
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19174
|
+
var Container$b = newStyled.div(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
19175
|
+
var BackArrow = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19176
|
+
var BoldSpan = newStyled.span(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
19177
|
+
var NormalSpan = newStyled.span(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
19178
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __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"])));
|
|
19213
19179
|
var SearchNavigation = function (_a) {
|
|
19214
19180
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19215
|
-
return (jsxRuntime.jsxs(Container$
|
|
19181
|
+
return (jsxRuntime.jsxs(Container$b, { 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) {
|
|
19216
19182
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19217
19183
|
}) }, void 0)] }, void 0));
|
|
19218
19184
|
};
|
|
19219
|
-
var templateObject_1$
|
|
19185
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$c, templateObject_4$9, templateObject_5$5;
|
|
19220
19186
|
|
|
19221
|
-
var Container$
|
|
19187
|
+
var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __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) {
|
|
19222
19188
|
var alignCenter = _a.alignCenter;
|
|
19223
19189
|
return alignCenter &&
|
|
19224
19190
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19228,26 +19194,26 @@ var Container$9 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
19228
19194
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19229
19195
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19230
19196
|
});
|
|
19231
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19232
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19197
|
+
var TitleText = newStyled.div(templateObject_2$d || (templateObject_2$d = __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"])));
|
|
19198
|
+
var BannerText = newStyled.div(templateObject_3$b || (templateObject_3$b = __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"])));
|
|
19233
19199
|
var ShortBanner = function (_a) {
|
|
19234
19200
|
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;
|
|
19235
19201
|
var theme = useTheme();
|
|
19236
|
-
return (jsxRuntime.jsxs(Container$
|
|
19202
|
+
return (jsxRuntime.jsxs(Container$a, __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));
|
|
19237
19203
|
};
|
|
19238
|
-
var templateObject_1$
|
|
19239
|
-
|
|
19240
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19241
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19242
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19243
|
-
var Label = newStyled('div')(templateObject_4$
|
|
19244
|
-
var TopLabel = newStyled(Label)(templateObject_5$
|
|
19245
|
-
var LeftLabel = newStyled(Label)(templateObject_6$
|
|
19246
|
-
var Container$
|
|
19247
|
-
var LabelText = newStyled('span')(templateObject_8$
|
|
19248
|
-
var Column = newStyled('div')(templateObject_9$
|
|
19204
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$b;
|
|
19205
|
+
|
|
19206
|
+
var TableElement$1 = newStyled.table(templateObject_1$h || (templateObject_1$h = __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; });
|
|
19207
|
+
var TableCell$1 = newStyled.td(templateObject_2$c || (templateObject_2$c = __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; });
|
|
19208
|
+
var TableHead$1 = newStyled.th(templateObject_3$a || (templateObject_3$a = __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; });
|
|
19209
|
+
var Label = newStyled('div')(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
19210
|
+
var TopLabel = newStyled(Label)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19211
|
+
var LeftLabel = newStyled(Label)(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
19212
|
+
var Container$9 = newStyled('div')(templateObject_7$4 || (templateObject_7$4 = __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"])));
|
|
19213
|
+
var LabelText = newStyled('span')(templateObject_8$4 || (templateObject_8$4 = __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"])));
|
|
19214
|
+
var Column = newStyled('div')(templateObject_9$2 || (templateObject_9$2 = __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"])));
|
|
19249
19215
|
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; });
|
|
19250
|
-
var templateObject_1$
|
|
19216
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a, templateObject_4$8, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$2, templateObject_10$1;
|
|
19251
19217
|
|
|
19252
19218
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19253
19219
|
var getCellColor = function (index, cell) {
|
|
@@ -19283,21 +19249,21 @@ var SizeChartTable = function (_a) {
|
|
|
19283
19249
|
var theme = useTheme();
|
|
19284
19250
|
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];
|
|
19285
19251
|
var isMultilabel = xLabel && yLabel;
|
|
19286
|
-
return (jsxRuntime.jsxs(Container$
|
|
19252
|
+
return (jsxRuntime.jsxs(Container$9, { 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: {
|
|
19287
19253
|
backgroundColor: getCellColor(index, cell),
|
|
19288
19254
|
}, 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));
|
|
19289
19255
|
};
|
|
19290
19256
|
|
|
19291
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19292
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19293
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
19294
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
19257
|
+
var TableElement = newStyled.table(templateObject_1$g || (templateObject_1$g = __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; });
|
|
19258
|
+
var TableCell = newStyled.td(templateObject_2$b || (templateObject_2$b = __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; });
|
|
19259
|
+
var TableHead = 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\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; });
|
|
19260
|
+
var TableRow = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19295
19261
|
var SizeTable = function (_a) {
|
|
19296
19262
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19297
19263
|
var theme = useTheme();
|
|
19298
19264
|
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));
|
|
19299
19265
|
};
|
|
19300
|
-
var templateObject_1$
|
|
19266
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$7;
|
|
19301
19267
|
|
|
19302
19268
|
var getStylesBySize$4 = function (size) {
|
|
19303
19269
|
switch (size) {
|
|
@@ -19324,7 +19290,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19324
19290
|
} });
|
|
19325
19291
|
};
|
|
19326
19292
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19327
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19293
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$f || (templateObject_1$f = __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));
|
|
19328
19294
|
};
|
|
19329
19295
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19330
19296
|
if (disabled)
|
|
@@ -19340,23 +19306,23 @@ var TextButton = function (_a) {
|
|
|
19340
19306
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19341
19307
|
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));
|
|
19342
19308
|
};
|
|
19343
|
-
var templateObject_1$
|
|
19309
|
+
var templateObject_1$f;
|
|
19344
19310
|
|
|
19345
|
-
var Container$
|
|
19346
|
-
var P = newStyled.p(templateObject_2$
|
|
19347
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19311
|
+
var Container$8 = newStyled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
19312
|
+
var P = newStyled.p(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19313
|
+
var PercentageSpan = newStyled.span(templateObject_3$8 || (templateObject_3$8 = __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"])));
|
|
19348
19314
|
var SizeFitGuide = function (_a) {
|
|
19349
19315
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19350
|
-
return (jsxRuntime.jsxs(Container$
|
|
19316
|
+
return (jsxRuntime.jsxs(Container$8, { 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));
|
|
19351
19317
|
};
|
|
19352
|
-
var templateObject_1$
|
|
19318
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$8;
|
|
19353
19319
|
|
|
19354
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19320
|
+
var ButtonsContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __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) {
|
|
19355
19321
|
var inline = _a.inline;
|
|
19356
19322
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19357
19323
|
});
|
|
19358
|
-
var Row = newStyled.div(templateObject_2$
|
|
19359
|
-
var templateObject_1$
|
|
19324
|
+
var Row = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __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"])));
|
|
19325
|
+
var templateObject_1$d, templateObject_2$9;
|
|
19360
19326
|
|
|
19361
19327
|
var SizeSelector = function (_a) {
|
|
19362
19328
|
var _b;
|
|
@@ -19375,7 +19341,7 @@ var SizeSelector = function (_a) {
|
|
|
19375
19341
|
}) }), void 0)] }), void 0));
|
|
19376
19342
|
};
|
|
19377
19343
|
|
|
19378
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19344
|
+
var TabContainer = newStyled.div(templateObject_1$c || (templateObject_1$c = __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) {
|
|
19379
19345
|
var titleSize = _a.titleSize;
|
|
19380
19346
|
return titleSize;
|
|
19381
19347
|
}, function (_a) {
|
|
@@ -19392,18 +19358,18 @@ var Tab = function (_a) {
|
|
|
19392
19358
|
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;
|
|
19393
19359
|
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));
|
|
19394
19360
|
};
|
|
19395
|
-
var templateObject_1$
|
|
19361
|
+
var templateObject_1$c;
|
|
19396
19362
|
|
|
19397
|
-
var Container$
|
|
19398
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19363
|
+
var Container$7 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19364
|
+
var TabList = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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) {
|
|
19399
19365
|
var backgroundColor = _a.backgroundColor;
|
|
19400
19366
|
return backgroundColor;
|
|
19401
19367
|
}, function (_a) {
|
|
19402
19368
|
var borderColor = _a.borderColor;
|
|
19403
19369
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19404
19370
|
});
|
|
19405
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19406
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19371
|
+
var TabContent = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19372
|
+
var TabSeparator = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19407
19373
|
var Tabs = function (_a) {
|
|
19408
19374
|
var _b;
|
|
19409
19375
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19412,16 +19378,16 @@ var Tabs = function (_a) {
|
|
|
19412
19378
|
return null;
|
|
19413
19379
|
}
|
|
19414
19380
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19415
|
-
return (jsxRuntime.jsxs(Container$
|
|
19381
|
+
return (jsxRuntime.jsxs(Container$7, __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));
|
|
19416
19382
|
};
|
|
19417
|
-
var templateObject_1$
|
|
19383
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$7, templateObject_4$6;
|
|
19418
19384
|
|
|
19419
|
-
var Container$
|
|
19385
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __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"])));
|
|
19420
19386
|
var Tag = function (_a) {
|
|
19421
19387
|
var text = _a.text, className = _a.className;
|
|
19422
|
-
return jsxRuntime.jsx(Container$
|
|
19388
|
+
return jsxRuntime.jsx(Container$6, __assign$1({ className: className }, { children: text }), void 0);
|
|
19423
19389
|
};
|
|
19424
|
-
var templateObject_1$
|
|
19390
|
+
var templateObject_1$a;
|
|
19425
19391
|
|
|
19426
19392
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19427
19393
|
switch (size) {
|
|
@@ -19452,10 +19418,10 @@ var getStylesBySize$3 = function (size, styledBorder) {
|
|
|
19452
19418
|
}
|
|
19453
19419
|
};
|
|
19454
19420
|
var CategoryTag = function (_a) {
|
|
19455
|
-
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b;
|
|
19421
|
+
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b, backgroundColor = _a.backgroundColor;
|
|
19456
19422
|
var theme = useTheme();
|
|
19457
19423
|
var stylesBySize = getStylesBySize$3(size, styledBorder);
|
|
19458
|
-
return (jsx(Tag, { css: __assign$1({ backgroundColor: theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
|
|
19424
|
+
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor || theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
|
|
19459
19425
|
};
|
|
19460
19426
|
|
|
19461
19427
|
var getStylesBySize$2 = function (size) {
|
|
@@ -19532,9 +19498,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19532
19498
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19533
19499
|
};
|
|
19534
19500
|
|
|
19535
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19536
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19537
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19501
|
+
var ImageWrapper = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
19502
|
+
var VideoOverlay = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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"])));
|
|
19503
|
+
var FullscreenVideo = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
19538
19504
|
var ImageVideo = function (_a) {
|
|
19539
19505
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19540
19506
|
var video = React$2.useRef(null);
|
|
@@ -19554,12 +19520,12 @@ var ImageVideo = function (_a) {
|
|
|
19554
19520
|
height: '100%',
|
|
19555
19521
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19556
19522
|
};
|
|
19557
|
-
var templateObject_1$
|
|
19523
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$6;
|
|
19558
19524
|
|
|
19559
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19560
|
-
var ContainerMobile = css(templateObject_2$
|
|
19561
|
-
var Container$
|
|
19562
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19525
|
+
var ContainerDesktop = css(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
19526
|
+
var ContainerMobile = css(templateObject_2$6 || (templateObject_2$6 = __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"])));
|
|
19527
|
+
var Container$5 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __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);
|
|
19528
|
+
var TextContainer = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __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"])));
|
|
19563
19529
|
var TextWithImage = function (_a) {
|
|
19564
19530
|
var _b, _c, _d, _e;
|
|
19565
19531
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -19579,7 +19545,7 @@ var TextWithImage = function (_a) {
|
|
|
19579
19545
|
// @ts-ignore
|
|
19580
19546
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19581
19547
|
};
|
|
19582
|
-
return (jsxs(Container$
|
|
19548
|
+
return (jsxs(Container$5, __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: {
|
|
19583
19549
|
backgroundColor: props.btnBGColor,
|
|
19584
19550
|
color: '#ffffff',
|
|
19585
19551
|
border: props.btnBGColor,
|
|
@@ -19589,9 +19555,9 @@ var TextWithImage = function (_a) {
|
|
|
19589
19555
|
},
|
|
19590
19556
|
} }, 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));
|
|
19591
19557
|
};
|
|
19592
|
-
var templateObject_1$
|
|
19558
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$5, templateObject_4$5;
|
|
19593
19559
|
|
|
19594
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19560
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19595
19561
|
var timerColor = _a.timerColor;
|
|
19596
19562
|
return timerColor || '';
|
|
19597
19563
|
});
|
|
@@ -19627,11 +19593,11 @@ var Timer = function (_a) {
|
|
|
19627
19593
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19628
19594
|
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));
|
|
19629
19595
|
};
|
|
19630
|
-
var templateObject_1$
|
|
19596
|
+
var templateObject_1$7;
|
|
19631
19597
|
|
|
19632
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19633
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19634
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19598
|
+
var Wrapper$1 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
19599
|
+
var GrandTotal = newStyled.h1(templateObject_2$5 || (templateObject_2$5 = __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; });
|
|
19600
|
+
var Currency = newStyled.span(templateObject_3$4 || (templateObject_3$4 = __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) {
|
|
19635
19601
|
var theme = _a.theme;
|
|
19636
19602
|
return theme.component.total.basicTotal.currency.color;
|
|
19637
19603
|
}, function (_a) {
|
|
@@ -19644,41 +19610,41 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19644
19610
|
var theme = _a.theme;
|
|
19645
19611
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19646
19612
|
});
|
|
19647
|
-
var Container$
|
|
19613
|
+
var Container$4 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __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) {
|
|
19648
19614
|
var highlightColor = _a.highlightColor;
|
|
19649
19615
|
return highlightColor;
|
|
19650
19616
|
});
|
|
19651
|
-
var TotalContainer = newStyled(Container$
|
|
19617
|
+
var TotalContainer = newStyled(Container$4)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19652
19618
|
var showTotalLabel = _a.showTotalLabel;
|
|
19653
19619
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19654
19620
|
});
|
|
19655
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19656
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
19621
|
+
var DiscountText = newStyled.h3(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
19622
|
+
var DiscountAmount = newStyled.h3(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
19657
19623
|
var theme = _a.theme;
|
|
19658
19624
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19659
19625
|
});
|
|
19660
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
19661
|
-
var templateObject_1$
|
|
19626
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19627
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3;
|
|
19662
19628
|
|
|
19663
19629
|
var Total = function (_a) {
|
|
19664
19630
|
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;
|
|
19665
19631
|
var theme = useTheme();
|
|
19666
|
-
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$
|
|
19632
|
+
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$4, __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));
|
|
19667
19633
|
};
|
|
19668
19634
|
|
|
19669
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19635
|
+
var Wrapper = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19670
19636
|
var color = _a.color;
|
|
19671
19637
|
return color;
|
|
19672
19638
|
});
|
|
19673
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19674
|
-
var Item = newStyled.h4(templateObject_3$
|
|
19639
|
+
var ItemContainer = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __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"])));
|
|
19640
|
+
var Item = newStyled.h4(templateObject_3$3 || (templateObject_3$3 = __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) {
|
|
19675
19641
|
var theme = _a.theme;
|
|
19676
19642
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19677
19643
|
}, function (_a) {
|
|
19678
19644
|
var theme = _a.theme;
|
|
19679
19645
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19680
19646
|
});
|
|
19681
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
19647
|
+
var CouponItem = newStyled(Item)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19682
19648
|
var color = _a.color;
|
|
19683
19649
|
return color;
|
|
19684
19650
|
});
|
|
@@ -19691,30 +19657,30 @@ var Subtotal = function (_a) {
|
|
|
19691
19657
|
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));
|
|
19692
19658
|
})] }), void 0));
|
|
19693
19659
|
};
|
|
19694
|
-
var templateObject_1$
|
|
19660
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3;
|
|
19695
19661
|
|
|
19696
19662
|
var Totals = {
|
|
19697
19663
|
Total: Total,
|
|
19698
19664
|
Subtotal: Subtotal,
|
|
19699
19665
|
};
|
|
19700
19666
|
|
|
19701
|
-
var Container$
|
|
19702
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19703
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19704
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19705
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
19706
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
19667
|
+
var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19668
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19669
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __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; });
|
|
19670
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$2 || (templateObject_4$2 = __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'); });
|
|
19671
|
+
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$2 || (templateObject_5$2 = __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"])));
|
|
19672
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
19707
19673
|
return props.finishedTrack
|
|
19708
19674
|
? props.finishedTrackColor
|
|
19709
19675
|
: props.activeTrack
|
|
19710
19676
|
? props.activeTrackColor
|
|
19711
19677
|
: '';
|
|
19712
19678
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19713
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19714
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
19679
|
+
var CheckpointStatusMessage = newStyled.span(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n text-align: left;\n"])));
|
|
19680
|
+
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19715
19681
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19716
19682
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19717
|
-
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19683
|
+
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19718
19684
|
var LastActiveCheckpointDot = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"])), function (props) { return props.trackColor; });
|
|
19719
19685
|
var WarningIconWrapper = newStyled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"], ["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"])));
|
|
19720
19686
|
var TrackingProgressV2 = function (_a) {
|
|
@@ -19739,7 +19705,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19739
19705
|
}
|
|
19740
19706
|
return '30px';
|
|
19741
19707
|
};
|
|
19742
|
-
return (jsxRuntime.jsxs(Container$
|
|
19708
|
+
return (jsxRuntime.jsxs(Container$3, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19743
19709
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19744
19710
|
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
|
|
19745
19711
|
? activeCheckpointColor
|
|
@@ -19750,18 +19716,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19750
19716
|
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));
|
|
19751
19717
|
})] }), void 0));
|
|
19752
19718
|
};
|
|
19753
|
-
var templateObject_1$
|
|
19754
|
-
|
|
19755
|
-
var Container$
|
|
19756
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19757
|
-
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; });
|
|
19758
|
-
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'); });
|
|
19759
|
-
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'); });
|
|
19760
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19719
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2, templateObject_9$1, templateObject_10, templateObject_11;
|
|
19720
|
+
|
|
19721
|
+
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"])));
|
|
19722
|
+
var CheckpointContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19723
|
+
var CheckpointDate = 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; });
|
|
19724
|
+
var CheckpointDateLabel = 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'); });
|
|
19725
|
+
var CheckpointStatus = newStyled.p(templateObject_5$1 || (templateObject_5$1 = __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'); });
|
|
19726
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19761
19727
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19762
19728
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19763
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19764
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
19729
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19730
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
19765
19731
|
var TrackingProgress = function (_a) {
|
|
19766
19732
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
19767
19733
|
var theme = useTheme();
|
|
@@ -19781,7 +19747,7 @@ var TrackingProgress = function (_a) {
|
|
|
19781
19747
|
}
|
|
19782
19748
|
return '30px';
|
|
19783
19749
|
};
|
|
19784
|
-
return (jsxRuntime.jsxs(Container$
|
|
19750
|
+
return (jsxRuntime.jsxs(Container$2, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19785
19751
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19786
19752
|
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
|
|
19787
19753
|
? theme.colors.semantic.informative.color
|
|
@@ -19790,9 +19756,9 @@ var TrackingProgress = function (_a) {
|
|
|
19790
19756
|
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));
|
|
19791
19757
|
})] }), void 0));
|
|
19792
19758
|
};
|
|
19793
|
-
var templateObject_1$
|
|
19759
|
+
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;
|
|
19794
19760
|
|
|
19795
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
19761
|
+
var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __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) {
|
|
19796
19762
|
var textPosition = _a.textPosition;
|
|
19797
19763
|
return textPosition;
|
|
19798
19764
|
}, function (_a) {
|
|
@@ -19805,7 +19771,7 @@ var TimerContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = _
|
|
|
19805
19771
|
var borderRadius = _a.borderRadius;
|
|
19806
19772
|
return borderRadius || '8px';
|
|
19807
19773
|
});
|
|
19808
|
-
var templateObject_1$
|
|
19774
|
+
var templateObject_1$2;
|
|
19809
19775
|
|
|
19810
19776
|
var getDefaultCountdown = function () {
|
|
19811
19777
|
var tomorrowDate = new Date();
|
|
@@ -19821,7 +19787,7 @@ var HurryUp = function (_a) {
|
|
|
19821
19787
|
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));
|
|
19822
19788
|
};
|
|
19823
19789
|
|
|
19824
|
-
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) {
|
|
19790
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$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) {
|
|
19825
19791
|
var size = _a.size;
|
|
19826
19792
|
return (size ? size : '100%');
|
|
19827
19793
|
}, function (_a) {
|
|
@@ -19835,7 +19801,7 @@ var borderSize = {
|
|
|
19835
19801
|
large: '3px',
|
|
19836
19802
|
};
|
|
19837
19803
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
19838
|
-
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) {
|
|
19804
|
+
var StyledSpinner = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __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) {
|
|
19839
19805
|
var size = _a.size;
|
|
19840
19806
|
return borderSize[size];
|
|
19841
19807
|
}, function (_a) {
|
|
@@ -19848,11 +19814,96 @@ var StyledSpinner = newStyled.div(templateObject_2 || (templateObject_2 = __make
|
|
|
19848
19814
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
19849
19815
|
return duration;
|
|
19850
19816
|
});
|
|
19851
|
-
var templateObject_1, templateObject_2;
|
|
19817
|
+
var templateObject_1$1, templateObject_2$1;
|
|
19852
19818
|
|
|
19853
19819
|
var Spinner = function (_a) {
|
|
19854
19820
|
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;
|
|
19855
|
-
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));
|
|
19821
|
+
return (jsxRuntime.jsx(Container$1, __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));
|
|
19822
|
+
};
|
|
19823
|
+
|
|
19824
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
19825
|
+
var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
19826
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
19827
|
+
return borderRadiusVariant &&
|
|
19828
|
+
"\n border-radius: 40px;\n ";
|
|
19829
|
+
}, function (_a) {
|
|
19830
|
+
var theme = _a.theme;
|
|
19831
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
19832
|
+
}, function (_a) {
|
|
19833
|
+
var theme = _a.theme;
|
|
19834
|
+
return theme.component.gallery.aspectRatio;
|
|
19835
|
+
});
|
|
19836
|
+
var TopTagContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n left: 10px;\n top: 0;\n"], ["\n position: absolute;\n left: 10px;\n top: 0;\n"])));
|
|
19837
|
+
var BottomTagContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
19838
|
+
var NavButtonContainer = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"], ["\n height: 36px;\n width: 36px;\n background-color: ", " !important;\n border-radius: 500px;\n"])), function (_a) {
|
|
19839
|
+
var theme = _a.theme;
|
|
19840
|
+
return theme.colors.shades.white.color;
|
|
19841
|
+
});
|
|
19842
|
+
var Button = newStyled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 3px 8px;\n z-index: 5;\n height: 36px !important;\n cursor: pointer;\n"])));
|
|
19843
|
+
var SliderThumbnail = newStyled(Slider)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n border-radius: 8px;\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n"], ["\n margin-top: 16px;\n padding-left: 16px;\n & .slick-slide {\n img {\n border-radius: 8px;\n overflow: hidden;\n }\n }\n & .slick-current {\n img {\n border: 2px solid ", ";\n }\n }\n"])), function (_a) {
|
|
19844
|
+
var theme = _a.theme;
|
|
19845
|
+
return theme.colors.pallete.primary.color;
|
|
19846
|
+
});
|
|
19847
|
+
var SlideItem = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-right: 10px;\n"], ["\n padding-right: 10px;\n"])));
|
|
19848
|
+
var StyledImage = newStyled(Image$3)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"], ["\n width: 100%;\n height: 100%;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
19849
|
+
var theme = _a.theme;
|
|
19850
|
+
return theme.component.gallery.aspectRatio;
|
|
19851
|
+
});
|
|
19852
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
19853
|
+
|
|
19854
|
+
var SETTINGS = {
|
|
19855
|
+
infinite: false,
|
|
19856
|
+
speed: 200,
|
|
19857
|
+
slidesToShow: 1,
|
|
19858
|
+
slidesToScroll: 1,
|
|
19859
|
+
initialSlide: 0,
|
|
19860
|
+
arrows: true,
|
|
19861
|
+
dots: false,
|
|
19862
|
+
};
|
|
19863
|
+
var THUMBNAIL_SETTINGS = {
|
|
19864
|
+
slidesToShow: 3.5,
|
|
19865
|
+
swipeToSlide: true,
|
|
19866
|
+
focusOnSelect: true,
|
|
19867
|
+
infinite: false,
|
|
19868
|
+
centerPadding: '16px',
|
|
19869
|
+
responsive: [
|
|
19870
|
+
{
|
|
19871
|
+
breakpoint: 1024,
|
|
19872
|
+
settings: {
|
|
19873
|
+
slidesToShow: 5,
|
|
19874
|
+
},
|
|
19875
|
+
},
|
|
19876
|
+
{
|
|
19877
|
+
breakpoint: 640,
|
|
19878
|
+
settings: {
|
|
19879
|
+
slidesToShow: 4.5,
|
|
19880
|
+
},
|
|
19881
|
+
},
|
|
19882
|
+
],
|
|
19883
|
+
};
|
|
19884
|
+
var ProductGalleryMobileV4 = function (_a) {
|
|
19885
|
+
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId;
|
|
19886
|
+
var _b = useTheme$1(), colors = _b.colors, component = _b.component;
|
|
19887
|
+
var _c = React$2.useState(undefined), nav1 = _c[0], setNav1 = _c[1];
|
|
19888
|
+
var _d = React$2.useState(undefined), nav2 = _d[0], setNav2 = _d[1];
|
|
19889
|
+
var slick = React$2.useRef(null);
|
|
19890
|
+
var thumbnailRef = React$2.useRef(null);
|
|
19891
|
+
var sliderWrapper = React$2.useRef(null);
|
|
19892
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
19893
|
+
React$2.useEffect(function () {
|
|
19894
|
+
if (slick.current)
|
|
19895
|
+
setNav1(slick.current);
|
|
19896
|
+
if (thumbnailRef.current)
|
|
19897
|
+
setNav2(thumbnailRef.current);
|
|
19898
|
+
}, []);
|
|
19899
|
+
return (jsxRuntime.jsx(Container, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxRuntime.jsxs(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsxRuntime.jsx(Slider, __assign$1({}, SETTINGS, { nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), asNavFor: nav2, ref: function (slider) { return (slick.current = slider); } }, { children: images.map(function (_a) {
|
|
19900
|
+
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
19901
|
+
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledImage, { alt: alt, src: url, objectFit: "cover" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
19902
|
+
}) }), void 0), jsxRuntime.jsx(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, THUMBNAIL_SETTINGS, { children: images.map(function (_a) {
|
|
19903
|
+
var _b, _c;
|
|
19904
|
+
var url = _a.url, key = _a.key;
|
|
19905
|
+
return (jsxRuntime.jsx(SlideItem, { children: jsxRuntime.jsx(Image$3, { height: (_b = component.gallery.thumbnail) === null || _b === void 0 ? void 0 : _b.height, width: (_c = component.gallery.thumbnail) === null || _c === void 0 ? void 0 : _c.width, alt: "image", src: url, objectFit: "cover" }, void 0) }, key));
|
|
19906
|
+
}) }), void 0)] }), void 0) }), void 0));
|
|
19856
19907
|
};
|
|
19857
19908
|
|
|
19858
19909
|
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
@@ -19917,6 +19968,7 @@ exports.ProductGallery = ProductGallery;
|
|
|
19917
19968
|
exports.ProductGalleryMobile = ProductGalleryMobile;
|
|
19918
19969
|
exports.ProductGalleryMobileV2 = ProductGalleryMobileV2;
|
|
19919
19970
|
exports.ProductGalleryMobileV3 = ProductGalleryMobileV3;
|
|
19971
|
+
exports.ProductGalleryMobileV4 = ProductGalleryMobileV4;
|
|
19920
19972
|
exports.ProgressBar = ProgressBar;
|
|
19921
19973
|
exports.QuantityPicker = QuantityPicker;
|
|
19922
19974
|
exports.RadioGroupInput = RadioGroupInput;
|