@trafilea/afrodita-components 6.12.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 +29 -9
- package/build/index.esm.js +786 -733
- package/build/index.esm.js.map +1 -1
- package/build/index.js +786 -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 +16 -1
- 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 = 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,42 +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
|
|
13401
|
-
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) {
|
|
13402
13403
|
var _b;
|
|
13403
|
-
var content = _a.content, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
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;
|
|
13404
13405
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13405
13406
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13406
|
-
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: {
|
|
13407
13408
|
alt: content.alt,
|
|
13408
13409
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13409
|
-
}, 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));
|
|
13410
13411
|
};
|
|
13411
|
-
var templateObject_1$
|
|
13412
|
+
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$f;
|
|
13412
13413
|
|
|
13413
|
-
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"])));
|
|
13414
13415
|
var ProductGallery = function (_a) {
|
|
13415
|
-
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
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;
|
|
13416
13417
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
13417
|
-
var
|
|
13418
|
+
var _f = React$2.useState(initialValue), selectedImage = _f[0], setSelectedImage = _f[1];
|
|
13418
13419
|
React$2.useEffect(function () {
|
|
13419
13420
|
setSelectedImage(initialValue);
|
|
13420
13421
|
}, [initialValue]);
|
|
13421
|
-
return (jsxRuntime.jsxs(Container$
|
|
13422
|
+
return (jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13422
13423
|
setSelectedImage(value);
|
|
13423
|
-
}, 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));
|
|
13424
13425
|
};
|
|
13425
|
-
var templateObject_1$
|
|
13426
|
+
var templateObject_1$V;
|
|
13426
13427
|
|
|
13427
13428
|
var getStylesBySize$5 = function (size) {
|
|
13428
13429
|
switch (size) {
|
|
@@ -13443,7 +13444,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13443
13444
|
};
|
|
13444
13445
|
}
|
|
13445
13446
|
};
|
|
13446
|
-
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) {
|
|
13447
13448
|
var backgroundColor = _a.backgroundColor;
|
|
13448
13449
|
return backgroundColor;
|
|
13449
13450
|
}, function (_a) {
|
|
@@ -13471,11 +13472,11 @@ var Container$G = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
13471
13472
|
var IconButton = function (_a) {
|
|
13472
13473
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13473
13474
|
var theme = useTheme();
|
|
13474
|
-
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));
|
|
13475
13476
|
};
|
|
13476
|
-
var templateObject_1$
|
|
13477
|
+
var templateObject_1$U;
|
|
13477
13478
|
|
|
13478
|
-
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; });
|
|
13479
13480
|
var AmazonButton = function (_a) {
|
|
13480
13481
|
var onClick = _a.onClick;
|
|
13481
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));
|
|
@@ -13484,9 +13485,9 @@ var PaypalButton = function (_a) {
|
|
|
13484
13485
|
var onClick = _a.onClick;
|
|
13485
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));
|
|
13486
13487
|
};
|
|
13487
|
-
var templateObject_1$
|
|
13488
|
+
var templateObject_1$T;
|
|
13488
13489
|
|
|
13489
|
-
var Container$
|
|
13490
|
+
var Container$G = newStyled.div(function (props) { return ({
|
|
13490
13491
|
height: 'auto',
|
|
13491
13492
|
textAlign: 'center',
|
|
13492
13493
|
justifyContent: 'center',
|
|
@@ -13536,12 +13537,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13536
13537
|
textAlign: 'center',
|
|
13537
13538
|
lineHeight: '18px',
|
|
13538
13539
|
};
|
|
13539
|
-
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));
|
|
13540
13541
|
};
|
|
13541
13542
|
|
|
13542
|
-
var Container$
|
|
13543
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13544
|
-
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) {
|
|
13545
13546
|
var titlePosition = _a.titlePosition;
|
|
13546
13547
|
return titlePosition == 'center' &&
|
|
13547
13548
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13549,15 +13550,15 @@ var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
|
|
|
13549
13550
|
var ImageCardWithDescription = function (_a) {
|
|
13550
13551
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13551
13552
|
var isMobile = useWindowDimensions().isMobile;
|
|
13552
|
-
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));
|
|
13553
13554
|
};
|
|
13554
|
-
var templateObject_1$
|
|
13555
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$u;
|
|
13555
13556
|
|
|
13556
|
-
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) {
|
|
13557
13558
|
var color = _a.color;
|
|
13558
13559
|
return color;
|
|
13559
13560
|
});
|
|
13560
|
-
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) {
|
|
13561
13562
|
var color = _a.color;
|
|
13562
13563
|
return color;
|
|
13563
13564
|
});
|
|
@@ -13566,7 +13567,7 @@ var InputLabel = function (_a) {
|
|
|
13566
13567
|
var theme = useTheme();
|
|
13567
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));
|
|
13568
13569
|
};
|
|
13569
|
-
var templateObject_1$
|
|
13570
|
+
var templateObject_1$R, templateObject_2$A;
|
|
13570
13571
|
|
|
13571
13572
|
var containerByStatus = function (theme, status) {
|
|
13572
13573
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13575,12 +13576,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13575
13576
|
return theme.colors.semantic.urgent.color;
|
|
13576
13577
|
return '';
|
|
13577
13578
|
};
|
|
13578
|
-
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) {
|
|
13579
13580
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13580
13581
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13581
13582
|
});
|
|
13582
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13583
|
-
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) {
|
|
13584
13585
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13585
13586
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13586
13587
|
}, function (_a) {
|
|
@@ -13635,11 +13636,11 @@ var StyledInput = newStyled.input(templateObject_3$s || (templateObject_3$s = __
|
|
|
13635
13636
|
return hasValue &&
|
|
13636
13637
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13637
13638
|
});
|
|
13638
|
-
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) {
|
|
13639
13640
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13640
13641
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13641
13642
|
});
|
|
13642
|
-
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) {
|
|
13643
13644
|
var theme = _a.theme;
|
|
13644
13645
|
return theme.component.input.placeholderColor;
|
|
13645
13646
|
}, function (_a) {
|
|
@@ -13652,8 +13653,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$d || (templateObject_5
|
|
|
13652
13653
|
var theme = _a.theme;
|
|
13653
13654
|
return theme.component.input.lineHeight;
|
|
13654
13655
|
});
|
|
13655
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13656
|
-
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;
|
|
13657
13658
|
|
|
13658
13659
|
var BaseInput = function (_a) {
|
|
13659
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"]);
|
|
@@ -13676,14 +13677,14 @@ var BaseInput = function (_a) {
|
|
|
13676
13677
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13677
13678
|
}, [status]);
|
|
13678
13679
|
var hasValue = Boolean(value);
|
|
13679
|
-
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) {
|
|
13680
13681
|
onChange(event.target.value, event);
|
|
13681
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 () {
|
|
13682
13683
|
onChange('', { target: { value: '' } });
|
|
13683
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));
|
|
13684
13685
|
};
|
|
13685
13686
|
|
|
13686
|
-
var Button$
|
|
13687
|
+
var Button$5 = function (_a) {
|
|
13687
13688
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
13688
13689
|
if (variant === 'primary') {
|
|
13689
13690
|
return jsxRuntime.jsx(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -13697,11 +13698,11 @@ var Button$4 = function (_a) {
|
|
|
13697
13698
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13698
13699
|
};
|
|
13699
13700
|
|
|
13700
|
-
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) {
|
|
13701
13702
|
var theme = _a.theme;
|
|
13702
13703
|
return theme.component.inputCustom.input.borderRadius;
|
|
13703
13704
|
});
|
|
13704
|
-
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) {
|
|
13705
13706
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13706
13707
|
return defaultRounded
|
|
13707
13708
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13716,23 +13717,23 @@ var Custom = function (_a) {
|
|
|
13716
13717
|
text: text,
|
|
13717
13718
|
disabled: rest.disabled,
|
|
13718
13719
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13719
|
-
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));
|
|
13720
13721
|
};
|
|
13721
|
-
var templateObject_1$
|
|
13722
|
+
var templateObject_1$P, templateObject_2$y;
|
|
13722
13723
|
|
|
13723
|
-
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) {
|
|
13724
13725
|
var size = _a.size;
|
|
13725
13726
|
return (size === 'small' ? '36px' : '');
|
|
13726
13727
|
});
|
|
13727
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13728
|
-
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"])));
|
|
13729
13730
|
var Success = function (_a) {
|
|
13730
13731
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13731
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));
|
|
13732
13733
|
};
|
|
13733
|
-
var templateObject_1$
|
|
13734
|
+
var templateObject_1$O, templateObject_2$x, templateObject_3$s;
|
|
13734
13735
|
|
|
13735
|
-
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) {
|
|
13736
13737
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13737
13738
|
return status === exports.InputValidationType.Empty &&
|
|
13738
13739
|
type === 'primary' &&
|
|
@@ -13749,16 +13750,16 @@ var BasePlusButton = function (_a) {
|
|
|
13749
13750
|
}
|
|
13750
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));
|
|
13751
13752
|
};
|
|
13752
|
-
var templateObject_1$
|
|
13753
|
+
var templateObject_1$N;
|
|
13753
13754
|
|
|
13754
|
-
var Container$
|
|
13755
|
-
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"])));
|
|
13756
13757
|
var BasePlusIcon = function (_a) {
|
|
13757
13758
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13758
13759
|
var theme = useTheme();
|
|
13759
|
-
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));
|
|
13760
13761
|
};
|
|
13761
|
-
var templateObject_1$
|
|
13762
|
+
var templateObject_1$M, templateObject_2$w;
|
|
13762
13763
|
|
|
13763
13764
|
var Input$3 = {
|
|
13764
13765
|
Simple: BaseInput,
|
|
@@ -13767,7 +13768,43 @@ var Input$3 = {
|
|
|
13767
13768
|
SimplePlusIcon: BasePlusIcon,
|
|
13768
13769
|
};
|
|
13769
13770
|
|
|
13770
|
-
|
|
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) {
|
|
13771
13808
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13772
13809
|
return borderRadiusVariant &&
|
|
13773
13810
|
"\n border-radius: 40px;\n ";
|
|
@@ -13776,10 +13813,11 @@ var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13776
13813
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13777
13814
|
});
|
|
13778
13815
|
// max-height: 31.875rem;
|
|
13779
|
-
var TopTagContainer$
|
|
13780
|
-
var
|
|
13781
|
-
var
|
|
13782
|
-
var
|
|
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"])));
|
|
13783
13821
|
var settings$1 = {
|
|
13784
13822
|
dots: true,
|
|
13785
13823
|
infinite: false,
|
|
@@ -13788,13 +13826,13 @@ var settings$1 = {
|
|
|
13788
13826
|
slidesToScroll: 1,
|
|
13789
13827
|
initialSlide: 0,
|
|
13790
13828
|
};
|
|
13791
|
-
var
|
|
13792
|
-
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
13829
|
+
var ImageProductSlide = function (_a) {
|
|
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;
|
|
13793
13831
|
var slick = React$2.useRef(null);
|
|
13794
13832
|
var sliderWrapper = React$2.useRef(null);
|
|
13795
13833
|
React$2.useRef(null);
|
|
13796
13834
|
var _c = React$2.useState(false); _c[0]; var setIsPlaying = _c[1];
|
|
13797
|
-
usePreventVerticalScroll
|
|
13835
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
13798
13836
|
var onButtonClick = React$2.useCallback(function (i) {
|
|
13799
13837
|
var _a;
|
|
13800
13838
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -13824,62 +13862,27 @@ var ImageProductWithTags = function (_a) {
|
|
|
13824
13862
|
}
|
|
13825
13863
|
}
|
|
13826
13864
|
}, [contents, selectedValue]);
|
|
13827
|
-
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) {
|
|
13828
13866
|
var _a;
|
|
13829
13867
|
var activeSlide = contents[e];
|
|
13830
13868
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13831
13869
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13832
13870
|
autoplay ? _playVideo() : _stopVideo();
|
|
13833
|
-
} }, 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) {
|
|
13834
13872
|
var _a;
|
|
13835
13873
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13836
13874
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
13837
|
-
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));
|
|
13838
13876
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13839
13877
|
};
|
|
13840
|
-
|
|
13841
|
-
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13842
|
-
var firstClientX = React$2.useRef(0);
|
|
13843
|
-
var clientX = React$2.useRef(0);
|
|
13844
|
-
var preventTouch = React$2.useCallback(function (e) {
|
|
13845
|
-
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
13846
|
-
// Vertical scrolling does not work when you start swiping horizontally.
|
|
13847
|
-
if (Math.abs(clientX.current) > dragThreshold) {
|
|
13848
|
-
if (e.cancelable) {
|
|
13849
|
-
e.preventDefault();
|
|
13850
|
-
e.returnValue = false;
|
|
13851
|
-
}
|
|
13852
|
-
return false;
|
|
13853
|
-
}
|
|
13854
|
-
return true;
|
|
13855
|
-
}, [dragThreshold]);
|
|
13856
|
-
var touchStart = React$2.useCallback(function (e) {
|
|
13857
|
-
firstClientX.current = e.touches[0].clientX;
|
|
13858
|
-
}, []);
|
|
13859
|
-
React$2.useEffect(function () {
|
|
13860
|
-
var current = ref.current;
|
|
13861
|
-
if (current) {
|
|
13862
|
-
current.addEventListener('touchstart', touchStart);
|
|
13863
|
-
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
13864
|
-
}
|
|
13865
|
-
return function () {
|
|
13866
|
-
if (current) {
|
|
13867
|
-
current.removeEventListener('touchstart', touchStart);
|
|
13868
|
-
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
13869
|
-
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
13870
|
-
current.removeEventListener('touchmove', preventTouch);
|
|
13871
|
-
}
|
|
13872
|
-
};
|
|
13873
|
-
}, [preventTouch, ref, touchStart]);
|
|
13874
|
-
}
|
|
13875
|
-
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$c;
|
|
13878
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c;
|
|
13876
13879
|
|
|
13877
|
-
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"])));
|
|
13878
13881
|
var ProductGalleryMobile = function (_a) {
|
|
13879
|
-
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;
|
|
13880
|
-
return (jsxRuntime.jsx(Container$
|
|
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;
|
|
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));
|
|
13881
13884
|
};
|
|
13882
|
-
var templateObject_1$
|
|
13885
|
+
var templateObject_1$K;
|
|
13883
13886
|
|
|
13884
13887
|
function _extends() {
|
|
13885
13888
|
_extends = Object.assign || function (target) {
|
|
@@ -14146,27 +14149,27 @@ function useSwipeable(options) {
|
|
|
14146
14149
|
return handlers;
|
|
14147
14150
|
}
|
|
14148
14151
|
|
|
14149
|
-
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"])));
|
|
14150
14153
|
var ArrowButton = function (_a) {
|
|
14151
14154
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14152
|
-
return (jsxRuntime.jsx(Button$
|
|
14155
|
+
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14153
14156
|
};
|
|
14154
|
-
var templateObject_1$
|
|
14157
|
+
var templateObject_1$J;
|
|
14155
14158
|
|
|
14156
|
-
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"])));
|
|
14157
14160
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14158
14161
|
var SlideDots = function (_a) {
|
|
14159
14162
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14160
14163
|
var theme = useTheme();
|
|
14161
|
-
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
|
|
14162
14165
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14163
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));
|
|
14164
14167
|
};
|
|
14165
|
-
var templateObject_1$
|
|
14168
|
+
var templateObject_1$I;
|
|
14166
14169
|
|
|
14167
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14168
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14169
|
-
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"])));
|
|
14170
14173
|
var SlideNavigation = function (_a) {
|
|
14171
14174
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14172
14175
|
var theme = useTheme();
|
|
@@ -14178,23 +14181,23 @@ var SlideNavigation = function (_a) {
|
|
|
14178
14181
|
onNavigate(selectedIndex + 1);
|
|
14179
14182
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14180
14183
|
};
|
|
14181
|
-
var templateObject_1$
|
|
14184
|
+
var templateObject_1$H, templateObject_2$u, templateObject_3$q;
|
|
14182
14185
|
|
|
14183
|
-
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) {
|
|
14184
14187
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14185
14188
|
return borderRadiusVariant &&
|
|
14186
14189
|
"\n border-radius: 40px;\n ";
|
|
14187
14190
|
});
|
|
14188
|
-
var TopTagContainer$
|
|
14189
|
-
var BottomTagContainer$
|
|
14190
|
-
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) {
|
|
14191
14194
|
var _b, _c;
|
|
14192
14195
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14193
|
-
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));
|
|
14194
14197
|
});
|
|
14195
|
-
var templateObject_1$
|
|
14198
|
+
var templateObject_1$G, templateObject_2$t, templateObject_3$p;
|
|
14196
14199
|
|
|
14197
|
-
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"])));
|
|
14198
14201
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14199
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;
|
|
14200
14203
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14216,11 +14219,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14216
14219
|
React$2.useEffect(function () {
|
|
14217
14220
|
setSelectedImage(images[index]);
|
|
14218
14221
|
}, [index, images]);
|
|
14219
|
-
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));
|
|
14220
14223
|
};
|
|
14221
|
-
var templateObject_1$
|
|
14224
|
+
var templateObject_1$F;
|
|
14222
14225
|
|
|
14223
|
-
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) {
|
|
14224
14227
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14225
14228
|
return borderRadiusVariant &&
|
|
14226
14229
|
"\n border-radius: 40px;\n ";
|
|
@@ -14229,14 +14232,14 @@ var Container$v = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
14229
14232
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14230
14233
|
});
|
|
14231
14234
|
// max-height: 31.875rem;
|
|
14232
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
14233
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
14234
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14235
|
-
var Video = newStyled.div(templateObject_5$
|
|
14236
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14237
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14238
|
-
var NavButtonContainer = newStyled.div(templateObject_8$
|
|
14239
|
-
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"])));
|
|
14240
14243
|
var settings = {
|
|
14241
14244
|
dots: true,
|
|
14242
14245
|
infinite: false,
|
|
@@ -14245,7 +14248,7 @@ var settings = {
|
|
|
14245
14248
|
slidesToScroll: 1,
|
|
14246
14249
|
initialSlide: 0,
|
|
14247
14250
|
};
|
|
14248
|
-
var
|
|
14251
|
+
var ImageProductSlideV3 = function (_a) {
|
|
14249
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;
|
|
14250
14253
|
var slick = React$2.useRef(null);
|
|
14251
14254
|
var sliderWrapper = React$2.useRef(null);
|
|
@@ -14281,62 +14284,27 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14281
14284
|
}
|
|
14282
14285
|
}
|
|
14283
14286
|
}, [images, selectedValue]);
|
|
14284
|
-
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) {
|
|
14285
14288
|
var _a;
|
|
14286
14289
|
var activeSlide = images[e];
|
|
14287
14290
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14288
14291
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14289
14292
|
autoplay ? _playVideo() : _stopVideo();
|
|
14290
|
-
} }, 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) {
|
|
14291
14294
|
var _a, _b;
|
|
14292
|
-
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 () {
|
|
14293
14296
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14294
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));
|
|
14295
14298
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14296
14299
|
};
|
|
14297
|
-
|
|
14298
|
-
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14299
|
-
var firstClientX = React$2.useRef(0);
|
|
14300
|
-
var clientX = React$2.useRef(0);
|
|
14301
|
-
var preventTouch = React$2.useCallback(function (e) {
|
|
14302
|
-
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
14303
|
-
// Vertical scrolling does not work when you start swiping horizontally.
|
|
14304
|
-
if (Math.abs(clientX.current) > dragThreshold) {
|
|
14305
|
-
if (e.cancelable) {
|
|
14306
|
-
e.preventDefault();
|
|
14307
|
-
e.returnValue = false;
|
|
14308
|
-
}
|
|
14309
|
-
return false;
|
|
14310
|
-
}
|
|
14311
|
-
return true;
|
|
14312
|
-
}, [dragThreshold]);
|
|
14313
|
-
var touchStart = React$2.useCallback(function (e) {
|
|
14314
|
-
firstClientX.current = e.touches[0].clientX;
|
|
14315
|
-
}, []);
|
|
14316
|
-
React$2.useEffect(function () {
|
|
14317
|
-
var current = ref.current;
|
|
14318
|
-
if (current) {
|
|
14319
|
-
current.addEventListener('touchstart', touchStart);
|
|
14320
|
-
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
14321
|
-
}
|
|
14322
|
-
return function () {
|
|
14323
|
-
if (current) {
|
|
14324
|
-
current.removeEventListener('touchstart', touchStart);
|
|
14325
|
-
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
14326
|
-
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
14327
|
-
current.removeEventListener('touchmove', preventTouch);
|
|
14328
|
-
}
|
|
14329
|
-
};
|
|
14330
|
-
}, [preventTouch, ref, touchStart]);
|
|
14331
|
-
}
|
|
14332
|
-
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;
|
|
14333
14301
|
|
|
14334
|
-
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"])));
|
|
14335
14303
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14336
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;
|
|
14337
|
-
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));
|
|
14338
14306
|
};
|
|
14339
|
-
var templateObject_1$
|
|
14307
|
+
var templateObject_1$D;
|
|
14340
14308
|
|
|
14341
14309
|
var __defProp$1 = Object.defineProperty;
|
|
14342
14310
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14469,17 +14437,17 @@ var Portal = function (_a) {
|
|
|
14469
14437
|
var visibleStyle = function (_a) {
|
|
14470
14438
|
var opened = _a.opened;
|
|
14471
14439
|
return opened
|
|
14472
|
-
? 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 "])));
|
|
14473
14441
|
};
|
|
14474
14442
|
var transformStyle = function (_a) {
|
|
14475
14443
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14476
14444
|
return opened
|
|
14477
|
-
? 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%)');
|
|
14478
14446
|
};
|
|
14479
|
-
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({
|
|
14480
14448
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14481
14449
|
}), visibleStyle, transformStyle);
|
|
14482
|
-
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);
|
|
14483
14451
|
var Modal = function (_a) {
|
|
14484
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;
|
|
14485
14453
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14489,7 +14457,7 @@ var Modal = function (_a) {
|
|
|
14489
14457
|
}
|
|
14490
14458
|
close();
|
|
14491
14459
|
};
|
|
14492
|
-
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));
|
|
14493
14461
|
};
|
|
14494
14462
|
var modalEvent = function (id, detail) {
|
|
14495
14463
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14517,9 +14485,9 @@ var useModal = function (id) {
|
|
|
14517
14485
|
close: close,
|
|
14518
14486
|
}); }, [close, open, opened]);
|
|
14519
14487
|
};
|
|
14520
|
-
var templateObject_1$
|
|
14488
|
+
var templateObject_1$C, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a;
|
|
14521
14489
|
|
|
14522
|
-
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) {
|
|
14523
14491
|
var height = _a.height;
|
|
14524
14492
|
return height || '0.5rem';
|
|
14525
14493
|
}, function (_a) {
|
|
@@ -14558,7 +14526,7 @@ var BarContainer = newStyled.div({
|
|
|
14558
14526
|
padding: '0 16px',
|
|
14559
14527
|
position: 'relative',
|
|
14560
14528
|
});
|
|
14561
|
-
var Container$
|
|
14529
|
+
var Container$t = newStyled.div(function (_a) {
|
|
14562
14530
|
var backgroundColor = _a.backgroundColor;
|
|
14563
14531
|
return ({
|
|
14564
14532
|
width: '475px',
|
|
@@ -14589,21 +14557,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14589
14557
|
var theme = useTheme();
|
|
14590
14558
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14591
14559
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14592
|
-
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));
|
|
14593
14561
|
};
|
|
14594
|
-
var templateObject_1$
|
|
14562
|
+
var templateObject_1$B;
|
|
14595
14563
|
|
|
14596
|
-
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) {
|
|
14597
14565
|
var theme = _a.theme;
|
|
14598
14566
|
return theme.component.orderBar.backgroundColor;
|
|
14599
14567
|
});
|
|
14600
|
-
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; });
|
|
14601
14569
|
var OrderBar = function (_a) {
|
|
14602
14570
|
var message = _a.message, color = _a.color;
|
|
14603
14571
|
var theme = useTheme();
|
|
14604
|
-
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));
|
|
14605
14573
|
};
|
|
14606
|
-
var templateObject_1$
|
|
14574
|
+
var templateObject_1$A, templateObject_2$q;
|
|
14607
14575
|
|
|
14608
14576
|
var htmlReactParser = {exports: {}};
|
|
14609
14577
|
|
|
@@ -18384,17 +18352,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18384
18352
|
HTMLReactParser$1.attributesToProps;
|
|
18385
18353
|
HTMLReactParser$1.Element;
|
|
18386
18354
|
|
|
18387
|
-
var Container$
|
|
18388
|
-
var Card = newStyled.div(templateObject_2$
|
|
18389
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18390
|
-
var Label$1 = newStyled.div(templateObject_4$
|
|
18391
|
-
var Check = newStyled.div(templateObject_5$
|
|
18392
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18393
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18394
|
-
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"])));
|
|
18395
18363
|
var PackSelector = function (_a) {
|
|
18396
18364
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18397
|
-
return (jsxRuntime.jsx(Container$
|
|
18365
|
+
return (jsxRuntime.jsx(Container$r, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18398
18366
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18399
18367
|
}) }), void 0));
|
|
18400
18368
|
};
|
|
@@ -18421,14 +18389,14 @@ var PackCard = function (_a) {
|
|
|
18421
18389
|
currency: currencyCode || 'USD',
|
|
18422
18390
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18423
18391
|
};
|
|
18424
|
-
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;
|
|
18425
18393
|
|
|
18426
|
-
var Container$
|
|
18427
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18428
|
-
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({
|
|
18429
18397
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18430
18398
|
}));
|
|
18431
|
-
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) {
|
|
18432
18400
|
var bold = _a.bold;
|
|
18433
18401
|
return (bold ? '700' : '500');
|
|
18434
18402
|
}, function (_a) {
|
|
@@ -18445,7 +18413,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
18445
18413
|
var background = _a.background;
|
|
18446
18414
|
return background || 'unset';
|
|
18447
18415
|
});
|
|
18448
|
-
var templateObject_1$
|
|
18416
|
+
var templateObject_1$y, templateObject_2$o, templateObject_3$l, templateObject_4$f;
|
|
18449
18417
|
|
|
18450
18418
|
var Pagination = function (_a) {
|
|
18451
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;
|
|
@@ -18491,7 +18459,7 @@ var Pagination = function (_a) {
|
|
|
18491
18459
|
}
|
|
18492
18460
|
return pages;
|
|
18493
18461
|
}, [from, page, showReducedPages, to]);
|
|
18494
|
-
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));
|
|
18495
18463
|
};
|
|
18496
18464
|
|
|
18497
18465
|
var PaginatorBlog = function (_a) {
|
|
@@ -18505,12 +18473,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18505
18473
|
setPage(page);
|
|
18506
18474
|
onChange(page);
|
|
18507
18475
|
};
|
|
18508
|
-
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
|
|
18509
18477
|
? theme.colors.shades['white'].color
|
|
18510
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));
|
|
18511
18479
|
};
|
|
18512
18480
|
|
|
18513
|
-
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) {
|
|
18514
18482
|
var width = _a.width;
|
|
18515
18483
|
return width;
|
|
18516
18484
|
}, function (_a) {
|
|
@@ -18526,14 +18494,14 @@ var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
18526
18494
|
var PaymentMethod = function (_a) {
|
|
18527
18495
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18528
18496
|
var theme = useTheme();
|
|
18529
|
-
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));
|
|
18530
18498
|
};
|
|
18531
|
-
var templateObject_1$
|
|
18499
|
+
var templateObject_1$x;
|
|
18532
18500
|
|
|
18533
|
-
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"])));
|
|
18534
18502
|
var IMAGE_WIDTH = '63px';
|
|
18535
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18536
|
-
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({
|
|
18537
18505
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18538
18506
|
}), IMAGE_WIDTH);
|
|
18539
18507
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -18556,7 +18524,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18556
18524
|
margin: '0.063rem 0',
|
|
18557
18525
|
});
|
|
18558
18526
|
});
|
|
18559
|
-
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) {
|
|
18560
18528
|
var withTag = _a.withTag; _a.theme;
|
|
18561
18529
|
return withTag
|
|
18562
18530
|
? mediaQueries({
|
|
@@ -18565,14 +18533,14 @@ var PriceContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = _
|
|
|
18565
18533
|
})
|
|
18566
18534
|
: 'justify-content: end';
|
|
18567
18535
|
});
|
|
18568
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18569
|
-
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"])));
|
|
18570
18538
|
var SimpleOrderItem = function (_a) {
|
|
18571
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;
|
|
18572
18540
|
var theme = useTheme();
|
|
18573
|
-
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));
|
|
18574
18542
|
};
|
|
18575
|
-
var templateObject_1$
|
|
18543
|
+
var templateObject_1$w, templateObject_2$n, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
18576
18544
|
|
|
18577
18545
|
var P$1 = newStyled.p(function (_a) {
|
|
18578
18546
|
var color = _a.color;
|
|
@@ -18586,7 +18554,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18586
18554
|
margin: '0.938rem 4.188rem',
|
|
18587
18555
|
});
|
|
18588
18556
|
});
|
|
18589
|
-
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) {
|
|
18590
18558
|
var height = _a.height;
|
|
18591
18559
|
return height || '0.5rem';
|
|
18592
18560
|
}, function (_a) {
|
|
@@ -18615,7 +18583,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18615
18583
|
position: 'absolute',
|
|
18616
18584
|
});
|
|
18617
18585
|
});
|
|
18618
|
-
var Container$
|
|
18586
|
+
var Container$n = newStyled.div(function (_a) {
|
|
18619
18587
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18620
18588
|
return ({
|
|
18621
18589
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18629,14 +18597,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18629
18597
|
var ProgressBar = function (_a) {
|
|
18630
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;
|
|
18631
18599
|
var theme = useTheme();
|
|
18632
|
-
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));
|
|
18633
18601
|
};
|
|
18634
|
-
var templateObject_1$
|
|
18602
|
+
var templateObject_1$v;
|
|
18635
18603
|
|
|
18636
|
-
var Container$
|
|
18637
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18638
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18639
|
-
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)'; });
|
|
18640
18608
|
var QuantityPicker = function (_a) {
|
|
18641
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;
|
|
18642
18610
|
var theme = useTheme();
|
|
@@ -18659,9 +18627,9 @@ var QuantityPicker = function (_a) {
|
|
|
18659
18627
|
return clamp(value);
|
|
18660
18628
|
});
|
|
18661
18629
|
}, [value, clamp]);
|
|
18662
|
-
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));
|
|
18663
18631
|
};
|
|
18664
|
-
var templateObject_1$
|
|
18632
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$j, templateObject_4$d;
|
|
18665
18633
|
|
|
18666
18634
|
/* base styles & size variants */
|
|
18667
18635
|
var CustomRadioStyles$1 = {
|
|
@@ -18730,9 +18698,9 @@ var ContainerStyles$1 = {
|
|
|
18730
18698
|
},
|
|
18731
18699
|
};
|
|
18732
18700
|
|
|
18733
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18734
|
-
var Container$
|
|
18735
|
-
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) {
|
|
18736
18704
|
var disabled = _a.disabled;
|
|
18737
18705
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18738
18706
|
});
|
|
@@ -18740,7 +18708,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18740
18708
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18741
18709
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18742
18710
|
]; });
|
|
18743
|
-
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"])));
|
|
18744
18712
|
var RadioPrimary = function (_a) {
|
|
18745
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;
|
|
18746
18714
|
var theme = useTheme();
|
|
@@ -18748,9 +18716,9 @@ var RadioPrimary = function (_a) {
|
|
|
18748
18716
|
var value = event.currentTarget.value;
|
|
18749
18717
|
onChange({ value: value, label: label });
|
|
18750
18718
|
};
|
|
18751
|
-
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));
|
|
18752
18720
|
};
|
|
18753
|
-
var templateObject_1$
|
|
18721
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i;
|
|
18754
18722
|
|
|
18755
18723
|
var RadioGroupInput = function (_a) {
|
|
18756
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;
|
|
@@ -18829,9 +18797,9 @@ var ContainerStyles = {
|
|
|
18829
18797
|
},
|
|
18830
18798
|
};
|
|
18831
18799
|
|
|
18832
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18833
|
-
var Container$
|
|
18834
|
-
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) {
|
|
18835
18803
|
var disabled = _a.disabled;
|
|
18836
18804
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18837
18805
|
});
|
|
@@ -18839,7 +18807,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
18839
18807
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18840
18808
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
18841
18809
|
]; });
|
|
18842
|
-
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) {
|
|
18843
18811
|
var theme = _a.theme;
|
|
18844
18812
|
return theme.component.radio.textSize;
|
|
18845
18813
|
}, function (_a) {
|
|
@@ -18853,9 +18821,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18853
18821
|
var value = event.currentTarget.value;
|
|
18854
18822
|
onChange({ value: value, label: label });
|
|
18855
18823
|
};
|
|
18856
|
-
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));
|
|
18857
18825
|
};
|
|
18858
|
-
var templateObject_1$
|
|
18826
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h;
|
|
18859
18827
|
|
|
18860
18828
|
var ClubRadioGroupInput = function (_a) {
|
|
18861
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;
|
|
@@ -18883,15 +18851,15 @@ function formatDate(date, format) {
|
|
|
18883
18851
|
}
|
|
18884
18852
|
}
|
|
18885
18853
|
|
|
18886
|
-
var Container$
|
|
18887
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18888
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18889
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
18890
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
18891
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
18892
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
18893
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
18894
|
-
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"])));
|
|
18895
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"])));
|
|
18896
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"])));
|
|
18897
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"])));
|
|
@@ -18921,22 +18889,22 @@ var Review$1 = function (_a) {
|
|
|
18921
18889
|
}
|
|
18922
18890
|
}
|
|
18923
18891
|
}, [opened]);
|
|
18924
|
-
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 &&
|
|
18925
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));
|
|
18926
18894
|
};
|
|
18927
|
-
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;
|
|
18928
18896
|
|
|
18929
18897
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18930
18898
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18931
|
-
var Container$
|
|
18932
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18933
|
-
var Content = newStyled.div(templateObject_3$
|
|
18934
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
18935
|
-
var DateText = newStyled.span(templateObject_5$
|
|
18936
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
18937
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
18938
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
18939
|
-
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"])));
|
|
18940
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"])));
|
|
18941
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"])));
|
|
18942
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"])));
|
|
@@ -18970,7 +18938,7 @@ var Review = function (_a) {
|
|
|
18970
18938
|
});
|
|
18971
18939
|
};
|
|
18972
18940
|
}, [randomId]);
|
|
18973
|
-
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: {
|
|
18974
18942
|
__html: showMoreMobile
|
|
18975
18943
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18976
18944
|
: description,
|
|
@@ -18980,15 +18948,15 @@ var Review = function (_a) {
|
|
|
18980
18948
|
: description,
|
|
18981
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));
|
|
18982
18950
|
};
|
|
18983
|
-
var templateObject_1$
|
|
18984
|
-
|
|
18985
|
-
var Container$
|
|
18986
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18987
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18988
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18989
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
18990
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
18991
|
-
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) {
|
|
18992
18960
|
var backgroundUrl = _a.backgroundUrl;
|
|
18993
18961
|
return "url(".concat(backgroundUrl, ")");
|
|
18994
18962
|
});
|
|
@@ -18996,19 +18964,19 @@ var ReviewsHeader = function (_a) {
|
|
|
18996
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;
|
|
18997
18965
|
var starsNumber = 5;
|
|
18998
18966
|
var theme = useTheme();
|
|
18999
|
-
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));
|
|
19000
18968
|
};
|
|
19001
|
-
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;
|
|
19002
18970
|
|
|
19003
|
-
var Container$
|
|
19004
|
-
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; });
|
|
19005
18973
|
var ScrollToTop = function (_a) {
|
|
19006
18974
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19007
18975
|
var theme = useTheme();
|
|
19008
18976
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19009
|
-
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));
|
|
19010
18978
|
};
|
|
19011
|
-
var templateObject_1$
|
|
18979
|
+
var templateObject_1$o, templateObject_2$g;
|
|
19012
18980
|
|
|
19013
18981
|
var Input = newStyled.input(function (props) { return ({
|
|
19014
18982
|
padding: props.theme.component.input.padding,
|
|
@@ -19039,7 +19007,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19039
19007
|
},
|
|
19040
19008
|
}); });
|
|
19041
19009
|
|
|
19042
|
-
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({
|
|
19043
19011
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19044
19012
|
}));
|
|
19045
19013
|
var Description = newStyled.div({
|
|
@@ -19056,25 +19024,25 @@ var Description = newStyled.div({
|
|
|
19056
19024
|
var ProductItem = function (_a) {
|
|
19057
19025
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19058
19026
|
var theme = useTheme();
|
|
19059
|
-
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));
|
|
19060
19028
|
};
|
|
19061
|
-
var templateObject_1$
|
|
19029
|
+
var templateObject_1$n;
|
|
19062
19030
|
|
|
19063
|
-
var Container$
|
|
19031
|
+
var Container$e = newStyled.div({
|
|
19064
19032
|
display: 'flex',
|
|
19065
19033
|
justifyContent: 'center',
|
|
19066
19034
|
padding: '1rem',
|
|
19067
19035
|
});
|
|
19068
19036
|
var Footer = function (_a) {
|
|
19069
19037
|
var text = _a.text, onClick = _a.onClick;
|
|
19070
|
-
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));
|
|
19071
19039
|
};
|
|
19072
19040
|
|
|
19073
19041
|
var Ul = newStyled.ul({
|
|
19074
19042
|
margin: '0px',
|
|
19075
19043
|
padding: '0px',
|
|
19076
19044
|
});
|
|
19077
|
-
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({
|
|
19078
19046
|
padding: [0, '0rem 1rem'],
|
|
19079
19047
|
borderRadius: [0, '0.5rem'],
|
|
19080
19048
|
}));
|
|
@@ -19086,31 +19054,31 @@ var Anchor = newStyled.a({
|
|
|
19086
19054
|
padding: 0,
|
|
19087
19055
|
textDecoration: 'none',
|
|
19088
19056
|
});
|
|
19089
|
-
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({
|
|
19090
19058
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19091
19059
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19092
19060
|
borderRadius: ['0', '0.5rem'],
|
|
19093
19061
|
}));
|
|
19094
|
-
var Header = newStyled.div(templateObject_3$
|
|
19062
|
+
var Header = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19095
19063
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19096
19064
|
}));
|
|
19097
19065
|
var ResultsPanel = function (_a) {
|
|
19098
19066
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19099
19067
|
var theme = useTheme();
|
|
19100
|
-
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));
|
|
19101
19069
|
};
|
|
19102
|
-
var templateObject_1$
|
|
19070
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$d;
|
|
19103
19071
|
|
|
19104
|
-
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({
|
|
19105
19073
|
right: ['1rem', '7.75rem'],
|
|
19106
19074
|
top: ['0.75rem', '0.75rem'],
|
|
19107
19075
|
}));
|
|
19108
19076
|
var ClearButton = function (_a) {
|
|
19109
19077
|
var onClick = _a.onClick;
|
|
19110
19078
|
var theme = useTheme();
|
|
19111
|
-
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));
|
|
19112
19080
|
};
|
|
19113
|
-
var templateObject_1$
|
|
19081
|
+
var templateObject_1$l;
|
|
19114
19082
|
|
|
19115
19083
|
var SearchIconContainer = newStyled.div({
|
|
19116
19084
|
display: 'flex',
|
|
@@ -19120,7 +19088,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19120
19088
|
background: 'white',
|
|
19121
19089
|
alignSelf: 'center',
|
|
19122
19090
|
});
|
|
19123
|
-
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"])));
|
|
19124
19092
|
var SearchControl = function (_a) {
|
|
19125
19093
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19126
19094
|
var theme = useTheme();
|
|
@@ -19136,7 +19104,7 @@ var SearchControl = function (_a) {
|
|
|
19136
19104
|
}
|
|
19137
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));
|
|
19138
19106
|
};
|
|
19139
|
-
var templateObject_1$
|
|
19107
|
+
var templateObject_1$k;
|
|
19140
19108
|
|
|
19141
19109
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19142
19110
|
var reducer = function (state, action) {
|
|
@@ -19152,7 +19120,7 @@ var reducer = function (state, action) {
|
|
|
19152
19120
|
}
|
|
19153
19121
|
}
|
|
19154
19122
|
};
|
|
19155
|
-
var Container$
|
|
19123
|
+
var Container$c = newStyled.div({
|
|
19156
19124
|
position: 'relative',
|
|
19157
19125
|
display: 'flex',
|
|
19158
19126
|
});
|
|
@@ -19192,7 +19160,7 @@ var SearchBar = function (_a) {
|
|
|
19192
19160
|
if (e.cancelable) {
|
|
19193
19161
|
e.preventDefault();
|
|
19194
19162
|
}
|
|
19195
|
-
}, 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) {
|
|
19196
19164
|
if (e.key === 'Enter') {
|
|
19197
19165
|
if (e.cancelable) {
|
|
19198
19166
|
e.preventDefault();
|
|
@@ -19203,20 +19171,20 @@ var SearchBar = function (_a) {
|
|
|
19203
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));
|
|
19204
19172
|
};
|
|
19205
19173
|
|
|
19206
|
-
var Container$
|
|
19207
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19208
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19209
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19210
|
-
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"])));
|
|
19211
19179
|
var SearchNavigation = function (_a) {
|
|
19212
19180
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19213
|
-
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) {
|
|
19214
19182
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19215
19183
|
}) }, void 0)] }, void 0));
|
|
19216
19184
|
};
|
|
19217
|
-
var templateObject_1$
|
|
19185
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$c, templateObject_4$9, templateObject_5$5;
|
|
19218
19186
|
|
|
19219
|
-
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) {
|
|
19220
19188
|
var alignCenter = _a.alignCenter;
|
|
19221
19189
|
return alignCenter &&
|
|
19222
19190
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19226,26 +19194,26 @@ var Container$9 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
19226
19194
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19227
19195
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19228
19196
|
});
|
|
19229
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19230
|
-
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"])));
|
|
19231
19199
|
var ShortBanner = function (_a) {
|
|
19232
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;
|
|
19233
19201
|
var theme = useTheme();
|
|
19234
|
-
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));
|
|
19235
19203
|
};
|
|
19236
|
-
var templateObject_1$
|
|
19237
|
-
|
|
19238
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19239
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19240
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19241
|
-
var Label = newStyled('div')(templateObject_4$
|
|
19242
|
-
var TopLabel = newStyled(Label)(templateObject_5$
|
|
19243
|
-
var LeftLabel = newStyled(Label)(templateObject_6$
|
|
19244
|
-
var Container$
|
|
19245
|
-
var LabelText = newStyled('span')(templateObject_8$
|
|
19246
|
-
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"])));
|
|
19247
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; });
|
|
19248
|
-
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;
|
|
19249
19217
|
|
|
19250
19218
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19251
19219
|
var getCellColor = function (index, cell) {
|
|
@@ -19281,21 +19249,21 @@ var SizeChartTable = function (_a) {
|
|
|
19281
19249
|
var theme = useTheme();
|
|
19282
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];
|
|
19283
19251
|
var isMultilabel = xLabel && yLabel;
|
|
19284
|
-
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: {
|
|
19285
19253
|
backgroundColor: getCellColor(index, cell),
|
|
19286
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));
|
|
19287
19255
|
};
|
|
19288
19256
|
|
|
19289
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19290
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19291
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
19292
|
-
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; });
|
|
19293
19261
|
var SizeTable = function (_a) {
|
|
19294
19262
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19295
19263
|
var theme = useTheme();
|
|
19296
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));
|
|
19297
19265
|
};
|
|
19298
|
-
var templateObject_1$
|
|
19266
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$7;
|
|
19299
19267
|
|
|
19300
19268
|
var getStylesBySize$4 = function (size) {
|
|
19301
19269
|
switch (size) {
|
|
@@ -19322,7 +19290,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19322
19290
|
} });
|
|
19323
19291
|
};
|
|
19324
19292
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19325
|
-
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));
|
|
19326
19294
|
};
|
|
19327
19295
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19328
19296
|
if (disabled)
|
|
@@ -19338,23 +19306,23 @@ var TextButton = function (_a) {
|
|
|
19338
19306
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19339
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));
|
|
19340
19308
|
};
|
|
19341
|
-
var templateObject_1$
|
|
19309
|
+
var templateObject_1$f;
|
|
19342
19310
|
|
|
19343
|
-
var Container$
|
|
19344
|
-
var P = newStyled.p(templateObject_2$
|
|
19345
|
-
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"])));
|
|
19346
19314
|
var SizeFitGuide = function (_a) {
|
|
19347
19315
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19348
|
-
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));
|
|
19349
19317
|
};
|
|
19350
|
-
var templateObject_1$
|
|
19318
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$8;
|
|
19351
19319
|
|
|
19352
|
-
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) {
|
|
19353
19321
|
var inline = _a.inline;
|
|
19354
19322
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19355
19323
|
});
|
|
19356
|
-
var Row = newStyled.div(templateObject_2$
|
|
19357
|
-
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;
|
|
19358
19326
|
|
|
19359
19327
|
var SizeSelector = function (_a) {
|
|
19360
19328
|
var _b;
|
|
@@ -19373,7 +19341,7 @@ var SizeSelector = function (_a) {
|
|
|
19373
19341
|
}) }), void 0)] }), void 0));
|
|
19374
19342
|
};
|
|
19375
19343
|
|
|
19376
|
-
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) {
|
|
19377
19345
|
var titleSize = _a.titleSize;
|
|
19378
19346
|
return titleSize;
|
|
19379
19347
|
}, function (_a) {
|
|
@@ -19390,18 +19358,18 @@ var Tab = function (_a) {
|
|
|
19390
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;
|
|
19391
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));
|
|
19392
19360
|
};
|
|
19393
|
-
var templateObject_1$
|
|
19361
|
+
var templateObject_1$c;
|
|
19394
19362
|
|
|
19395
|
-
var Container$
|
|
19396
|
-
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) {
|
|
19397
19365
|
var backgroundColor = _a.backgroundColor;
|
|
19398
19366
|
return backgroundColor;
|
|
19399
19367
|
}, function (_a) {
|
|
19400
19368
|
var borderColor = _a.borderColor;
|
|
19401
19369
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19402
19370
|
});
|
|
19403
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19404
|
-
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"])));
|
|
19405
19373
|
var Tabs = function (_a) {
|
|
19406
19374
|
var _b;
|
|
19407
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;
|
|
@@ -19410,16 +19378,16 @@ var Tabs = function (_a) {
|
|
|
19410
19378
|
return null;
|
|
19411
19379
|
}
|
|
19412
19380
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19413
|
-
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));
|
|
19414
19382
|
};
|
|
19415
|
-
var templateObject_1$
|
|
19383
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$7, templateObject_4$6;
|
|
19416
19384
|
|
|
19417
|
-
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"])));
|
|
19418
19386
|
var Tag = function (_a) {
|
|
19419
19387
|
var text = _a.text, className = _a.className;
|
|
19420
|
-
return jsxRuntime.jsx(Container$
|
|
19388
|
+
return jsxRuntime.jsx(Container$6, __assign$1({ className: className }, { children: text }), void 0);
|
|
19421
19389
|
};
|
|
19422
|
-
var templateObject_1$
|
|
19390
|
+
var templateObject_1$a;
|
|
19423
19391
|
|
|
19424
19392
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19425
19393
|
switch (size) {
|
|
@@ -19450,10 +19418,10 @@ var getStylesBySize$3 = function (size, styledBorder) {
|
|
|
19450
19418
|
}
|
|
19451
19419
|
};
|
|
19452
19420
|
var CategoryTag = function (_a) {
|
|
19453
|
-
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;
|
|
19454
19422
|
var theme = useTheme();
|
|
19455
19423
|
var stylesBySize = getStylesBySize$3(size, styledBorder);
|
|
19456
|
-
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));
|
|
19457
19425
|
};
|
|
19458
19426
|
|
|
19459
19427
|
var getStylesBySize$2 = function (size) {
|
|
@@ -19530,9 +19498,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19530
19498
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19531
19499
|
};
|
|
19532
19500
|
|
|
19533
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19534
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19535
|
-
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"])));
|
|
19536
19504
|
var ImageVideo = function (_a) {
|
|
19537
19505
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19538
19506
|
var video = React$2.useRef(null);
|
|
@@ -19552,12 +19520,12 @@ var ImageVideo = function (_a) {
|
|
|
19552
19520
|
height: '100%',
|
|
19553
19521
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19554
19522
|
};
|
|
19555
|
-
var templateObject_1$
|
|
19523
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$6;
|
|
19556
19524
|
|
|
19557
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19558
|
-
var ContainerMobile = css(templateObject_2$
|
|
19559
|
-
var Container$
|
|
19560
|
-
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"])));
|
|
19561
19529
|
var TextWithImage = function (_a) {
|
|
19562
19530
|
var _b, _c, _d, _e;
|
|
19563
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"]);
|
|
@@ -19577,7 +19545,7 @@ var TextWithImage = function (_a) {
|
|
|
19577
19545
|
// @ts-ignore
|
|
19578
19546
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19579
19547
|
};
|
|
19580
|
-
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: {
|
|
19581
19549
|
backgroundColor: props.btnBGColor,
|
|
19582
19550
|
color: '#ffffff',
|
|
19583
19551
|
border: props.btnBGColor,
|
|
@@ -19587,9 +19555,9 @@ var TextWithImage = function (_a) {
|
|
|
19587
19555
|
},
|
|
19588
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));
|
|
19589
19557
|
};
|
|
19590
|
-
var templateObject_1$
|
|
19558
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$5, templateObject_4$5;
|
|
19591
19559
|
|
|
19592
|
-
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) {
|
|
19593
19561
|
var timerColor = _a.timerColor;
|
|
19594
19562
|
return timerColor || '';
|
|
19595
19563
|
});
|
|
@@ -19625,11 +19593,11 @@ var Timer = function (_a) {
|
|
|
19625
19593
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19626
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));
|
|
19627
19595
|
};
|
|
19628
|
-
var templateObject_1$
|
|
19596
|
+
var templateObject_1$7;
|
|
19629
19597
|
|
|
19630
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19631
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19632
|
-
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) {
|
|
19633
19601
|
var theme = _a.theme;
|
|
19634
19602
|
return theme.component.total.basicTotal.currency.color;
|
|
19635
19603
|
}, function (_a) {
|
|
@@ -19642,41 +19610,41 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19642
19610
|
var theme = _a.theme;
|
|
19643
19611
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19644
19612
|
});
|
|
19645
|
-
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) {
|
|
19646
19614
|
var highlightColor = _a.highlightColor;
|
|
19647
19615
|
return highlightColor;
|
|
19648
19616
|
});
|
|
19649
|
-
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) {
|
|
19650
19618
|
var showTotalLabel = _a.showTotalLabel;
|
|
19651
19619
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19652
19620
|
});
|
|
19653
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19654
|
-
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) {
|
|
19655
19623
|
var theme = _a.theme;
|
|
19656
19624
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19657
19625
|
});
|
|
19658
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
19659
|
-
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;
|
|
19660
19628
|
|
|
19661
19629
|
var Total = function (_a) {
|
|
19662
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;
|
|
19663
19631
|
var theme = useTheme();
|
|
19664
|
-
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));
|
|
19665
19633
|
};
|
|
19666
19634
|
|
|
19667
|
-
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) {
|
|
19668
19636
|
var color = _a.color;
|
|
19669
19637
|
return color;
|
|
19670
19638
|
});
|
|
19671
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19672
|
-
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) {
|
|
19673
19641
|
var theme = _a.theme;
|
|
19674
19642
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19675
19643
|
}, function (_a) {
|
|
19676
19644
|
var theme = _a.theme;
|
|
19677
19645
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19678
19646
|
});
|
|
19679
|
-
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) {
|
|
19680
19648
|
var color = _a.color;
|
|
19681
19649
|
return color;
|
|
19682
19650
|
});
|
|
@@ -19689,30 +19657,30 @@ var Subtotal = function (_a) {
|
|
|
19689
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));
|
|
19690
19658
|
})] }), void 0));
|
|
19691
19659
|
};
|
|
19692
|
-
var templateObject_1$
|
|
19660
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3;
|
|
19693
19661
|
|
|
19694
19662
|
var Totals = {
|
|
19695
19663
|
Total: Total,
|
|
19696
19664
|
Subtotal: Subtotal,
|
|
19697
19665
|
};
|
|
19698
19666
|
|
|
19699
|
-
var Container$
|
|
19700
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19701
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19702
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19703
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
19704
|
-
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) {
|
|
19705
19673
|
return props.finishedTrack
|
|
19706
19674
|
? props.finishedTrackColor
|
|
19707
19675
|
: props.activeTrack
|
|
19708
19676
|
? props.activeTrackColor
|
|
19709
19677
|
: '';
|
|
19710
19678
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19711
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19712
|
-
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) {
|
|
19713
19681
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19714
19682
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19715
|
-
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)'); });
|
|
19716
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; });
|
|
19717
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"])));
|
|
19718
19686
|
var TrackingProgressV2 = function (_a) {
|
|
@@ -19737,7 +19705,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19737
19705
|
}
|
|
19738
19706
|
return '30px';
|
|
19739
19707
|
};
|
|
19740
|
-
return (jsxRuntime.jsxs(Container$
|
|
19708
|
+
return (jsxRuntime.jsxs(Container$3, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19741
19709
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19742
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
|
|
19743
19711
|
? activeCheckpointColor
|
|
@@ -19748,18 +19716,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19748
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));
|
|
19749
19717
|
})] }), void 0));
|
|
19750
19718
|
};
|
|
19751
|
-
var templateObject_1$
|
|
19752
|
-
|
|
19753
|
-
var Container$
|
|
19754
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19755
|
-
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; });
|
|
19756
|
-
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'); });
|
|
19757
|
-
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'); });
|
|
19758
|
-
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) {
|
|
19759
19727
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19760
19728
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19761
|
-
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)'); });
|
|
19762
|
-
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; });
|
|
19763
19731
|
var TrackingProgress = function (_a) {
|
|
19764
19732
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
19765
19733
|
var theme = useTheme();
|
|
@@ -19779,7 +19747,7 @@ var TrackingProgress = function (_a) {
|
|
|
19779
19747
|
}
|
|
19780
19748
|
return '30px';
|
|
19781
19749
|
};
|
|
19782
|
-
return (jsxRuntime.jsxs(Container$
|
|
19750
|
+
return (jsxRuntime.jsxs(Container$2, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19783
19751
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19784
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
|
|
19785
19753
|
? theme.colors.semantic.informative.color
|
|
@@ -19788,9 +19756,9 @@ var TrackingProgress = function (_a) {
|
|
|
19788
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));
|
|
19789
19757
|
})] }), void 0));
|
|
19790
19758
|
};
|
|
19791
|
-
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;
|
|
19792
19760
|
|
|
19793
|
-
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) {
|
|
19794
19762
|
var textPosition = _a.textPosition;
|
|
19795
19763
|
return textPosition;
|
|
19796
19764
|
}, function (_a) {
|
|
@@ -19803,7 +19771,7 @@ var TimerContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = _
|
|
|
19803
19771
|
var borderRadius = _a.borderRadius;
|
|
19804
19772
|
return borderRadius || '8px';
|
|
19805
19773
|
});
|
|
19806
|
-
var templateObject_1$
|
|
19774
|
+
var templateObject_1$2;
|
|
19807
19775
|
|
|
19808
19776
|
var getDefaultCountdown = function () {
|
|
19809
19777
|
var tomorrowDate = new Date();
|
|
@@ -19819,7 +19787,7 @@ var HurryUp = function (_a) {
|
|
|
19819
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));
|
|
19820
19788
|
};
|
|
19821
19789
|
|
|
19822
|
-
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) {
|
|
19823
19791
|
var size = _a.size;
|
|
19824
19792
|
return (size ? size : '100%');
|
|
19825
19793
|
}, function (_a) {
|
|
@@ -19833,7 +19801,7 @@ var borderSize = {
|
|
|
19833
19801
|
large: '3px',
|
|
19834
19802
|
};
|
|
19835
19803
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
19836
|
-
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) {
|
|
19837
19805
|
var size = _a.size;
|
|
19838
19806
|
return borderSize[size];
|
|
19839
19807
|
}, function (_a) {
|
|
@@ -19846,11 +19814,96 @@ var StyledSpinner = newStyled.div(templateObject_2 || (templateObject_2 = __make
|
|
|
19846
19814
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
19847
19815
|
return duration;
|
|
19848
19816
|
});
|
|
19849
|
-
var templateObject_1, templateObject_2;
|
|
19817
|
+
var templateObject_1$1, templateObject_2$1;
|
|
19850
19818
|
|
|
19851
19819
|
var Spinner = function (_a) {
|
|
19852
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;
|
|
19853
|
-
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));
|
|
19854
19907
|
};
|
|
19855
19908
|
|
|
19856
19909
|
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
@@ -19915,6 +19968,7 @@ exports.ProductGallery = ProductGallery;
|
|
|
19915
19968
|
exports.ProductGalleryMobile = ProductGalleryMobile;
|
|
19916
19969
|
exports.ProductGalleryMobileV2 = ProductGalleryMobileV2;
|
|
19917
19970
|
exports.ProductGalleryMobileV3 = ProductGalleryMobileV3;
|
|
19971
|
+
exports.ProductGalleryMobileV4 = ProductGalleryMobileV4;
|
|
19918
19972
|
exports.ProgressBar = ProgressBar;
|
|
19919
19973
|
exports.QuantityPicker = QuantityPicker;
|
|
19920
19974
|
exports.RadioGroupInput = RadioGroupInput;
|