@trafilea/afrodita-components 6.13.0 → 6.14.1
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 +34 -9
- package/build/index.esm.js +794 -734
- package/build/index.esm.js.map +1 -1
- package/build/index.js +794 -733
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +13 -0
- package/build/theme/revel.theme.js +13 -0
- package/build/theme/shapermint.theme.d.ts +13 -0
- package/build/theme/shapermint.theme.js +13 -0
- package/build/theme/thebodcon.theme.d.ts +13 -0
- package/build/theme/thebodcon.theme.js +13 -0
- package/build/theme/thespadr.theme.d.ts +13 -0
- package/build/theme/thespadr.theme.js +13 -0
- package/build/theme/truekind.theme.d.ts +13 -0
- package/build/theme/truekind.theme.js +13 -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,20 @@ 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
|
|
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: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: ", ";\n font-weight: 600;\n"], ["\n position: absolute;\n top: -25px;\n right: 5px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: ", ";\n font-weight: 600;\n"])), function (_a) {
|
|
5831
|
+
var theme = _a.theme;
|
|
5832
|
+
return theme.component.autoship.discountTag.backgroundColor;
|
|
5833
|
+
}, function (_a) {
|
|
5834
|
+
var theme = _a.theme;
|
|
5835
|
+
return theme.component.autoship.discountTag.borderRadius;
|
|
5836
|
+
});
|
|
5837
|
+
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
5838
|
var selected = _a.selected, theme = _a.theme;
|
|
5833
5839
|
return selected
|
|
5834
5840
|
? "1.5px solid ".concat(theme.colors.shades['700'].color)
|
|
@@ -5842,28 +5848,28 @@ var ContainerBase = newStyled.div(templateObject_3$R || (templateObject_3$R = __
|
|
|
5842
5848
|
var theme = _a.theme;
|
|
5843
5849
|
return theme.colors.pallete.primary.color;
|
|
5844
5850
|
});
|
|
5845
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5851
|
+
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
5852
|
var onClick = _a.onClick;
|
|
5847
5853
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5848
5854
|
});
|
|
5849
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
5850
|
-
var SubscriptionHeader = newStyled.div(templateObject_6$
|
|
5855
|
+
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"])));
|
|
5856
|
+
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
5857
|
var theme = _a.theme;
|
|
5852
5858
|
return theme.colors.shades[200].color;
|
|
5853
5859
|
}, function (_a) {
|
|
5854
5860
|
var theme = _a.theme;
|
|
5855
5861
|
return theme.colors.pallete.primary.color;
|
|
5856
5862
|
});
|
|
5857
|
-
var BenefitsContainer = newStyled.div(templateObject_7$
|
|
5858
|
-
var Benefit = newStyled.div(templateObject_8$
|
|
5859
|
-
var BenefitText = newStyled(Text$7)(templateObject_9$
|
|
5863
|
+
var BenefitsContainer = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5864
|
+
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"])));
|
|
5865
|
+
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
5866
|
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
5867
|
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
5868
|
var selected = _a.selected, theme = _a.theme;
|
|
5863
5869
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5864
5870
|
});
|
|
5865
|
-
var Container$
|
|
5866
|
-
var templateObject_1$
|
|
5871
|
+
var Container$11 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5872
|
+
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
5873
|
|
|
5868
5874
|
var radioIds = {
|
|
5869
5875
|
oneTime: {
|
|
@@ -5876,7 +5882,7 @@ var radioIds = {
|
|
|
5876
5882
|
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5877
5883
|
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5878
5884
|
var AutoshipV2 = function (_a) {
|
|
5879
|
-
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c;
|
|
5885
|
+
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel;
|
|
5880
5886
|
var theme = useTheme();
|
|
5881
5887
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5882
5888
|
? frequencyValues.map(function (value) {
|
|
@@ -5926,7 +5932,7 @@ var AutoshipV2 = function (_a) {
|
|
|
5926
5932
|
return (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0));
|
|
5927
5933
|
}
|
|
5928
5934
|
}
|
|
5929
|
-
return (jsxRuntime.jsxs(Container$
|
|
5935
|
+
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: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".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
5936
|
? benefitsColor.selected
|
|
5931
5937
|
: 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
5938
|
};
|
|
@@ -5944,13 +5950,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5944
5950
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5945
5951
|
_a$2);
|
|
5946
5952
|
|
|
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$
|
|
5953
|
+
var CustomerDetails = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject([""], [""])));
|
|
5954
|
+
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"])));
|
|
5955
|
+
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"])));
|
|
5956
|
+
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"])));
|
|
5957
|
+
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"])));
|
|
5958
|
+
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"])));
|
|
5959
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$s, templateObject_6$n;
|
|
5954
5960
|
|
|
5955
5961
|
var NameWithStars = function (_a) {
|
|
5956
5962
|
var name = _a.name, size = _a.size;
|
|
@@ -5968,10 +5974,10 @@ var ResultFeedback = function (_a) {
|
|
|
5968
5974
|
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
5975
|
};
|
|
5970
5976
|
|
|
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$
|
|
5977
|
+
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; });
|
|
5978
|
+
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"])));
|
|
5979
|
+
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; });
|
|
5980
|
+
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
5981
|
var theme = _a.theme;
|
|
5976
5982
|
return theme.colors.pallete.secondary.color;
|
|
5977
5983
|
}, function (_a) {
|
|
@@ -5981,7 +5987,7 @@ var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __m
|
|
|
5981
5987
|
var theme = _a.theme, size = _a.size;
|
|
5982
5988
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5983
5989
|
});
|
|
5984
|
-
var templateObject_1$
|
|
5990
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E;
|
|
5985
5991
|
|
|
5986
5992
|
/* base styles & size variants */
|
|
5987
5993
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6056,10 +6062,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6056
6062
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
6057
6063
|
var infoText = buildInfoText(name, age, months);
|
|
6058
6064
|
var Component = componentByVariant[variant];
|
|
6059
|
-
return (jsxRuntime.jsxs(Container
|
|
6065
|
+
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
6066
|
};
|
|
6061
6067
|
|
|
6062
|
-
var Section = newStyled.div(templateObject_1$
|
|
6068
|
+
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
6069
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6064
6070
|
});
|
|
6065
6071
|
var CardHeader = function (_a) {
|
|
@@ -6070,16 +6076,16 @@ var CardFooter = function (_a) {
|
|
|
6070
6076
|
var children = _a.children;
|
|
6071
6077
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6072
6078
|
};
|
|
6073
|
-
var templateObject_1$
|
|
6079
|
+
var templateObject_1$1z;
|
|
6074
6080
|
|
|
6075
|
-
var Body = newStyled.div(templateObject_1$
|
|
6081
|
+
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
6082
|
var CardBody = function (_a) {
|
|
6077
6083
|
var children = _a.children;
|
|
6078
6084
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6079
6085
|
};
|
|
6080
|
-
var templateObject_1$
|
|
6086
|
+
var templateObject_1$1y;
|
|
6081
6087
|
|
|
6082
|
-
var Container
|
|
6088
|
+
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
6089
|
var flex = _a.flex;
|
|
6084
6090
|
return flex &&
|
|
6085
6091
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6094,23 +6100,23 @@ var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __
|
|
|
6094
6100
|
var Card$1 = function (_a) {
|
|
6095
6101
|
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
6102
|
var theme = useTheme();
|
|
6097
|
-
return (jsxRuntime.jsx(Container
|
|
6103
|
+
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
6104
|
};
|
|
6099
6105
|
var Card$2 = Object.assign(Card$1, {
|
|
6100
6106
|
Header: CardHeader,
|
|
6101
6107
|
Footer: CardFooter,
|
|
6102
6108
|
Body: CardBody,
|
|
6103
6109
|
});
|
|
6104
|
-
var templateObject_1$
|
|
6110
|
+
var templateObject_1$1x;
|
|
6105
6111
|
|
|
6106
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6107
|
-
var StyledContainer = newStyled.div(templateObject_2
|
|
6108
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6112
|
+
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"])));
|
|
6113
|
+
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"])));
|
|
6114
|
+
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
6115
|
var color = _a.color;
|
|
6110
6116
|
return color;
|
|
6111
6117
|
});
|
|
6112
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6113
|
-
var templateObject_1$
|
|
6118
|
+
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"])));
|
|
6119
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$P, templateObject_4$D;
|
|
6114
6120
|
|
|
6115
6121
|
var Minimalistic = function (_a) {
|
|
6116
6122
|
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 +6124,28 @@ var Minimalistic = function (_a) {
|
|
|
6118
6124
|
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
6125
|
};
|
|
6120
6126
|
|
|
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$
|
|
6127
|
+
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"])));
|
|
6128
|
+
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; });
|
|
6129
|
+
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; });
|
|
6130
|
+
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
6131
|
var Simple = function (_a) {
|
|
6126
6132
|
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
6133
|
var theme = useTheme();
|
|
6128
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
6134
|
+
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
6135
|
};
|
|
6130
|
-
var templateObject_1$
|
|
6136
|
+
var templateObject_1$1v, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
6131
6137
|
|
|
6132
6138
|
var Bundle = {
|
|
6133
6139
|
Minimalistic: Minimalistic,
|
|
6134
6140
|
Simple: Simple,
|
|
6135
6141
|
};
|
|
6136
6142
|
|
|
6137
|
-
var Container$
|
|
6143
|
+
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
6144
|
var displayBNPL = _a.displayBNPL;
|
|
6139
6145
|
return (displayBNPL ? 'flex' : 'none');
|
|
6140
6146
|
});
|
|
6141
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6142
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6147
|
+
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"])));
|
|
6148
|
+
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
6149
|
var BuyNowPayLater = function (_a) {
|
|
6144
6150
|
var _b;
|
|
6145
6151
|
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 +6155,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6149
6155
|
console.error('Icon', iconName, 'not found');
|
|
6150
6156
|
return null;
|
|
6151
6157
|
}
|
|
6152
|
-
return (jsxRuntime.jsx(Container$
|
|
6158
|
+
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
6159
|
};
|
|
6154
|
-
var templateObject_1$
|
|
6160
|
+
var templateObject_1$1u, templateObject_2$_, templateObject_3$N;
|
|
6155
6161
|
|
|
6156
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6162
|
+
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
6163
|
var Title$5 = function (_a) {
|
|
6158
6164
|
var title = _a.title;
|
|
6159
6165
|
var theme = useTheme();
|
|
6160
6166
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6161
6167
|
};
|
|
6162
|
-
var templateObject_1$
|
|
6168
|
+
var templateObject_1$1t;
|
|
6163
6169
|
|
|
6164
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6170
|
+
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
6171
|
var Promo = function (_a) {
|
|
6166
6172
|
var text = _a.text;
|
|
6167
6173
|
var theme = useTheme();
|
|
6168
6174
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6169
6175
|
};
|
|
6170
|
-
var templateObject_1$
|
|
6176
|
+
var templateObject_1$1s;
|
|
6171
6177
|
|
|
6172
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6178
|
+
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
6179
|
var Description$1 = function (_a) {
|
|
6174
6180
|
var text = _a.text;
|
|
6175
6181
|
var theme = useTheme();
|
|
6176
6182
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6177
6183
|
};
|
|
6178
|
-
var templateObject_1$
|
|
6184
|
+
var templateObject_1$1r;
|
|
6179
6185
|
|
|
6180
|
-
var Container$
|
|
6186
|
+
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
6187
|
var CloseButton$1 = function (_a) {
|
|
6182
6188
|
var onClick = _a.onClick, size = _a.size;
|
|
6183
6189
|
var theme = useTheme();
|
|
6184
|
-
return (jsxRuntime.jsx(Container$
|
|
6190
|
+
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
6191
|
};
|
|
6186
|
-
var templateObject_1$
|
|
6192
|
+
var templateObject_1$1q;
|
|
6187
6193
|
|
|
6188
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6194
|
+
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
6195
|
var backgroundColor = _a.backgroundColor;
|
|
6190
6196
|
return backgroundColor;
|
|
6191
6197
|
}, function (_a) {
|
|
@@ -6200,7 +6206,7 @@ var OfferBanner = function (_a) {
|
|
|
6200
6206
|
var theme = useTheme();
|
|
6201
6207
|
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
6208
|
};
|
|
6203
|
-
var templateObject_1$
|
|
6209
|
+
var templateObject_1$1p;
|
|
6204
6210
|
|
|
6205
6211
|
var CartProductItem = {
|
|
6206
6212
|
Title: Title$5,
|
|
@@ -6210,20 +6216,20 @@ var CartProductItem = {
|
|
|
6210
6216
|
CloseButton: CloseButton$1,
|
|
6211
6217
|
};
|
|
6212
6218
|
|
|
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$
|
|
6219
|
+
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"])));
|
|
6220
|
+
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"])));
|
|
6221
|
+
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"])));
|
|
6222
|
+
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"])));
|
|
6223
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6224
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6225
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6226
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6221
6227
|
var ClubPriceLabel = function (_a) {
|
|
6222
6228
|
var clubPrice = _a.clubPrice;
|
|
6223
6229
|
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$
|
|
6230
|
+
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
6231
|
};
|
|
6226
|
-
var templateObject_1$
|
|
6232
|
+
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
6233
|
|
|
6228
6234
|
var Spacing = function (_a) {
|
|
6229
6235
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6231,10 +6237,10 @@ var Spacing = function (_a) {
|
|
|
6231
6237
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6232
6238
|
};
|
|
6233
6239
|
|
|
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$
|
|
6240
|
+
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"])));
|
|
6241
|
+
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"])));
|
|
6242
|
+
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"])));
|
|
6243
|
+
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
6244
|
var index = _a.index;
|
|
6239
6245
|
return "".concat(6 + 3 * index, "px");
|
|
6240
6246
|
}, function (_a) {
|
|
@@ -6243,15 +6249,15 @@ var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __makeT
|
|
|
6243
6249
|
});
|
|
6244
6250
|
var StrengthBars = function (_a) {
|
|
6245
6251
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6246
|
-
return (jsxRuntime.jsxs(Container$
|
|
6252
|
+
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
6253
|
};
|
|
6248
|
-
var templateObject_1$
|
|
6254
|
+
var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A;
|
|
6249
6255
|
|
|
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$
|
|
6256
|
+
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"])));
|
|
6257
|
+
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"])));
|
|
6258
|
+
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"])));
|
|
6259
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6260
|
+
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
6261
|
var RegularPriceTag = function () {
|
|
6256
6262
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6257
6263
|
};
|
|
@@ -6300,16 +6306,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6300
6306
|
: exports.ComponentSize.XSmall;
|
|
6301
6307
|
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
6308
|
};
|
|
6303
|
-
return (jsxRuntime.jsxs(Container$
|
|
6309
|
+
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
6310
|
? finalPriceArray[0]
|
|
6305
6311
|
: (_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
6312
|
};
|
|
6307
|
-
var templateObject_1$
|
|
6313
|
+
var templateObject_1$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z, templateObject_5$q;
|
|
6308
6314
|
|
|
6309
|
-
var Container$
|
|
6310
|
-
var templateObject_1$
|
|
6315
|
+
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"])));
|
|
6316
|
+
var templateObject_1$1l;
|
|
6311
6317
|
|
|
6312
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6318
|
+
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
6319
|
var marginRight = _a.marginRight;
|
|
6314
6320
|
return marginRight;
|
|
6315
6321
|
});
|
|
@@ -6321,11 +6327,11 @@ var StarList = function (_a) {
|
|
|
6321
6327
|
width: theme.component.stars.element[size].width,
|
|
6322
6328
|
height: theme.component.stars.element[size].height,
|
|
6323
6329
|
};
|
|
6324
|
-
return (jsxRuntime.jsx(Container$
|
|
6330
|
+
return (jsxRuntime.jsx(Container$V, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6325
6331
|
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
6332
|
}) }, void 0));
|
|
6327
6333
|
};
|
|
6328
|
-
var templateObject_1$
|
|
6334
|
+
var templateObject_1$1k;
|
|
6329
6335
|
|
|
6330
6336
|
/* base styles & size variants */
|
|
6331
6337
|
var LabelStyles = {
|
|
@@ -6366,8 +6372,8 @@ var LabelStyles = {
|
|
|
6366
6372
|
});
|
|
6367
6373
|
},
|
|
6368
6374
|
};
|
|
6369
|
-
var Container$
|
|
6370
|
-
var templateObject_1$
|
|
6375
|
+
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"])));
|
|
6376
|
+
var templateObject_1$1j;
|
|
6371
6377
|
|
|
6372
6378
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6373
6379
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6387,7 +6393,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6387
6393
|
}),
|
|
6388
6394
|
];
|
|
6389
6395
|
});
|
|
6390
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6396
|
+
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
6397
|
var starsNumber = 5;
|
|
6392
6398
|
var Rating = function (_a) {
|
|
6393
6399
|
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 +6414,9 @@ var Rating = function (_a) {
|
|
|
6408
6414
|
href: reviewsContainerId,
|
|
6409
6415
|
}
|
|
6410
6416
|
: {};
|
|
6411
|
-
return (jsxRuntime.jsxs(Container$
|
|
6417
|
+
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
6418
|
};
|
|
6413
|
-
var templateObject_1$
|
|
6419
|
+
var templateObject_1$1i;
|
|
6414
6420
|
|
|
6415
6421
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6416
6422
|
var width = _a.width, height = _a.height;
|
|
@@ -6420,10 +6426,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6420
6426
|
height: height,
|
|
6421
6427
|
});
|
|
6422
6428
|
});
|
|
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$
|
|
6429
|
+
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"])));
|
|
6430
|
+
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"])));
|
|
6431
|
+
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"])));
|
|
6432
|
+
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
6433
|
var getStylesBySize$9 = function (size) {
|
|
6428
6434
|
switch (size) {
|
|
6429
6435
|
case exports.ComponentSize.Medium:
|
|
@@ -6449,15 +6455,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6449
6455
|
};
|
|
6450
6456
|
}
|
|
6451
6457
|
};
|
|
6452
|
-
var TopTagContainer$
|
|
6458
|
+
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
6459
|
var style = _a.style;
|
|
6454
6460
|
return style.width;
|
|
6455
6461
|
});
|
|
6456
|
-
var BottomTagContainer$
|
|
6462
|
+
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
6463
|
var style = _a.style;
|
|
6458
6464
|
return style.width;
|
|
6459
6465
|
});
|
|
6460
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6466
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6461
6467
|
var ProductItemMobile = function (_a) {
|
|
6462
6468
|
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
6469
|
display: false,
|
|
@@ -6514,9 +6520,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6514
6520
|
return jsx(Fragment, {}, void 0);
|
|
6515
6521
|
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
6522
|
};
|
|
6517
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6523
|
+
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
6524
|
};
|
|
6519
|
-
var templateObject_1$
|
|
6525
|
+
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$l, templateObject_7$e;
|
|
6520
6526
|
|
|
6521
6527
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6522
6528
|
var width = _a.width, height = _a.height;
|
|
@@ -6526,10 +6532,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6526
6532
|
height: height,
|
|
6527
6533
|
});
|
|
6528
6534
|
});
|
|
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$
|
|
6535
|
+
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; });
|
|
6536
|
+
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"])));
|
|
6537
|
+
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"])));
|
|
6538
|
+
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
6539
|
var getStylesBySize$8 = function (size) {
|
|
6534
6540
|
switch (size) {
|
|
6535
6541
|
case exports.ComponentSize.Medium:
|
|
@@ -6555,16 +6561,16 @@ var getStylesBySize$8 = function (size) {
|
|
|
6555
6561
|
};
|
|
6556
6562
|
}
|
|
6557
6563
|
};
|
|
6558
|
-
var TopTagContainer$
|
|
6564
|
+
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
6565
|
var style = _a.style;
|
|
6560
6566
|
return style.width;
|
|
6561
6567
|
});
|
|
6562
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6563
|
-
var BottomTagContainer$
|
|
6568
|
+
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"])));
|
|
6569
|
+
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
6570
|
var style = _a.style;
|
|
6565
6571
|
return style.width;
|
|
6566
6572
|
});
|
|
6567
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
6573
|
+
var MarginTopContainer = newStyled.div(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6568
6574
|
var ProductItemTK = function (_a) {
|
|
6569
6575
|
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
6576
|
display: false,
|
|
@@ -6608,26 +6614,26 @@ var ProductItemTK = function (_a) {
|
|
|
6608
6614
|
: undefined }, void 0));
|
|
6609
6615
|
};
|
|
6610
6616
|
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$
|
|
6617
|
+
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
6618
|
// @ts-ignore
|
|
6613
6619
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6614
6620
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6615
6621
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6616
6622
|
} }, { 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
6623
|
};
|
|
6618
|
-
var templateObject_1$
|
|
6624
|
+
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
6625
|
|
|
6620
|
-
var Container$
|
|
6626
|
+
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
6627
|
function withProductGrid(ProductItemComponent, data) {
|
|
6622
6628
|
function WithProductGrid(props) {
|
|
6623
|
-
return (jsxRuntime.jsx(Container$
|
|
6629
|
+
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
6630
|
}
|
|
6625
6631
|
/* istanbul ignore next */
|
|
6626
6632
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6627
6633
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6628
6634
|
return WithProductGrid;
|
|
6629
6635
|
}
|
|
6630
|
-
var templateObject_1$
|
|
6636
|
+
var templateObject_1$1f;
|
|
6631
6637
|
|
|
6632
6638
|
var Collection = {
|
|
6633
6639
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6674,11 +6680,11 @@ var OutOfStock = function (_a) {
|
|
|
6674
6680
|
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
6681
|
};
|
|
6676
6682
|
|
|
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$
|
|
6683
|
+
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"])));
|
|
6684
|
+
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6685
|
+
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"])));
|
|
6686
|
+
var Span = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6687
|
+
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
6688
|
var Label$3 = function (_a) {
|
|
6683
6689
|
var label = _a.label, values = _a.values;
|
|
6684
6690
|
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 +6702,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6696
6702
|
Option: Option,
|
|
6697
6703
|
OptionsContainer: OptionsContainer,
|
|
6698
6704
|
});
|
|
6699
|
-
var templateObject_1$
|
|
6705
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$n;
|
|
6700
6706
|
|
|
6701
|
-
var Container$
|
|
6707
|
+
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
6708
|
var borderColor = _a.borderColor;
|
|
6703
6709
|
return borderColor;
|
|
6704
6710
|
}, function (_a) {
|
|
6705
6711
|
var noStock = _a.noStock;
|
|
6706
6712
|
return (noStock ? '0.4' : '1');
|
|
6707
6713
|
});
|
|
6708
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6714
|
+
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
6715
|
var PatternSelector = function (_a) {
|
|
6710
6716
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6711
6717
|
var theme = useTheme();
|
|
6712
6718
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6713
|
-
return (jsxRuntime.jsx(Container$
|
|
6719
|
+
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
6720
|
};
|
|
6715
|
-
var templateObject_1$
|
|
6721
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6716
6722
|
|
|
6717
6723
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6718
6724
|
if (options == null || options.length === 0) {
|
|
@@ -6771,21 +6777,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6771
6777
|
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
6778
|
};
|
|
6773
6779
|
|
|
6774
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6775
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6776
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6780
|
+
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'); });
|
|
6781
|
+
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"])));
|
|
6782
|
+
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
6783
|
return props.rightToLeft &&
|
|
6778
6784
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6779
6785
|
});
|
|
6780
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6781
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6782
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6786
|
+
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; });
|
|
6787
|
+
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; });
|
|
6788
|
+
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
6789
|
var CrossSellCheckbox = function (_a) {
|
|
6784
6790
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6785
6791
|
var theme = useTheme();
|
|
6786
6792
|
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
6793
|
};
|
|
6788
|
-
var templateObject_1$
|
|
6794
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$m, templateObject_6$j;
|
|
6789
6795
|
|
|
6790
6796
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6791
6797
|
__proto__: null,
|
|
@@ -6813,7 +6819,7 @@ var sizeMapper = (_a = {},
|
|
|
6813
6819
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6814
6820
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6815
6821
|
_a);
|
|
6816
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6822
|
+
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
6823
|
var wide = _a.wide;
|
|
6818
6824
|
return (wide ? '100%' : 'fit-content');
|
|
6819
6825
|
}, function (_a) {
|
|
@@ -6835,8 +6841,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1a || (templateObj
|
|
|
6835
6841
|
var theme = _a.theme;
|
|
6836
6842
|
return theme.colors.text.disabled;
|
|
6837
6843
|
});
|
|
6838
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6839
|
-
var templateObject_1$
|
|
6844
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6845
|
+
var templateObject_1$1b, templateObject_2$R;
|
|
6840
6846
|
|
|
6841
6847
|
var BaseCTA = function (_a) {
|
|
6842
6848
|
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 +6909,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6903
6909
|
} }), void 0));
|
|
6904
6910
|
};
|
|
6905
6911
|
|
|
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$
|
|
6912
|
+
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; });
|
|
6913
|
+
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"])));
|
|
6914
|
+
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; });
|
|
6915
|
+
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
6916
|
var Note = function (_a) {
|
|
6911
6917
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6912
6918
|
var theme = useTheme();
|
|
6913
|
-
return (jsxRuntime.jsxs(Container$
|
|
6919
|
+
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
6920
|
};
|
|
6915
|
-
var templateObject_1$
|
|
6921
|
+
var templateObject_1$1a, templateObject_2$Q, templateObject_3$F, templateObject_4$u;
|
|
6916
6922
|
|
|
6917
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6923
|
+
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
6924
|
var theme = _a.theme;
|
|
6919
6925
|
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
6926
|
});
|
|
6921
|
-
var Line = newStyled.div(templateObject_2$
|
|
6922
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6927
|
+
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; });
|
|
6928
|
+
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
6929
|
flexDirection: ['column', 'row'],
|
|
6924
6930
|
}));
|
|
6925
|
-
var Col = newStyled.div(templateObject_4$
|
|
6931
|
+
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
6932
|
margin: ['0', '0 1.25rem'],
|
|
6927
6933
|
marginBottom: ['1.875rem', '0'],
|
|
6928
6934
|
alignItems: ['center', 'flex-start'],
|
|
6929
6935
|
textAlign: ['center', 'inherit'],
|
|
6930
6936
|
width: ['100%', 'inherit'],
|
|
6931
6937
|
}));
|
|
6932
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
6938
|
+
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
6939
|
marginRight: ['0', '0.438rem'],
|
|
6934
6940
|
marginBottom: ['10px', '0'],
|
|
6935
6941
|
width: ['auto', '1.5rem'],
|
|
6936
6942
|
}));
|
|
6937
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6943
|
+
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
6944
|
display: ['block', 'flex'],
|
|
6939
6945
|
}), function (_a) {
|
|
6940
6946
|
var theme = _a.theme;
|
|
6941
6947
|
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
6948
|
});
|
|
6943
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6949
|
+
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
6950
|
var theme = _a.theme;
|
|
6945
6951
|
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
6952
|
}, function (_a) {
|
|
@@ -6951,22 +6957,22 @@ var SectionDetails = newStyled.p(templateObject_7$b || (templateObject_7$b = __m
|
|
|
6951
6957
|
})
|
|
6952
6958
|
: '';
|
|
6953
6959
|
});
|
|
6954
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
6960
|
+
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
6961
|
var DeliveryDetails = function (_a) {
|
|
6956
6962
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6957
6963
|
var theme = useTheme();
|
|
6958
6964
|
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
6965
|
};
|
|
6960
|
-
var templateObject_1$
|
|
6966
|
+
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
6967
|
|
|
6962
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6968
|
+
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
6969
|
var top = _a.top;
|
|
6964
6970
|
return top;
|
|
6965
6971
|
}, function (_a) {
|
|
6966
6972
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6967
6973
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6968
6974
|
});
|
|
6969
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6975
|
+
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
6976
|
var height = _a.height;
|
|
6971
6977
|
return height;
|
|
6972
6978
|
}, function (_a) {
|
|
@@ -7013,20 +7019,20 @@ var Drawer = function (_a) {
|
|
|
7013
7019
|
}, [isOpen, onClose, onOpen]);
|
|
7014
7020
|
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
7021
|
};
|
|
7016
|
-
var templateObject_1$
|
|
7022
|
+
var templateObject_1$18, templateObject_2$O;
|
|
7017
7023
|
|
|
7018
7024
|
var TooltipArrow = function (_a) {
|
|
7019
7025
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7020
7026
|
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
7027
|
};
|
|
7022
7028
|
|
|
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$
|
|
7029
|
+
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"])));
|
|
7030
|
+
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"])));
|
|
7031
|
+
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"])));
|
|
7032
|
+
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"])));
|
|
7033
|
+
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; });
|
|
7034
|
+
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; });
|
|
7035
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$k, templateObject_6$h;
|
|
7030
7036
|
|
|
7031
7037
|
var DropdownListIcons = function (_a) {
|
|
7032
7038
|
var items = _a.items;
|
|
@@ -7039,13 +7045,13 @@ var Dropdown = function (_a) {
|
|
|
7039
7045
|
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
7046
|
};
|
|
7041
7047
|
|
|
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$
|
|
7048
|
+
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"])));
|
|
7049
|
+
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"])));
|
|
7050
|
+
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7051
|
+
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"])));
|
|
7052
|
+
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"])));
|
|
7053
|
+
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"])));
|
|
7054
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$j, templateObject_6$g;
|
|
7049
7055
|
|
|
7050
7056
|
var SizeDropdown = function (_a) {
|
|
7051
7057
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7068,10 +7074,10 @@ var SizeDropdown = function (_a) {
|
|
|
7068
7074
|
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
7075
|
};
|
|
7070
7076
|
|
|
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$
|
|
7077
|
+
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; });
|
|
7078
|
+
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; });
|
|
7079
|
+
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"])));
|
|
7080
|
+
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
7081
|
var DropdownDialog = function (_a) {
|
|
7076
7082
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7077
7083
|
var theme = useTheme$1();
|
|
@@ -7080,7 +7086,7 @@ var DropdownDialog = function (_a) {
|
|
|
7080
7086
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7081
7087
|
}) }), void 0) }), void 0));
|
|
7082
7088
|
};
|
|
7083
|
-
var templateObject_1$
|
|
7089
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$B, templateObject_4$q;
|
|
7084
7090
|
|
|
7085
7091
|
function FilteringDropdown(_a) {
|
|
7086
7092
|
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 +7119,29 @@ function FilteringDropdown(_a) {
|
|
|
7113
7119
|
}) }, void 0)] }), void 0));
|
|
7114
7120
|
}
|
|
7115
7121
|
|
|
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$
|
|
7122
|
+
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; });
|
|
7123
|
+
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; });
|
|
7124
|
+
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"])));
|
|
7125
|
+
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
7126
|
var Accordion = function (_a) {
|
|
7121
7127
|
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
7128
|
var theme = useTheme();
|
|
7123
7129
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7124
|
-
return (jsxRuntime.jsxs(Container$
|
|
7130
|
+
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
7131
|
};
|
|
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$
|
|
7132
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$A, templateObject_4$p;
|
|
7133
|
+
|
|
7134
|
+
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; });
|
|
7135
|
+
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"])));
|
|
7136
|
+
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"])));
|
|
7137
|
+
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"])));
|
|
7138
|
+
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; });
|
|
7139
|
+
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; });
|
|
7140
|
+
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'); });
|
|
7141
|
+
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; });
|
|
7142
|
+
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
7143
|
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$
|
|
7144
|
+
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
7145
|
|
|
7140
7146
|
var getStylesBySize$7 = function (size, theme) {
|
|
7141
7147
|
switch (size) {
|
|
@@ -7200,9 +7206,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7200
7206
|
} }), id: id }, void 0));
|
|
7201
7207
|
};
|
|
7202
7208
|
|
|
7203
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7204
|
-
var LI = newStyled.li(templateObject_2$
|
|
7205
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7209
|
+
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"])));
|
|
7210
|
+
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; });
|
|
7211
|
+
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
7212
|
var Tags = function (_a) {
|
|
7207
7213
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7208
7214
|
var theme = useTheme();
|
|
@@ -7210,7 +7216,7 @@ var Tags = function (_a) {
|
|
|
7210
7216
|
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
7217
|
}) }), void 0));
|
|
7212
7218
|
};
|
|
7213
|
-
var templateObject_1$
|
|
7219
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$y;
|
|
7214
7220
|
|
|
7215
7221
|
var Filters = function (_a) {
|
|
7216
7222
|
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 +7352,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7346
7352
|
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
7353
|
};
|
|
7348
7354
|
|
|
7349
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7350
|
-
var Container$
|
|
7355
|
+
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"])));
|
|
7356
|
+
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
7357
|
var FitGuarantee = function (_a) {
|
|
7352
7358
|
var _b;
|
|
7353
7359
|
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 +7364,17 @@ var FitGuarantee = function (_a) {
|
|
|
7358
7364
|
console.error('Icon', iconName, 'not found');
|
|
7359
7365
|
return null;
|
|
7360
7366
|
}
|
|
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$
|
|
7367
|
+
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
7368
|
margin: '0.1rem 0',
|
|
7363
7369
|
width: '100%',
|
|
7364
7370
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7365
7371
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7366
7372
|
} }, { 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
7373
|
};
|
|
7368
|
-
var templateObject_1$
|
|
7374
|
+
var templateObject_1$11, templateObject_2$H;
|
|
7369
7375
|
|
|
7370
|
-
var Container$
|
|
7371
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7376
|
+
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"])));
|
|
7377
|
+
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
7378
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7373
7379
|
border: 'none',
|
|
7374
7380
|
background: 'transparent',
|
|
@@ -7381,11 +7387,11 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7381
7387
|
var FitPredictor = function (_a) {
|
|
7382
7388
|
var onClick = _a.onClick;
|
|
7383
7389
|
var theme = useTheme();
|
|
7384
|
-
return (jsxs(Container$
|
|
7390
|
+
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
7391
|
};
|
|
7386
|
-
var templateObject_1
|
|
7392
|
+
var templateObject_1$10, templateObject_2$G;
|
|
7387
7393
|
|
|
7388
|
-
var Button$
|
|
7394
|
+
var Button$7 = newStyled.button(function () { return ({
|
|
7389
7395
|
background: 'transparent',
|
|
7390
7396
|
border: 'none',
|
|
7391
7397
|
cursor: 'pointer',
|
|
@@ -7397,7 +7403,7 @@ var Direction;
|
|
|
7397
7403
|
})(Direction || (Direction = {}));
|
|
7398
7404
|
var ArrowButton$1 = function (_a) {
|
|
7399
7405
|
var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
|
|
7400
|
-
return (jsxRuntime.jsx(Button$
|
|
7406
|
+
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
7407
|
};
|
|
7402
7408
|
|
|
7403
7409
|
function _defineProperty(obj, key, value) {
|
|
@@ -11627,14 +11633,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11627
11633
|
return Slider;
|
|
11628
11634
|
}(React__default["default"].Component);
|
|
11629
11635
|
|
|
11630
|
-
var StyledSlider = newStyled(Slider)(templateObject_1
|
|
11636
|
+
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
11637
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11632
11638
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11633
11639
|
}, function (_a) {
|
|
11634
11640
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11635
11641
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11636
11642
|
});
|
|
11637
|
-
var templateObject_1
|
|
11643
|
+
var templateObject_1$$;
|
|
11638
11644
|
|
|
11639
11645
|
var getStylesBySize$6 = function (size) {
|
|
11640
11646
|
// rem units
|
|
@@ -11693,7 +11699,7 @@ var SliderNavigation = function (_a) {
|
|
|
11693
11699
|
} }, { 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
11700
|
};
|
|
11695
11701
|
|
|
11696
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11702
|
+
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
11703
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11698
11704
|
return borderRadiusVariant &&
|
|
11699
11705
|
"\nborder-radius: 20px;\n";
|
|
@@ -11708,11 +11714,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
11708
11714
|
var theme = useTheme();
|
|
11709
11715
|
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
11716
|
};
|
|
11711
|
-
var templateObject_1$
|
|
11717
|
+
var templateObject_1$_;
|
|
11712
11718
|
|
|
11713
|
-
var horizontalStyles = css(templateObject_1$
|
|
11714
|
-
var verticalStyles = css(templateObject_2$
|
|
11715
|
-
var Container$
|
|
11719
|
+
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"])));
|
|
11720
|
+
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"])));
|
|
11721
|
+
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
11722
|
var position = _a.position;
|
|
11717
11723
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11718
11724
|
}, function (_a) {
|
|
@@ -11720,11 +11726,11 @@ var Container$K = newStyled.div(templateObject_3$w || (templateObject_3$w = __ma
|
|
|
11720
11726
|
return hasOverflowArrows &&
|
|
11721
11727
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11722
11728
|
});
|
|
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$
|
|
11729
|
+
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"])));
|
|
11730
|
+
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"])));
|
|
11731
|
+
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"])));
|
|
11732
|
+
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"])));
|
|
11733
|
+
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
11734
|
var ImagePreviewList = function (_a) {
|
|
11729
11735
|
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
11736
|
var handleScrollVerticalPrev = function () {
|
|
@@ -11735,13 +11741,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11735
11741
|
var element = document.querySelector(".imageListContainer");
|
|
11736
11742
|
element.scrollBy(0, 200);
|
|
11737
11743
|
};
|
|
11738
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
11744
|
+
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
11745
|
arrowWidth: 0.75,
|
|
11740
11746
|
arrowHeight: 1.25,
|
|
11741
11747
|
arrowPadding: 1.625,
|
|
11742
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$
|
|
11748
|
+
}, 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
11749
|
};
|
|
11744
|
-
var templateObject_1$
|
|
11750
|
+
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
11751
|
|
|
11746
11752
|
var propTypes = {exports: {}};
|
|
11747
11753
|
|
|
@@ -13334,25 +13340,25 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13334
13340
|
afterZoomOut: PropTypes.func
|
|
13335
13341
|
} : {};
|
|
13336
13342
|
|
|
13337
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13338
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13339
|
-
var templateObject_1$
|
|
13343
|
+
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); });
|
|
13344
|
+
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; });
|
|
13345
|
+
var templateObject_1$Y, templateObject_2$E;
|
|
13340
13346
|
|
|
13341
13347
|
var ProgressBar$1 = function (_a) {
|
|
13342
13348
|
var progress = _a.progress, hide = _a.hide;
|
|
13343
13349
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13344
13350
|
};
|
|
13345
13351
|
|
|
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$
|
|
13352
|
+
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"])));
|
|
13353
|
+
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; });
|
|
13354
|
+
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"])));
|
|
13355
|
+
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"])));
|
|
13356
|
+
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"])));
|
|
13357
|
+
var templateObject_1$X, templateObject_2$D, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13352
13358
|
|
|
13353
13359
|
var Video$1 = function (_a) {
|
|
13354
13360
|
var _b, _c, _d, _e;
|
|
13355
|
-
var source = _a.source, thumbnail = _a.thumbnail;
|
|
13361
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height;
|
|
13356
13362
|
var videoRef = React$2.useRef(null);
|
|
13357
13363
|
var _f = React$2.useState(true), isLoading = _f[0], setIsLoading = _f[1];
|
|
13358
13364
|
var _g = React$2.useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
|
|
@@ -13387,43 +13393,43 @@ var Video$1 = function (_a) {
|
|
|
13387
13393
|
setVideoProgress(videoRef.current.currentTime);
|
|
13388
13394
|
}
|
|
13389
13395
|
};
|
|
13390
|
-
return (jsxRuntime.jsxs(Container$
|
|
13396
|
+
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
13397
|
};
|
|
13392
13398
|
|
|
13393
|
-
var Container$
|
|
13399
|
+
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
13400
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13395
13401
|
return borderRadiusVariant &&
|
|
13396
13402
|
"\n border-radius: 40px;\n ";
|
|
13397
13403
|
});
|
|
13398
|
-
var TopTagContainer$
|
|
13399
|
-
var BottomTagContainer$
|
|
13400
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13401
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13402
|
-
var
|
|
13404
|
+
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'); });
|
|
13405
|
+
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"])));
|
|
13406
|
+
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"])));
|
|
13407
|
+
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"])));
|
|
13408
|
+
var ImageProductSlide$1 = function (_a) {
|
|
13403
13409
|
var _b;
|
|
13404
|
-
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
13410
|
+
var content = _a.content, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA, withZoom = _a.withZoom;
|
|
13405
13411
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13406
13412
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13407
|
-
return (jsxRuntime.jsxs(Container$
|
|
13413
|
+
return (jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [withZoom ? (jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13408
13414
|
alt: content.alt,
|
|
13409
13415
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13410
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$
|
|
13416
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsxRuntime.jsx(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? '480px' : '720px', src: source, alt: content.alt }, void 0)), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { children: bottomTag }, void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13411
13417
|
};
|
|
13412
|
-
var templateObject_1$
|
|
13418
|
+
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$f;
|
|
13413
13419
|
|
|
13414
|
-
var Container$
|
|
13420
|
+
var Container$I = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
13415
13421
|
var ProductGallery = function (_a) {
|
|
13416
|
-
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
13422
|
+
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e;
|
|
13417
13423
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
13418
|
-
var
|
|
13424
|
+
var _f = React$2.useState(initialValue), selectedImage = _f[0], setSelectedImage = _f[1];
|
|
13419
13425
|
React$2.useEffect(function () {
|
|
13420
13426
|
setSelectedImage(initialValue);
|
|
13421
13427
|
}, [initialValue]);
|
|
13422
|
-
return (jsxRuntime.jsxs(Container$
|
|
13428
|
+
return (jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13423
13429
|
setSelectedImage(value);
|
|
13424
|
-
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(
|
|
13430
|
+
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13425
13431
|
};
|
|
13426
|
-
var templateObject_1$
|
|
13432
|
+
var templateObject_1$V;
|
|
13427
13433
|
|
|
13428
13434
|
var getStylesBySize$5 = function (size) {
|
|
13429
13435
|
switch (size) {
|
|
@@ -13444,7 +13450,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13444
13450
|
};
|
|
13445
13451
|
}
|
|
13446
13452
|
};
|
|
13447
|
-
var Container$
|
|
13453
|
+
var Container$H = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
13448
13454
|
var backgroundColor = _a.backgroundColor;
|
|
13449
13455
|
return backgroundColor;
|
|
13450
13456
|
}, function (_a) {
|
|
@@ -13472,11 +13478,11 @@ var Container$G = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
13472
13478
|
var IconButton = function (_a) {
|
|
13473
13479
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13474
13480
|
var theme = useTheme();
|
|
13475
|
-
return (jsxRuntime.jsx(Container$
|
|
13481
|
+
return (jsxRuntime.jsx(Container$H, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13476
13482
|
};
|
|
13477
|
-
var templateObject_1$
|
|
13483
|
+
var templateObject_1$U;
|
|
13478
13484
|
|
|
13479
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13485
|
+
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13480
13486
|
var AmazonButton = function (_a) {
|
|
13481
13487
|
var onClick = _a.onClick;
|
|
13482
13488
|
return (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13485,9 +13491,9 @@ var PaypalButton = function (_a) {
|
|
|
13485
13491
|
var onClick = _a.onClick;
|
|
13486
13492
|
return (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13487
13493
|
};
|
|
13488
|
-
var templateObject_1$
|
|
13494
|
+
var templateObject_1$T;
|
|
13489
13495
|
|
|
13490
|
-
var Container$
|
|
13496
|
+
var Container$G = newStyled.div(function (props) { return ({
|
|
13491
13497
|
height: 'auto',
|
|
13492
13498
|
textAlign: 'center',
|
|
13493
13499
|
justifyContent: 'center',
|
|
@@ -13537,12 +13543,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13537
13543
|
textAlign: 'center',
|
|
13538
13544
|
lineHeight: '18px',
|
|
13539
13545
|
};
|
|
13540
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
13546
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$G, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13541
13547
|
};
|
|
13542
13548
|
|
|
13543
|
-
var Container$
|
|
13544
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13545
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13549
|
+
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'); });
|
|
13550
|
+
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'); });
|
|
13551
|
+
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13546
13552
|
var titlePosition = _a.titlePosition;
|
|
13547
13553
|
return titlePosition == 'center' &&
|
|
13548
13554
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13550,15 +13556,15 @@ var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
|
|
|
13550
13556
|
var ImageCardWithDescription = function (_a) {
|
|
13551
13557
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13552
13558
|
var isMobile = useWindowDimensions().isMobile;
|
|
13553
|
-
return (jsxRuntime.jsxs(Container$
|
|
13559
|
+
return (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13554
13560
|
};
|
|
13555
|
-
var templateObject_1$
|
|
13561
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$u;
|
|
13556
13562
|
|
|
13557
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
13563
|
+
var Label$2 = newStyled.span(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
13558
13564
|
var color = _a.color;
|
|
13559
13565
|
return color;
|
|
13560
13566
|
});
|
|
13561
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13567
|
+
var MandatoryIcon = newStyled.span(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13562
13568
|
var color = _a.color;
|
|
13563
13569
|
return color;
|
|
13564
13570
|
});
|
|
@@ -13567,7 +13573,7 @@ var InputLabel = function (_a) {
|
|
|
13567
13573
|
var theme = useTheme();
|
|
13568
13574
|
return (jsxRuntime.jsxs(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13569
13575
|
};
|
|
13570
|
-
var templateObject_1$
|
|
13576
|
+
var templateObject_1$R, templateObject_2$A;
|
|
13571
13577
|
|
|
13572
13578
|
var containerByStatus = function (theme, status) {
|
|
13573
13579
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13576,12 +13582,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13576
13582
|
return theme.colors.semantic.urgent.color;
|
|
13577
13583
|
return '';
|
|
13578
13584
|
};
|
|
13579
|
-
var Container$
|
|
13585
|
+
var Container$E = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13580
13586
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13581
13587
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13582
13588
|
});
|
|
13583
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13584
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13589
|
+
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"])));
|
|
13590
|
+
var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
13585
13591
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13586
13592
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13587
13593
|
}, function (_a) {
|
|
@@ -13636,11 +13642,11 @@ var StyledInput = newStyled.input(templateObject_3$s || (templateObject_3$s = __
|
|
|
13636
13642
|
return hasValue &&
|
|
13637
13643
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13638
13644
|
});
|
|
13639
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13645
|
+
var InputWrapper = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
13640
13646
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13641
13647
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13642
13648
|
});
|
|
13643
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13649
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
13644
13650
|
var theme = _a.theme;
|
|
13645
13651
|
return theme.component.input.placeholderColor;
|
|
13646
13652
|
}, function (_a) {
|
|
@@ -13653,8 +13659,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$d || (templateObject_5
|
|
|
13653
13659
|
var theme = _a.theme;
|
|
13654
13660
|
return theme.component.input.lineHeight;
|
|
13655
13661
|
});
|
|
13656
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13657
|
-
var templateObject_1$
|
|
13662
|
+
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"])));
|
|
13663
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$t, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
13658
13664
|
|
|
13659
13665
|
var BaseInput = function (_a) {
|
|
13660
13666
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -13677,14 +13683,14 @@ var BaseInput = function (_a) {
|
|
|
13677
13683
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13678
13684
|
}, [status]);
|
|
13679
13685
|
var hasValue = Boolean(value);
|
|
13680
|
-
return (jsxRuntime.jsxs(Container$
|
|
13686
|
+
return (jsxRuntime.jsxs(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13681
13687
|
onChange(event.target.value, event);
|
|
13682
13688
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
13683
13689
|
onChange('', { target: { value: '' } });
|
|
13684
13690
|
}, "data-testid": "clear-value" }, { children: jsxRuntime.jsx(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
13685
13691
|
};
|
|
13686
13692
|
|
|
13687
|
-
var Button$
|
|
13693
|
+
var Button$5 = function (_a) {
|
|
13688
13694
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
13689
13695
|
if (variant === 'primary') {
|
|
13690
13696
|
return jsxRuntime.jsx(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -13698,11 +13704,11 @@ var Button$4 = function (_a) {
|
|
|
13698
13704
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13699
13705
|
};
|
|
13700
13706
|
|
|
13701
|
-
var Container$
|
|
13707
|
+
var Container$D = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
13702
13708
|
var theme = _a.theme;
|
|
13703
13709
|
return theme.component.inputCustom.input.borderRadius;
|
|
13704
13710
|
});
|
|
13705
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13711
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", "\n"])), function (_a) {
|
|
13706
13712
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13707
13713
|
return defaultRounded
|
|
13708
13714
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13717,23 +13723,23 @@ var Custom = function (_a) {
|
|
|
13717
13723
|
text: text,
|
|
13718
13724
|
disabled: rest.disabled,
|
|
13719
13725
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13720
|
-
return (jsxRuntime.jsx(Container$
|
|
13726
|
+
return (jsxRuntime.jsx(Container$D, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13721
13727
|
};
|
|
13722
|
-
var templateObject_1$
|
|
13728
|
+
var templateObject_1$P, templateObject_2$y;
|
|
13723
13729
|
|
|
13724
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13730
|
+
var SuccessContainer = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13725
13731
|
var size = _a.size;
|
|
13726
13732
|
return (size === 'small' ? '36px' : '');
|
|
13727
13733
|
});
|
|
13728
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13729
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13734
|
+
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"])));
|
|
13735
|
+
var SuccessText = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
13730
13736
|
var Success = function (_a) {
|
|
13731
13737
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13732
13738
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13733
13739
|
};
|
|
13734
|
-
var templateObject_1$
|
|
13740
|
+
var templateObject_1$O, templateObject_2$x, templateObject_3$s;
|
|
13735
13741
|
|
|
13736
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13742
|
+
var ButtonContainer = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13737
13743
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13738
13744
|
return status === exports.InputValidationType.Empty &&
|
|
13739
13745
|
type === 'primary' &&
|
|
@@ -13750,16 +13756,16 @@ var BasePlusButton = function (_a) {
|
|
|
13750
13756
|
}
|
|
13751
13757
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13752
13758
|
};
|
|
13753
|
-
var templateObject_1$
|
|
13759
|
+
var templateObject_1$N;
|
|
13754
13760
|
|
|
13755
|
-
var Container$
|
|
13756
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13761
|
+
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"])));
|
|
13762
|
+
var IconContainer$2 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
13757
13763
|
var BasePlusIcon = function (_a) {
|
|
13758
13764
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13759
13765
|
var theme = useTheme();
|
|
13760
|
-
return (jsxRuntime.jsx(Container$
|
|
13766
|
+
return (jsxRuntime.jsx(Container$C, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13761
13767
|
};
|
|
13762
|
-
var templateObject_1$
|
|
13768
|
+
var templateObject_1$M, templateObject_2$w;
|
|
13763
13769
|
|
|
13764
13770
|
var Input$3 = {
|
|
13765
13771
|
Simple: BaseInput,
|
|
@@ -13768,7 +13774,43 @@ var Input$3 = {
|
|
|
13768
13774
|
SimplePlusIcon: BasePlusIcon,
|
|
13769
13775
|
};
|
|
13770
13776
|
|
|
13771
|
-
|
|
13777
|
+
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
13778
|
+
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13779
|
+
var firstClientX = React$2.useRef(0);
|
|
13780
|
+
var clientX = React$2.useRef(0);
|
|
13781
|
+
var preventTouch = React$2.useCallback(function (e) {
|
|
13782
|
+
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
13783
|
+
// Vertical scrolling does not work when you start swiping horizontally.
|
|
13784
|
+
if (Math.abs(clientX.current) > dragThreshold) {
|
|
13785
|
+
if (e.cancelable) {
|
|
13786
|
+
e.preventDefault();
|
|
13787
|
+
e.returnValue = false;
|
|
13788
|
+
}
|
|
13789
|
+
return false;
|
|
13790
|
+
}
|
|
13791
|
+
return true;
|
|
13792
|
+
}, [dragThreshold]);
|
|
13793
|
+
var touchStart = React$2.useCallback(function (e) {
|
|
13794
|
+
firstClientX.current = e.touches[0].clientX;
|
|
13795
|
+
}, []);
|
|
13796
|
+
React$2.useEffect(function () {
|
|
13797
|
+
var current = ref.current;
|
|
13798
|
+
if (current) {
|
|
13799
|
+
current.addEventListener('touchstart', touchStart);
|
|
13800
|
+
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
13801
|
+
}
|
|
13802
|
+
return function () {
|
|
13803
|
+
if (current) {
|
|
13804
|
+
current.removeEventListener('touchstart', touchStart);
|
|
13805
|
+
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
13806
|
+
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
13807
|
+
current.removeEventListener('touchmove', preventTouch);
|
|
13808
|
+
}
|
|
13809
|
+
};
|
|
13810
|
+
}, [preventTouch, ref, touchStart]);
|
|
13811
|
+
}
|
|
13812
|
+
|
|
13813
|
+
var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
13772
13814
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13773
13815
|
return borderRadiusVariant &&
|
|
13774
13816
|
"\n border-radius: 40px;\n ";
|
|
@@ -13777,11 +13819,11 @@ var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13777
13819
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13778
13820
|
});
|
|
13779
13821
|
// max-height: 31.875rem;
|
|
13780
|
-
var TopTagContainer$
|
|
13781
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
13782
|
-
var BottomTagContainer$
|
|
13783
|
-
var NavButtonContainer$
|
|
13784
|
-
var Button$
|
|
13822
|
+
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'); });
|
|
13823
|
+
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"])));
|
|
13824
|
+
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"])));
|
|
13825
|
+
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"])));
|
|
13826
|
+
var Button$4 = newStyled.button(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
13785
13827
|
var settings$1 = {
|
|
13786
13828
|
dots: true,
|
|
13787
13829
|
infinite: false,
|
|
@@ -13790,13 +13832,13 @@ var settings$1 = {
|
|
|
13790
13832
|
slidesToScroll: 1,
|
|
13791
13833
|
initialSlide: 0,
|
|
13792
13834
|
};
|
|
13793
|
-
var
|
|
13835
|
+
var ImageProductSlide = function (_a) {
|
|
13794
13836
|
var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
13795
13837
|
var slick = React$2.useRef(null);
|
|
13796
13838
|
var sliderWrapper = React$2.useRef(null);
|
|
13797
13839
|
React$2.useRef(null);
|
|
13798
13840
|
var _c = React$2.useState(false); _c[0]; var setIsPlaying = _c[1];
|
|
13799
|
-
usePreventVerticalScroll
|
|
13841
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
13800
13842
|
var onButtonClick = React$2.useCallback(function (i) {
|
|
13801
13843
|
var _a;
|
|
13802
13844
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -13826,62 +13868,27 @@ var ImageProductWithTags = function (_a) {
|
|
|
13826
13868
|
}
|
|
13827
13869
|
}
|
|
13828
13870
|
}, [contents, selectedValue]);
|
|
13829
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
13871
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$B, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
13830
13872
|
var _a;
|
|
13831
13873
|
var activeSlide = contents[e];
|
|
13832
13874
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13833
13875
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13834
13876
|
autoplay ? _playVideo() : _stopVideo();
|
|
13835
|
-
} }, settings$1, { nextArrow: jsxRuntime.jsx(NavButtonContainer$
|
|
13877
|
+
} }, settings$1, { nextArrow: jsxRuntime.jsx(NavButtonContainer$2, { children: jsxRuntime.jsx(Button$4, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$2, { children: jsxRuntime.jsx(Button$4, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content) {
|
|
13836
13878
|
var _a;
|
|
13837
13879
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13838
13880
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
13839
|
-
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$
|
|
13881
|
+
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13840
13882
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13841
13883
|
};
|
|
13842
|
-
|
|
13843
|
-
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13844
|
-
var firstClientX = React$2.useRef(0);
|
|
13845
|
-
var clientX = React$2.useRef(0);
|
|
13846
|
-
var preventTouch = React$2.useCallback(function (e) {
|
|
13847
|
-
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
13848
|
-
// Vertical scrolling does not work when you start swiping horizontally.
|
|
13849
|
-
if (Math.abs(clientX.current) > dragThreshold) {
|
|
13850
|
-
if (e.cancelable) {
|
|
13851
|
-
e.preventDefault();
|
|
13852
|
-
e.returnValue = false;
|
|
13853
|
-
}
|
|
13854
|
-
return false;
|
|
13855
|
-
}
|
|
13856
|
-
return true;
|
|
13857
|
-
}, [dragThreshold]);
|
|
13858
|
-
var touchStart = React$2.useCallback(function (e) {
|
|
13859
|
-
firstClientX.current = e.touches[0].clientX;
|
|
13860
|
-
}, []);
|
|
13861
|
-
React$2.useEffect(function () {
|
|
13862
|
-
var current = ref.current;
|
|
13863
|
-
if (current) {
|
|
13864
|
-
current.addEventListener('touchstart', touchStart);
|
|
13865
|
-
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
13866
|
-
}
|
|
13867
|
-
return function () {
|
|
13868
|
-
if (current) {
|
|
13869
|
-
current.removeEventListener('touchstart', touchStart);
|
|
13870
|
-
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
13871
|
-
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
13872
|
-
current.removeEventListener('touchmove', preventTouch);
|
|
13873
|
-
}
|
|
13874
|
-
};
|
|
13875
|
-
}, [preventTouch, ref, touchStart]);
|
|
13876
|
-
}
|
|
13877
|
-
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$c, templateObject_6$b;
|
|
13884
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c;
|
|
13878
13885
|
|
|
13879
|
-
var Container$
|
|
13886
|
+
var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13880
13887
|
var ProductGalleryMobile = function (_a) {
|
|
13881
13888
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13882
|
-
return (jsxRuntime.jsx(Container$
|
|
13889
|
+
return (jsxRuntime.jsx(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13883
13890
|
};
|
|
13884
|
-
var templateObject_1$
|
|
13891
|
+
var templateObject_1$K;
|
|
13885
13892
|
|
|
13886
13893
|
function _extends() {
|
|
13887
13894
|
_extends = Object.assign || function (target) {
|
|
@@ -14148,27 +14155,27 @@ function useSwipeable(options) {
|
|
|
14148
14155
|
return handlers;
|
|
14149
14156
|
}
|
|
14150
14157
|
|
|
14151
|
-
var Button$
|
|
14158
|
+
var Button$3 = newStyled.button(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
14152
14159
|
var ArrowButton = function (_a) {
|
|
14153
14160
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14154
|
-
return (jsxRuntime.jsx(Button$
|
|
14161
|
+
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14155
14162
|
};
|
|
14156
|
-
var templateObject_1$
|
|
14163
|
+
var templateObject_1$J;
|
|
14157
14164
|
|
|
14158
|
-
var Container$
|
|
14165
|
+
var Container$z = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
14159
14166
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14160
14167
|
var SlideDots = function (_a) {
|
|
14161
14168
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14162
14169
|
var theme = useTheme();
|
|
14163
|
-
return (jsxRuntime.jsx(Container$
|
|
14170
|
+
return (jsxRuntime.jsx(Container$z, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
14164
14171
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14165
14172
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, "Icon-".concat(index, "-navigation/slide_dot").concat(index === selectedIndex ? '_solid' : ''))); }) }), void 0));
|
|
14166
14173
|
};
|
|
14167
|
-
var templateObject_1$
|
|
14174
|
+
var templateObject_1$I;
|
|
14168
14175
|
|
|
14169
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14170
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14171
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14176
|
+
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"])));
|
|
14177
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14178
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14172
14179
|
var SlideNavigation = function (_a) {
|
|
14173
14180
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14174
14181
|
var theme = useTheme();
|
|
@@ -14180,23 +14187,23 @@ var SlideNavigation = function (_a) {
|
|
|
14180
14187
|
onNavigate(selectedIndex + 1);
|
|
14181
14188
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14182
14189
|
};
|
|
14183
|
-
var templateObject_1$
|
|
14190
|
+
var templateObject_1$H, templateObject_2$u, templateObject_3$q;
|
|
14184
14191
|
|
|
14185
|
-
var Container$
|
|
14192
|
+
var Container$y = newStyled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
14186
14193
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14187
14194
|
return borderRadiusVariant &&
|
|
14188
14195
|
"\n border-radius: 40px;\n ";
|
|
14189
14196
|
});
|
|
14190
|
-
var TopTagContainer$
|
|
14191
|
-
var BottomTagContainer$
|
|
14192
|
-
var
|
|
14197
|
+
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'); });
|
|
14198
|
+
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"])));
|
|
14199
|
+
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14193
14200
|
var _b, _c;
|
|
14194
14201
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14195
|
-
return (jsxRuntime.jsxs(Container$
|
|
14202
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14196
14203
|
});
|
|
14197
|
-
var templateObject_1$
|
|
14204
|
+
var templateObject_1$G, templateObject_2$t, templateObject_3$p;
|
|
14198
14205
|
|
|
14199
|
-
var Container$
|
|
14206
|
+
var Container$x = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14200
14207
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14201
14208
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
14202
14209
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14218,11 +14225,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14218
14225
|
React$2.useEffect(function () {
|
|
14219
14226
|
setSelectedImage(images[index]);
|
|
14220
14227
|
}, [index, images]);
|
|
14221
|
-
return (jsxRuntime.jsxs(Container$
|
|
14228
|
+
return (jsxRuntime.jsxs(Container$x, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14222
14229
|
};
|
|
14223
|
-
var templateObject_1$
|
|
14230
|
+
var templateObject_1$F;
|
|
14224
14231
|
|
|
14225
|
-
var Container$
|
|
14232
|
+
var Container$w = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
14226
14233
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14227
14234
|
return borderRadiusVariant &&
|
|
14228
14235
|
"\n border-radius: 40px;\n ";
|
|
@@ -14231,14 +14238,14 @@ var Container$v = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
14231
14238
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14232
14239
|
});
|
|
14233
14240
|
// max-height: 31.875rem;
|
|
14234
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
14235
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
14236
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14237
|
-
var Video = newStyled.div(templateObject_5$
|
|
14238
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14239
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14240
|
-
var NavButtonContainer = newStyled.div(templateObject_8$
|
|
14241
|
-
var Button$
|
|
14241
|
+
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'); });
|
|
14242
|
+
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"])));
|
|
14243
|
+
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"])));
|
|
14244
|
+
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"])));
|
|
14245
|
+
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"])));
|
|
14246
|
+
var Text$2 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14247
|
+
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"])));
|
|
14248
|
+
var Button$2 = newStyled.button(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14242
14249
|
var settings = {
|
|
14243
14250
|
dots: true,
|
|
14244
14251
|
infinite: false,
|
|
@@ -14247,7 +14254,7 @@ var settings = {
|
|
|
14247
14254
|
slidesToScroll: 1,
|
|
14248
14255
|
initialSlide: 0,
|
|
14249
14256
|
};
|
|
14250
|
-
var
|
|
14257
|
+
var ImageProductSlideV3 = function (_a) {
|
|
14251
14258
|
var images = _a.images, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue;
|
|
14252
14259
|
var slick = React$2.useRef(null);
|
|
14253
14260
|
var sliderWrapper = React$2.useRef(null);
|
|
@@ -14283,62 +14290,27 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14283
14290
|
}
|
|
14284
14291
|
}
|
|
14285
14292
|
}, [images, selectedValue]);
|
|
14286
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
14293
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$w, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
14287
14294
|
var _a;
|
|
14288
14295
|
var activeSlide = images[e];
|
|
14289
14296
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14290
14297
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14291
14298
|
autoplay ? _playVideo() : _stopVideo();
|
|
14292
|
-
} }, settings, { nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$
|
|
14299
|
+
} }, settings, { nextArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$2, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$2, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14293
14300
|
var _a, _b;
|
|
14294
|
-
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(Video, { children: [jsxRuntime.jsx("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsxRuntime.jsx(VideoOverlay$1, { onClick: function () {
|
|
14301
|
+
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(Video, { children: [jsxRuntime.jsx("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsxRuntime.jsx(VideoOverlay$1, { onClick: function () {
|
|
14295
14302
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14296
14303
|
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14297
14304
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14298
14305
|
};
|
|
14299
|
-
|
|
14300
|
-
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14301
|
-
var firstClientX = React$2.useRef(0);
|
|
14302
|
-
var clientX = React$2.useRef(0);
|
|
14303
|
-
var preventTouch = React$2.useCallback(function (e) {
|
|
14304
|
-
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
14305
|
-
// Vertical scrolling does not work when you start swiping horizontally.
|
|
14306
|
-
if (Math.abs(clientX.current) > dragThreshold) {
|
|
14307
|
-
if (e.cancelable) {
|
|
14308
|
-
e.preventDefault();
|
|
14309
|
-
e.returnValue = false;
|
|
14310
|
-
}
|
|
14311
|
-
return false;
|
|
14312
|
-
}
|
|
14313
|
-
return true;
|
|
14314
|
-
}, [dragThreshold]);
|
|
14315
|
-
var touchStart = React$2.useCallback(function (e) {
|
|
14316
|
-
firstClientX.current = e.touches[0].clientX;
|
|
14317
|
-
}, []);
|
|
14318
|
-
React$2.useEffect(function () {
|
|
14319
|
-
var current = ref.current;
|
|
14320
|
-
if (current) {
|
|
14321
|
-
current.addEventListener('touchstart', touchStart);
|
|
14322
|
-
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
14323
|
-
}
|
|
14324
|
-
return function () {
|
|
14325
|
-
if (current) {
|
|
14326
|
-
current.removeEventListener('touchstart', touchStart);
|
|
14327
|
-
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
14328
|
-
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
14329
|
-
current.removeEventListener('touchmove', preventTouch);
|
|
14330
|
-
}
|
|
14331
|
-
};
|
|
14332
|
-
}, [preventTouch, ref, touchStart]);
|
|
14333
|
-
}
|
|
14334
|
-
var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$7, templateObject_9$4;
|
|
14306
|
+
var templateObject_1$E, templateObject_2$s, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$9, templateObject_8$8, templateObject_9$5;
|
|
14335
14307
|
|
|
14336
|
-
var Container$
|
|
14308
|
+
var Container$v = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
14337
14309
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14338
14310
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
14339
|
-
return (jsxRuntime.jsx(Container$
|
|
14311
|
+
return (jsxRuntime.jsx(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14340
14312
|
};
|
|
14341
|
-
var templateObject_1$
|
|
14313
|
+
var templateObject_1$D;
|
|
14342
14314
|
|
|
14343
14315
|
var __defProp$1 = Object.defineProperty;
|
|
14344
14316
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14471,17 +14443,17 @@ var Portal = function (_a) {
|
|
|
14471
14443
|
var visibleStyle = function (_a) {
|
|
14472
14444
|
var opened = _a.opened;
|
|
14473
14445
|
return opened
|
|
14474
|
-
? css(templateObject_1$
|
|
14446
|
+
? css(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14475
14447
|
};
|
|
14476
14448
|
var transformStyle = function (_a) {
|
|
14477
14449
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14478
14450
|
return opened
|
|
14479
|
-
? css(templateObject_3$
|
|
14451
|
+
? css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14480
14452
|
};
|
|
14481
|
-
var Container$
|
|
14453
|
+
var Container$u = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
14482
14454
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14483
14455
|
}), visibleStyle, transformStyle);
|
|
14484
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
14456
|
+
var Overlay = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
14485
14457
|
var Modal = function (_a) {
|
|
14486
14458
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding;
|
|
14487
14459
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14491,7 +14463,7 @@ var Modal = function (_a) {
|
|
|
14491
14463
|
}
|
|
14492
14464
|
close();
|
|
14493
14465
|
};
|
|
14494
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14466
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$u, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
14495
14467
|
};
|
|
14496
14468
|
var modalEvent = function (id, detail) {
|
|
14497
14469
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14519,9 +14491,9 @@ var useModal = function (id) {
|
|
|
14519
14491
|
close: close,
|
|
14520
14492
|
}); }, [close, open, opened]);
|
|
14521
14493
|
};
|
|
14522
|
-
var templateObject_1$
|
|
14494
|
+
var templateObject_1$C, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a;
|
|
14523
14495
|
|
|
14524
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14496
|
+
var Bar$1 = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14525
14497
|
var height = _a.height;
|
|
14526
14498
|
return height || '0.5rem';
|
|
14527
14499
|
}, function (_a) {
|
|
@@ -14560,7 +14532,7 @@ var BarContainer = newStyled.div({
|
|
|
14560
14532
|
padding: '0 16px',
|
|
14561
14533
|
position: 'relative',
|
|
14562
14534
|
});
|
|
14563
|
-
var Container$
|
|
14535
|
+
var Container$t = newStyled.div(function (_a) {
|
|
14564
14536
|
var backgroundColor = _a.backgroundColor;
|
|
14565
14537
|
return ({
|
|
14566
14538
|
width: '475px',
|
|
@@ -14591,21 +14563,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14591
14563
|
var theme = useTheme();
|
|
14592
14564
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14593
14565
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14594
|
-
return (jsxRuntime.jsxs(Container$
|
|
14566
|
+
return (jsxRuntime.jsxs(Container$t, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14595
14567
|
};
|
|
14596
|
-
var templateObject_1$
|
|
14568
|
+
var templateObject_1$B;
|
|
14597
14569
|
|
|
14598
|
-
var Container$
|
|
14570
|
+
var Container$s = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14599
14571
|
var theme = _a.theme;
|
|
14600
14572
|
return theme.component.orderBar.backgroundColor;
|
|
14601
14573
|
});
|
|
14602
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14574
|
+
var H1 = newStyled.h1(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14603
14575
|
var OrderBar = function (_a) {
|
|
14604
14576
|
var message = _a.message, color = _a.color;
|
|
14605
14577
|
var theme = useTheme();
|
|
14606
|
-
return (jsxRuntime.jsxs(Container$
|
|
14578
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14607
14579
|
};
|
|
14608
|
-
var templateObject_1$
|
|
14580
|
+
var templateObject_1$A, templateObject_2$q;
|
|
14609
14581
|
|
|
14610
14582
|
var htmlReactParser = {exports: {}};
|
|
14611
14583
|
|
|
@@ -18386,17 +18358,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18386
18358
|
HTMLReactParser$1.attributesToProps;
|
|
18387
18359
|
HTMLReactParser$1.Element;
|
|
18388
18360
|
|
|
18389
|
-
var Container$
|
|
18390
|
-
var Card = newStyled.div(templateObject_2$
|
|
18391
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18392
|
-
var Label$1 = newStyled.div(templateObject_4$
|
|
18393
|
-
var Check = newStyled.div(templateObject_5$
|
|
18394
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18395
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18396
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
18361
|
+
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"])));
|
|
18362
|
+
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"])));
|
|
18363
|
+
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"])));
|
|
18364
|
+
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"])));
|
|
18365
|
+
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"])));
|
|
18366
|
+
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"])));
|
|
18367
|
+
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"])));
|
|
18368
|
+
var DiscountContainer = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
18397
18369
|
var PackSelector = function (_a) {
|
|
18398
18370
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18399
|
-
return (jsxRuntime.jsx(Container$
|
|
18371
|
+
return (jsxRuntime.jsx(Container$r, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18400
18372
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18401
18373
|
}) }), void 0));
|
|
18402
18374
|
};
|
|
@@ -18423,14 +18395,14 @@ var PackCard = function (_a) {
|
|
|
18423
18395
|
currency: currencyCode || 'USD',
|
|
18424
18396
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18425
18397
|
};
|
|
18426
|
-
var templateObject_1$
|
|
18398
|
+
var templateObject_1$z, templateObject_2$p, templateObject_3$m, templateObject_4$g, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$7;
|
|
18427
18399
|
|
|
18428
|
-
var Container$
|
|
18429
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18430
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18400
|
+
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"])));
|
|
18401
|
+
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"])));
|
|
18402
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18431
18403
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18432
18404
|
}));
|
|
18433
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18405
|
+
var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
18434
18406
|
var bold = _a.bold;
|
|
18435
18407
|
return (bold ? '700' : '500');
|
|
18436
18408
|
}, function (_a) {
|
|
@@ -18447,7 +18419,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
18447
18419
|
var background = _a.background;
|
|
18448
18420
|
return background || 'unset';
|
|
18449
18421
|
});
|
|
18450
|
-
var templateObject_1$
|
|
18422
|
+
var templateObject_1$y, templateObject_2$o, templateObject_3$l, templateObject_4$f;
|
|
18451
18423
|
|
|
18452
18424
|
var Pagination = function (_a) {
|
|
18453
18425
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18493,7 +18465,7 @@ var Pagination = function (_a) {
|
|
|
18493
18465
|
}
|
|
18494
18466
|
return pages;
|
|
18495
18467
|
}, [from, page, showReducedPages, to]);
|
|
18496
|
-
return (jsxRuntime.jsxs(Container$
|
|
18468
|
+
return (jsxRuntime.jsxs(Container$q, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18497
18469
|
};
|
|
18498
18470
|
|
|
18499
18471
|
var PaginatorBlog = function (_a) {
|
|
@@ -18507,12 +18479,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18507
18479
|
setPage(page);
|
|
18508
18480
|
onChange(page);
|
|
18509
18481
|
};
|
|
18510
|
-
return (jsxRuntime.jsxs(Container$
|
|
18482
|
+
return (jsxRuntime.jsxs(Container$q, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18511
18483
|
? theme.colors.shades['white'].color
|
|
18512
18484
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18513
18485
|
};
|
|
18514
18486
|
|
|
18515
|
-
var Container$
|
|
18487
|
+
var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18516
18488
|
var width = _a.width;
|
|
18517
18489
|
return width;
|
|
18518
18490
|
}, function (_a) {
|
|
@@ -18528,14 +18500,14 @@ var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
18528
18500
|
var PaymentMethod = function (_a) {
|
|
18529
18501
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18530
18502
|
var theme = useTheme();
|
|
18531
|
-
return (jsxRuntime.jsx(Container$
|
|
18503
|
+
return (jsxRuntime.jsx(Container$p, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
18532
18504
|
};
|
|
18533
|
-
var templateObject_1$
|
|
18505
|
+
var templateObject_1$x;
|
|
18534
18506
|
|
|
18535
|
-
var Container$
|
|
18507
|
+
var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18536
18508
|
var IMAGE_WIDTH = '63px';
|
|
18537
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18538
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18509
|
+
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);
|
|
18510
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18539
18511
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18540
18512
|
}), IMAGE_WIDTH);
|
|
18541
18513
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -18558,7 +18530,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18558
18530
|
margin: '0.063rem 0',
|
|
18559
18531
|
});
|
|
18560
18532
|
});
|
|
18561
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18533
|
+
var PriceContainer = newStyled.div(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
18562
18534
|
var withTag = _a.withTag; _a.theme;
|
|
18563
18535
|
return withTag
|
|
18564
18536
|
? mediaQueries({
|
|
@@ -18567,14 +18539,14 @@ var PriceContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = _
|
|
|
18567
18539
|
})
|
|
18568
18540
|
: 'justify-content: end';
|
|
18569
18541
|
});
|
|
18570
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18571
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18542
|
+
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"])));
|
|
18543
|
+
var StyledSpan = newStyled.span(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
18572
18544
|
var SimpleOrderItem = function (_a) {
|
|
18573
18545
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
18574
18546
|
var theme = useTheme();
|
|
18575
|
-
return (jsxRuntime.jsxs(Container$
|
|
18547
|
+
return (jsxRuntime.jsxs(Container$o, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18576
18548
|
};
|
|
18577
|
-
var templateObject_1$
|
|
18549
|
+
var templateObject_1$w, templateObject_2$n, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
18578
18550
|
|
|
18579
18551
|
var P$1 = newStyled.p(function (_a) {
|
|
18580
18552
|
var color = _a.color;
|
|
@@ -18588,7 +18560,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18588
18560
|
margin: '0.938rem 4.188rem',
|
|
18589
18561
|
});
|
|
18590
18562
|
});
|
|
18591
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18563
|
+
var Bar = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18592
18564
|
var height = _a.height;
|
|
18593
18565
|
return height || '0.5rem';
|
|
18594
18566
|
}, function (_a) {
|
|
@@ -18617,7 +18589,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18617
18589
|
position: 'absolute',
|
|
18618
18590
|
});
|
|
18619
18591
|
});
|
|
18620
|
-
var Container$
|
|
18592
|
+
var Container$n = newStyled.div(function (_a) {
|
|
18621
18593
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18622
18594
|
return ({
|
|
18623
18595
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18631,14 +18603,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18631
18603
|
var ProgressBar = function (_a) {
|
|
18632
18604
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
18633
18605
|
var theme = useTheme();
|
|
18634
|
-
return (jsxRuntime.jsxs(Container$
|
|
18606
|
+
return (jsxRuntime.jsxs(Container$n, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18635
18607
|
};
|
|
18636
|
-
var templateObject_1$
|
|
18608
|
+
var templateObject_1$v;
|
|
18637
18609
|
|
|
18638
|
-
var Container$
|
|
18639
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18640
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18641
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18610
|
+
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; });
|
|
18611
|
+
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"])));
|
|
18612
|
+
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"])));
|
|
18613
|
+
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
18642
18614
|
var QuantityPicker = function (_a) {
|
|
18643
18615
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
18644
18616
|
var theme = useTheme();
|
|
@@ -18661,9 +18633,9 @@ var QuantityPicker = function (_a) {
|
|
|
18661
18633
|
return clamp(value);
|
|
18662
18634
|
});
|
|
18663
18635
|
}, [value, clamp]);
|
|
18664
|
-
return (jsxRuntime.jsxs(Container$
|
|
18636
|
+
return (jsxRuntime.jsxs(Container$m, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18665
18637
|
};
|
|
18666
|
-
var templateObject_1$
|
|
18638
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$j, templateObject_4$d;
|
|
18667
18639
|
|
|
18668
18640
|
/* base styles & size variants */
|
|
18669
18641
|
var CustomRadioStyles$1 = {
|
|
@@ -18732,9 +18704,9 @@ var ContainerStyles$1 = {
|
|
|
18732
18704
|
},
|
|
18733
18705
|
};
|
|
18734
18706
|
|
|
18735
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18736
|
-
var Container$
|
|
18737
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18707
|
+
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"])));
|
|
18708
|
+
var Container$l = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18709
|
+
var Input$2 = newStyled.input(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
18738
18710
|
var disabled = _a.disabled;
|
|
18739
18711
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18740
18712
|
});
|
|
@@ -18742,7 +18714,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18742
18714
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18743
18715
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18744
18716
|
]; });
|
|
18745
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
18717
|
+
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
18746
18718
|
var RadioPrimary = function (_a) {
|
|
18747
18719
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
|
|
18748
18720
|
var theme = useTheme();
|
|
@@ -18750,9 +18722,9 @@ var RadioPrimary = function (_a) {
|
|
|
18750
18722
|
var value = event.currentTarget.value;
|
|
18751
18723
|
onChange({ value: value, label: label });
|
|
18752
18724
|
};
|
|
18753
|
-
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
18725
|
+
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$l, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18754
18726
|
};
|
|
18755
|
-
var templateObject_1$
|
|
18727
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i;
|
|
18756
18728
|
|
|
18757
18729
|
var RadioGroupInput = function (_a) {
|
|
18758
18730
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18831,9 +18803,9 @@ var ContainerStyles = {
|
|
|
18831
18803
|
},
|
|
18832
18804
|
};
|
|
18833
18805
|
|
|
18834
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18835
|
-
var Container$
|
|
18836
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18806
|
+
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"])));
|
|
18807
|
+
var Container$k = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18808
|
+
var Input$1 = newStyled.input(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
18837
18809
|
var disabled = _a.disabled;
|
|
18838
18810
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18839
18811
|
});
|
|
@@ -18841,7 +18813,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
18841
18813
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18842
18814
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
18843
18815
|
]; });
|
|
18844
|
-
var StyledLabel = newStyled(Label$4)(templateObject_3$
|
|
18816
|
+
var StyledLabel = newStyled(Label$4)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
18845
18817
|
var theme = _a.theme;
|
|
18846
18818
|
return theme.component.radio.textSize;
|
|
18847
18819
|
}, function (_a) {
|
|
@@ -18855,9 +18827,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18855
18827
|
var value = event.currentTarget.value;
|
|
18856
18828
|
onChange({ value: value, label: label });
|
|
18857
18829
|
};
|
|
18858
|
-
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$
|
|
18830
|
+
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$k, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18859
18831
|
};
|
|
18860
|
-
var templateObject_1$
|
|
18832
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h;
|
|
18861
18833
|
|
|
18862
18834
|
var ClubRadioGroupInput = function (_a) {
|
|
18863
18835
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18885,15 +18857,15 @@ function formatDate(date, format) {
|
|
|
18885
18857
|
}
|
|
18886
18858
|
}
|
|
18887
18859
|
|
|
18888
|
-
var Container$
|
|
18889
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18890
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18891
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
18892
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
18893
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
18894
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
18895
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
18896
|
-
var ReviewDescription = newStyled.div(templateObject_9$
|
|
18860
|
+
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"])));
|
|
18861
|
+
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"])));
|
|
18862
|
+
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"])));
|
|
18863
|
+
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"])));
|
|
18864
|
+
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"])));
|
|
18865
|
+
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"])));
|
|
18866
|
+
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"])));
|
|
18867
|
+
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"])));
|
|
18868
|
+
var ReviewDescription = newStyled.div(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
18897
18869
|
var ImageContainer = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
18898
18870
|
var ImageWrapper$2 = newStyled(Image$3)(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
18899
18871
|
var VideoWrapper = newStyled.video(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
@@ -18923,22 +18895,22 @@ var Review$1 = function (_a) {
|
|
|
18923
18895
|
}
|
|
18924
18896
|
}
|
|
18925
18897
|
}, [opened]);
|
|
18926
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
18898
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$j, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18927
18899
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18928
18900
|
};
|
|
18929
|
-
var templateObject_1$
|
|
18901
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$g, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18930
18902
|
|
|
18931
18903
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18932
18904
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18933
|
-
var Container$
|
|
18934
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18935
|
-
var Content = newStyled.div(templateObject_3$
|
|
18936
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
18937
|
-
var DateText = newStyled.span(templateObject_5$
|
|
18938
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
18939
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
18940
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
18941
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
18905
|
+
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"])));
|
|
18906
|
+
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"])));
|
|
18907
|
+
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"])));
|
|
18908
|
+
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"])));
|
|
18909
|
+
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"])));
|
|
18910
|
+
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"])));
|
|
18911
|
+
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"])));
|
|
18912
|
+
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"])));
|
|
18913
|
+
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
18942
18914
|
var ReviewDescriptionMobile = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
18943
18915
|
var ImagesContainer = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
18944
18916
|
var Images = newStyled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
@@ -18972,7 +18944,7 @@ var Review = function (_a) {
|
|
|
18972
18944
|
});
|
|
18973
18945
|
};
|
|
18974
18946
|
}, [randomId]);
|
|
18975
|
-
return (jsxRuntime.jsxs(Container$
|
|
18947
|
+
return (jsxRuntime.jsxs(Container$i, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(ReviewerName, { children: reviewerName }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
18976
18948
|
__html: showMoreMobile
|
|
18977
18949
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18978
18950
|
: description,
|
|
@@ -18982,15 +18954,15 @@ var Review = function (_a) {
|
|
|
18982
18954
|
: description,
|
|
18983
18955
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
18984
18956
|
};
|
|
18985
|
-
var templateObject_1$
|
|
18986
|
-
|
|
18987
|
-
var Container$
|
|
18988
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18989
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18990
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18991
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
18992
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
18993
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
18957
|
+
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;
|
|
18958
|
+
|
|
18959
|
+
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"])));
|
|
18960
|
+
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"])));
|
|
18961
|
+
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"])));
|
|
18962
|
+
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"])));
|
|
18963
|
+
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"])));
|
|
18964
|
+
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"])));
|
|
18965
|
+
var SummaryItem = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
18994
18966
|
var backgroundUrl = _a.backgroundUrl;
|
|
18995
18967
|
return "url(".concat(backgroundUrl, ")");
|
|
18996
18968
|
});
|
|
@@ -18998,19 +18970,19 @@ var ReviewsHeader = function (_a) {
|
|
|
18998
18970
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
18999
18971
|
var starsNumber = 5;
|
|
19000
18972
|
var theme = useTheme();
|
|
19001
|
-
return (jsxRuntime.jsxs(Container$
|
|
18973
|
+
return (jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
19002
18974
|
};
|
|
19003
|
-
var templateObject_1$
|
|
18975
|
+
var templateObject_1$p, templateObject_2$h, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5;
|
|
19004
18976
|
|
|
19005
|
-
var Container$
|
|
19006
|
-
var Text = newStyled.p(templateObject_2$
|
|
18977
|
+
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"])));
|
|
18978
|
+
var Text = newStyled.p(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
19007
18979
|
var ScrollToTop = function (_a) {
|
|
19008
18980
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
19009
18981
|
var theme = useTheme();
|
|
19010
18982
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
19011
|
-
return (jsxRuntime.jsxs(Container$
|
|
18983
|
+
return (jsxRuntime.jsxs(Container$g, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
19012
18984
|
};
|
|
19013
|
-
var templateObject_1$
|
|
18985
|
+
var templateObject_1$o, templateObject_2$g;
|
|
19014
18986
|
|
|
19015
18987
|
var Input = newStyled.input(function (props) { return ({
|
|
19016
18988
|
padding: props.theme.component.input.padding,
|
|
@@ -19041,7 +19013,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19041
19013
|
},
|
|
19042
19014
|
}); });
|
|
19043
19015
|
|
|
19044
|
-
var Container$
|
|
19016
|
+
var Container$f = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
19045
19017
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19046
19018
|
}));
|
|
19047
19019
|
var Description = newStyled.div({
|
|
@@ -19058,25 +19030,25 @@ var Description = newStyled.div({
|
|
|
19058
19030
|
var ProductItem = function (_a) {
|
|
19059
19031
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19060
19032
|
var theme = useTheme();
|
|
19061
|
-
return (jsxRuntime.jsxs(Container$
|
|
19033
|
+
return (jsxRuntime.jsxs(Container$f, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19062
19034
|
};
|
|
19063
|
-
var templateObject_1$
|
|
19035
|
+
var templateObject_1$n;
|
|
19064
19036
|
|
|
19065
|
-
var Container$
|
|
19037
|
+
var Container$e = newStyled.div({
|
|
19066
19038
|
display: 'flex',
|
|
19067
19039
|
justifyContent: 'center',
|
|
19068
19040
|
padding: '1rem',
|
|
19069
19041
|
});
|
|
19070
19042
|
var Footer = function (_a) {
|
|
19071
19043
|
var text = _a.text, onClick = _a.onClick;
|
|
19072
|
-
return (jsxRuntime.jsx(Container$
|
|
19044
|
+
return (jsxRuntime.jsx(Container$e, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19073
19045
|
};
|
|
19074
19046
|
|
|
19075
19047
|
var Ul = newStyled.ul({
|
|
19076
19048
|
margin: '0px',
|
|
19077
19049
|
padding: '0px',
|
|
19078
19050
|
});
|
|
19079
|
-
var Li = newStyled.li(templateObject_1$
|
|
19051
|
+
var Li = newStyled.li(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19080
19052
|
padding: [0, '0rem 1rem'],
|
|
19081
19053
|
borderRadius: [0, '0.5rem'],
|
|
19082
19054
|
}));
|
|
@@ -19088,31 +19060,31 @@ var Anchor = newStyled.a({
|
|
|
19088
19060
|
padding: 0,
|
|
19089
19061
|
textDecoration: 'none',
|
|
19090
19062
|
});
|
|
19091
|
-
var Container$
|
|
19063
|
+
var Container$d = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
19092
19064
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19093
19065
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19094
19066
|
borderRadius: ['0', '0.5rem'],
|
|
19095
19067
|
}));
|
|
19096
|
-
var Header = newStyled.div(templateObject_3$
|
|
19068
|
+
var Header = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19097
19069
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19098
19070
|
}));
|
|
19099
19071
|
var ResultsPanel = function (_a) {
|
|
19100
19072
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19101
19073
|
var theme = useTheme();
|
|
19102
|
-
return (jsxRuntime.jsxs(Container$
|
|
19074
|
+
return (jsxRuntime.jsxs(Container$d, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19103
19075
|
};
|
|
19104
|
-
var templateObject_1$
|
|
19076
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$d;
|
|
19105
19077
|
|
|
19106
|
-
var Button = newStyled.button(templateObject_1$
|
|
19078
|
+
var Button$1 = newStyled.button(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
19107
19079
|
right: ['1rem', '7.75rem'],
|
|
19108
19080
|
top: ['0.75rem', '0.75rem'],
|
|
19109
19081
|
}));
|
|
19110
19082
|
var ClearButton = function (_a) {
|
|
19111
19083
|
var onClick = _a.onClick;
|
|
19112
19084
|
var theme = useTheme();
|
|
19113
|
-
return (jsxRuntime.jsx(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19085
|
+
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19114
19086
|
};
|
|
19115
|
-
var templateObject_1$
|
|
19087
|
+
var templateObject_1$l;
|
|
19116
19088
|
|
|
19117
19089
|
var SearchIconContainer = newStyled.div({
|
|
19118
19090
|
display: 'flex',
|
|
@@ -19122,7 +19094,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19122
19094
|
background: 'white',
|
|
19123
19095
|
alignSelf: 'center',
|
|
19124
19096
|
});
|
|
19125
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19097
|
+
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19126
19098
|
var SearchControl = function (_a) {
|
|
19127
19099
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19128
19100
|
var theme = useTheme();
|
|
@@ -19138,7 +19110,7 @@ var SearchControl = function (_a) {
|
|
|
19138
19110
|
}
|
|
19139
19111
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19140
19112
|
};
|
|
19141
|
-
var templateObject_1$
|
|
19113
|
+
var templateObject_1$k;
|
|
19142
19114
|
|
|
19143
19115
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19144
19116
|
var reducer = function (state, action) {
|
|
@@ -19154,7 +19126,7 @@ var reducer = function (state, action) {
|
|
|
19154
19126
|
}
|
|
19155
19127
|
}
|
|
19156
19128
|
};
|
|
19157
|
-
var Container$
|
|
19129
|
+
var Container$c = newStyled.div({
|
|
19158
19130
|
position: 'relative',
|
|
19159
19131
|
display: 'flex',
|
|
19160
19132
|
});
|
|
@@ -19194,7 +19166,7 @@ var SearchBar = function (_a) {
|
|
|
19194
19166
|
if (e.cancelable) {
|
|
19195
19167
|
e.preventDefault();
|
|
19196
19168
|
}
|
|
19197
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
19169
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$c, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
19198
19170
|
if (e.key === 'Enter') {
|
|
19199
19171
|
if (e.cancelable) {
|
|
19200
19172
|
e.preventDefault();
|
|
@@ -19205,20 +19177,20 @@ var SearchBar = function (_a) {
|
|
|
19205
19177
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19206
19178
|
};
|
|
19207
19179
|
|
|
19208
|
-
var Container$
|
|
19209
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19210
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19211
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19212
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19180
|
+
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"])));
|
|
19181
|
+
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"])));
|
|
19182
|
+
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"])));
|
|
19183
|
+
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"])));
|
|
19184
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
19213
19185
|
var SearchNavigation = function (_a) {
|
|
19214
19186
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19215
|
-
return (jsxRuntime.jsxs(Container$
|
|
19187
|
+
return (jsxRuntime.jsxs(Container$b, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19216
19188
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19217
19189
|
}) }, void 0)] }, void 0));
|
|
19218
19190
|
};
|
|
19219
|
-
var templateObject_1$
|
|
19191
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$c, templateObject_4$9, templateObject_5$5;
|
|
19220
19192
|
|
|
19221
|
-
var Container$
|
|
19193
|
+
var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19222
19194
|
var alignCenter = _a.alignCenter;
|
|
19223
19195
|
return alignCenter &&
|
|
19224
19196
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19228,26 +19200,26 @@ var Container$9 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
19228
19200
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19229
19201
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19230
19202
|
});
|
|
19231
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19232
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19203
|
+
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"])));
|
|
19204
|
+
var BannerText = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19233
19205
|
var ShortBanner = function (_a) {
|
|
19234
19206
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19235
19207
|
var theme = useTheme();
|
|
19236
|
-
return (jsxRuntime.jsxs(Container$
|
|
19208
|
+
return (jsxRuntime.jsxs(Container$a, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19237
19209
|
};
|
|
19238
|
-
var templateObject_1$
|
|
19239
|
-
|
|
19240
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19241
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19242
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19243
|
-
var Label = newStyled('div')(templateObject_4$
|
|
19244
|
-
var TopLabel = newStyled(Label)(templateObject_5$
|
|
19245
|
-
var LeftLabel = newStyled(Label)(templateObject_6$
|
|
19246
|
-
var Container$
|
|
19247
|
-
var LabelText = newStyled('span')(templateObject_8$
|
|
19248
|
-
var Column = newStyled('div')(templateObject_9$
|
|
19210
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$b;
|
|
19211
|
+
|
|
19212
|
+
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; });
|
|
19213
|
+
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; });
|
|
19214
|
+
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; });
|
|
19215
|
+
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"])));
|
|
19216
|
+
var TopLabel = newStyled(Label)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19217
|
+
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"])));
|
|
19218
|
+
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"])));
|
|
19219
|
+
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"])));
|
|
19220
|
+
var Column = newStyled('div')(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19249
19221
|
var TableRow$1 = newStyled.tr(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19250
|
-
var templateObject_1$
|
|
19222
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$a, templateObject_4$8, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$2, templateObject_10$1;
|
|
19251
19223
|
|
|
19252
19224
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19253
19225
|
var getCellColor = function (index, cell) {
|
|
@@ -19283,21 +19255,21 @@ var SizeChartTable = function (_a) {
|
|
|
19283
19255
|
var theme = useTheme();
|
|
19284
19256
|
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
19285
19257
|
var isMultilabel = xLabel && yLabel;
|
|
19286
|
-
return (jsxRuntime.jsxs(Container$
|
|
19258
|
+
return (jsxRuntime.jsxs(Container$9, { children: [isMultilabel && (jsxRuntime.jsxs(LeftLabel, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText, { children: xLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(Column, { children: [isMultilabel && (jsxRuntime.jsxs(TopLabel, { children: [jsxRuntime.jsx(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsxRuntime.jsx(LabelText, { children: yLabel }, void 0), jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ style: {
|
|
19287
19259
|
backgroundColor: getCellColor(index, cell),
|
|
19288
19260
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: getIsOdd(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19289
19261
|
};
|
|
19290
19262
|
|
|
19291
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19292
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19293
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
19294
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
19263
|
+
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; });
|
|
19264
|
+
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; });
|
|
19265
|
+
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; });
|
|
19266
|
+
var TableRow = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19295
19267
|
var SizeTable = function (_a) {
|
|
19296
19268
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19297
19269
|
var theme = useTheme();
|
|
19298
19270
|
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19299
19271
|
};
|
|
19300
|
-
var templateObject_1$
|
|
19272
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$7;
|
|
19301
19273
|
|
|
19302
19274
|
var getStylesBySize$4 = function (size) {
|
|
19303
19275
|
switch (size) {
|
|
@@ -19324,7 +19296,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19324
19296
|
} });
|
|
19325
19297
|
};
|
|
19326
19298
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19327
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19299
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19328
19300
|
};
|
|
19329
19301
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19330
19302
|
if (disabled)
|
|
@@ -19340,23 +19312,23 @@ var TextButton = function (_a) {
|
|
|
19340
19312
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19341
19313
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19342
19314
|
};
|
|
19343
|
-
var templateObject_1$
|
|
19315
|
+
var templateObject_1$f;
|
|
19344
19316
|
|
|
19345
|
-
var Container$
|
|
19346
|
-
var P = newStyled.p(templateObject_2$
|
|
19347
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19317
|
+
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"])));
|
|
19318
|
+
var P = newStyled.p(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19319
|
+
var PercentageSpan = newStyled.span(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19348
19320
|
var SizeFitGuide = function (_a) {
|
|
19349
19321
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19350
|
-
return (jsxRuntime.jsxs(Container$
|
|
19322
|
+
return (jsxRuntime.jsxs(Container$8, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19351
19323
|
};
|
|
19352
|
-
var templateObject_1$
|
|
19324
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$8;
|
|
19353
19325
|
|
|
19354
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19326
|
+
var ButtonsContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19355
19327
|
var inline = _a.inline;
|
|
19356
19328
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19357
19329
|
});
|
|
19358
|
-
var Row = newStyled.div(templateObject_2$
|
|
19359
|
-
var templateObject_1$
|
|
19330
|
+
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"])));
|
|
19331
|
+
var templateObject_1$d, templateObject_2$9;
|
|
19360
19332
|
|
|
19361
19333
|
var SizeSelector = function (_a) {
|
|
19362
19334
|
var _b;
|
|
@@ -19375,7 +19347,7 @@ var SizeSelector = function (_a) {
|
|
|
19375
19347
|
}) }), void 0)] }), void 0));
|
|
19376
19348
|
};
|
|
19377
19349
|
|
|
19378
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19350
|
+
var TabContainer = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19379
19351
|
var titleSize = _a.titleSize;
|
|
19380
19352
|
return titleSize;
|
|
19381
19353
|
}, function (_a) {
|
|
@@ -19392,18 +19364,18 @@ var Tab = function (_a) {
|
|
|
19392
19364
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19393
19365
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19394
19366
|
};
|
|
19395
|
-
var templateObject_1$
|
|
19367
|
+
var templateObject_1$c;
|
|
19396
19368
|
|
|
19397
|
-
var Container$
|
|
19398
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19369
|
+
var Container$7 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19370
|
+
var TabList = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19399
19371
|
var backgroundColor = _a.backgroundColor;
|
|
19400
19372
|
return backgroundColor;
|
|
19401
19373
|
}, function (_a) {
|
|
19402
19374
|
var borderColor = _a.borderColor;
|
|
19403
19375
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19404
19376
|
});
|
|
19405
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19406
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19377
|
+
var TabContent = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19378
|
+
var TabSeparator = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
19407
19379
|
var Tabs = function (_a) {
|
|
19408
19380
|
var _b;
|
|
19409
19381
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, _d = _a.selectedBorderColor, selectedBorderColor = _d === void 0 ? 'var(--colors-pallete-primary-color)' : _d, _e = _a.fixedBorderColor, fixedBorderColor = _e === void 0 ? '' : _e, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -19412,16 +19384,16 @@ var Tabs = function (_a) {
|
|
|
19412
19384
|
return null;
|
|
19413
19385
|
}
|
|
19414
19386
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19415
|
-
return (jsxRuntime.jsxs(Container$
|
|
19387
|
+
return (jsxRuntime.jsxs(Container$7, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19416
19388
|
};
|
|
19417
|
-
var templateObject_1$
|
|
19389
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$7, templateObject_4$6;
|
|
19418
19390
|
|
|
19419
|
-
var Container$
|
|
19391
|
+
var Container$6 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19420
19392
|
var Tag = function (_a) {
|
|
19421
19393
|
var text = _a.text, className = _a.className;
|
|
19422
|
-
return jsxRuntime.jsx(Container$
|
|
19394
|
+
return jsxRuntime.jsx(Container$6, __assign$1({ className: className }, { children: text }), void 0);
|
|
19423
19395
|
};
|
|
19424
|
-
var templateObject_1$
|
|
19396
|
+
var templateObject_1$a;
|
|
19425
19397
|
|
|
19426
19398
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19427
19399
|
switch (size) {
|
|
@@ -19452,10 +19424,10 @@ var getStylesBySize$3 = function (size, styledBorder) {
|
|
|
19452
19424
|
}
|
|
19453
19425
|
};
|
|
19454
19426
|
var CategoryTag = function (_a) {
|
|
19455
|
-
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b;
|
|
19427
|
+
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b, backgroundColor = _a.backgroundColor;
|
|
19456
19428
|
var theme = useTheme();
|
|
19457
19429
|
var stylesBySize = getStylesBySize$3(size, styledBorder);
|
|
19458
|
-
return (jsx(Tag, { css: __assign$1({ backgroundColor: theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
|
|
19430
|
+
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor || theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
|
|
19459
19431
|
};
|
|
19460
19432
|
|
|
19461
19433
|
var getStylesBySize$2 = function (size) {
|
|
@@ -19532,9 +19504,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19532
19504
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19533
19505
|
};
|
|
19534
19506
|
|
|
19535
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19536
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19537
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19507
|
+
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"])));
|
|
19508
|
+
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"])));
|
|
19509
|
+
var FullscreenVideo = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19538
19510
|
var ImageVideo = function (_a) {
|
|
19539
19511
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19540
19512
|
var video = React$2.useRef(null);
|
|
@@ -19554,12 +19526,12 @@ var ImageVideo = function (_a) {
|
|
|
19554
19526
|
height: '100%',
|
|
19555
19527
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19556
19528
|
};
|
|
19557
|
-
var templateObject_1$
|
|
19529
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$6;
|
|
19558
19530
|
|
|
19559
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19560
|
-
var ContainerMobile = css(templateObject_2$
|
|
19561
|
-
var Container$
|
|
19562
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19531
|
+
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"])));
|
|
19532
|
+
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"])));
|
|
19533
|
+
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);
|
|
19534
|
+
var TextContainer = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19563
19535
|
var TextWithImage = function (_a) {
|
|
19564
19536
|
var _b, _c, _d, _e;
|
|
19565
19537
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -19579,7 +19551,7 @@ var TextWithImage = function (_a) {
|
|
|
19579
19551
|
// @ts-ignore
|
|
19580
19552
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19581
19553
|
};
|
|
19582
|
-
return (jsxs(Container$
|
|
19554
|
+
return (jsxs(Container$5, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
19583
19555
|
backgroundColor: props.btnBGColor,
|
|
19584
19556
|
color: '#ffffff',
|
|
19585
19557
|
border: props.btnBGColor,
|
|
@@ -19589,9 +19561,9 @@ var TextWithImage = function (_a) {
|
|
|
19589
19561
|
},
|
|
19590
19562
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19591
19563
|
};
|
|
19592
|
-
var templateObject_1$
|
|
19564
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$5, templateObject_4$5;
|
|
19593
19565
|
|
|
19594
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19566
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19595
19567
|
var timerColor = _a.timerColor;
|
|
19596
19568
|
return timerColor || '';
|
|
19597
19569
|
});
|
|
@@ -19627,11 +19599,11 @@ var Timer = function (_a) {
|
|
|
19627
19599
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19628
19600
|
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19629
19601
|
};
|
|
19630
|
-
var templateObject_1$
|
|
19602
|
+
var templateObject_1$7;
|
|
19631
19603
|
|
|
19632
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19633
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19634
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19604
|
+
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"])));
|
|
19605
|
+
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; });
|
|
19606
|
+
var Currency = newStyled.span(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19635
19607
|
var theme = _a.theme;
|
|
19636
19608
|
return theme.component.total.basicTotal.currency.color;
|
|
19637
19609
|
}, function (_a) {
|
|
@@ -19644,41 +19616,41 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19644
19616
|
var theme = _a.theme;
|
|
19645
19617
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19646
19618
|
});
|
|
19647
|
-
var Container$
|
|
19619
|
+
var Container$4 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n align-items: center;\n"])), function (_a) {
|
|
19648
19620
|
var highlightColor = _a.highlightColor;
|
|
19649
19621
|
return highlightColor;
|
|
19650
19622
|
});
|
|
19651
|
-
var TotalContainer = newStyled(Container$
|
|
19623
|
+
var TotalContainer = newStyled(Container$4)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n justify-content: ", ";\n margin-top: 0;\n"], ["\n justify-content: ", ";\n margin-top: 0;\n"])), function (_a) {
|
|
19652
19624
|
var showTotalLabel = _a.showTotalLabel;
|
|
19653
19625
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19654
19626
|
});
|
|
19655
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19656
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
19627
|
+
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"])));
|
|
19628
|
+
var DiscountAmount = newStyled.h3(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
19657
19629
|
var theme = _a.theme;
|
|
19658
19630
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19659
19631
|
});
|
|
19660
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
19661
|
-
var templateObject_1$
|
|
19632
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19633
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$4, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3;
|
|
19662
19634
|
|
|
19663
19635
|
var Total = function (_a) {
|
|
19664
19636
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
19665
19637
|
var theme = useTheme();
|
|
19666
|
-
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
19638
|
+
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19667
19639
|
};
|
|
19668
19640
|
|
|
19669
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19641
|
+
var Wrapper = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19670
19642
|
var color = _a.color;
|
|
19671
19643
|
return color;
|
|
19672
19644
|
});
|
|
19673
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19674
|
-
var Item = newStyled.h4(templateObject_3$
|
|
19645
|
+
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"])));
|
|
19646
|
+
var Item = newStyled.h4(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
19675
19647
|
var theme = _a.theme;
|
|
19676
19648
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19677
19649
|
}, function (_a) {
|
|
19678
19650
|
var theme = _a.theme;
|
|
19679
19651
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19680
19652
|
});
|
|
19681
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
19653
|
+
var CouponItem = newStyled(Item)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19682
19654
|
var color = _a.color;
|
|
19683
19655
|
return color;
|
|
19684
19656
|
});
|
|
@@ -19691,30 +19663,30 @@ var Subtotal = function (_a) {
|
|
|
19691
19663
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19692
19664
|
})] }), void 0));
|
|
19693
19665
|
};
|
|
19694
|
-
var templateObject_1$
|
|
19666
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3;
|
|
19695
19667
|
|
|
19696
19668
|
var Totals = {
|
|
19697
19669
|
Total: Total,
|
|
19698
19670
|
Subtotal: Subtotal,
|
|
19699
19671
|
};
|
|
19700
19672
|
|
|
19701
|
-
var Container$
|
|
19702
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19703
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19704
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19705
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
19706
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
19673
|
+
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"])));
|
|
19674
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19675
|
+
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; });
|
|
19676
|
+
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'); });
|
|
19677
|
+
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"])));
|
|
19678
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n"])), function (props) {
|
|
19707
19679
|
return props.finishedTrack
|
|
19708
19680
|
? props.finishedTrackColor
|
|
19709
19681
|
: props.activeTrack
|
|
19710
19682
|
? props.activeTrackColor
|
|
19711
19683
|
: '';
|
|
19712
19684
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19713
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19714
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
19685
|
+
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"])));
|
|
19686
|
+
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19715
19687
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19716
19688
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19717
|
-
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19689
|
+
var ActiveCheckpointDot$1 = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19718
19690
|
var LastActiveCheckpointDot = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"])), function (props) { return props.trackColor; });
|
|
19719
19691
|
var WarningIconWrapper = newStyled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"], ["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"])));
|
|
19720
19692
|
var TrackingProgressV2 = function (_a) {
|
|
@@ -19739,7 +19711,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19739
19711
|
}
|
|
19740
19712
|
return '30px';
|
|
19741
19713
|
};
|
|
19742
|
-
return (jsxRuntime.jsxs(Container$
|
|
19714
|
+
return (jsxRuntime.jsxs(Container$3, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19743
19715
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19744
19716
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsx(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
19745
19717
|
? activeCheckpointColor
|
|
@@ -19750,18 +19722,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19750
19722
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19751
19723
|
})] }), void 0));
|
|
19752
19724
|
};
|
|
19753
|
-
var templateObject_1$
|
|
19754
|
-
|
|
19755
|
-
var Container$
|
|
19756
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19757
|
-
var CheckpointDate = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19758
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19759
|
-
var CheckpointStatus = newStyled.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
19760
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19725
|
+
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;
|
|
19726
|
+
|
|
19727
|
+
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"])));
|
|
19728
|
+
var CheckpointContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19729
|
+
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; });
|
|
19730
|
+
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'); });
|
|
19731
|
+
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'); });
|
|
19732
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
19761
19733
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19762
19734
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19763
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
19764
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
19735
|
+
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)'); });
|
|
19736
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
19765
19737
|
var TrackingProgress = function (_a) {
|
|
19766
19738
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
19767
19739
|
var theme = useTheme();
|
|
@@ -19781,7 +19753,7 @@ var TrackingProgress = function (_a) {
|
|
|
19781
19753
|
}
|
|
19782
19754
|
return '30px';
|
|
19783
19755
|
};
|
|
19784
|
-
return (jsxRuntime.jsxs(Container$
|
|
19756
|
+
return (jsxRuntime.jsxs(Container$2, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19785
19757
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19786
19758
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
19787
19759
|
? theme.colors.semantic.informative.color
|
|
@@ -19790,9 +19762,9 @@ var TrackingProgress = function (_a) {
|
|
|
19790
19762
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19791
19763
|
})] }), void 0));
|
|
19792
19764
|
};
|
|
19793
|
-
var templateObject_1$
|
|
19765
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1;
|
|
19794
19766
|
|
|
19795
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
19767
|
+
var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
19796
19768
|
var textPosition = _a.textPosition;
|
|
19797
19769
|
return textPosition;
|
|
19798
19770
|
}, function (_a) {
|
|
@@ -19805,7 +19777,7 @@ var TimerContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = _
|
|
|
19805
19777
|
var borderRadius = _a.borderRadius;
|
|
19806
19778
|
return borderRadius || '8px';
|
|
19807
19779
|
});
|
|
19808
|
-
var templateObject_1$
|
|
19780
|
+
var templateObject_1$2;
|
|
19809
19781
|
|
|
19810
19782
|
var getDefaultCountdown = function () {
|
|
19811
19783
|
var tomorrowDate = new Date();
|
|
@@ -19821,7 +19793,7 @@ var HurryUp = function (_a) {
|
|
|
19821
19793
|
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
19822
19794
|
};
|
|
19823
19795
|
|
|
19824
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
19796
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
19825
19797
|
var size = _a.size;
|
|
19826
19798
|
return (size ? size : '100%');
|
|
19827
19799
|
}, function (_a) {
|
|
@@ -19835,7 +19807,7 @@ var borderSize = {
|
|
|
19835
19807
|
large: '3px',
|
|
19836
19808
|
};
|
|
19837
19809
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
19838
|
-
var StyledSpinner = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
19810
|
+
var StyledSpinner = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n top: 50%;\n left: 50%;\n box-sizing: border-box;\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 100%;\n animation: rotation ", "s infinite linear;\n\n @keyframes rotation {\n from {\n transform: translateX(-50%) translateY(-50%) rotate(0deg);\n }\n to {\n transform: translateX(-50%) translateY(-50%) rotate(359deg);\n }\n }\n"])), function (_a) {
|
|
19839
19811
|
var size = _a.size;
|
|
19840
19812
|
return borderSize[size];
|
|
19841
19813
|
}, function (_a) {
|
|
@@ -19848,11 +19820,99 @@ var StyledSpinner = newStyled.div(templateObject_2 || (templateObject_2 = __make
|
|
|
19848
19820
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
19849
19821
|
return duration;
|
|
19850
19822
|
});
|
|
19851
|
-
var templateObject_1, templateObject_2;
|
|
19823
|
+
var templateObject_1$1, templateObject_2$1;
|
|
19852
19824
|
|
|
19853
19825
|
var Spinner = function (_a) {
|
|
19854
19826
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
19855
|
-
return (jsxRuntime.jsx(Container, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsxRuntime.jsx(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : exports.ComponentSize.Small }, void 0)) }), void 0));
|
|
19827
|
+
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));
|
|
19828
|
+
};
|
|
19829
|
+
|
|
19830
|
+
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"])));
|
|
19831
|
+
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: 5px;\n }\n\n .slick-next {\n right: 5px;\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: 5px;\n }\n\n .slick-next {\n right: 5px;\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) {
|
|
19832
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
19833
|
+
return borderRadiusVariant &&
|
|
19834
|
+
"\n border-radius: 40px;\n ";
|
|
19835
|
+
}, function (_a) {
|
|
19836
|
+
var theme = _a.theme;
|
|
19837
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
19838
|
+
}, function (_a) {
|
|
19839
|
+
var theme = _a.theme;
|
|
19840
|
+
return theme.component.gallery.aspectRatio;
|
|
19841
|
+
});
|
|
19842
|
+
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"])));
|
|
19843
|
+
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"])));
|
|
19844
|
+
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) {
|
|
19845
|
+
var theme = _a.theme;
|
|
19846
|
+
return theme.colors.shades.white.color;
|
|
19847
|
+
});
|
|
19848
|
+
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"])));
|
|
19849
|
+
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) {
|
|
19850
|
+
var theme = _a.theme;
|
|
19851
|
+
return theme.colors.pallete.primary.color;
|
|
19852
|
+
});
|
|
19853
|
+
var SlideItem = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-right: 10px;\n aspect-ratio: ", ";\n"], ["\n padding-right: 10px;\n aspect-ratio: ", ";\n"])), function (_a) {
|
|
19854
|
+
var theme = _a.theme;
|
|
19855
|
+
return theme.component.gallery.aspectRatio;
|
|
19856
|
+
});
|
|
19857
|
+
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) {
|
|
19858
|
+
var theme = _a.theme;
|
|
19859
|
+
return theme.component.gallery.aspectRatio;
|
|
19860
|
+
});
|
|
19861
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
19862
|
+
|
|
19863
|
+
var SETTINGS = {
|
|
19864
|
+
infinite: false,
|
|
19865
|
+
speed: 200,
|
|
19866
|
+
slidesToShow: 1,
|
|
19867
|
+
slidesToScroll: 1,
|
|
19868
|
+
initialSlide: 0,
|
|
19869
|
+
arrows: true,
|
|
19870
|
+
dots: false,
|
|
19871
|
+
};
|
|
19872
|
+
var THUMBNAIL_SETTINGS = {
|
|
19873
|
+
slidesToShow: 3.5,
|
|
19874
|
+
swipeToSlide: true,
|
|
19875
|
+
focusOnSelect: true,
|
|
19876
|
+
infinite: false,
|
|
19877
|
+
centerPadding: '16px',
|
|
19878
|
+
responsive: [
|
|
19879
|
+
{
|
|
19880
|
+
breakpoint: 1024,
|
|
19881
|
+
settings: {
|
|
19882
|
+
slidesToShow: 5,
|
|
19883
|
+
},
|
|
19884
|
+
},
|
|
19885
|
+
{
|
|
19886
|
+
breakpoint: 640,
|
|
19887
|
+
settings: {
|
|
19888
|
+
slidesToShow: 4.5,
|
|
19889
|
+
},
|
|
19890
|
+
},
|
|
19891
|
+
],
|
|
19892
|
+
};
|
|
19893
|
+
var ProductGalleryMobileV4 = function (_a) {
|
|
19894
|
+
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId;
|
|
19895
|
+
var _b = useTheme$1(), colors = _b.colors, component = _b.component;
|
|
19896
|
+
var _c = React$2.useState(undefined), nav1 = _c[0], setNav1 = _c[1];
|
|
19897
|
+
var _d = React$2.useState(undefined), nav2 = _d[0], setNav2 = _d[1];
|
|
19898
|
+
var slick = React$2.useRef(null);
|
|
19899
|
+
var thumbnailRef = React$2.useRef(null);
|
|
19900
|
+
var sliderWrapper = React$2.useRef(null);
|
|
19901
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
19902
|
+
React$2.useEffect(function () {
|
|
19903
|
+
if (slick.current)
|
|
19904
|
+
setNav1(slick.current);
|
|
19905
|
+
if (thumbnailRef.current)
|
|
19906
|
+
setNav2(thumbnailRef.current);
|
|
19907
|
+
}, []);
|
|
19908
|
+
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) {
|
|
19909
|
+
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
19910
|
+
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));
|
|
19911
|
+
}) }), void 0), jsxRuntime.jsx(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, THUMBNAIL_SETTINGS, { children: images.map(function (_a) {
|
|
19912
|
+
var _b, _c;
|
|
19913
|
+
var url = _a.url, key = _a.key;
|
|
19914
|
+
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));
|
|
19915
|
+
}) }), void 0)] }), void 0) }), void 0));
|
|
19856
19916
|
};
|
|
19857
19917
|
|
|
19858
19918
|
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
@@ -19917,6 +19977,7 @@ exports.ProductGallery = ProductGallery;
|
|
|
19917
19977
|
exports.ProductGalleryMobile = ProductGalleryMobile;
|
|
19918
19978
|
exports.ProductGalleryMobileV2 = ProductGalleryMobileV2;
|
|
19919
19979
|
exports.ProductGalleryMobileV3 = ProductGalleryMobileV3;
|
|
19980
|
+
exports.ProductGalleryMobileV4 = ProductGalleryMobileV4;
|
|
19920
19981
|
exports.ProgressBar = ProgressBar;
|
|
19921
19982
|
exports.QuantityPicker = QuantityPicker;
|
|
19922
19983
|
exports.RadioGroupInput = RadioGroupInput;
|