@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.esm.js
CHANGED
|
@@ -3127,7 +3127,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3127
3127
|
desktop: 1280,
|
|
3128
3128
|
};
|
|
3129
3129
|
|
|
3130
|
-
var Container$
|
|
3130
|
+
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) {
|
|
3131
3131
|
var height = _a.height;
|
|
3132
3132
|
return (height ? height : '1.5em');
|
|
3133
3133
|
}, function (_a) {
|
|
@@ -3152,11 +3152,11 @@ var Container$1c = newStyled.div(templateObject_1$1X || (templateObject_1$1X = _
|
|
|
3152
3152
|
var SkeletonBox = function (_a) {
|
|
3153
3153
|
var width = _a.width, height = _a.height;
|
|
3154
3154
|
var theme = useTheme();
|
|
3155
|
-
return jsx$1(Container$
|
|
3155
|
+
return jsx$1(Container$1d, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3156
3156
|
};
|
|
3157
|
-
var templateObject_1$
|
|
3157
|
+
var templateObject_1$1Y;
|
|
3158
3158
|
|
|
3159
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3159
|
+
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) {
|
|
3160
3160
|
var width = _a.width;
|
|
3161
3161
|
return width;
|
|
3162
3162
|
}, function (_a) {
|
|
@@ -3172,7 +3172,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1W || (templateObject_1$1W
|
|
|
3172
3172
|
var opacity = _a.opacity;
|
|
3173
3173
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3174
3174
|
});
|
|
3175
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3175
|
+
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) {
|
|
3176
3176
|
var width = _a.width;
|
|
3177
3177
|
return width;
|
|
3178
3178
|
}, function (_a) {
|
|
@@ -3185,7 +3185,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1h || (templateObject_2$
|
|
|
3185
3185
|
var opacity = _a.opacity;
|
|
3186
3186
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3187
3187
|
});
|
|
3188
|
-
var templateObject_1$
|
|
3188
|
+
var templateObject_1$1X, templateObject_2$1i;
|
|
3189
3189
|
|
|
3190
3190
|
/* eslint-disable no-undef */
|
|
3191
3191
|
var cache = new Map();
|
|
@@ -3361,7 +3361,7 @@ var buildImageUrl = function (_a) {
|
|
|
3361
3361
|
}
|
|
3362
3362
|
};
|
|
3363
3363
|
|
|
3364
|
-
var Img = newStyled.img(templateObject_1$
|
|
3364
|
+
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; });
|
|
3365
3365
|
var Image$3 = function (_a) {
|
|
3366
3366
|
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;
|
|
3367
3367
|
var config = useTheme().config;
|
|
@@ -3370,7 +3370,7 @@ var Image$3 = function (_a) {
|
|
|
3370
3370
|
: src;
|
|
3371
3371
|
return (jsx$1(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));
|
|
3372
3372
|
};
|
|
3373
|
-
var templateObject_1$
|
|
3373
|
+
var templateObject_1$1W;
|
|
3374
3374
|
|
|
3375
3375
|
var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3376
3376
|
|
|
@@ -4155,15 +4155,15 @@ function jsxs(type, props, key) {
|
|
|
4155
4155
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4156
4156
|
// `variants` styles that are consistent through all themes.
|
|
4157
4157
|
var TAGS = {
|
|
4158
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4159
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4160
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4161
|
-
display1: newStyled.h1(templateObject_4$
|
|
4162
|
-
display2: newStyled.h2(templateObject_5$
|
|
4163
|
-
display3: newStyled.h3(templateObject_6$
|
|
4164
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4165
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4166
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4158
|
+
hero1: newStyled.h1(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""]))),
|
|
4159
|
+
hero2: newStyled.h2(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject([""], [""]))),
|
|
4160
|
+
hero3: newStyled.h3(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject([""], [""]))),
|
|
4161
|
+
display1: newStyled.h1(templateObject_4$L || (templateObject_4$L = __makeTemplateObject([""], [""]))),
|
|
4162
|
+
display2: newStyled.h2(templateObject_5$x || (templateObject_5$x = __makeTemplateObject([""], [""]))),
|
|
4163
|
+
display3: newStyled.h3(templateObject_6$s || (templateObject_6$s = __makeTemplateObject([""], [""]))),
|
|
4164
|
+
heading1: newStyled.h1(templateObject_7$j || (templateObject_7$j = __makeTemplateObject([""], [""]))),
|
|
4165
|
+
heading2: newStyled.h2(templateObject_8$h || (templateObject_8$h = __makeTemplateObject([""], [""]))),
|
|
4166
|
+
heading3: newStyled.h3(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject([""], [""]))),
|
|
4167
4167
|
heading4: newStyled.h4(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject([""], [""]))),
|
|
4168
4168
|
heading5: newStyled.h5(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject([""], [""]))),
|
|
4169
4169
|
heading6: newStyled.h6(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject([""], [""]))),
|
|
@@ -4291,17 +4291,17 @@ var DEFAULTS = {
|
|
|
4291
4291
|
size: 'regular',
|
|
4292
4292
|
},
|
|
4293
4293
|
};
|
|
4294
|
-
var templateObject_1$
|
|
4295
|
-
|
|
4296
|
-
var Container$
|
|
4297
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4298
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4299
|
-
var Label$5 = newStyled.div(templateObject_4$
|
|
4300
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4301
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4294
|
+
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;
|
|
4295
|
+
|
|
4296
|
+
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"])));
|
|
4297
|
+
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"])));
|
|
4298
|
+
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"])));
|
|
4299
|
+
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"])));
|
|
4300
|
+
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"])));
|
|
4301
|
+
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"])));
|
|
4302
4302
|
var PackSelectorV2 = function (_a) {
|
|
4303
4303
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4304
|
-
return (jsx$1(Container$
|
|
4304
|
+
return (jsx$1(Container$1c, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4305
4305
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4306
4306
|
}) }), void 0));
|
|
4307
4307
|
};
|
|
@@ -4323,27 +4323,27 @@ var PackCard$1 = function (_a) {
|
|
|
4323
4323
|
currency: currencyCode || 'USD',
|
|
4324
4324
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4325
4325
|
};
|
|
4326
|
-
var templateObject_1$
|
|
4326
|
+
var templateObject_1$1U, templateObject_2$1g, templateObject_3$Z, templateObject_4$K, templateObject_5$w, templateObject_6$r;
|
|
4327
4327
|
|
|
4328
|
-
var Container$
|
|
4329
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4328
|
+
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"])));
|
|
4329
|
+
var DropContainer = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4330
4330
|
var DropList = function (_a) {
|
|
4331
4331
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4332
|
-
return (jsx$1(Container$
|
|
4332
|
+
return (jsx$1(Container$1b, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4333
4333
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4334
4334
|
}) }, void 0));
|
|
4335
4335
|
};
|
|
4336
|
-
var templateObject_1$
|
|
4336
|
+
var templateObject_1$1T, templateObject_2$1f;
|
|
4337
4337
|
|
|
4338
4338
|
var DROPS_TOTAL = 5;
|
|
4339
|
-
var Container$
|
|
4340
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4341
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4339
|
+
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"])));
|
|
4340
|
+
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"])));
|
|
4341
|
+
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"])));
|
|
4342
4342
|
var AbsorbencyLevel = function (_a) {
|
|
4343
4343
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4344
|
-
return (jsxs$1(Container$
|
|
4344
|
+
return (jsxs$1(Container$1a, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4345
4345
|
};
|
|
4346
|
-
var templateObject_1$
|
|
4346
|
+
var templateObject_1$1S, templateObject_2$1e, templateObject_3$Y;
|
|
4347
4347
|
|
|
4348
4348
|
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]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),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===Fragment$1&&Object.keys(l).length>0){if(!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(`
|
|
4349
4349
|
`),"","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(`
|
|
@@ -4419,7 +4419,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4419
4419
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4420
4420
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4421
4421
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4422
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4422
|
+
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"])));
|
|
4423
4423
|
var Accordion$1 = function (_a) {
|
|
4424
4424
|
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;
|
|
4425
4425
|
var theme = useTheme();
|
|
@@ -4443,9 +4443,9 @@ var Accordion$1 = function (_a) {
|
|
|
4443
4443
|
} }, { children: jsx$1(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 && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4444
4444
|
} }), void 0));
|
|
4445
4445
|
};
|
|
4446
|
-
var templateObject_1$
|
|
4446
|
+
var templateObject_1$1R;
|
|
4447
4447
|
|
|
4448
|
-
var Container$
|
|
4448
|
+
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"])));
|
|
4449
4449
|
var AccordionOptions = function (_a) {
|
|
4450
4450
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4451
4451
|
var _b = useState({
|
|
@@ -4458,7 +4458,7 @@ var AccordionOptions = function (_a) {
|
|
|
4458
4458
|
}
|
|
4459
4459
|
return false;
|
|
4460
4460
|
};
|
|
4461
|
-
return (jsx$1(Container$
|
|
4461
|
+
return (jsx$1(Container$19, { children: accordions.map(function (accordion, index) {
|
|
4462
4462
|
var forceOpenValue = getForceOpen(index);
|
|
4463
4463
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4464
4464
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4469,7 +4469,7 @@ var AccordionOptions = function (_a) {
|
|
|
4469
4469
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4470
4470
|
}) }, void 0));
|
|
4471
4471
|
};
|
|
4472
|
-
var templateObject_1$
|
|
4472
|
+
var templateObject_1$1Q;
|
|
4473
4473
|
|
|
4474
4474
|
var CardSectionType;
|
|
4475
4475
|
(function (CardSectionType) {
|
|
@@ -4631,14 +4631,14 @@ var isValidDate = function (value) {
|
|
|
4631
4631
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
4632
4632
|
};
|
|
4633
4633
|
|
|
4634
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4635
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4634
|
+
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; });
|
|
4635
|
+
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"])));
|
|
4636
4636
|
var Error$1 = function (_a) {
|
|
4637
4637
|
var error = _a.error;
|
|
4638
4638
|
var theme = useTheme();
|
|
4639
4639
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4640
4640
|
};
|
|
4641
|
-
var templateObject_1$
|
|
4641
|
+
var templateObject_1$1P, templateObject_2$1d;
|
|
4642
4642
|
|
|
4643
4643
|
var BaseSelectButton = function (_a) {
|
|
4644
4644
|
var children = _a.children, as = _a.as;
|
|
@@ -4655,7 +4655,7 @@ function BaseSelectOption(_a) {
|
|
|
4655
4655
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4656
4656
|
}
|
|
4657
4657
|
|
|
4658
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4658
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4659
4659
|
function BaseSelect(_a) {
|
|
4660
4660
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4661
4661
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4665,7 +4665,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4665
4665
|
Options: BaseSelectOptions,
|
|
4666
4666
|
Option: BaseSelectOption,
|
|
4667
4667
|
});
|
|
4668
|
-
var templateObject_1$
|
|
4668
|
+
var templateObject_1$1O;
|
|
4669
4669
|
|
|
4670
4670
|
var CustomButton = newStyled.button(function (_a) {
|
|
4671
4671
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4704,7 +4704,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4704
4704
|
});
|
|
4705
4705
|
});
|
|
4706
4706
|
//TODO Remove this when we find the real solution
|
|
4707
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4707
|
+
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) {
|
|
4708
4708
|
var open = _a.open;
|
|
4709
4709
|
return open &&
|
|
4710
4710
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4724,7 +4724,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4724
4724
|
} }), void 0));
|
|
4725
4725
|
};
|
|
4726
4726
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4727
|
-
var templateObject_1$
|
|
4727
|
+
var templateObject_1$1N;
|
|
4728
4728
|
|
|
4729
4729
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4730
4730
|
var theme = _a.theme;
|
|
@@ -4891,7 +4891,7 @@ var CustomCheckboxStyles = {
|
|
|
4891
4891
|
},
|
|
4892
4892
|
};
|
|
4893
4893
|
|
|
4894
|
-
var Container$
|
|
4894
|
+
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"])));
|
|
4895
4895
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4896
4896
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4897
4897
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4902,7 +4902,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4902
4902
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4903
4903
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4904
4904
|
]; });
|
|
4905
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4905
|
+
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) {
|
|
4906
4906
|
var disabled = _a.disabled;
|
|
4907
4907
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4908
4908
|
});
|
|
@@ -4916,9 +4916,9 @@ var Checkbox = function (_a) {
|
|
|
4916
4916
|
}
|
|
4917
4917
|
onChange(e.target.checked);
|
|
4918
4918
|
};
|
|
4919
|
-
return (jsxs$1(Container$
|
|
4919
|
+
return (jsxs$1(Container$18, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4920
4920
|
};
|
|
4921
|
-
var templateObject_1$
|
|
4921
|
+
var templateObject_1$1M, templateObject_2$1c;
|
|
4922
4922
|
|
|
4923
4923
|
var CustomOption = newStyled.li(function (_a) {
|
|
4924
4924
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -4967,8 +4967,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4967
4967
|
Option: BaseDropdownOption,
|
|
4968
4968
|
});
|
|
4969
4969
|
|
|
4970
|
-
var Container$
|
|
4971
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4970
|
+
var Container$17 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject([""], [""])));
|
|
4971
|
+
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"])));
|
|
4972
4972
|
function SimpleDropdown(_a) {
|
|
4973
4973
|
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;
|
|
4974
4974
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4997,10 +4997,10 @@ function SimpleDropdown(_a) {
|
|
|
4997
4997
|
}
|
|
4998
4998
|
setSelectedValue(value);
|
|
4999
4999
|
}, [value, options, initialValue]);
|
|
5000
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5000
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$17 : Fragment$1;
|
|
5001
5001
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxs$1(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) && (jsx$1("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionLabel] }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxs$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsx$1("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
5002
5002
|
}
|
|
5003
|
-
var templateObject_1$
|
|
5003
|
+
var templateObject_1$1L, templateObject_2$1b;
|
|
5004
5004
|
|
|
5005
5005
|
/* base styles & size variants */
|
|
5006
5006
|
var CustomRadioStyles$2 = {
|
|
@@ -5065,9 +5065,9 @@ var ContainerStyles$2 = {
|
|
|
5065
5065
|
},
|
|
5066
5066
|
};
|
|
5067
5067
|
|
|
5068
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5069
|
-
var Container$
|
|
5070
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5068
|
+
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"])));
|
|
5069
|
+
var Container$16 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5070
|
+
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) {
|
|
5071
5071
|
var disabled = _a.disabled;
|
|
5072
5072
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5073
5073
|
});
|
|
@@ -5075,14 +5075,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5075
5075
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5076
5076
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5077
5077
|
]; });
|
|
5078
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
5078
|
+
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) {
|
|
5079
5079
|
var theme = _a.theme;
|
|
5080
5080
|
return theme.component.radio.textSize;
|
|
5081
5081
|
}, function (_a) {
|
|
5082
5082
|
var theme = _a.theme;
|
|
5083
5083
|
return theme.component.radio.lineHeight;
|
|
5084
5084
|
});
|
|
5085
|
-
var StyledLabelV2 = newStyled(Label$4)(templateObject_4$
|
|
5085
|
+
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) {
|
|
5086
5086
|
var theme = _a.theme;
|
|
5087
5087
|
return theme.component.radio.textSize;
|
|
5088
5088
|
}, function (_a) {
|
|
@@ -5096,9 +5096,9 @@ var RadioInput = function (_a) {
|
|
|
5096
5096
|
var value = event.currentTarget.value;
|
|
5097
5097
|
onChange({ value: value, label: label });
|
|
5098
5098
|
};
|
|
5099
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5099
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$16, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5100
5100
|
};
|
|
5101
|
-
var templateObject_1$
|
|
5101
|
+
var templateObject_1$1K, templateObject_2$1a, templateObject_3$X, templateObject_4$J;
|
|
5102
5102
|
|
|
5103
5103
|
var getWrapperFlexDirection = function (position) {
|
|
5104
5104
|
switch (position) {
|
|
@@ -5149,7 +5149,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5149
5149
|
}
|
|
5150
5150
|
};
|
|
5151
5151
|
|
|
5152
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5152
|
+
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) {
|
|
5153
5153
|
var position = _a.position;
|
|
5154
5154
|
return getWrapperFlexDirection(position);
|
|
5155
5155
|
}, function (_a) {
|
|
@@ -5159,7 +5159,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __ma
|
|
|
5159
5159
|
var disableHover = _a.disableHover;
|
|
5160
5160
|
return (disableHover ? 0 : 1);
|
|
5161
5161
|
});
|
|
5162
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5162
|
+
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) {
|
|
5163
5163
|
var position = _a.position;
|
|
5164
5164
|
return getContainerFlexDirection(position);
|
|
5165
5165
|
}, function (_a) {
|
|
@@ -5187,25 +5187,25 @@ var TooltipContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18
|
|
|
5187
5187
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5188
5188
|
return actual === expected ? margin : '0';
|
|
5189
5189
|
};
|
|
5190
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5190
|
+
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) {
|
|
5191
5191
|
var borderColor = _a.borderColor;
|
|
5192
5192
|
return borderColor;
|
|
5193
5193
|
}, function (_a) {
|
|
5194
5194
|
var backgroundColor = _a.backgroundColor;
|
|
5195
5195
|
return backgroundColor;
|
|
5196
5196
|
});
|
|
5197
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5197
|
+
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) {
|
|
5198
5198
|
var color = _a.color;
|
|
5199
5199
|
return color;
|
|
5200
5200
|
});
|
|
5201
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5202
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5201
|
+
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"])));
|
|
5202
|
+
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) {
|
|
5203
5203
|
var color = _a.color;
|
|
5204
5204
|
return color;
|
|
5205
5205
|
});
|
|
5206
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5207
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5208
|
-
var templateObject_1$
|
|
5206
|
+
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"])));
|
|
5207
|
+
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"])));
|
|
5208
|
+
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;
|
|
5209
5209
|
|
|
5210
5210
|
var useOnClickOutside = function (ref, handler) {
|
|
5211
5211
|
useEffect(function () {
|
|
@@ -5348,7 +5348,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5348
5348
|
};
|
|
5349
5349
|
}
|
|
5350
5350
|
};
|
|
5351
|
-
var Container$
|
|
5351
|
+
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) {
|
|
5352
5352
|
var backgroundColor = _a.backgroundColor;
|
|
5353
5353
|
return backgroundColor;
|
|
5354
5354
|
}, function (_a) {
|
|
@@ -5370,7 +5370,7 @@ var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5370
5370
|
var size = _a.size;
|
|
5371
5371
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5372
5372
|
});
|
|
5373
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5373
|
+
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) {
|
|
5374
5374
|
var textColor = _a.textColor;
|
|
5375
5375
|
return textColor;
|
|
5376
5376
|
}, function (_a) {
|
|
@@ -5385,9 +5385,9 @@ var H3$3 = newStyled.h3(templateObject_2$17 || (templateObject_2$17 = __makeTemp
|
|
|
5385
5385
|
var ClubOfferTag = function (_a) {
|
|
5386
5386
|
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 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5387
5387
|
var theme = useTheme();
|
|
5388
|
-
return (jsx$1(Container$
|
|
5388
|
+
return (jsx$1(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: jsx$1(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));
|
|
5389
5389
|
};
|
|
5390
|
-
var templateObject_1$
|
|
5390
|
+
var templateObject_1$1I, templateObject_2$18;
|
|
5391
5391
|
|
|
5392
5392
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5393
5393
|
var _a, _b, _c;
|
|
@@ -5418,7 +5418,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5418
5418
|
};
|
|
5419
5419
|
}
|
|
5420
5420
|
};
|
|
5421
|
-
var Container$
|
|
5421
|
+
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) {
|
|
5422
5422
|
var backgroundColor = _a.backgroundColor;
|
|
5423
5423
|
return backgroundColor;
|
|
5424
5424
|
}, function (_a) {
|
|
@@ -5440,7 +5440,7 @@ var Container$13 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5440
5440
|
var size = _a.size;
|
|
5441
5441
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5442
5442
|
});
|
|
5443
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5443
|
+
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) {
|
|
5444
5444
|
var textColor = _a.textColor;
|
|
5445
5445
|
return textColor;
|
|
5446
5446
|
}, function (_a) {
|
|
@@ -5455,9 +5455,9 @@ var H3$2 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5455
5455
|
var DiscountTag$1 = function (_a) {
|
|
5456
5456
|
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 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5457
5457
|
var theme = useTheme();
|
|
5458
|
-
return (jsx$1(Container$
|
|
5458
|
+
return (jsx$1(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: jsxs$1(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));
|
|
5459
5459
|
};
|
|
5460
|
-
var templateObject_1$
|
|
5460
|
+
var templateObject_1$1H, templateObject_2$17;
|
|
5461
5461
|
|
|
5462
5462
|
var getStylesBySize$b = function (size, theme) {
|
|
5463
5463
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5499,8 +5499,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5499
5499
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5500
5500
|
}
|
|
5501
5501
|
};
|
|
5502
|
-
var Container$
|
|
5503
|
-
var Price = newStyled.p(templateObject_2$
|
|
5502
|
+
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"])));
|
|
5503
|
+
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) {
|
|
5504
5504
|
var weight = _a.weight;
|
|
5505
5505
|
return (weight ? weight : '400');
|
|
5506
5506
|
}, function (_a) {
|
|
@@ -5524,7 +5524,7 @@ var Price = newStyled.p(templateObject_2$15 || (templateObject_2$15 = __makeTemp
|
|
|
5524
5524
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5525
5525
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5526
5526
|
});
|
|
5527
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5527
|
+
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) {
|
|
5528
5528
|
var _b;
|
|
5529
5529
|
var size = _a.size;
|
|
5530
5530
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5555,11 +5555,11 @@ var PriceLabel = function (_a) {
|
|
|
5555
5555
|
: ComponentSize.XSmall;
|
|
5556
5556
|
return (jsx$1(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));
|
|
5557
5557
|
};
|
|
5558
|
-
return (jsxs$1(Container$
|
|
5558
|
+
return (jsxs$1(Container$13, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5559
5559
|
};
|
|
5560
|
-
var templateObject_1$
|
|
5560
|
+
var templateObject_1$1G, templateObject_2$16, templateObject_3$V;
|
|
5561
5561
|
|
|
5562
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5562
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5563
5563
|
var PriceLabelV2 = function (_a) {
|
|
5564
5564
|
var _b;
|
|
5565
5565
|
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 ? 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"]);
|
|
@@ -5612,7 +5612,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5612
5612
|
var savetoString = saveto.toFixed(2);
|
|
5613
5613
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5614
5614
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5615
|
-
return (jsxs$1(Container$
|
|
5615
|
+
return (jsxs$1(Container$13, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5616
5616
|
marginTop: '-5px',
|
|
5617
5617
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5618
5618
|
? finalPriceArray[0]
|
|
@@ -5630,11 +5630,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5630
5630
|
lineHeight: '22px',
|
|
5631
5631
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5632
5632
|
};
|
|
5633
|
-
var templateObject_1$
|
|
5633
|
+
var templateObject_1$1F;
|
|
5634
5634
|
|
|
5635
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5636
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5637
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5635
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5636
|
+
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"])));
|
|
5637
|
+
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"])));
|
|
5638
5638
|
var PriceLabelV3 = function (_a) {
|
|
5639
5639
|
var _b;
|
|
5640
5640
|
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 ? 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"]);
|
|
@@ -5689,7 +5689,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5689
5689
|
return null;
|
|
5690
5690
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5691
5691
|
};
|
|
5692
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
5692
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$13, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$13, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5693
5693
|
marginTop: '-5px',
|
|
5694
5694
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(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), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5695
5695
|
marginTop: '-6px',
|
|
@@ -5705,10 +5705,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5705
5705
|
lineHeight: '22px',
|
|
5706
5706
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5707
5707
|
};
|
|
5708
|
-
var templateObject_1$
|
|
5708
|
+
var templateObject_1$1E, templateObject_2$15, templateObject_3$U;
|
|
5709
5709
|
|
|
5710
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
5711
|
-
var ContainerBase$1 = newStyled.div(templateObject_2$
|
|
5710
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5711
|
+
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) {
|
|
5712
5712
|
var selected = _a.selected, theme = _a.theme;
|
|
5713
5713
|
return selected
|
|
5714
5714
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5722,30 +5722,30 @@ var ContainerBase$1 = newStyled.div(templateObject_2$13 || (templateObject_2$13
|
|
|
5722
5722
|
var theme = _a.theme;
|
|
5723
5723
|
return theme.colors.pallete.primary.color;
|
|
5724
5724
|
});
|
|
5725
|
-
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$
|
|
5725
|
+
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) {
|
|
5726
5726
|
var onClick = _a.onClick;
|
|
5727
5727
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5728
5728
|
});
|
|
5729
|
-
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$
|
|
5730
|
-
var SubscriptionHeader$1 = newStyled.div(templateObject_5$
|
|
5729
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5730
|
+
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) {
|
|
5731
5731
|
var theme = _a.theme;
|
|
5732
5732
|
return theme.colors.shades[200].color;
|
|
5733
5733
|
}, function (_a) {
|
|
5734
5734
|
var theme = _a.theme;
|
|
5735
5735
|
return theme.colors.pallete.primary.color;
|
|
5736
5736
|
});
|
|
5737
|
-
var BenefitsContainer$1 = newStyled.div(templateObject_6$
|
|
5738
|
-
var Benefit$1 = newStyled.div(templateObject_7$
|
|
5739
|
-
var BenefitText$1 = newStyled(Text$7)(templateObject_8$
|
|
5740
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5737
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5738
|
+
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"])));
|
|
5739
|
+
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"])));
|
|
5740
|
+
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"])));
|
|
5741
5741
|
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"])));
|
|
5742
5742
|
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"])));
|
|
5743
5743
|
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) {
|
|
5744
5744
|
var selected = _a.selected, theme = _a.theme;
|
|
5745
5745
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5746
5746
|
});
|
|
5747
|
-
var Container$
|
|
5748
|
-
var templateObject_1$
|
|
5747
|
+
var Container$12 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5748
|
+
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;
|
|
5749
5749
|
|
|
5750
5750
|
var radioIds$1 = {
|
|
5751
5751
|
oneTime: {
|
|
@@ -5795,14 +5795,20 @@ var Autoship = function (_a) {
|
|
|
5795
5795
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5796
5796
|
};
|
|
5797
5797
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5798
|
-
return (jsxs$1(Container$
|
|
5798
|
+
return (jsxs$1(Container$12, __assign$1({ className: className }, { children: [jsxs$1(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: [jsx$1(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: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$1, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$1, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, { children: [jsx$1(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: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$1, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$1, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
5799
5799
|
? benefitsColor.selected
|
|
5800
5800
|
: benefitsColor.base }, void 0), jsx$1(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$1, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$1, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5801
5801
|
};
|
|
5802
5802
|
|
|
5803
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5804
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
5805
|
-
var
|
|
5803
|
+
var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5804
|
+
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) {
|
|
5805
|
+
var theme = _a.theme;
|
|
5806
|
+
return theme.component.autoship.discountTag.backgroundColor;
|
|
5807
|
+
}, function (_a) {
|
|
5808
|
+
var theme = _a.theme;
|
|
5809
|
+
return theme.component.autoship.discountTag.borderRadius;
|
|
5810
|
+
});
|
|
5811
|
+
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) {
|
|
5806
5812
|
var selected = _a.selected, theme = _a.theme;
|
|
5807
5813
|
return selected
|
|
5808
5814
|
? "1.5px solid ".concat(theme.colors.shades['700'].color)
|
|
@@ -5816,28 +5822,28 @@ var ContainerBase = newStyled.div(templateObject_3$R || (templateObject_3$R = __
|
|
|
5816
5822
|
var theme = _a.theme;
|
|
5817
5823
|
return theme.colors.pallete.primary.color;
|
|
5818
5824
|
});
|
|
5819
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5825
|
+
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) {
|
|
5820
5826
|
var onClick = _a.onClick;
|
|
5821
5827
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5822
5828
|
});
|
|
5823
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
5824
|
-
var SubscriptionHeader = newStyled.div(templateObject_6$
|
|
5829
|
+
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"])));
|
|
5830
|
+
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) {
|
|
5825
5831
|
var theme = _a.theme;
|
|
5826
5832
|
return theme.colors.shades[200].color;
|
|
5827
5833
|
}, function (_a) {
|
|
5828
5834
|
var theme = _a.theme;
|
|
5829
5835
|
return theme.colors.pallete.primary.color;
|
|
5830
5836
|
});
|
|
5831
|
-
var BenefitsContainer = newStyled.div(templateObject_7$
|
|
5832
|
-
var Benefit = newStyled.div(templateObject_8$
|
|
5833
|
-
var BenefitText = newStyled(Text$7)(templateObject_9$
|
|
5837
|
+
var BenefitsContainer = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5838
|
+
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"])));
|
|
5839
|
+
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"])));
|
|
5834
5840
|
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"])));
|
|
5835
5841
|
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) {
|
|
5836
5842
|
var selected = _a.selected, theme = _a.theme;
|
|
5837
5843
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5838
5844
|
});
|
|
5839
|
-
var Container$
|
|
5840
|
-
var templateObject_1$
|
|
5845
|
+
var Container$11 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5846
|
+
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;
|
|
5841
5847
|
|
|
5842
5848
|
var radioIds = {
|
|
5843
5849
|
oneTime: {
|
|
@@ -5850,7 +5856,7 @@ var radioIds = {
|
|
|
5850
5856
|
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5851
5857
|
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5852
5858
|
var AutoshipV2 = function (_a) {
|
|
5853
|
-
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;
|
|
5859
|
+
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;
|
|
5854
5860
|
var theme = useTheme();
|
|
5855
5861
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5856
5862
|
? frequencyValues.map(function (value) {
|
|
@@ -5900,7 +5906,7 @@ var AutoshipV2 = function (_a) {
|
|
|
5900
5906
|
return (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0));
|
|
5901
5907
|
}
|
|
5902
5908
|
}
|
|
5903
|
-
return (jsxs$1(Container$
|
|
5909
|
+
return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }, void 0), jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxs$1(FlexContainer, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); }, style: { marginRight: '10px' }, useV2Style: true }, void 0), jsx$1("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5904
5910
|
? benefitsColor.selected
|
|
5905
5911
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsx$1(Fragment$2, { children: jsx$1(FlexContainer, { children: jsx$1(DeliveryFrequencySelector, {}, void 0) }, void 0) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
5906
5912
|
};
|
|
@@ -5918,13 +5924,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5918
5924
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5919
5925
|
_a$2);
|
|
5920
5926
|
|
|
5921
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5922
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
5923
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5924
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
5925
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
5926
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
5927
|
-
var templateObject_1$
|
|
5927
|
+
var CustomerDetails = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject([""], [""])));
|
|
5928
|
+
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"])));
|
|
5929
|
+
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"])));
|
|
5930
|
+
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"])));
|
|
5931
|
+
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"])));
|
|
5932
|
+
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"])));
|
|
5933
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$s, templateObject_6$n;
|
|
5928
5934
|
|
|
5929
5935
|
var NameWithStars = function (_a) {
|
|
5930
5936
|
var name = _a.name, size = _a.size;
|
|
@@ -5942,10 +5948,10 @@ var ResultFeedback = function (_a) {
|
|
|
5942
5948
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5943
5949
|
};
|
|
5944
5950
|
|
|
5945
|
-
var Container
|
|
5946
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5947
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5948
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
5951
|
+
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; });
|
|
5952
|
+
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"])));
|
|
5953
|
+
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; });
|
|
5954
|
+
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) {
|
|
5949
5955
|
var theme = _a.theme;
|
|
5950
5956
|
return theme.colors.pallete.secondary.color;
|
|
5951
5957
|
}, function (_a) {
|
|
@@ -5955,7 +5961,7 @@ var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __m
|
|
|
5955
5961
|
var theme = _a.theme, size = _a.size;
|
|
5956
5962
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5957
5963
|
});
|
|
5958
|
-
var templateObject_1$
|
|
5964
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E;
|
|
5959
5965
|
|
|
5960
5966
|
/* base styles & size variants */
|
|
5961
5967
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6030,10 +6036,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6030
6036
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
6031
6037
|
var infoText = buildInfoText(name, age, months);
|
|
6032
6038
|
var Component = componentByVariant[variant];
|
|
6033
|
-
return (jsxs$1(Container
|
|
6039
|
+
return (jsxs$1(Container$10, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6034
6040
|
};
|
|
6035
6041
|
|
|
6036
|
-
var Section = newStyled.div(templateObject_1$
|
|
6042
|
+
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) {
|
|
6037
6043
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6038
6044
|
});
|
|
6039
6045
|
var CardHeader = function (_a) {
|
|
@@ -6044,16 +6050,16 @@ var CardFooter = function (_a) {
|
|
|
6044
6050
|
var children = _a.children;
|
|
6045
6051
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6046
6052
|
};
|
|
6047
|
-
var templateObject_1$
|
|
6053
|
+
var templateObject_1$1z;
|
|
6048
6054
|
|
|
6049
|
-
var Body = newStyled.div(templateObject_1$
|
|
6055
|
+
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"])));
|
|
6050
6056
|
var CardBody = function (_a) {
|
|
6051
6057
|
var children = _a.children;
|
|
6052
6058
|
return jsx$1(Body, { children: children }, void 0);
|
|
6053
6059
|
};
|
|
6054
|
-
var templateObject_1$
|
|
6060
|
+
var templateObject_1$1y;
|
|
6055
6061
|
|
|
6056
|
-
var Container
|
|
6062
|
+
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) {
|
|
6057
6063
|
var flex = _a.flex;
|
|
6058
6064
|
return flex &&
|
|
6059
6065
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6068,23 +6074,23 @@ var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __
|
|
|
6068
6074
|
var Card$1 = function (_a) {
|
|
6069
6075
|
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;
|
|
6070
6076
|
var theme = useTheme();
|
|
6071
|
-
return (jsx$1(Container
|
|
6077
|
+
return (jsx$1(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));
|
|
6072
6078
|
};
|
|
6073
6079
|
var Card$2 = Object.assign(Card$1, {
|
|
6074
6080
|
Header: CardHeader,
|
|
6075
6081
|
Footer: CardFooter,
|
|
6076
6082
|
Body: CardBody,
|
|
6077
6083
|
});
|
|
6078
|
-
var templateObject_1$
|
|
6084
|
+
var templateObject_1$1x;
|
|
6079
6085
|
|
|
6080
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6081
|
-
var StyledContainer = newStyled.div(templateObject_2
|
|
6082
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6086
|
+
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"])));
|
|
6087
|
+
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"])));
|
|
6088
|
+
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) {
|
|
6083
6089
|
var color = _a.color;
|
|
6084
6090
|
return color;
|
|
6085
6091
|
});
|
|
6086
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6087
|
-
var templateObject_1$
|
|
6092
|
+
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"])));
|
|
6093
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$P, templateObject_4$D;
|
|
6088
6094
|
|
|
6089
6095
|
var Minimalistic = function (_a) {
|
|
6090
6096
|
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;
|
|
@@ -6092,28 +6098,28 @@ var Minimalistic = function (_a) {
|
|
|
6092
6098
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
6093
6099
|
};
|
|
6094
6100
|
|
|
6095
|
-
var Container$
|
|
6096
|
-
var Title$6 = newStyled.h1(templateObject_2
|
|
6097
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
6098
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
6101
|
+
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"])));
|
|
6102
|
+
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; });
|
|
6103
|
+
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; });
|
|
6104
|
+
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"])));
|
|
6099
6105
|
var Simple = function (_a) {
|
|
6100
6106
|
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;
|
|
6101
6107
|
var theme = useTheme();
|
|
6102
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6108
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$_, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6103
6109
|
};
|
|
6104
|
-
var templateObject_1$
|
|
6110
|
+
var templateObject_1$1v, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
6105
6111
|
|
|
6106
6112
|
var Bundle = {
|
|
6107
6113
|
Minimalistic: Minimalistic,
|
|
6108
6114
|
Simple: Simple,
|
|
6109
6115
|
};
|
|
6110
6116
|
|
|
6111
|
-
var Container$
|
|
6117
|
+
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) {
|
|
6112
6118
|
var displayBNPL = _a.displayBNPL;
|
|
6113
6119
|
return (displayBNPL ? 'flex' : 'none');
|
|
6114
6120
|
});
|
|
6115
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6116
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6121
|
+
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"])));
|
|
6122
|
+
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"])));
|
|
6117
6123
|
var BuyNowPayLater = function (_a) {
|
|
6118
6124
|
var _b;
|
|
6119
6125
|
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;
|
|
@@ -6123,43 +6129,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6123
6129
|
console.error('Icon', iconName, 'not found');
|
|
6124
6130
|
return null;
|
|
6125
6131
|
}
|
|
6126
|
-
return (jsx$1(Container$
|
|
6132
|
+
return (jsx$1(Container$Z, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6127
6133
|
};
|
|
6128
|
-
var templateObject_1$
|
|
6134
|
+
var templateObject_1$1u, templateObject_2$_, templateObject_3$N;
|
|
6129
6135
|
|
|
6130
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6136
|
+
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; });
|
|
6131
6137
|
var Title$5 = function (_a) {
|
|
6132
6138
|
var title = _a.title;
|
|
6133
6139
|
var theme = useTheme();
|
|
6134
6140
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6135
6141
|
};
|
|
6136
|
-
var templateObject_1$
|
|
6142
|
+
var templateObject_1$1t;
|
|
6137
6143
|
|
|
6138
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6144
|
+
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; });
|
|
6139
6145
|
var Promo = function (_a) {
|
|
6140
6146
|
var text = _a.text;
|
|
6141
6147
|
var theme = useTheme();
|
|
6142
6148
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6143
6149
|
};
|
|
6144
|
-
var templateObject_1$
|
|
6150
|
+
var templateObject_1$1s;
|
|
6145
6151
|
|
|
6146
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6152
|
+
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; });
|
|
6147
6153
|
var Description$1 = function (_a) {
|
|
6148
6154
|
var text = _a.text;
|
|
6149
6155
|
var theme = useTheme();
|
|
6150
6156
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6151
6157
|
};
|
|
6152
|
-
var templateObject_1$
|
|
6158
|
+
var templateObject_1$1r;
|
|
6153
6159
|
|
|
6154
|
-
var Container$
|
|
6160
|
+
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"); });
|
|
6155
6161
|
var CloseButton$1 = function (_a) {
|
|
6156
6162
|
var onClick = _a.onClick, size = _a.size;
|
|
6157
6163
|
var theme = useTheme();
|
|
6158
|
-
return (jsx$1(Container$
|
|
6164
|
+
return (jsx$1(Container$Y, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6159
6165
|
};
|
|
6160
|
-
var templateObject_1$
|
|
6166
|
+
var templateObject_1$1q;
|
|
6161
6167
|
|
|
6162
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6168
|
+
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) {
|
|
6163
6169
|
var backgroundColor = _a.backgroundColor;
|
|
6164
6170
|
return backgroundColor;
|
|
6165
6171
|
}, function (_a) {
|
|
@@ -6174,7 +6180,7 @@ var OfferBanner = function (_a) {
|
|
|
6174
6180
|
var theme = useTheme();
|
|
6175
6181
|
return (jsx$1(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));
|
|
6176
6182
|
};
|
|
6177
|
-
var templateObject_1$
|
|
6183
|
+
var templateObject_1$1p;
|
|
6178
6184
|
|
|
6179
6185
|
var CartProductItem = {
|
|
6180
6186
|
Title: Title$5,
|
|
@@ -6184,20 +6190,20 @@ var CartProductItem = {
|
|
|
6184
6190
|
CloseButton: CloseButton$1,
|
|
6185
6191
|
};
|
|
6186
6192
|
|
|
6187
|
-
var Container$
|
|
6188
|
-
var MobileContainer = newStyled(Container$
|
|
6189
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6190
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6191
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6192
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6193
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6194
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6193
|
+
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"])));
|
|
6194
|
+
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"])));
|
|
6195
|
+
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"])));
|
|
6196
|
+
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"])));
|
|
6197
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6198
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6199
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6200
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6195
6201
|
var ClubPriceLabel = function (_a) {
|
|
6196
6202
|
var clubPrice = _a.clubPrice;
|
|
6197
6203
|
var isMobile = useWindowDimensions().isMobile;
|
|
6198
|
-
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$
|
|
6204
|
+
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$X, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6199
6205
|
};
|
|
6200
|
-
var templateObject_1$
|
|
6206
|
+
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;
|
|
6201
6207
|
|
|
6202
6208
|
var Spacing = function (_a) {
|
|
6203
6209
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6205,10 +6211,10 @@ var Spacing = function (_a) {
|
|
|
6205
6211
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6206
6212
|
};
|
|
6207
6213
|
|
|
6208
|
-
var Container$
|
|
6209
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6210
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6211
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6214
|
+
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"])));
|
|
6215
|
+
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"])));
|
|
6216
|
+
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"])));
|
|
6217
|
+
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) {
|
|
6212
6218
|
var index = _a.index;
|
|
6213
6219
|
return "".concat(6 + 3 * index, "px");
|
|
6214
6220
|
}, function (_a) {
|
|
@@ -6217,15 +6223,15 @@ var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __makeT
|
|
|
6217
6223
|
});
|
|
6218
6224
|
var StrengthBars = function (_a) {
|
|
6219
6225
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6220
|
-
return (jsxs$1(Container$
|
|
6226
|
+
return (jsxs$1(Container$W, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6221
6227
|
};
|
|
6222
|
-
var templateObject_1$
|
|
6228
|
+
var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A;
|
|
6223
6229
|
|
|
6224
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6225
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6226
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6227
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$
|
|
6228
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6230
|
+
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"])));
|
|
6231
|
+
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"])));
|
|
6232
|
+
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"])));
|
|
6233
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6234
|
+
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"])));
|
|
6229
6235
|
var RegularPriceTag = function () {
|
|
6230
6236
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6231
6237
|
};
|
|
@@ -6274,16 +6280,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6274
6280
|
: ComponentSize.XSmall;
|
|
6275
6281
|
return (jsx$1(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));
|
|
6276
6282
|
};
|
|
6277
|
-
return (jsxs$1(Container$
|
|
6283
|
+
return (jsxs$1(Container$13, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(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), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6278
6284
|
? finalPriceArray[0]
|
|
6279
6285
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6280
6286
|
};
|
|
6281
|
-
var templateObject_1$
|
|
6287
|
+
var templateObject_1$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z, templateObject_5$q;
|
|
6282
6288
|
|
|
6283
|
-
var Container$
|
|
6284
|
-
var templateObject_1$
|
|
6289
|
+
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"])));
|
|
6290
|
+
var templateObject_1$1l;
|
|
6285
6291
|
|
|
6286
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6292
|
+
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) {
|
|
6287
6293
|
var marginRight = _a.marginRight;
|
|
6288
6294
|
return marginRight;
|
|
6289
6295
|
});
|
|
@@ -6295,11 +6301,11 @@ var StarList = function (_a) {
|
|
|
6295
6301
|
width: theme.component.stars.element[size].width,
|
|
6296
6302
|
height: theme.component.stars.element[size].height,
|
|
6297
6303
|
};
|
|
6298
|
-
return (jsx$1(Container$
|
|
6304
|
+
return (jsx$1(Container$V, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6299
6305
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6300
6306
|
}) }, void 0));
|
|
6301
6307
|
};
|
|
6302
|
-
var templateObject_1$
|
|
6308
|
+
var templateObject_1$1k;
|
|
6303
6309
|
|
|
6304
6310
|
/* base styles & size variants */
|
|
6305
6311
|
var LabelStyles = {
|
|
@@ -6340,8 +6346,8 @@ var LabelStyles = {
|
|
|
6340
6346
|
});
|
|
6341
6347
|
},
|
|
6342
6348
|
};
|
|
6343
|
-
var Container$
|
|
6344
|
-
var templateObject_1$
|
|
6349
|
+
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"])));
|
|
6350
|
+
var templateObject_1$1j;
|
|
6345
6351
|
|
|
6346
6352
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6347
6353
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6361,7 +6367,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6361
6367
|
}),
|
|
6362
6368
|
];
|
|
6363
6369
|
});
|
|
6364
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6370
|
+
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; });
|
|
6365
6371
|
var starsNumber = 5;
|
|
6366
6372
|
var Rating = function (_a) {
|
|
6367
6373
|
var _b = _a.size, size = _b === void 0 ? 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;
|
|
@@ -6382,9 +6388,9 @@ var Rating = function (_a) {
|
|
|
6382
6388
|
href: reviewsContainerId,
|
|
6383
6389
|
}
|
|
6384
6390
|
: {};
|
|
6385
|
-
return (jsxs$1(Container$
|
|
6391
|
+
return (jsxs$1(Container$U, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6386
6392
|
};
|
|
6387
|
-
var templateObject_1$
|
|
6393
|
+
var templateObject_1$1i;
|
|
6388
6394
|
|
|
6389
6395
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6390
6396
|
var width = _a.width, height = _a.height;
|
|
@@ -6394,10 +6400,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6394
6400
|
height: height,
|
|
6395
6401
|
});
|
|
6396
6402
|
});
|
|
6397
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6398
|
-
var Container$
|
|
6399
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6400
|
-
var Title$4 = newStyled.p(templateObject_4$
|
|
6403
|
+
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"])));
|
|
6404
|
+
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"])));
|
|
6405
|
+
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"])));
|
|
6406
|
+
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; });
|
|
6401
6407
|
var getStylesBySize$9 = function (size) {
|
|
6402
6408
|
switch (size) {
|
|
6403
6409
|
case ComponentSize.Medium:
|
|
@@ -6423,15 +6429,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6423
6429
|
};
|
|
6424
6430
|
}
|
|
6425
6431
|
};
|
|
6426
|
-
var TopTagContainer$
|
|
6432
|
+
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) {
|
|
6427
6433
|
var style = _a.style;
|
|
6428
6434
|
return style.width;
|
|
6429
6435
|
});
|
|
6430
|
-
var BottomTagContainer$
|
|
6436
|
+
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) {
|
|
6431
6437
|
var style = _a.style;
|
|
6432
6438
|
return style.width;
|
|
6433
6439
|
});
|
|
6434
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6440
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6435
6441
|
var ProductItemMobile = function (_a) {
|
|
6436
6442
|
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 ? {
|
|
6437
6443
|
display: false,
|
|
@@ -6488,9 +6494,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6488
6494
|
return jsx(Fragment, {}, void 0);
|
|
6489
6495
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6490
6496
|
};
|
|
6491
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6497
|
+
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));
|
|
6492
6498
|
};
|
|
6493
|
-
var templateObject_1$
|
|
6499
|
+
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$l, templateObject_7$e;
|
|
6494
6500
|
|
|
6495
6501
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6496
6502
|
var width = _a.width, height = _a.height;
|
|
@@ -6500,10 +6506,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6500
6506
|
height: height,
|
|
6501
6507
|
});
|
|
6502
6508
|
});
|
|
6503
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6504
|
-
var Container$
|
|
6505
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6506
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
6509
|
+
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; });
|
|
6510
|
+
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"])));
|
|
6511
|
+
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"])));
|
|
6512
|
+
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; });
|
|
6507
6513
|
var getStylesBySize$8 = function (size) {
|
|
6508
6514
|
switch (size) {
|
|
6509
6515
|
case ComponentSize.Medium:
|
|
@@ -6529,16 +6535,16 @@ var getStylesBySize$8 = function (size) {
|
|
|
6529
6535
|
};
|
|
6530
6536
|
}
|
|
6531
6537
|
};
|
|
6532
|
-
var TopTagContainer$
|
|
6538
|
+
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) {
|
|
6533
6539
|
var style = _a.style;
|
|
6534
6540
|
return style.width;
|
|
6535
6541
|
});
|
|
6536
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6537
|
-
var BottomTagContainer$
|
|
6542
|
+
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"])));
|
|
6543
|
+
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) {
|
|
6538
6544
|
var style = _a.style;
|
|
6539
6545
|
return style.width;
|
|
6540
6546
|
});
|
|
6541
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
6547
|
+
var MarginTopContainer = newStyled.div(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6542
6548
|
var ProductItemTK = function (_a) {
|
|
6543
6549
|
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 ? {
|
|
6544
6550
|
display: false,
|
|
@@ -6582,26 +6588,26 @@ var ProductItemTK = function (_a) {
|
|
|
6582
6588
|
: undefined }, void 0));
|
|
6583
6589
|
};
|
|
6584
6590
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6585
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6591
|
+
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 ? (
|
|
6586
6592
|
// @ts-ignore
|
|
6587
6593
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6588
6594
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6589
6595
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6590
6596
|
} }, { 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));
|
|
6591
6597
|
};
|
|
6592
|
-
var templateObject_1$
|
|
6598
|
+
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;
|
|
6593
6599
|
|
|
6594
|
-
var Container$
|
|
6600
|
+
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"])));
|
|
6595
6601
|
function withProductGrid(ProductItemComponent, data) {
|
|
6596
6602
|
function WithProductGrid(props) {
|
|
6597
|
-
return (jsx$1(Container$
|
|
6603
|
+
return (jsx$1(Container$R, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6598
6604
|
}
|
|
6599
6605
|
/* istanbul ignore next */
|
|
6600
6606
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6601
6607
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6602
6608
|
return WithProductGrid;
|
|
6603
6609
|
}
|
|
6604
|
-
var templateObject_1$
|
|
6610
|
+
var templateObject_1$1f;
|
|
6605
6611
|
|
|
6606
6612
|
var Collection = {
|
|
6607
6613
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6648,11 +6654,11 @@ var OutOfStock = function (_a) {
|
|
|
6648
6654
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("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), jsx$1("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), jsx$1("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), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6649
6655
|
};
|
|
6650
6656
|
|
|
6651
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6652
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6653
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6654
|
-
var Span = newStyled.span(templateObject_4$
|
|
6655
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6657
|
+
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"])));
|
|
6658
|
+
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6659
|
+
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"])));
|
|
6660
|
+
var Span = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6661
|
+
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"])));
|
|
6656
6662
|
var Label$3 = function (_a) {
|
|
6657
6663
|
var label = _a.label, values = _a.values;
|
|
6658
6664
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -6670,23 +6676,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6670
6676
|
Option: Option,
|
|
6671
6677
|
OptionsContainer: OptionsContainer,
|
|
6672
6678
|
});
|
|
6673
|
-
var templateObject_1$
|
|
6679
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$n;
|
|
6674
6680
|
|
|
6675
|
-
var Container$
|
|
6681
|
+
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) {
|
|
6676
6682
|
var borderColor = _a.borderColor;
|
|
6677
6683
|
return borderColor;
|
|
6678
6684
|
}, function (_a) {
|
|
6679
6685
|
var noStock = _a.noStock;
|
|
6680
6686
|
return (noStock ? '0.4' : '1');
|
|
6681
6687
|
});
|
|
6682
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6688
|
+
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"])));
|
|
6683
6689
|
var PatternSelector = function (_a) {
|
|
6684
6690
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6685
6691
|
var theme = useTheme();
|
|
6686
6692
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6687
|
-
return (jsx$1(Container$
|
|
6693
|
+
return (jsx$1(Container$Q, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6688
6694
|
};
|
|
6689
|
-
var templateObject_1$
|
|
6695
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6690
6696
|
|
|
6691
6697
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6692
6698
|
if (options == null || options.length === 0) {
|
|
@@ -6745,21 +6751,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6745
6751
|
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));
|
|
6746
6752
|
};
|
|
6747
6753
|
|
|
6748
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6749
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6750
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6754
|
+
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'); });
|
|
6755
|
+
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"])));
|
|
6756
|
+
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) {
|
|
6751
6757
|
return props.rightToLeft &&
|
|
6752
6758
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6753
6759
|
});
|
|
6754
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6755
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6756
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6760
|
+
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; });
|
|
6761
|
+
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; });
|
|
6762
|
+
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; });
|
|
6757
6763
|
var CrossSellCheckbox = function (_a) {
|
|
6758
6764
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6759
6765
|
var theme = useTheme();
|
|
6760
6766
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6761
6767
|
};
|
|
6762
|
-
var templateObject_1$
|
|
6768
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$m, templateObject_6$j;
|
|
6763
6769
|
|
|
6764
6770
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6765
6771
|
__proto__: null,
|
|
@@ -6787,7 +6793,7 @@ var sizeMapper = (_a = {},
|
|
|
6787
6793
|
_a[ComponentSize.Large] = 'large',
|
|
6788
6794
|
_a[ComponentSize.XSmall] = 'small',
|
|
6789
6795
|
_a);
|
|
6790
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6796
|
+
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) {
|
|
6791
6797
|
var wide = _a.wide;
|
|
6792
6798
|
return (wide ? '100%' : 'fit-content');
|
|
6793
6799
|
}, function (_a) {
|
|
@@ -6809,8 +6815,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1a || (templateObj
|
|
|
6809
6815
|
var theme = _a.theme;
|
|
6810
6816
|
return theme.colors.text.disabled;
|
|
6811
6817
|
});
|
|
6812
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6813
|
-
var templateObject_1$
|
|
6818
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6819
|
+
var templateObject_1$1b, templateObject_2$R;
|
|
6814
6820
|
|
|
6815
6821
|
var BaseCTA = function (_a) {
|
|
6816
6822
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6877,44 +6883,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6877
6883
|
} }), void 0));
|
|
6878
6884
|
};
|
|
6879
6885
|
|
|
6880
|
-
var Container$
|
|
6881
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6882
|
-
var Text$3 = newStyled.p(templateObject_3$
|
|
6883
|
-
var Details = newStyled.span(templateObject_4$
|
|
6886
|
+
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; });
|
|
6887
|
+
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"])));
|
|
6888
|
+
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; });
|
|
6889
|
+
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; });
|
|
6884
6890
|
var Note = function (_a) {
|
|
6885
6891
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6886
6892
|
var theme = useTheme();
|
|
6887
|
-
return (jsxs$1(Container$
|
|
6893
|
+
return (jsxs$1(Container$P, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6888
6894
|
};
|
|
6889
|
-
var templateObject_1$
|
|
6895
|
+
var templateObject_1$1a, templateObject_2$Q, templateObject_3$F, templateObject_4$u;
|
|
6890
6896
|
|
|
6891
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6897
|
+
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) {
|
|
6892
6898
|
var theme = _a.theme;
|
|
6893
6899
|
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 ");
|
|
6894
6900
|
});
|
|
6895
|
-
var Line = newStyled.div(templateObject_2$
|
|
6896
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6901
|
+
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; });
|
|
6902
|
+
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({
|
|
6897
6903
|
flexDirection: ['column', 'row'],
|
|
6898
6904
|
}));
|
|
6899
|
-
var Col = newStyled.div(templateObject_4$
|
|
6905
|
+
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({
|
|
6900
6906
|
margin: ['0', '0 1.25rem'],
|
|
6901
6907
|
marginBottom: ['1.875rem', '0'],
|
|
6902
6908
|
alignItems: ['center', 'flex-start'],
|
|
6903
6909
|
textAlign: ['center', 'inherit'],
|
|
6904
6910
|
width: ['100%', 'inherit'],
|
|
6905
6911
|
}));
|
|
6906
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
6912
|
+
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({
|
|
6907
6913
|
marginRight: ['0', '0.438rem'],
|
|
6908
6914
|
marginBottom: ['10px', '0'],
|
|
6909
6915
|
width: ['auto', '1.5rem'],
|
|
6910
6916
|
}));
|
|
6911
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6917
|
+
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({
|
|
6912
6918
|
display: ['block', 'flex'],
|
|
6913
6919
|
}), function (_a) {
|
|
6914
6920
|
var theme = _a.theme;
|
|
6915
6921
|
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 ");
|
|
6916
6922
|
});
|
|
6917
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6923
|
+
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) {
|
|
6918
6924
|
var theme = _a.theme;
|
|
6919
6925
|
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 ");
|
|
6920
6926
|
}, function (_a) {
|
|
@@ -6925,22 +6931,22 @@ var SectionDetails = newStyled.p(templateObject_7$b || (templateObject_7$b = __m
|
|
|
6925
6931
|
})
|
|
6926
6932
|
: '';
|
|
6927
6933
|
});
|
|
6928
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
6934
|
+
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; });
|
|
6929
6935
|
var DeliveryDetails = function (_a) {
|
|
6930
6936
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6931
6937
|
var theme = useTheme();
|
|
6932
6938
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6933
6939
|
};
|
|
6934
|
-
var templateObject_1$
|
|
6940
|
+
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;
|
|
6935
6941
|
|
|
6936
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6942
|
+
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) {
|
|
6937
6943
|
var top = _a.top;
|
|
6938
6944
|
return top;
|
|
6939
6945
|
}, function (_a) {
|
|
6940
6946
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6941
6947
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6942
6948
|
});
|
|
6943
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6949
|
+
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) {
|
|
6944
6950
|
var height = _a.height;
|
|
6945
6951
|
return height;
|
|
6946
6952
|
}, function (_a) {
|
|
@@ -6987,20 +6993,20 @@ var Drawer = function (_a) {
|
|
|
6987
6993
|
}, [isOpen, onClose, onOpen]);
|
|
6988
6994
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(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;
|
|
6989
6995
|
};
|
|
6990
|
-
var templateObject_1$
|
|
6996
|
+
var templateObject_1$18, templateObject_2$O;
|
|
6991
6997
|
|
|
6992
6998
|
var TooltipArrow = function (_a) {
|
|
6993
6999
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6994
7000
|
return (jsxs$1("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: "Tooltip Arrow" }, void 0), jsx$1("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));
|
|
6995
7001
|
};
|
|
6996
7002
|
|
|
6997
|
-
var List = newStyled.ul(templateObject_1$
|
|
6998
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6999
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
7000
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
7001
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
7002
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
7003
|
-
var templateObject_1$
|
|
7003
|
+
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"])));
|
|
7004
|
+
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"])));
|
|
7005
|
+
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"])));
|
|
7006
|
+
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"])));
|
|
7007
|
+
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; });
|
|
7008
|
+
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; });
|
|
7009
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$k, templateObject_6$h;
|
|
7004
7010
|
|
|
7005
7011
|
var DropdownListIcons = function (_a) {
|
|
7006
7012
|
var items = _a.items;
|
|
@@ -7013,13 +7019,13 @@ var Dropdown = function (_a) {
|
|
|
7013
7019
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(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));
|
|
7014
7020
|
};
|
|
7015
7021
|
|
|
7016
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7017
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7018
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
7019
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
7020
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
7021
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
7022
|
-
var templateObject_1$
|
|
7022
|
+
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"])));
|
|
7023
|
+
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"])));
|
|
7024
|
+
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7025
|
+
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"])));
|
|
7026
|
+
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"])));
|
|
7027
|
+
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"])));
|
|
7028
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$j, templateObject_6$g;
|
|
7023
7029
|
|
|
7024
7030
|
var SizeDropdown = function (_a) {
|
|
7025
7031
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7042,10 +7048,10 @@ var SizeDropdown = function (_a) {
|
|
|
7042
7048
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(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: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
7043
7049
|
};
|
|
7044
7050
|
|
|
7045
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7046
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7047
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
7048
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
7051
|
+
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; });
|
|
7052
|
+
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; });
|
|
7053
|
+
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"])));
|
|
7054
|
+
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"])));
|
|
7049
7055
|
var DropdownDialog = function (_a) {
|
|
7050
7056
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7051
7057
|
var theme = useTheme$1();
|
|
@@ -7054,7 +7060,7 @@ var DropdownDialog = function (_a) {
|
|
|
7054
7060
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7055
7061
|
}) }), void 0) }), void 0));
|
|
7056
7062
|
};
|
|
7057
|
-
var templateObject_1$
|
|
7063
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$B, templateObject_4$q;
|
|
7058
7064
|
|
|
7059
7065
|
function FilteringDropdown(_a) {
|
|
7060
7066
|
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;
|
|
@@ -7087,29 +7093,29 @@ function FilteringDropdown(_a) {
|
|
|
7087
7093
|
}) }, void 0)] }), void 0));
|
|
7088
7094
|
}
|
|
7089
7095
|
|
|
7090
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
7091
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7092
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
7093
|
-
var Container$
|
|
7096
|
+
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; });
|
|
7097
|
+
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; });
|
|
7098
|
+
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"])));
|
|
7099
|
+
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'); });
|
|
7094
7100
|
var Accordion = function (_a) {
|
|
7095
7101
|
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;
|
|
7096
7102
|
var theme = useTheme();
|
|
7097
7103
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7098
|
-
return (jsxs$1(Container$
|
|
7104
|
+
return (jsxs$1(Container$O, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7099
7105
|
};
|
|
7100
|
-
var templateObject_1$
|
|
7101
|
-
|
|
7102
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7103
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7104
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
7105
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
7106
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
7107
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
7108
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
7109
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
7110
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
7106
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$A, templateObject_4$p;
|
|
7107
|
+
|
|
7108
|
+
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; });
|
|
7109
|
+
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"])));
|
|
7110
|
+
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"])));
|
|
7111
|
+
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"])));
|
|
7112
|
+
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; });
|
|
7113
|
+
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; });
|
|
7114
|
+
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'); });
|
|
7115
|
+
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; });
|
|
7116
|
+
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"])));
|
|
7111
7117
|
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"])));
|
|
7112
|
-
var templateObject_1$
|
|
7118
|
+
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;
|
|
7113
7119
|
|
|
7114
7120
|
var getStylesBySize$7 = function (size, theme) {
|
|
7115
7121
|
switch (size) {
|
|
@@ -7174,9 +7180,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7174
7180
|
} }), id: id }, void 0));
|
|
7175
7181
|
};
|
|
7176
7182
|
|
|
7177
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7178
|
-
var LI = newStyled.li(templateObject_2$
|
|
7179
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7183
|
+
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"])));
|
|
7184
|
+
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; });
|
|
7185
|
+
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"])));
|
|
7180
7186
|
var Tags = function (_a) {
|
|
7181
7187
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7182
7188
|
var theme = useTheme();
|
|
@@ -7184,7 +7190,7 @@ var Tags = function (_a) {
|
|
|
7184
7190
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7185
7191
|
}) }), void 0));
|
|
7186
7192
|
};
|
|
7187
|
-
var templateObject_1$
|
|
7193
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$y;
|
|
7188
7194
|
|
|
7189
7195
|
var Filters = function (_a) {
|
|
7190
7196
|
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;
|
|
@@ -7320,8 +7326,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7320
7326
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7321
7327
|
};
|
|
7322
7328
|
|
|
7323
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7324
|
-
var Container$
|
|
7329
|
+
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"])));
|
|
7330
|
+
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"])));
|
|
7325
7331
|
var FitGuarantee = function (_a) {
|
|
7326
7332
|
var _b;
|
|
7327
7333
|
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;
|
|
@@ -7332,17 +7338,17 @@ var FitGuarantee = function (_a) {
|
|
|
7332
7338
|
console.error('Icon', iconName, 'not found');
|
|
7333
7339
|
return null;
|
|
7334
7340
|
}
|
|
7335
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$
|
|
7341
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7336
7342
|
margin: '0.1rem 0',
|
|
7337
7343
|
width: '100%',
|
|
7338
7344
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7339
7345
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7340
7346
|
} }, { children: title }), void 0), jsx$1(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));
|
|
7341
7347
|
};
|
|
7342
|
-
var templateObject_1$
|
|
7348
|
+
var templateObject_1$11, templateObject_2$H;
|
|
7343
7349
|
|
|
7344
|
-
var Container$
|
|
7345
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7350
|
+
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"])));
|
|
7351
|
+
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; });
|
|
7346
7352
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7347
7353
|
border: 'none',
|
|
7348
7354
|
background: 'transparent',
|
|
@@ -7355,11 +7361,11 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7355
7361
|
var FitPredictor = function (_a) {
|
|
7356
7362
|
var onClick = _a.onClick;
|
|
7357
7363
|
var theme = useTheme();
|
|
7358
|
-
return (jsxs(Container$
|
|
7364
|
+
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));
|
|
7359
7365
|
};
|
|
7360
|
-
var templateObject_1
|
|
7366
|
+
var templateObject_1$10, templateObject_2$G;
|
|
7361
7367
|
|
|
7362
|
-
var Button$
|
|
7368
|
+
var Button$7 = newStyled.button(function () { return ({
|
|
7363
7369
|
background: 'transparent',
|
|
7364
7370
|
border: 'none',
|
|
7365
7371
|
cursor: 'pointer',
|
|
@@ -7371,7 +7377,7 @@ var Direction;
|
|
|
7371
7377
|
})(Direction || (Direction = {}));
|
|
7372
7378
|
var ArrowButton$1 = function (_a) {
|
|
7373
7379
|
var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
|
|
7374
|
-
return (jsx$1(Button$
|
|
7380
|
+
return (jsx$1(Button$7, __assign$1({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsx$1(Icon.Arrows.ChevronLeft, { testId: "arrow-button-left", width: width, height: height, opacity: 0.5 }, void 0)) : (jsx$1(Icon.Arrows.ChevronRight, { testId: "arrow-button-right", width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
|
|
7375
7381
|
};
|
|
7376
7382
|
|
|
7377
7383
|
function _defineProperty(obj, key, value) {
|
|
@@ -11601,14 +11607,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11601
11607
|
return Slider;
|
|
11602
11608
|
}(React__default.Component);
|
|
11603
11609
|
|
|
11604
|
-
var StyledSlider = newStyled(Slider)(templateObject_1
|
|
11610
|
+
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) {
|
|
11605
11611
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11606
11612
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11607
11613
|
}, function (_a) {
|
|
11608
11614
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11609
11615
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11610
11616
|
});
|
|
11611
|
-
var templateObject_1
|
|
11617
|
+
var templateObject_1$$;
|
|
11612
11618
|
|
|
11613
11619
|
var getStylesBySize$6 = function (size) {
|
|
11614
11620
|
// rem units
|
|
@@ -11667,7 +11673,7 @@ var SliderNavigation = function (_a) {
|
|
|
11667
11673
|
} }, { 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));
|
|
11668
11674
|
};
|
|
11669
11675
|
|
|
11670
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11676
|
+
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) {
|
|
11671
11677
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11672
11678
|
return borderRadiusVariant &&
|
|
11673
11679
|
"\nborder-radius: 20px;\n";
|
|
@@ -11682,11 +11688,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
11682
11688
|
var theme = useTheme();
|
|
11683
11689
|
return (jsx$1(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
11684
11690
|
};
|
|
11685
|
-
var templateObject_1$
|
|
11691
|
+
var templateObject_1$_;
|
|
11686
11692
|
|
|
11687
|
-
var horizontalStyles = css(templateObject_1$
|
|
11688
|
-
var verticalStyles = css(templateObject_2$
|
|
11689
|
-
var Container$
|
|
11693
|
+
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"])));
|
|
11694
|
+
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"])));
|
|
11695
|
+
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) {
|
|
11690
11696
|
var position = _a.position;
|
|
11691
11697
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11692
11698
|
}, function (_a) {
|
|
@@ -11694,11 +11700,11 @@ var Container$K = newStyled.div(templateObject_3$w || (templateObject_3$w = __ma
|
|
|
11694
11700
|
return hasOverflowArrows &&
|
|
11695
11701
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11696
11702
|
});
|
|
11697
|
-
var Button$
|
|
11698
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11699
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11700
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11701
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11703
|
+
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"])));
|
|
11704
|
+
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"])));
|
|
11705
|
+
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"])));
|
|
11706
|
+
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"])));
|
|
11707
|
+
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"])));
|
|
11702
11708
|
var ImagePreviewList = function (_a) {
|
|
11703
11709
|
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;
|
|
11704
11710
|
var handleScrollVerticalPrev = function () {
|
|
@@ -11709,13 +11715,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11709
11715
|
var element = document.querySelector(".imageListContainer");
|
|
11710
11716
|
element.scrollBy(0, 200);
|
|
11711
11717
|
};
|
|
11712
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
11718
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
11713
11719
|
arrowWidth: 0.75,
|
|
11714
11720
|
arrowHeight: 1.25,
|
|
11715
11721
|
arrowPadding: 1.625,
|
|
11716
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$
|
|
11722
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(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 (jsx$1(Button$6, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(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 && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11717
11723
|
};
|
|
11718
|
-
var templateObject_1$
|
|
11724
|
+
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;
|
|
11719
11725
|
|
|
11720
11726
|
var propTypes = {exports: {}};
|
|
11721
11727
|
|
|
@@ -13308,25 +13314,25 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13308
13314
|
afterZoomOut: PropTypes.func
|
|
13309
13315
|
} : {};
|
|
13310
13316
|
|
|
13311
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13312
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13313
|
-
var templateObject_1$
|
|
13317
|
+
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); });
|
|
13318
|
+
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; });
|
|
13319
|
+
var templateObject_1$Y, templateObject_2$E;
|
|
13314
13320
|
|
|
13315
13321
|
var ProgressBar$1 = function (_a) {
|
|
13316
13322
|
var progress = _a.progress, hide = _a.hide;
|
|
13317
13323
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13318
13324
|
};
|
|
13319
13325
|
|
|
13320
|
-
var Container$
|
|
13321
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13322
|
-
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$
|
|
13323
|
-
var PlayContainer = newStyled.div(templateObject_4$
|
|
13324
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13325
|
-
var templateObject_1$
|
|
13326
|
+
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"])));
|
|
13327
|
+
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; });
|
|
13328
|
+
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"])));
|
|
13329
|
+
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"])));
|
|
13330
|
+
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"])));
|
|
13331
|
+
var templateObject_1$X, templateObject_2$D, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13326
13332
|
|
|
13327
13333
|
var Video$1 = function (_a) {
|
|
13328
13334
|
var _b, _c, _d, _e;
|
|
13329
|
-
var source = _a.source, thumbnail = _a.thumbnail;
|
|
13335
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height;
|
|
13330
13336
|
var videoRef = useRef(null);
|
|
13331
13337
|
var _f = useState(true), isLoading = _f[0], setIsLoading = _f[1];
|
|
13332
13338
|
var _g = useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
|
|
@@ -13361,43 +13367,43 @@ var Video$1 = function (_a) {
|
|
|
13361
13367
|
setVideoProgress(videoRef.current.currentTime);
|
|
13362
13368
|
}
|
|
13363
13369
|
};
|
|
13364
|
-
return (jsxs$1(Container$
|
|
13370
|
+
return (jsxs$1(Container$K, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(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: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13365
13371
|
};
|
|
13366
13372
|
|
|
13367
|
-
var Container$
|
|
13373
|
+
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) {
|
|
13368
13374
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13369
13375
|
return borderRadiusVariant &&
|
|
13370
13376
|
"\n border-radius: 40px;\n ";
|
|
13371
13377
|
});
|
|
13372
|
-
var TopTagContainer$
|
|
13373
|
-
var BottomTagContainer$
|
|
13374
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13375
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13376
|
-
var
|
|
13378
|
+
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'); });
|
|
13379
|
+
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"])));
|
|
13380
|
+
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"])));
|
|
13381
|
+
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"])));
|
|
13382
|
+
var ImageProductSlide$1 = function (_a) {
|
|
13377
13383
|
var _b;
|
|
13378
|
-
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;
|
|
13384
|
+
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;
|
|
13379
13385
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13380
13386
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13381
|
-
return (jsxs$1(Container$
|
|
13387
|
+
return (jsxs$1(Container$J, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [withZoom ? (jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13382
13388
|
alt: content.alt,
|
|
13383
13389
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13384
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$
|
|
13390
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsx$1(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? '480px' : '720px', src: source, alt: content.alt }, void 0)), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { children: bottomTag }, void 0), !!topRightTag && jsx$1(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13385
13391
|
};
|
|
13386
|
-
var templateObject_1$
|
|
13392
|
+
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$f;
|
|
13387
13393
|
|
|
13388
|
-
var Container$
|
|
13394
|
+
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"])));
|
|
13389
13395
|
var ProductGallery = function (_a) {
|
|
13390
|
-
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;
|
|
13396
|
+
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;
|
|
13391
13397
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
13392
|
-
var
|
|
13398
|
+
var _f = useState(initialValue), selectedImage = _f[0], setSelectedImage = _f[1];
|
|
13393
13399
|
useEffect(function () {
|
|
13394
13400
|
setSelectedImage(initialValue);
|
|
13395
13401
|
}, [initialValue]);
|
|
13396
|
-
return (jsxs$1(Container$
|
|
13402
|
+
return (jsxs$1(Container$I, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13397
13403
|
setSelectedImage(value);
|
|
13398
|
-
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(
|
|
13404
|
+
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(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));
|
|
13399
13405
|
};
|
|
13400
|
-
var templateObject_1$
|
|
13406
|
+
var templateObject_1$V;
|
|
13401
13407
|
|
|
13402
13408
|
var getStylesBySize$5 = function (size) {
|
|
13403
13409
|
switch (size) {
|
|
@@ -13418,7 +13424,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13418
13424
|
};
|
|
13419
13425
|
}
|
|
13420
13426
|
};
|
|
13421
|
-
var Container$
|
|
13427
|
+
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) {
|
|
13422
13428
|
var backgroundColor = _a.backgroundColor;
|
|
13423
13429
|
return backgroundColor;
|
|
13424
13430
|
}, function (_a) {
|
|
@@ -13446,11 +13452,11 @@ var Container$G = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
13446
13452
|
var IconButton = function (_a) {
|
|
13447
13453
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13448
13454
|
var theme = useTheme();
|
|
13449
|
-
return (jsx$1(Container$
|
|
13455
|
+
return (jsx$1(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));
|
|
13450
13456
|
};
|
|
13451
|
-
var templateObject_1$
|
|
13457
|
+
var templateObject_1$U;
|
|
13452
13458
|
|
|
13453
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13459
|
+
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; });
|
|
13454
13460
|
var AmazonButton = function (_a) {
|
|
13455
13461
|
var onClick = _a.onClick;
|
|
13456
13462
|
return (jsx$1(StyledButton$1, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13459,9 +13465,9 @@ var PaypalButton = function (_a) {
|
|
|
13459
13465
|
var onClick = _a.onClick;
|
|
13460
13466
|
return (jsx$1(StyledButton$1, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13461
13467
|
};
|
|
13462
|
-
var templateObject_1$
|
|
13468
|
+
var templateObject_1$T;
|
|
13463
13469
|
|
|
13464
|
-
var Container$
|
|
13470
|
+
var Container$G = newStyled.div(function (props) { return ({
|
|
13465
13471
|
height: 'auto',
|
|
13466
13472
|
textAlign: 'center',
|
|
13467
13473
|
justifyContent: 'center',
|
|
@@ -13511,12 +13517,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13511
13517
|
textAlign: 'center',
|
|
13512
13518
|
lineHeight: '18px',
|
|
13513
13519
|
};
|
|
13514
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
13520
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$G, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(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));
|
|
13515
13521
|
};
|
|
13516
13522
|
|
|
13517
|
-
var Container$
|
|
13518
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13519
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13523
|
+
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'); });
|
|
13524
|
+
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'); });
|
|
13525
|
+
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13520
13526
|
var titlePosition = _a.titlePosition;
|
|
13521
13527
|
return titlePosition == 'center' &&
|
|
13522
13528
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13524,15 +13530,15 @@ var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
|
|
|
13524
13530
|
var ImageCardWithDescription = function (_a) {
|
|
13525
13531
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13526
13532
|
var isMobile = useWindowDimensions().isMobile;
|
|
13527
|
-
return (jsxs$1(Container$
|
|
13533
|
+
return (jsxs$1(Container$F, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13528
13534
|
};
|
|
13529
|
-
var templateObject_1$
|
|
13535
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$u;
|
|
13530
13536
|
|
|
13531
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
13537
|
+
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) {
|
|
13532
13538
|
var color = _a.color;
|
|
13533
13539
|
return color;
|
|
13534
13540
|
});
|
|
13535
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13541
|
+
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) {
|
|
13536
13542
|
var color = _a.color;
|
|
13537
13543
|
return color;
|
|
13538
13544
|
});
|
|
@@ -13541,7 +13547,7 @@ var InputLabel = function (_a) {
|
|
|
13541
13547
|
var theme = useTheme();
|
|
13542
13548
|
return (jsxs$1(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13543
13549
|
};
|
|
13544
|
-
var templateObject_1$
|
|
13550
|
+
var templateObject_1$R, templateObject_2$A;
|
|
13545
13551
|
|
|
13546
13552
|
var containerByStatus = function (theme, status) {
|
|
13547
13553
|
if (status === InputValidationType.Valid)
|
|
@@ -13550,12 +13556,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13550
13556
|
return theme.colors.semantic.urgent.color;
|
|
13551
13557
|
return '';
|
|
13552
13558
|
};
|
|
13553
|
-
var Container$
|
|
13559
|
+
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) {
|
|
13554
13560
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13555
13561
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13556
13562
|
});
|
|
13557
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13558
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13563
|
+
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"])));
|
|
13564
|
+
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) {
|
|
13559
13565
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13560
13566
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13561
13567
|
}, function (_a) {
|
|
@@ -13610,11 +13616,11 @@ var StyledInput = newStyled.input(templateObject_3$s || (templateObject_3$s = __
|
|
|
13610
13616
|
return hasValue &&
|
|
13611
13617
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13612
13618
|
});
|
|
13613
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13619
|
+
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) {
|
|
13614
13620
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13615
13621
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13616
13622
|
});
|
|
13617
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13623
|
+
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) {
|
|
13618
13624
|
var theme = _a.theme;
|
|
13619
13625
|
return theme.component.input.placeholderColor;
|
|
13620
13626
|
}, function (_a) {
|
|
@@ -13627,8 +13633,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$d || (templateObject_5
|
|
|
13627
13633
|
var theme = _a.theme;
|
|
13628
13634
|
return theme.component.input.lineHeight;
|
|
13629
13635
|
});
|
|
13630
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13631
|
-
var templateObject_1$
|
|
13636
|
+
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"])));
|
|
13637
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$t, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
13632
13638
|
|
|
13633
13639
|
var BaseInput = function (_a) {
|
|
13634
13640
|
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"]);
|
|
@@ -13651,14 +13657,14 @@ var BaseInput = function (_a) {
|
|
|
13651
13657
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13652
13658
|
}, [status]);
|
|
13653
13659
|
var hasValue = Boolean(value);
|
|
13654
|
-
return (jsxs$1(Container$
|
|
13660
|
+
return (jsxs$1(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13655
13661
|
onChange(event.target.value, event);
|
|
13656
13662
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
13657
13663
|
onChange('', { target: { value: '' } });
|
|
13658
13664
|
}, "data-testid": "clear-value" }, { children: jsx$1(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
|
|
13659
13665
|
};
|
|
13660
13666
|
|
|
13661
|
-
var Button$
|
|
13667
|
+
var Button$5 = function (_a) {
|
|
13662
13668
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
13663
13669
|
if (variant === 'primary') {
|
|
13664
13670
|
return jsx$1(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -13672,11 +13678,11 @@ var Button$4 = function (_a) {
|
|
|
13672
13678
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13673
13679
|
};
|
|
13674
13680
|
|
|
13675
|
-
var Container$
|
|
13681
|
+
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) {
|
|
13676
13682
|
var theme = _a.theme;
|
|
13677
13683
|
return theme.component.inputCustom.input.borderRadius;
|
|
13678
13684
|
});
|
|
13679
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13685
|
+
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) {
|
|
13680
13686
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13681
13687
|
return defaultRounded
|
|
13682
13688
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13691,23 +13697,23 @@ var Custom = function (_a) {
|
|
|
13691
13697
|
text: text,
|
|
13692
13698
|
disabled: rest.disabled,
|
|
13693
13699
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13694
|
-
return (jsx$1(Container$
|
|
13700
|
+
return (jsx$1(Container$D, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13695
13701
|
};
|
|
13696
|
-
var templateObject_1$
|
|
13702
|
+
var templateObject_1$P, templateObject_2$y;
|
|
13697
13703
|
|
|
13698
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13704
|
+
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) {
|
|
13699
13705
|
var size = _a.size;
|
|
13700
13706
|
return (size === 'small' ? '36px' : '');
|
|
13701
13707
|
});
|
|
13702
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13703
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13708
|
+
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"])));
|
|
13709
|
+
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"])));
|
|
13704
13710
|
var Success = function (_a) {
|
|
13705
13711
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13706
13712
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13707
13713
|
};
|
|
13708
|
-
var templateObject_1$
|
|
13714
|
+
var templateObject_1$O, templateObject_2$x, templateObject_3$s;
|
|
13709
13715
|
|
|
13710
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13716
|
+
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) {
|
|
13711
13717
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13712
13718
|
return status === InputValidationType.Empty &&
|
|
13713
13719
|
type === 'primary' &&
|
|
@@ -13724,16 +13730,16 @@ var BasePlusButton = function (_a) {
|
|
|
13724
13730
|
}
|
|
13725
13731
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13726
13732
|
};
|
|
13727
|
-
var templateObject_1$
|
|
13733
|
+
var templateObject_1$N;
|
|
13728
13734
|
|
|
13729
|
-
var Container$
|
|
13730
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13735
|
+
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"])));
|
|
13736
|
+
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"])));
|
|
13731
13737
|
var BasePlusIcon = function (_a) {
|
|
13732
13738
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13733
13739
|
var theme = useTheme();
|
|
13734
|
-
return (jsx$1(Container$
|
|
13740
|
+
return (jsx$1(Container$C, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13735
13741
|
};
|
|
13736
|
-
var templateObject_1$
|
|
13742
|
+
var templateObject_1$M, templateObject_2$w;
|
|
13737
13743
|
|
|
13738
13744
|
var Input$3 = {
|
|
13739
13745
|
Simple: BaseInput,
|
|
@@ -13742,7 +13748,43 @@ var Input$3 = {
|
|
|
13742
13748
|
SimplePlusIcon: BasePlusIcon,
|
|
13743
13749
|
};
|
|
13744
13750
|
|
|
13745
|
-
|
|
13751
|
+
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
13752
|
+
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13753
|
+
var firstClientX = useRef(0);
|
|
13754
|
+
var clientX = useRef(0);
|
|
13755
|
+
var preventTouch = useCallback(function (e) {
|
|
13756
|
+
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
13757
|
+
// Vertical scrolling does not work when you start swiping horizontally.
|
|
13758
|
+
if (Math.abs(clientX.current) > dragThreshold) {
|
|
13759
|
+
if (e.cancelable) {
|
|
13760
|
+
e.preventDefault();
|
|
13761
|
+
e.returnValue = false;
|
|
13762
|
+
}
|
|
13763
|
+
return false;
|
|
13764
|
+
}
|
|
13765
|
+
return true;
|
|
13766
|
+
}, [dragThreshold]);
|
|
13767
|
+
var touchStart = useCallback(function (e) {
|
|
13768
|
+
firstClientX.current = e.touches[0].clientX;
|
|
13769
|
+
}, []);
|
|
13770
|
+
useEffect(function () {
|
|
13771
|
+
var current = ref.current;
|
|
13772
|
+
if (current) {
|
|
13773
|
+
current.addEventListener('touchstart', touchStart);
|
|
13774
|
+
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
13775
|
+
}
|
|
13776
|
+
return function () {
|
|
13777
|
+
if (current) {
|
|
13778
|
+
current.removeEventListener('touchstart', touchStart);
|
|
13779
|
+
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
13780
|
+
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
13781
|
+
current.removeEventListener('touchmove', preventTouch);
|
|
13782
|
+
}
|
|
13783
|
+
};
|
|
13784
|
+
}, [preventTouch, ref, touchStart]);
|
|
13785
|
+
}
|
|
13786
|
+
|
|
13787
|
+
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) {
|
|
13746
13788
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13747
13789
|
return borderRadiusVariant &&
|
|
13748
13790
|
"\n border-radius: 40px;\n ";
|
|
@@ -13751,11 +13793,11 @@ var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13751
13793
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13752
13794
|
});
|
|
13753
13795
|
// max-height: 31.875rem;
|
|
13754
|
-
var TopTagContainer$
|
|
13755
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
13756
|
-
var BottomTagContainer$
|
|
13757
|
-
var NavButtonContainer$
|
|
13758
|
-
var Button$
|
|
13796
|
+
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'); });
|
|
13797
|
+
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"])));
|
|
13798
|
+
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"])));
|
|
13799
|
+
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"])));
|
|
13800
|
+
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"])));
|
|
13759
13801
|
var settings$1 = {
|
|
13760
13802
|
dots: true,
|
|
13761
13803
|
infinite: false,
|
|
@@ -13764,13 +13806,13 @@ var settings$1 = {
|
|
|
13764
13806
|
slidesToScroll: 1,
|
|
13765
13807
|
initialSlide: 0,
|
|
13766
13808
|
};
|
|
13767
|
-
var
|
|
13809
|
+
var ImageProductSlide = function (_a) {
|
|
13768
13810
|
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;
|
|
13769
13811
|
var slick = useRef(null);
|
|
13770
13812
|
var sliderWrapper = useRef(null);
|
|
13771
13813
|
useRef(null);
|
|
13772
13814
|
var _c = useState(false); _c[0]; var setIsPlaying = _c[1];
|
|
13773
|
-
usePreventVerticalScroll
|
|
13815
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
13774
13816
|
var onButtonClick = useCallback(function (i) {
|
|
13775
13817
|
var _a;
|
|
13776
13818
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -13800,62 +13842,27 @@ var ImageProductWithTags = function (_a) {
|
|
|
13800
13842
|
}
|
|
13801
13843
|
}
|
|
13802
13844
|
}, [contents, selectedValue]);
|
|
13803
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
13845
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$B, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
13804
13846
|
var _a;
|
|
13805
13847
|
var activeSlide = contents[e];
|
|
13806
13848
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13807
13849
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13808
13850
|
autoplay ? _playVideo() : _stopVideo();
|
|
13809
|
-
} }, settings$1, { nextArrow: jsx$1(NavButtonContainer$
|
|
13851
|
+
} }, settings$1, { nextArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content) {
|
|
13810
13852
|
var _a;
|
|
13811
13853
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13812
13854
|
var isVideo = (_a = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _a !== void 0 ? _a : false;
|
|
13813
|
-
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$
|
|
13855
|
+
return (jsx$1("div", { children: !isVideo ? (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsx$1(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13814
13856
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13815
13857
|
};
|
|
13816
|
-
|
|
13817
|
-
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13818
|
-
var firstClientX = useRef(0);
|
|
13819
|
-
var clientX = useRef(0);
|
|
13820
|
-
var preventTouch = useCallback(function (e) {
|
|
13821
|
-
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
13822
|
-
// Vertical scrolling does not work when you start swiping horizontally.
|
|
13823
|
-
if (Math.abs(clientX.current) > dragThreshold) {
|
|
13824
|
-
if (e.cancelable) {
|
|
13825
|
-
e.preventDefault();
|
|
13826
|
-
e.returnValue = false;
|
|
13827
|
-
}
|
|
13828
|
-
return false;
|
|
13829
|
-
}
|
|
13830
|
-
return true;
|
|
13831
|
-
}, [dragThreshold]);
|
|
13832
|
-
var touchStart = useCallback(function (e) {
|
|
13833
|
-
firstClientX.current = e.touches[0].clientX;
|
|
13834
|
-
}, []);
|
|
13835
|
-
useEffect(function () {
|
|
13836
|
-
var current = ref.current;
|
|
13837
|
-
if (current) {
|
|
13838
|
-
current.addEventListener('touchstart', touchStart);
|
|
13839
|
-
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
13840
|
-
}
|
|
13841
|
-
return function () {
|
|
13842
|
-
if (current) {
|
|
13843
|
-
current.removeEventListener('touchstart', touchStart);
|
|
13844
|
-
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
13845
|
-
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
13846
|
-
current.removeEventListener('touchmove', preventTouch);
|
|
13847
|
-
}
|
|
13848
|
-
};
|
|
13849
|
-
}, [preventTouch, ref, touchStart]);
|
|
13850
|
-
}
|
|
13851
|
-
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$c, templateObject_6$b;
|
|
13858
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c;
|
|
13852
13859
|
|
|
13853
|
-
var Container$
|
|
13860
|
+
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"])));
|
|
13854
13861
|
var ProductGalleryMobile = function (_a) {
|
|
13855
13862
|
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;
|
|
13856
|
-
return (jsx$1(Container$
|
|
13863
|
+
return (jsx$1(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13857
13864
|
};
|
|
13858
|
-
var templateObject_1$
|
|
13865
|
+
var templateObject_1$K;
|
|
13859
13866
|
|
|
13860
13867
|
function _extends() {
|
|
13861
13868
|
_extends = Object.assign || function (target) {
|
|
@@ -14122,27 +14129,27 @@ function useSwipeable(options) {
|
|
|
14122
14129
|
return handlers;
|
|
14123
14130
|
}
|
|
14124
14131
|
|
|
14125
|
-
var Button$
|
|
14132
|
+
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"])));
|
|
14126
14133
|
var ArrowButton = function (_a) {
|
|
14127
14134
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14128
|
-
return (jsx$1(Button$
|
|
14135
|
+
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14129
14136
|
};
|
|
14130
|
-
var templateObject_1$
|
|
14137
|
+
var templateObject_1$J;
|
|
14131
14138
|
|
|
14132
|
-
var Container$
|
|
14139
|
+
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"])));
|
|
14133
14140
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14134
14141
|
var SlideDots = function (_a) {
|
|
14135
14142
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14136
14143
|
var theme = useTheme();
|
|
14137
|
-
return (jsx$1(Container$
|
|
14144
|
+
return (jsx$1(Container$z, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
14138
14145
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14139
14146
|
: 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));
|
|
14140
14147
|
};
|
|
14141
|
-
var templateObject_1$
|
|
14148
|
+
var templateObject_1$I;
|
|
14142
14149
|
|
|
14143
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14144
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14145
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14150
|
+
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"])));
|
|
14151
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14152
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14146
14153
|
var SlideNavigation = function (_a) {
|
|
14147
14154
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14148
14155
|
var theme = useTheme();
|
|
@@ -14154,23 +14161,23 @@ var SlideNavigation = function (_a) {
|
|
|
14154
14161
|
onNavigate(selectedIndex + 1);
|
|
14155
14162
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14156
14163
|
};
|
|
14157
|
-
var templateObject_1$
|
|
14164
|
+
var templateObject_1$H, templateObject_2$u, templateObject_3$q;
|
|
14158
14165
|
|
|
14159
|
-
var Container$
|
|
14166
|
+
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) {
|
|
14160
14167
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14161
14168
|
return borderRadiusVariant &&
|
|
14162
14169
|
"\n border-radius: 40px;\n ";
|
|
14163
14170
|
});
|
|
14164
|
-
var TopTagContainer$
|
|
14165
|
-
var BottomTagContainer$
|
|
14166
|
-
var
|
|
14171
|
+
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'); });
|
|
14172
|
+
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"])));
|
|
14173
|
+
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14167
14174
|
var _b, _c;
|
|
14168
14175
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14169
|
-
return (jsxs$1(Container$
|
|
14176
|
+
return (jsxs$1(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')) && (jsxs$1(Fragment$2, { children: [jsx$1(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), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(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')) && (jsx$1("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));
|
|
14170
14177
|
});
|
|
14171
|
-
var templateObject_1$
|
|
14178
|
+
var templateObject_1$G, templateObject_2$t, templateObject_3$p;
|
|
14172
14179
|
|
|
14173
|
-
var Container$
|
|
14180
|
+
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"])));
|
|
14174
14181
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14175
14182
|
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;
|
|
14176
14183
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14192,11 +14199,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14192
14199
|
useEffect(function () {
|
|
14193
14200
|
setSelectedImage(images[index]);
|
|
14194
14201
|
}, [index, images]);
|
|
14195
|
-
return (jsxs$1(Container$
|
|
14202
|
+
return (jsxs$1(Container$x, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14196
14203
|
};
|
|
14197
|
-
var templateObject_1$
|
|
14204
|
+
var templateObject_1$F;
|
|
14198
14205
|
|
|
14199
|
-
var Container$
|
|
14206
|
+
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) {
|
|
14200
14207
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14201
14208
|
return borderRadiusVariant &&
|
|
14202
14209
|
"\n border-radius: 40px;\n ";
|
|
@@ -14205,14 +14212,14 @@ var Container$v = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
14205
14212
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14206
14213
|
});
|
|
14207
14214
|
// max-height: 31.875rem;
|
|
14208
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
14209
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
14210
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
14211
|
-
var Video = newStyled.div(templateObject_5$
|
|
14212
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14213
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14214
|
-
var NavButtonContainer = newStyled.div(templateObject_8$
|
|
14215
|
-
var Button$
|
|
14215
|
+
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'); });
|
|
14216
|
+
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"])));
|
|
14217
|
+
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"])));
|
|
14218
|
+
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"])));
|
|
14219
|
+
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"])));
|
|
14220
|
+
var Text$2 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14221
|
+
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"])));
|
|
14222
|
+
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"])));
|
|
14216
14223
|
var settings = {
|
|
14217
14224
|
dots: true,
|
|
14218
14225
|
infinite: false,
|
|
@@ -14221,7 +14228,7 @@ var settings = {
|
|
|
14221
14228
|
slidesToScroll: 1,
|
|
14222
14229
|
initialSlide: 0,
|
|
14223
14230
|
};
|
|
14224
|
-
var
|
|
14231
|
+
var ImageProductSlideV3 = function (_a) {
|
|
14225
14232
|
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;
|
|
14226
14233
|
var slick = useRef(null);
|
|
14227
14234
|
var sliderWrapper = useRef(null);
|
|
@@ -14257,62 +14264,27 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14257
14264
|
}
|
|
14258
14265
|
}
|
|
14259
14266
|
}, [images, selectedValue]);
|
|
14260
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14267
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$w, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14261
14268
|
var _a;
|
|
14262
14269
|
var activeSlide = images[e];
|
|
14263
14270
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14264
14271
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14265
14272
|
autoplay ? _playVideo() : _stopVideo();
|
|
14266
|
-
} }, settings, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$
|
|
14273
|
+
} }, settings, { nextArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$2, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$2, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14267
14274
|
var _a, _b;
|
|
14268
|
-
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(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), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(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')) && (jsxs$1(Video, { children: [jsx$1("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), jsx$1(VideoOverlay$1, { onClick: function () {
|
|
14275
|
+
return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(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), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(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')) && (jsxs$1(Video, { children: [jsx$1("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), jsx$1(VideoOverlay$1, { onClick: function () {
|
|
14269
14276
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14270
14277
|
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14271
14278
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14272
14279
|
};
|
|
14273
|
-
|
|
14274
|
-
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14275
|
-
var firstClientX = useRef(0);
|
|
14276
|
-
var clientX = useRef(0);
|
|
14277
|
-
var preventTouch = useCallback(function (e) {
|
|
14278
|
-
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
14279
|
-
// Vertical scrolling does not work when you start swiping horizontally.
|
|
14280
|
-
if (Math.abs(clientX.current) > dragThreshold) {
|
|
14281
|
-
if (e.cancelable) {
|
|
14282
|
-
e.preventDefault();
|
|
14283
|
-
e.returnValue = false;
|
|
14284
|
-
}
|
|
14285
|
-
return false;
|
|
14286
|
-
}
|
|
14287
|
-
return true;
|
|
14288
|
-
}, [dragThreshold]);
|
|
14289
|
-
var touchStart = useCallback(function (e) {
|
|
14290
|
-
firstClientX.current = e.touches[0].clientX;
|
|
14291
|
-
}, []);
|
|
14292
|
-
useEffect(function () {
|
|
14293
|
-
var current = ref.current;
|
|
14294
|
-
if (current) {
|
|
14295
|
-
current.addEventListener('touchstart', touchStart);
|
|
14296
|
-
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
14297
|
-
}
|
|
14298
|
-
return function () {
|
|
14299
|
-
if (current) {
|
|
14300
|
-
current.removeEventListener('touchstart', touchStart);
|
|
14301
|
-
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
14302
|
-
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
14303
|
-
current.removeEventListener('touchmove', preventTouch);
|
|
14304
|
-
}
|
|
14305
|
-
};
|
|
14306
|
-
}, [preventTouch, ref, touchStart]);
|
|
14307
|
-
}
|
|
14308
|
-
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;
|
|
14280
|
+
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;
|
|
14309
14281
|
|
|
14310
|
-
var Container$
|
|
14282
|
+
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"])));
|
|
14311
14283
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14312
14284
|
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;
|
|
14313
|
-
return (jsx$1(Container$
|
|
14285
|
+
return (jsx$1(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14314
14286
|
};
|
|
14315
|
-
var templateObject_1$
|
|
14287
|
+
var templateObject_1$D;
|
|
14316
14288
|
|
|
14317
14289
|
var __defProp$1 = Object.defineProperty;
|
|
14318
14290
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14445,17 +14417,17 @@ var Portal = function (_a) {
|
|
|
14445
14417
|
var visibleStyle = function (_a) {
|
|
14446
14418
|
var opened = _a.opened;
|
|
14447
14419
|
return opened
|
|
14448
|
-
? css(templateObject_1$
|
|
14420
|
+
? 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 "])));
|
|
14449
14421
|
};
|
|
14450
14422
|
var transformStyle = function (_a) {
|
|
14451
14423
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14452
14424
|
return opened
|
|
14453
|
-
? css(templateObject_3$
|
|
14425
|
+
? 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%)');
|
|
14454
14426
|
};
|
|
14455
|
-
var Container$
|
|
14427
|
+
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({
|
|
14456
14428
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14457
14429
|
}), visibleStyle, transformStyle);
|
|
14458
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
14430
|
+
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);
|
|
14459
14431
|
var Modal = function (_a) {
|
|
14460
14432
|
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;
|
|
14461
14433
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14465,7 +14437,7 @@ var Modal = function (_a) {
|
|
|
14465
14437
|
}
|
|
14466
14438
|
close();
|
|
14467
14439
|
};
|
|
14468
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14440
|
+
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));
|
|
14469
14441
|
};
|
|
14470
14442
|
var modalEvent = function (id, detail) {
|
|
14471
14443
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14493,9 +14465,9 @@ var useModal = function (id) {
|
|
|
14493
14465
|
close: close,
|
|
14494
14466
|
}); }, [close, open, opened]);
|
|
14495
14467
|
};
|
|
14496
|
-
var templateObject_1$
|
|
14468
|
+
var templateObject_1$C, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a;
|
|
14497
14469
|
|
|
14498
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14470
|
+
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) {
|
|
14499
14471
|
var height = _a.height;
|
|
14500
14472
|
return height || '0.5rem';
|
|
14501
14473
|
}, function (_a) {
|
|
@@ -14534,7 +14506,7 @@ var BarContainer = newStyled.div({
|
|
|
14534
14506
|
padding: '0 16px',
|
|
14535
14507
|
position: 'relative',
|
|
14536
14508
|
});
|
|
14537
|
-
var Container$
|
|
14509
|
+
var Container$t = newStyled.div(function (_a) {
|
|
14538
14510
|
var backgroundColor = _a.backgroundColor;
|
|
14539
14511
|
return ({
|
|
14540
14512
|
width: '475px',
|
|
@@ -14565,21 +14537,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14565
14537
|
var theme = useTheme();
|
|
14566
14538
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14567
14539
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14568
|
-
return (jsxs$1(Container$
|
|
14540
|
+
return (jsxs$1(Container$t, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14569
14541
|
};
|
|
14570
|
-
var templateObject_1$
|
|
14542
|
+
var templateObject_1$B;
|
|
14571
14543
|
|
|
14572
|
-
var Container$
|
|
14544
|
+
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) {
|
|
14573
14545
|
var theme = _a.theme;
|
|
14574
14546
|
return theme.component.orderBar.backgroundColor;
|
|
14575
14547
|
});
|
|
14576
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14548
|
+
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; });
|
|
14577
14549
|
var OrderBar = function (_a) {
|
|
14578
14550
|
var message = _a.message, color = _a.color;
|
|
14579
14551
|
var theme = useTheme();
|
|
14580
|
-
return (jsxs$1(Container$
|
|
14552
|
+
return (jsxs$1(Container$s, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14581
14553
|
};
|
|
14582
|
-
var templateObject_1$
|
|
14554
|
+
var templateObject_1$A, templateObject_2$q;
|
|
14583
14555
|
|
|
14584
14556
|
var htmlReactParser = {exports: {}};
|
|
14585
14557
|
|
|
@@ -18360,17 +18332,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18360
18332
|
HTMLReactParser$1.attributesToProps;
|
|
18361
18333
|
HTMLReactParser$1.Element;
|
|
18362
18334
|
|
|
18363
|
-
var Container$
|
|
18364
|
-
var Card = newStyled.div(templateObject_2$
|
|
18365
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18366
|
-
var Label$1 = newStyled.div(templateObject_4$
|
|
18367
|
-
var Check = newStyled.div(templateObject_5$
|
|
18368
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
18369
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18370
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
18335
|
+
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"])));
|
|
18336
|
+
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"])));
|
|
18337
|
+
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"])));
|
|
18338
|
+
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"])));
|
|
18339
|
+
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"])));
|
|
18340
|
+
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"])));
|
|
18341
|
+
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"])));
|
|
18342
|
+
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"])));
|
|
18371
18343
|
var PackSelector = function (_a) {
|
|
18372
18344
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18373
|
-
return (jsx$1(Container$
|
|
18345
|
+
return (jsx$1(Container$r, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18374
18346
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18375
18347
|
}) }), void 0));
|
|
18376
18348
|
};
|
|
@@ -18397,14 +18369,14 @@ var PackCard = function (_a) {
|
|
|
18397
18369
|
currency: currencyCode || 'USD',
|
|
18398
18370
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18399
18371
|
};
|
|
18400
|
-
var templateObject_1$
|
|
18372
|
+
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;
|
|
18401
18373
|
|
|
18402
|
-
var Container$
|
|
18403
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18404
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18374
|
+
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"])));
|
|
18375
|
+
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"])));
|
|
18376
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18405
18377
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18406
18378
|
}));
|
|
18407
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18379
|
+
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) {
|
|
18408
18380
|
var bold = _a.bold;
|
|
18409
18381
|
return (bold ? '700' : '500');
|
|
18410
18382
|
}, function (_a) {
|
|
@@ -18421,7 +18393,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
18421
18393
|
var background = _a.background;
|
|
18422
18394
|
return background || 'unset';
|
|
18423
18395
|
});
|
|
18424
|
-
var templateObject_1$
|
|
18396
|
+
var templateObject_1$y, templateObject_2$o, templateObject_3$l, templateObject_4$f;
|
|
18425
18397
|
|
|
18426
18398
|
var Pagination = function (_a) {
|
|
18427
18399
|
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;
|
|
@@ -18467,7 +18439,7 @@ var Pagination = function (_a) {
|
|
|
18467
18439
|
}
|
|
18468
18440
|
return pages;
|
|
18469
18441
|
}, [from, page, showReducedPages, to]);
|
|
18470
|
-
return (jsxs$1(Container$
|
|
18442
|
+
return (jsxs$1(Container$q, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(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 && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(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)), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18471
18443
|
};
|
|
18472
18444
|
|
|
18473
18445
|
var PaginatorBlog = function (_a) {
|
|
@@ -18481,12 +18453,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18481
18453
|
setPage(page);
|
|
18482
18454
|
onChange(page);
|
|
18483
18455
|
};
|
|
18484
|
-
return (jsxs$1(Container$
|
|
18456
|
+
return (jsxs$1(Container$q, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
18485
18457
|
? theme.colors.shades['white'].color
|
|
18486
18458
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18487
18459
|
};
|
|
18488
18460
|
|
|
18489
|
-
var Container$
|
|
18461
|
+
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) {
|
|
18490
18462
|
var width = _a.width;
|
|
18491
18463
|
return width;
|
|
18492
18464
|
}, function (_a) {
|
|
@@ -18502,14 +18474,14 @@ var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
18502
18474
|
var PaymentMethod = function (_a) {
|
|
18503
18475
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18504
18476
|
var theme = useTheme();
|
|
18505
|
-
return (jsx$1(Container$
|
|
18477
|
+
return (jsx$1(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: createElement(Icon) }), void 0));
|
|
18506
18478
|
};
|
|
18507
|
-
var templateObject_1$
|
|
18479
|
+
var templateObject_1$x;
|
|
18508
18480
|
|
|
18509
|
-
var Container$
|
|
18481
|
+
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"])));
|
|
18510
18482
|
var IMAGE_WIDTH = '63px';
|
|
18511
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18512
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18483
|
+
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);
|
|
18484
|
+
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({
|
|
18513
18485
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18514
18486
|
}), IMAGE_WIDTH);
|
|
18515
18487
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -18532,7 +18504,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18532
18504
|
margin: '0.063rem 0',
|
|
18533
18505
|
});
|
|
18534
18506
|
});
|
|
18535
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18507
|
+
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) {
|
|
18536
18508
|
var withTag = _a.withTag; _a.theme;
|
|
18537
18509
|
return withTag
|
|
18538
18510
|
? mediaQueries({
|
|
@@ -18541,14 +18513,14 @@ var PriceContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = _
|
|
|
18541
18513
|
})
|
|
18542
18514
|
: 'justify-content: end';
|
|
18543
18515
|
});
|
|
18544
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18545
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18516
|
+
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"])));
|
|
18517
|
+
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"])));
|
|
18546
18518
|
var SimpleOrderItem = function (_a) {
|
|
18547
18519
|
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;
|
|
18548
18520
|
var theme = useTheme();
|
|
18549
|
-
return (jsxs$1(Container$
|
|
18521
|
+
return (jsxs$1(Container$o, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(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));
|
|
18550
18522
|
};
|
|
18551
|
-
var templateObject_1$
|
|
18523
|
+
var templateObject_1$w, templateObject_2$n, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
18552
18524
|
|
|
18553
18525
|
var P$1 = newStyled.p(function (_a) {
|
|
18554
18526
|
var color = _a.color;
|
|
@@ -18562,7 +18534,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18562
18534
|
margin: '0.938rem 4.188rem',
|
|
18563
18535
|
});
|
|
18564
18536
|
});
|
|
18565
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18537
|
+
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) {
|
|
18566
18538
|
var height = _a.height;
|
|
18567
18539
|
return height || '0.5rem';
|
|
18568
18540
|
}, function (_a) {
|
|
@@ -18591,7 +18563,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18591
18563
|
position: 'absolute',
|
|
18592
18564
|
});
|
|
18593
18565
|
});
|
|
18594
|
-
var Container$
|
|
18566
|
+
var Container$n = newStyled.div(function (_a) {
|
|
18595
18567
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18596
18568
|
return ({
|
|
18597
18569
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18605,14 +18577,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18605
18577
|
var ProgressBar = function (_a) {
|
|
18606
18578
|
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;
|
|
18607
18579
|
var theme = useTheme();
|
|
18608
|
-
return (jsxs$1(Container$
|
|
18580
|
+
return (jsxs$1(Container$n, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18609
18581
|
};
|
|
18610
|
-
var templateObject_1$
|
|
18582
|
+
var templateObject_1$v;
|
|
18611
18583
|
|
|
18612
|
-
var Container$
|
|
18613
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18614
|
-
var Number$1 = newStyled(Item$1)(templateObject_3$
|
|
18615
|
-
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$
|
|
18584
|
+
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; });
|
|
18585
|
+
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"])));
|
|
18586
|
+
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"])));
|
|
18587
|
+
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)'; });
|
|
18616
18588
|
var QuantityPicker = function (_a) {
|
|
18617
18589
|
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;
|
|
18618
18590
|
var theme = useTheme();
|
|
@@ -18635,9 +18607,9 @@ var QuantityPicker = function (_a) {
|
|
|
18635
18607
|
return clamp(value);
|
|
18636
18608
|
});
|
|
18637
18609
|
}, [value, clamp]);
|
|
18638
|
-
return (jsxs$1(Container$
|
|
18610
|
+
return (jsxs$1(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: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(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));
|
|
18639
18611
|
};
|
|
18640
|
-
var templateObject_1$
|
|
18612
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$j, templateObject_4$d;
|
|
18641
18613
|
|
|
18642
18614
|
/* base styles & size variants */
|
|
18643
18615
|
var CustomRadioStyles$1 = {
|
|
@@ -18706,9 +18678,9 @@ var ContainerStyles$1 = {
|
|
|
18706
18678
|
},
|
|
18707
18679
|
};
|
|
18708
18680
|
|
|
18709
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18710
|
-
var Container$
|
|
18711
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18681
|
+
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"])));
|
|
18682
|
+
var Container$l = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18683
|
+
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) {
|
|
18712
18684
|
var disabled = _a.disabled;
|
|
18713
18685
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18714
18686
|
});
|
|
@@ -18716,7 +18688,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18716
18688
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18717
18689
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18718
18690
|
]; });
|
|
18719
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
18691
|
+
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"])));
|
|
18720
18692
|
var RadioPrimary = function (_a) {
|
|
18721
18693
|
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 ? ComponentSize.Medium : _d;
|
|
18722
18694
|
var theme = useTheme();
|
|
@@ -18724,9 +18696,9 @@ var RadioPrimary = function (_a) {
|
|
|
18724
18696
|
var value = event.currentTarget.value;
|
|
18725
18697
|
onChange({ value: value, label: label });
|
|
18726
18698
|
};
|
|
18727
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
18699
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$l, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18728
18700
|
};
|
|
18729
|
-
var templateObject_1$
|
|
18701
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i;
|
|
18730
18702
|
|
|
18731
18703
|
var RadioGroupInput = function (_a) {
|
|
18732
18704
|
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 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18805,9 +18777,9 @@ var ContainerStyles = {
|
|
|
18805
18777
|
},
|
|
18806
18778
|
};
|
|
18807
18779
|
|
|
18808
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18809
|
-
var Container$
|
|
18810
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18780
|
+
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"])));
|
|
18781
|
+
var Container$k = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18782
|
+
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) {
|
|
18811
18783
|
var disabled = _a.disabled;
|
|
18812
18784
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18813
18785
|
});
|
|
@@ -18815,7 +18787,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
18815
18787
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18816
18788
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
18817
18789
|
]; });
|
|
18818
|
-
var StyledLabel = newStyled(Label$4)(templateObject_3$
|
|
18790
|
+
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) {
|
|
18819
18791
|
var theme = _a.theme;
|
|
18820
18792
|
return theme.component.radio.textSize;
|
|
18821
18793
|
}, function (_a) {
|
|
@@ -18829,9 +18801,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18829
18801
|
var value = event.currentTarget.value;
|
|
18830
18802
|
onChange({ value: value, label: label });
|
|
18831
18803
|
};
|
|
18832
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
18804
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$k, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(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));
|
|
18833
18805
|
};
|
|
18834
|
-
var templateObject_1$
|
|
18806
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h;
|
|
18835
18807
|
|
|
18836
18808
|
var ClubRadioGroupInput = function (_a) {
|
|
18837
18809
|
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 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18859,15 +18831,15 @@ function formatDate(date, format) {
|
|
|
18859
18831
|
}
|
|
18860
18832
|
}
|
|
18861
18833
|
|
|
18862
|
-
var Container$
|
|
18863
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18864
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18865
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
18866
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
18867
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
18868
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
18869
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
18870
|
-
var ReviewDescription = newStyled.div(templateObject_9$
|
|
18834
|
+
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"])));
|
|
18835
|
+
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"])));
|
|
18836
|
+
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"])));
|
|
18837
|
+
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"])));
|
|
18838
|
+
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"])));
|
|
18839
|
+
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"])));
|
|
18840
|
+
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"])));
|
|
18841
|
+
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"])));
|
|
18842
|
+
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"])));
|
|
18871
18843
|
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"])));
|
|
18872
18844
|
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"])));
|
|
18873
18845
|
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"])));
|
|
@@ -18897,22 +18869,22 @@ var Review$1 = function (_a) {
|
|
|
18897
18869
|
}
|
|
18898
18870
|
}
|
|
18899
18871
|
}, [opened]);
|
|
18900
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
18872
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$j, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18901
18873
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18902
18874
|
};
|
|
18903
|
-
var templateObject_1$
|
|
18875
|
+
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;
|
|
18904
18876
|
|
|
18905
18877
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18906
18878
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18907
|
-
var Container$
|
|
18908
|
-
var Heading = newStyled.div(templateObject_2$
|
|
18909
|
-
var Content = newStyled.div(templateObject_3$
|
|
18910
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
18911
|
-
var DateText = newStyled.span(templateObject_5$
|
|
18912
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
18913
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
18914
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
18915
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
18879
|
+
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"])));
|
|
18880
|
+
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"])));
|
|
18881
|
+
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"])));
|
|
18882
|
+
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"])));
|
|
18883
|
+
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"])));
|
|
18884
|
+
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"])));
|
|
18885
|
+
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"])));
|
|
18886
|
+
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"])));
|
|
18887
|
+
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"])));
|
|
18916
18888
|
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"])));
|
|
18917
18889
|
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"])));
|
|
18918
18890
|
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"])));
|
|
@@ -18946,7 +18918,7 @@ var Review = function (_a) {
|
|
|
18946
18918
|
});
|
|
18947
18919
|
};
|
|
18948
18920
|
}, [randomId]);
|
|
18949
|
-
return (jsxs$1(Container$
|
|
18921
|
+
return (jsxs$1(Container$i, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName, { children: reviewerName }, void 0), jsx$1(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
18950
18922
|
__html: showMoreMobile
|
|
18951
18923
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18952
18924
|
: description,
|
|
@@ -18956,15 +18928,15 @@ var Review = function (_a) {
|
|
|
18956
18928
|
: description,
|
|
18957
18929
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
18958
18930
|
};
|
|
18959
|
-
var templateObject_1$
|
|
18960
|
-
|
|
18961
|
-
var Container$
|
|
18962
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18963
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18964
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18965
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
18966
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
18967
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
18931
|
+
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;
|
|
18932
|
+
|
|
18933
|
+
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"])));
|
|
18934
|
+
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"])));
|
|
18935
|
+
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"])));
|
|
18936
|
+
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"])));
|
|
18937
|
+
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"])));
|
|
18938
|
+
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"])));
|
|
18939
|
+
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) {
|
|
18968
18940
|
var backgroundUrl = _a.backgroundUrl;
|
|
18969
18941
|
return "url(".concat(backgroundUrl, ")");
|
|
18970
18942
|
});
|
|
@@ -18972,19 +18944,19 @@ var ReviewsHeader = function (_a) {
|
|
|
18972
18944
|
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;
|
|
18973
18945
|
var starsNumber = 5;
|
|
18974
18946
|
var theme = useTheme();
|
|
18975
|
-
return (jsxs$1(Container$
|
|
18947
|
+
return (jsxs$1(Container$h, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18976
18948
|
};
|
|
18977
|
-
var templateObject_1$
|
|
18949
|
+
var templateObject_1$p, templateObject_2$h, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5;
|
|
18978
18950
|
|
|
18979
|
-
var Container$
|
|
18980
|
-
var Text = newStyled.p(templateObject_2$
|
|
18951
|
+
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"])));
|
|
18952
|
+
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; });
|
|
18981
18953
|
var ScrollToTop = function (_a) {
|
|
18982
18954
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18983
18955
|
var theme = useTheme();
|
|
18984
18956
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18985
|
-
return (jsxs$1(Container$
|
|
18957
|
+
return (jsxs$1(Container$g, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18986
18958
|
};
|
|
18987
|
-
var templateObject_1$
|
|
18959
|
+
var templateObject_1$o, templateObject_2$g;
|
|
18988
18960
|
|
|
18989
18961
|
var Input = newStyled.input(function (props) { return ({
|
|
18990
18962
|
padding: props.theme.component.input.padding,
|
|
@@ -19015,7 +18987,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19015
18987
|
},
|
|
19016
18988
|
}); });
|
|
19017
18989
|
|
|
19018
|
-
var Container$
|
|
18990
|
+
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({
|
|
19019
18991
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19020
18992
|
}));
|
|
19021
18993
|
var Description = newStyled.div({
|
|
@@ -19032,25 +19004,25 @@ var Description = newStyled.div({
|
|
|
19032
19004
|
var ProductItem = function (_a) {
|
|
19033
19005
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19034
19006
|
var theme = useTheme();
|
|
19035
|
-
return (jsxs$1(Container$
|
|
19007
|
+
return (jsxs$1(Container$f, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19036
19008
|
};
|
|
19037
|
-
var templateObject_1$
|
|
19009
|
+
var templateObject_1$n;
|
|
19038
19010
|
|
|
19039
|
-
var Container$
|
|
19011
|
+
var Container$e = newStyled.div({
|
|
19040
19012
|
display: 'flex',
|
|
19041
19013
|
justifyContent: 'center',
|
|
19042
19014
|
padding: '1rem',
|
|
19043
19015
|
});
|
|
19044
19016
|
var Footer = function (_a) {
|
|
19045
19017
|
var text = _a.text, onClick = _a.onClick;
|
|
19046
|
-
return (jsx$1(Container$
|
|
19018
|
+
return (jsx$1(Container$e, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
19047
19019
|
};
|
|
19048
19020
|
|
|
19049
19021
|
var Ul = newStyled.ul({
|
|
19050
19022
|
margin: '0px',
|
|
19051
19023
|
padding: '0px',
|
|
19052
19024
|
});
|
|
19053
|
-
var Li = newStyled.li(templateObject_1$
|
|
19025
|
+
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({
|
|
19054
19026
|
padding: [0, '0rem 1rem'],
|
|
19055
19027
|
borderRadius: [0, '0.5rem'],
|
|
19056
19028
|
}));
|
|
@@ -19062,31 +19034,31 @@ var Anchor = newStyled.a({
|
|
|
19062
19034
|
padding: 0,
|
|
19063
19035
|
textDecoration: 'none',
|
|
19064
19036
|
});
|
|
19065
|
-
var Container$
|
|
19037
|
+
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({
|
|
19066
19038
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19067
19039
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19068
19040
|
borderRadius: ['0', '0.5rem'],
|
|
19069
19041
|
}));
|
|
19070
|
-
var Header = newStyled.div(templateObject_3$
|
|
19042
|
+
var Header = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19071
19043
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19072
19044
|
}));
|
|
19073
19045
|
var ResultsPanel = function (_a) {
|
|
19074
19046
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19075
19047
|
var theme = useTheme();
|
|
19076
|
-
return (jsxs$1(Container$
|
|
19048
|
+
return (jsxs$1(Container$d, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19077
19049
|
};
|
|
19078
|
-
var templateObject_1$
|
|
19050
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$d;
|
|
19079
19051
|
|
|
19080
|
-
var Button = newStyled.button(templateObject_1$
|
|
19052
|
+
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({
|
|
19081
19053
|
right: ['1rem', '7.75rem'],
|
|
19082
19054
|
top: ['0.75rem', '0.75rem'],
|
|
19083
19055
|
}));
|
|
19084
19056
|
var ClearButton = function (_a) {
|
|
19085
19057
|
var onClick = _a.onClick;
|
|
19086
19058
|
var theme = useTheme();
|
|
19087
|
-
return (jsx$1(Button, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19059
|
+
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19088
19060
|
};
|
|
19089
|
-
var templateObject_1$
|
|
19061
|
+
var templateObject_1$l;
|
|
19090
19062
|
|
|
19091
19063
|
var SearchIconContainer = newStyled.div({
|
|
19092
19064
|
display: 'flex',
|
|
@@ -19096,7 +19068,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19096
19068
|
background: 'white',
|
|
19097
19069
|
alignSelf: 'center',
|
|
19098
19070
|
});
|
|
19099
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19071
|
+
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"])));
|
|
19100
19072
|
var SearchControl = function (_a) {
|
|
19101
19073
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19102
19074
|
var theme = useTheme();
|
|
@@ -19112,7 +19084,7 @@ var SearchControl = function (_a) {
|
|
|
19112
19084
|
}
|
|
19113
19085
|
return (jsxs$1(Fragment$2, { children: [jsx$1(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsx$1(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19114
19086
|
};
|
|
19115
|
-
var templateObject_1$
|
|
19087
|
+
var templateObject_1$k;
|
|
19116
19088
|
|
|
19117
19089
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19118
19090
|
var reducer = function (state, action) {
|
|
@@ -19128,7 +19100,7 @@ var reducer = function (state, action) {
|
|
|
19128
19100
|
}
|
|
19129
19101
|
}
|
|
19130
19102
|
};
|
|
19131
|
-
var Container$
|
|
19103
|
+
var Container$c = newStyled.div({
|
|
19132
19104
|
position: 'relative',
|
|
19133
19105
|
display: 'flex',
|
|
19134
19106
|
});
|
|
@@ -19168,7 +19140,7 @@ var SearchBar = function (_a) {
|
|
|
19168
19140
|
if (e.cancelable) {
|
|
19169
19141
|
e.preventDefault();
|
|
19170
19142
|
}
|
|
19171
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19143
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$c, __assign$1({ theme: theme }, { children: [jsx$1(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) {
|
|
19172
19144
|
if (e.key === 'Enter') {
|
|
19173
19145
|
if (e.cancelable) {
|
|
19174
19146
|
e.preventDefault();
|
|
@@ -19179,20 +19151,20 @@ var SearchBar = function (_a) {
|
|
|
19179
19151
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(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));
|
|
19180
19152
|
};
|
|
19181
19153
|
|
|
19182
|
-
var Container$
|
|
19183
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19184
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
19185
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
19186
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
19154
|
+
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"])));
|
|
19155
|
+
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"])));
|
|
19156
|
+
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"])));
|
|
19157
|
+
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"])));
|
|
19158
|
+
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"])));
|
|
19187
19159
|
var SearchNavigation = function (_a) {
|
|
19188
19160
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19189
|
-
return (jsxs$1(Container$
|
|
19161
|
+
return (jsxs$1(Container$b, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
19190
19162
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19191
19163
|
}) }, void 0)] }, void 0));
|
|
19192
19164
|
};
|
|
19193
|
-
var templateObject_1$
|
|
19165
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$c, templateObject_4$9, templateObject_5$5;
|
|
19194
19166
|
|
|
19195
|
-
var Container$
|
|
19167
|
+
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) {
|
|
19196
19168
|
var alignCenter = _a.alignCenter;
|
|
19197
19169
|
return alignCenter &&
|
|
19198
19170
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19202,26 +19174,26 @@ var Container$9 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
19202
19174
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19203
19175
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19204
19176
|
});
|
|
19205
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19206
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19177
|
+
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"])));
|
|
19178
|
+
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"])));
|
|
19207
19179
|
var ShortBanner = function (_a) {
|
|
19208
19180
|
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;
|
|
19209
19181
|
var theme = useTheme();
|
|
19210
|
-
return (jsxs$1(Container$
|
|
19182
|
+
return (jsxs$1(Container$a, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19211
19183
|
};
|
|
19212
|
-
var templateObject_1$
|
|
19213
|
-
|
|
19214
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19215
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19216
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
19217
|
-
var Label = newStyled('div')(templateObject_4$
|
|
19218
|
-
var TopLabel = newStyled(Label)(templateObject_5$
|
|
19219
|
-
var LeftLabel = newStyled(Label)(templateObject_6$
|
|
19220
|
-
var Container$
|
|
19221
|
-
var LabelText = newStyled('span')(templateObject_8$
|
|
19222
|
-
var Column = newStyled('div')(templateObject_9$
|
|
19184
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$b;
|
|
19185
|
+
|
|
19186
|
+
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; });
|
|
19187
|
+
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; });
|
|
19188
|
+
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; });
|
|
19189
|
+
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"])));
|
|
19190
|
+
var TopLabel = newStyled(Label)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19191
|
+
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"])));
|
|
19192
|
+
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"])));
|
|
19193
|
+
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"])));
|
|
19194
|
+
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"])));
|
|
19223
19195
|
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; });
|
|
19224
|
-
var templateObject_1$
|
|
19196
|
+
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;
|
|
19225
19197
|
|
|
19226
19198
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19227
19199
|
var getCellColor = function (index, cell) {
|
|
@@ -19257,21 +19229,21 @@ var SizeChartTable = function (_a) {
|
|
|
19257
19229
|
var theme = useTheme();
|
|
19258
19230
|
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];
|
|
19259
19231
|
var isMultilabel = xLabel && yLabel;
|
|
19260
|
-
return (jsxs$1(Container$
|
|
19232
|
+
return (jsxs$1(Container$9, { children: [isMultilabel && (jsxs$1(LeftLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column, { children: [isMultilabel && (jsxs$1(TopLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ style: {
|
|
19261
19233
|
backgroundColor: getCellColor(index, cell),
|
|
19262
19234
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(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 (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19263
19235
|
};
|
|
19264
19236
|
|
|
19265
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19266
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19267
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
19268
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
19237
|
+
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; });
|
|
19238
|
+
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; });
|
|
19239
|
+
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; });
|
|
19240
|
+
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; });
|
|
19269
19241
|
var SizeTable = function (_a) {
|
|
19270
19242
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19271
19243
|
var theme = useTheme();
|
|
19272
19244
|
return (jsxs$1(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19273
19245
|
};
|
|
19274
|
-
var templateObject_1$
|
|
19246
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$7;
|
|
19275
19247
|
|
|
19276
19248
|
var getStylesBySize$4 = function (size) {
|
|
19277
19249
|
switch (size) {
|
|
@@ -19298,7 +19270,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19298
19270
|
} });
|
|
19299
19271
|
};
|
|
19300
19272
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19301
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19273
|
+
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));
|
|
19302
19274
|
};
|
|
19303
19275
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19304
19276
|
if (disabled)
|
|
@@ -19314,23 +19286,23 @@ var TextButton = function (_a) {
|
|
|
19314
19286
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19315
19287
|
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));
|
|
19316
19288
|
};
|
|
19317
|
-
var templateObject_1$
|
|
19289
|
+
var templateObject_1$f;
|
|
19318
19290
|
|
|
19319
|
-
var Container$
|
|
19320
|
-
var P = newStyled.p(templateObject_2$
|
|
19321
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19291
|
+
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"])));
|
|
19292
|
+
var P = newStyled.p(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19293
|
+
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"])));
|
|
19322
19294
|
var SizeFitGuide = function (_a) {
|
|
19323
19295
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19324
|
-
return (jsxs$1(Container$
|
|
19296
|
+
return (jsxs$1(Container$8, { children: [jsx$1(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19325
19297
|
};
|
|
19326
|
-
var templateObject_1$
|
|
19298
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$8;
|
|
19327
19299
|
|
|
19328
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19300
|
+
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) {
|
|
19329
19301
|
var inline = _a.inline;
|
|
19330
19302
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19331
19303
|
});
|
|
19332
|
-
var Row = newStyled.div(templateObject_2$
|
|
19333
|
-
var templateObject_1$
|
|
19304
|
+
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"])));
|
|
19305
|
+
var templateObject_1$d, templateObject_2$9;
|
|
19334
19306
|
|
|
19335
19307
|
var SizeSelector = function (_a) {
|
|
19336
19308
|
var _b;
|
|
@@ -19349,7 +19321,7 @@ var SizeSelector = function (_a) {
|
|
|
19349
19321
|
}) }), void 0)] }), void 0));
|
|
19350
19322
|
};
|
|
19351
19323
|
|
|
19352
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19324
|
+
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) {
|
|
19353
19325
|
var titleSize = _a.titleSize;
|
|
19354
19326
|
return titleSize;
|
|
19355
19327
|
}, function (_a) {
|
|
@@ -19366,18 +19338,18 @@ var Tab = function (_a) {
|
|
|
19366
19338
|
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;
|
|
19367
19339
|
return (jsx$1(Fragment$2, { children: jsx$1(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));
|
|
19368
19340
|
};
|
|
19369
|
-
var templateObject_1$
|
|
19341
|
+
var templateObject_1$c;
|
|
19370
19342
|
|
|
19371
|
-
var Container$
|
|
19372
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19343
|
+
var Container$7 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19344
|
+
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) {
|
|
19373
19345
|
var backgroundColor = _a.backgroundColor;
|
|
19374
19346
|
return backgroundColor;
|
|
19375
19347
|
}, function (_a) {
|
|
19376
19348
|
var borderColor = _a.borderColor;
|
|
19377
19349
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19378
19350
|
});
|
|
19379
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19380
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19351
|
+
var TabContent = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19352
|
+
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"])));
|
|
19381
19353
|
var Tabs = function (_a) {
|
|
19382
19354
|
var _b;
|
|
19383
19355
|
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;
|
|
@@ -19386,16 +19358,16 @@ var Tabs = function (_a) {
|
|
|
19386
19358
|
return null;
|
|
19387
19359
|
}
|
|
19388
19360
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19389
|
-
return (jsxs$1(Container$
|
|
19361
|
+
return (jsxs$1(Container$7, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19390
19362
|
};
|
|
19391
|
-
var templateObject_1$
|
|
19363
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$7, templateObject_4$6;
|
|
19392
19364
|
|
|
19393
|
-
var Container$
|
|
19365
|
+
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"])));
|
|
19394
19366
|
var Tag = function (_a) {
|
|
19395
19367
|
var text = _a.text, className = _a.className;
|
|
19396
|
-
return jsx$1(Container$
|
|
19368
|
+
return jsx$1(Container$6, __assign$1({ className: className }, { children: text }), void 0);
|
|
19397
19369
|
};
|
|
19398
|
-
var templateObject_1$
|
|
19370
|
+
var templateObject_1$a;
|
|
19399
19371
|
|
|
19400
19372
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19401
19373
|
switch (size) {
|
|
@@ -19426,10 +19398,10 @@ var getStylesBySize$3 = function (size, styledBorder) {
|
|
|
19426
19398
|
}
|
|
19427
19399
|
};
|
|
19428
19400
|
var CategoryTag = function (_a) {
|
|
19429
|
-
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b;
|
|
19401
|
+
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b, backgroundColor = _a.backgroundColor;
|
|
19430
19402
|
var theme = useTheme();
|
|
19431
19403
|
var stylesBySize = getStylesBySize$3(size, styledBorder);
|
|
19432
|
-
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));
|
|
19404
|
+
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));
|
|
19433
19405
|
};
|
|
19434
19406
|
|
|
19435
19407
|
var getStylesBySize$2 = function (size) {
|
|
@@ -19506,9 +19478,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19506
19478
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19507
19479
|
};
|
|
19508
19480
|
|
|
19509
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19510
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19511
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19481
|
+
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"])));
|
|
19482
|
+
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"])));
|
|
19483
|
+
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"])));
|
|
19512
19484
|
var ImageVideo = function (_a) {
|
|
19513
19485
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19514
19486
|
var video = useRef(null);
|
|
@@ -19528,12 +19500,12 @@ var ImageVideo = function (_a) {
|
|
|
19528
19500
|
height: '100%',
|
|
19529
19501
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19530
19502
|
};
|
|
19531
|
-
var templateObject_1$
|
|
19503
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$6;
|
|
19532
19504
|
|
|
19533
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19534
|
-
var ContainerMobile = css(templateObject_2$
|
|
19535
|
-
var Container$
|
|
19536
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19505
|
+
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"])));
|
|
19506
|
+
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"])));
|
|
19507
|
+
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);
|
|
19508
|
+
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"])));
|
|
19537
19509
|
var TextWithImage = function (_a) {
|
|
19538
19510
|
var _b, _c, _d, _e;
|
|
19539
19511
|
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"]);
|
|
@@ -19553,7 +19525,7 @@ var TextWithImage = function (_a) {
|
|
|
19553
19525
|
// @ts-ignore
|
|
19554
19526
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19555
19527
|
};
|
|
19556
|
-
return (jsxs(Container$
|
|
19528
|
+
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: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
19557
19529
|
backgroundColor: props.btnBGColor,
|
|
19558
19530
|
color: '#ffffff',
|
|
19559
19531
|
border: props.btnBGColor,
|
|
@@ -19563,9 +19535,9 @@ var TextWithImage = function (_a) {
|
|
|
19563
19535
|
},
|
|
19564
19536
|
} }, 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));
|
|
19565
19537
|
};
|
|
19566
|
-
var templateObject_1$
|
|
19538
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$5, templateObject_4$5;
|
|
19567
19539
|
|
|
19568
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19540
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19569
19541
|
var timerColor = _a.timerColor;
|
|
19570
19542
|
return timerColor || '';
|
|
19571
19543
|
});
|
|
@@ -19601,11 +19573,11 @@ var Timer = function (_a) {
|
|
|
19601
19573
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19602
19574
|
return (jsxs$1(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));
|
|
19603
19575
|
};
|
|
19604
|
-
var templateObject_1$
|
|
19576
|
+
var templateObject_1$7;
|
|
19605
19577
|
|
|
19606
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19607
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19608
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19578
|
+
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"])));
|
|
19579
|
+
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; });
|
|
19580
|
+
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) {
|
|
19609
19581
|
var theme = _a.theme;
|
|
19610
19582
|
return theme.component.total.basicTotal.currency.color;
|
|
19611
19583
|
}, function (_a) {
|
|
@@ -19618,41 +19590,41 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19618
19590
|
var theme = _a.theme;
|
|
19619
19591
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19620
19592
|
});
|
|
19621
|
-
var Container$
|
|
19593
|
+
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) {
|
|
19622
19594
|
var highlightColor = _a.highlightColor;
|
|
19623
19595
|
return highlightColor;
|
|
19624
19596
|
});
|
|
19625
|
-
var TotalContainer = newStyled(Container$
|
|
19597
|
+
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) {
|
|
19626
19598
|
var showTotalLabel = _a.showTotalLabel;
|
|
19627
19599
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19628
19600
|
});
|
|
19629
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19630
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
19601
|
+
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"])));
|
|
19602
|
+
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) {
|
|
19631
19603
|
var theme = _a.theme;
|
|
19632
19604
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19633
19605
|
});
|
|
19634
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
19635
|
-
var templateObject_1$
|
|
19606
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19607
|
+
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;
|
|
19636
19608
|
|
|
19637
19609
|
var Total = function (_a) {
|
|
19638
19610
|
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;
|
|
19639
19611
|
var theme = useTheme();
|
|
19640
|
-
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$
|
|
19612
|
+
return (jsxs$1(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsx$1(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxs$1(Container$4, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19641
19613
|
};
|
|
19642
19614
|
|
|
19643
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19615
|
+
var Wrapper = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19644
19616
|
var color = _a.color;
|
|
19645
19617
|
return color;
|
|
19646
19618
|
});
|
|
19647
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19648
|
-
var Item = newStyled.h4(templateObject_3$
|
|
19619
|
+
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"])));
|
|
19620
|
+
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) {
|
|
19649
19621
|
var theme = _a.theme;
|
|
19650
19622
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19651
19623
|
}, function (_a) {
|
|
19652
19624
|
var theme = _a.theme;
|
|
19653
19625
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19654
19626
|
});
|
|
19655
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
19627
|
+
var CouponItem = newStyled(Item)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19656
19628
|
var color = _a.color;
|
|
19657
19629
|
return color;
|
|
19658
19630
|
});
|
|
@@ -19665,30 +19637,30 @@ var Subtotal = function (_a) {
|
|
|
19665
19637
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19666
19638
|
})] }), void 0));
|
|
19667
19639
|
};
|
|
19668
|
-
var templateObject_1$
|
|
19640
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3;
|
|
19669
19641
|
|
|
19670
19642
|
var Totals = {
|
|
19671
19643
|
Total: Total,
|
|
19672
19644
|
Subtotal: Subtotal,
|
|
19673
19645
|
};
|
|
19674
19646
|
|
|
19675
|
-
var Container$
|
|
19676
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19677
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
19678
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
19679
|
-
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$
|
|
19680
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_6$
|
|
19647
|
+
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"])));
|
|
19648
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19649
|
+
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; });
|
|
19650
|
+
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'); });
|
|
19651
|
+
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"])));
|
|
19652
|
+
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) {
|
|
19681
19653
|
return props.finishedTrack
|
|
19682
19654
|
? props.finishedTrackColor
|
|
19683
19655
|
: props.activeTrack
|
|
19684
19656
|
? props.activeTrackColor
|
|
19685
19657
|
: '';
|
|
19686
19658
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19687
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19688
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
19659
|
+
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"])));
|
|
19660
|
+
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) {
|
|
19689
19661
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19690
19662
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19691
|
-
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)'); });
|
|
19663
|
+
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)'); });
|
|
19692
19664
|
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; });
|
|
19693
19665
|
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"])));
|
|
19694
19666
|
var TrackingProgressV2 = function (_a) {
|
|
@@ -19713,7 +19685,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19713
19685
|
}
|
|
19714
19686
|
return '30px';
|
|
19715
19687
|
};
|
|
19716
|
-
return (jsxs$1(Container$
|
|
19688
|
+
return (jsxs$1(Container$3, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19717
19689
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19718
19690
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsx$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: !resumedStyle && (jsxs$1(Fragment$2, { children: [jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }, void 0)) }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
19719
19691
|
? activeCheckpointColor
|
|
@@ -19724,18 +19696,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19724
19696
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19725
19697
|
})] }), void 0));
|
|
19726
19698
|
};
|
|
19727
|
-
var templateObject_1$
|
|
19728
|
-
|
|
19729
|
-
var Container$
|
|
19730
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19731
|
-
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; });
|
|
19732
|
-
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'); });
|
|
19733
|
-
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'); });
|
|
19734
|
-
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) {
|
|
19699
|
+
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;
|
|
19700
|
+
|
|
19701
|
+
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"])));
|
|
19702
|
+
var CheckpointContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19703
|
+
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; });
|
|
19704
|
+
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'); });
|
|
19705
|
+
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'); });
|
|
19706
|
+
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) {
|
|
19735
19707
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19736
19708
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
19737
|
-
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)'); });
|
|
19738
|
-
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; });
|
|
19709
|
+
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)'); });
|
|
19710
|
+
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; });
|
|
19739
19711
|
var TrackingProgress = function (_a) {
|
|
19740
19712
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
19741
19713
|
var theme = useTheme();
|
|
@@ -19755,7 +19727,7 @@ var TrackingProgress = function (_a) {
|
|
|
19755
19727
|
}
|
|
19756
19728
|
return '30px';
|
|
19757
19729
|
};
|
|
19758
|
-
return (jsxs$1(Container$
|
|
19730
|
+
return (jsxs$1(Container$2, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19759
19731
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19760
19732
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
19761
19733
|
? theme.colors.semantic.informative.color
|
|
@@ -19764,9 +19736,9 @@ var TrackingProgress = function (_a) {
|
|
|
19764
19736
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19765
19737
|
})] }), void 0));
|
|
19766
19738
|
};
|
|
19767
|
-
var templateObject_1$
|
|
19739
|
+
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;
|
|
19768
19740
|
|
|
19769
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
19741
|
+
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) {
|
|
19770
19742
|
var textPosition = _a.textPosition;
|
|
19771
19743
|
return textPosition;
|
|
19772
19744
|
}, function (_a) {
|
|
@@ -19779,7 +19751,7 @@ var TimerContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = _
|
|
|
19779
19751
|
var borderRadius = _a.borderRadius;
|
|
19780
19752
|
return borderRadius || '8px';
|
|
19781
19753
|
});
|
|
19782
|
-
var templateObject_1$
|
|
19754
|
+
var templateObject_1$2;
|
|
19783
19755
|
|
|
19784
19756
|
var getDefaultCountdown = function () {
|
|
19785
19757
|
var tomorrowDate = new Date();
|
|
@@ -19795,7 +19767,7 @@ var HurryUp = function (_a) {
|
|
|
19795
19767
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsx$1(Text$7, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxs$1(Fragment$2, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsx$1(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
19796
19768
|
};
|
|
19797
19769
|
|
|
19798
|
-
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) {
|
|
19770
|
+
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) {
|
|
19799
19771
|
var size = _a.size;
|
|
19800
19772
|
return (size ? size : '100%');
|
|
19801
19773
|
}, function (_a) {
|
|
@@ -19809,7 +19781,7 @@ var borderSize = {
|
|
|
19809
19781
|
large: '3px',
|
|
19810
19782
|
};
|
|
19811
19783
|
var DEFAULT_COLOR = '#5EAD9B';
|
|
19812
|
-
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) {
|
|
19784
|
+
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) {
|
|
19813
19785
|
var size = _a.size;
|
|
19814
19786
|
return borderSize[size];
|
|
19815
19787
|
}, function (_a) {
|
|
@@ -19822,12 +19794,100 @@ var StyledSpinner = newStyled.div(templateObject_2 || (templateObject_2 = __make
|
|
|
19822
19794
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
19823
19795
|
return duration;
|
|
19824
19796
|
});
|
|
19825
|
-
var templateObject_1, templateObject_2;
|
|
19797
|
+
var templateObject_1$1, templateObject_2$1;
|
|
19826
19798
|
|
|
19827
19799
|
var Spinner = function (_a) {
|
|
19828
19800
|
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;
|
|
19829
|
-
return (jsx$1(Container, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
19801
|
+
return (jsx$1(Container$1, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
19802
|
+
};
|
|
19803
|
+
|
|
19804
|
+
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"])));
|
|
19805
|
+
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) {
|
|
19806
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
19807
|
+
return borderRadiusVariant &&
|
|
19808
|
+
"\n border-radius: 40px;\n ";
|
|
19809
|
+
}, function (_a) {
|
|
19810
|
+
var theme = _a.theme;
|
|
19811
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
19812
|
+
}, function (_a) {
|
|
19813
|
+
var theme = _a.theme;
|
|
19814
|
+
return theme.component.gallery.aspectRatio;
|
|
19815
|
+
});
|
|
19816
|
+
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"])));
|
|
19817
|
+
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"])));
|
|
19818
|
+
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) {
|
|
19819
|
+
var theme = _a.theme;
|
|
19820
|
+
return theme.colors.shades.white.color;
|
|
19821
|
+
});
|
|
19822
|
+
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"])));
|
|
19823
|
+
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) {
|
|
19824
|
+
var theme = _a.theme;
|
|
19825
|
+
return theme.colors.pallete.primary.color;
|
|
19826
|
+
});
|
|
19827
|
+
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) {
|
|
19828
|
+
var theme = _a.theme;
|
|
19829
|
+
return theme.component.gallery.aspectRatio;
|
|
19830
|
+
});
|
|
19831
|
+
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) {
|
|
19832
|
+
var theme = _a.theme;
|
|
19833
|
+
return theme.component.gallery.aspectRatio;
|
|
19834
|
+
});
|
|
19835
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
19836
|
+
|
|
19837
|
+
var SETTINGS = {
|
|
19838
|
+
infinite: false,
|
|
19839
|
+
speed: 200,
|
|
19840
|
+
slidesToShow: 1,
|
|
19841
|
+
slidesToScroll: 1,
|
|
19842
|
+
initialSlide: 0,
|
|
19843
|
+
arrows: true,
|
|
19844
|
+
dots: false,
|
|
19845
|
+
};
|
|
19846
|
+
var THUMBNAIL_SETTINGS = {
|
|
19847
|
+
slidesToShow: 3.5,
|
|
19848
|
+
swipeToSlide: true,
|
|
19849
|
+
focusOnSelect: true,
|
|
19850
|
+
infinite: false,
|
|
19851
|
+
centerPadding: '16px',
|
|
19852
|
+
responsive: [
|
|
19853
|
+
{
|
|
19854
|
+
breakpoint: 1024,
|
|
19855
|
+
settings: {
|
|
19856
|
+
slidesToShow: 5,
|
|
19857
|
+
},
|
|
19858
|
+
},
|
|
19859
|
+
{
|
|
19860
|
+
breakpoint: 640,
|
|
19861
|
+
settings: {
|
|
19862
|
+
slidesToShow: 4.5,
|
|
19863
|
+
},
|
|
19864
|
+
},
|
|
19865
|
+
],
|
|
19866
|
+
};
|
|
19867
|
+
var ProductGalleryMobileV4 = function (_a) {
|
|
19868
|
+
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId;
|
|
19869
|
+
var _b = useTheme$1(), colors = _b.colors, component = _b.component;
|
|
19870
|
+
var _c = useState(undefined), nav1 = _c[0], setNav1 = _c[1];
|
|
19871
|
+
var _d = useState(undefined), nav2 = _d[0], setNav2 = _d[1];
|
|
19872
|
+
var slick = useRef(null);
|
|
19873
|
+
var thumbnailRef = useRef(null);
|
|
19874
|
+
var sliderWrapper = useRef(null);
|
|
19875
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
19876
|
+
useEffect(function () {
|
|
19877
|
+
if (slick.current)
|
|
19878
|
+
setNav1(slick.current);
|
|
19879
|
+
if (thumbnailRef.current)
|
|
19880
|
+
setNav2(thumbnailRef.current);
|
|
19881
|
+
}, []);
|
|
19882
|
+
return (jsx$1(Container, __assign$1({ "data-testid": "product-gallery-mobile" }, { children: jsxs$1(SliderContainer, __assign$1({ "data-testid": productImageDataTestId, ref: sliderWrapper }, { children: [jsx$1(Slider, __assign$1({}, SETTINGS, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(Icon.Arrows.ChevronRight, { height: "21px", width: "21px", fill: colors.shades[700].color }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button, { children: jsx$1(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) {
|
|
19883
|
+
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
19884
|
+
return (jsxs$1("div", { children: [jsx$1(StyledImage, { alt: alt, src: url, objectFit: "cover" }, void 0), jsx$1(TopTagContainer, __assign$1({ "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, key));
|
|
19885
|
+
}) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, THUMBNAIL_SETTINGS, { children: images.map(function (_a) {
|
|
19886
|
+
var _b, _c;
|
|
19887
|
+
var url = _a.url, key = _a.key;
|
|
19888
|
+
return (jsx$1(SlideItem, { children: jsx$1(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));
|
|
19889
|
+
}) }), void 0)] }), void 0) }), void 0));
|
|
19830
19890
|
};
|
|
19831
19891
|
|
|
19832
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag$1 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19892
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag$1 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video$1 as Video, buildImageUrl, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19833
19893
|
//# sourceMappingURL=index.esm.js.map
|