@trafilea/afrodita-components 6.13.0 → 6.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +27 -9
- package/build/index.esm.js +784 -733
- package/build/index.esm.js.map +1 -1
- package/build/index.js +784 -732
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +7 -0
- package/build/theme/revel.theme.js +7 -0
- package/build/theme/shapermint.theme.d.ts +7 -0
- package/build/theme/shapermint.theme.js +7 -0
- package/build/theme/thebodcon.theme.d.ts +7 -0
- package/build/theme/thebodcon.theme.js +7 -0
- package/build/theme/thespadr.theme.d.ts +7 -0
- package/build/theme/thespadr.theme.js +7 -0
- package/build/theme/truekind.theme.d.ts +7 -0
- package/build/theme/truekind.theme.js +7 -0
- package/package.json +1 -1
package/build/index.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,14 @@ 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 ContainerBase = newStyled.div(templateObject_3$
|
|
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: #c64844;\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: 5px;\n font-weight: 600;\n"], ["\n position: absolute;\n top: -25px;\n right: 5px;\n background-color: #c64844;\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: 5px;\n font-weight: 600;\n"])));
|
|
5805
|
+
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
5806
|
var selected = _a.selected, theme = _a.theme;
|
|
5807
5807
|
return selected
|
|
5808
5808
|
? "1.5px solid ".concat(theme.colors.shades['700'].color)
|
|
@@ -5816,28 +5816,28 @@ var ContainerBase = newStyled.div(templateObject_3$R || (templateObject_3$R = __
|
|
|
5816
5816
|
var theme = _a.theme;
|
|
5817
5817
|
return theme.colors.pallete.primary.color;
|
|
5818
5818
|
});
|
|
5819
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5819
|
+
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
5820
|
var onClick = _a.onClick;
|
|
5821
5821
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5822
5822
|
});
|
|
5823
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$
|
|
5824
|
-
var SubscriptionHeader = newStyled.div(templateObject_6$
|
|
5823
|
+
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"])));
|
|
5824
|
+
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
5825
|
var theme = _a.theme;
|
|
5826
5826
|
return theme.colors.shades[200].color;
|
|
5827
5827
|
}, function (_a) {
|
|
5828
5828
|
var theme = _a.theme;
|
|
5829
5829
|
return theme.colors.pallete.primary.color;
|
|
5830
5830
|
});
|
|
5831
|
-
var BenefitsContainer = newStyled.div(templateObject_7$
|
|
5832
|
-
var Benefit = newStyled.div(templateObject_8$
|
|
5833
|
-
var BenefitText = newStyled(Text$7)(templateObject_9$
|
|
5831
|
+
var BenefitsContainer = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5832
|
+
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"])));
|
|
5833
|
+
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
5834
|
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
5835
|
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
5836
|
var selected = _a.selected, theme = _a.theme;
|
|
5837
5837
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5838
5838
|
});
|
|
5839
|
-
var Container$
|
|
5840
|
-
var templateObject_1$
|
|
5839
|
+
var Container$11 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5840
|
+
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
5841
|
|
|
5842
5842
|
var radioIds = {
|
|
5843
5843
|
oneTime: {
|
|
@@ -5900,7 +5900,7 @@ var AutoshipV2 = function (_a) {
|
|
|
5900
5900
|
return (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0));
|
|
5901
5901
|
}
|
|
5902
5902
|
}
|
|
5903
|
-
return (jsxs$1(Container$
|
|
5903
|
+
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: "".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
5904
|
? benefitsColor.selected
|
|
5905
5905
|
: 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
5906
|
};
|
|
@@ -5918,13 +5918,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5918
5918
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5919
5919
|
_a$2);
|
|
5920
5920
|
|
|
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$
|
|
5921
|
+
var CustomerDetails = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject([""], [""])));
|
|
5922
|
+
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"])));
|
|
5923
|
+
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"])));
|
|
5924
|
+
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"])));
|
|
5925
|
+
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"])));
|
|
5926
|
+
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"])));
|
|
5927
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$s, templateObject_6$n;
|
|
5928
5928
|
|
|
5929
5929
|
var NameWithStars = function (_a) {
|
|
5930
5930
|
var name = _a.name, size = _a.size;
|
|
@@ -5942,10 +5942,10 @@ var ResultFeedback = function (_a) {
|
|
|
5942
5942
|
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
5943
|
};
|
|
5944
5944
|
|
|
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$
|
|
5945
|
+
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; });
|
|
5946
|
+
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"])));
|
|
5947
|
+
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; });
|
|
5948
|
+
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
5949
|
var theme = _a.theme;
|
|
5950
5950
|
return theme.colors.pallete.secondary.color;
|
|
5951
5951
|
}, function (_a) {
|
|
@@ -5955,7 +5955,7 @@ var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __m
|
|
|
5955
5955
|
var theme = _a.theme, size = _a.size;
|
|
5956
5956
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5957
5957
|
});
|
|
5958
|
-
var templateObject_1$
|
|
5958
|
+
var templateObject_1$1A, templateObject_2$11, templateObject_3$Q, templateObject_4$E;
|
|
5959
5959
|
|
|
5960
5960
|
/* base styles & size variants */
|
|
5961
5961
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6030,10 +6030,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
6030
6030
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
6031
6031
|
var infoText = buildInfoText(name, age, months);
|
|
6032
6032
|
var Component = componentByVariant[variant];
|
|
6033
|
-
return (jsxs$1(Container
|
|
6033
|
+
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
6034
|
};
|
|
6035
6035
|
|
|
6036
|
-
var Section = newStyled.div(templateObject_1$
|
|
6036
|
+
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
6037
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6038
6038
|
});
|
|
6039
6039
|
var CardHeader = function (_a) {
|
|
@@ -6044,16 +6044,16 @@ var CardFooter = function (_a) {
|
|
|
6044
6044
|
var children = _a.children;
|
|
6045
6045
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
6046
6046
|
};
|
|
6047
|
-
var templateObject_1$
|
|
6047
|
+
var templateObject_1$1z;
|
|
6048
6048
|
|
|
6049
|
-
var Body = newStyled.div(templateObject_1$
|
|
6049
|
+
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
6050
|
var CardBody = function (_a) {
|
|
6051
6051
|
var children = _a.children;
|
|
6052
6052
|
return jsx$1(Body, { children: children }, void 0);
|
|
6053
6053
|
};
|
|
6054
|
-
var templateObject_1$
|
|
6054
|
+
var templateObject_1$1y;
|
|
6055
6055
|
|
|
6056
|
-
var Container
|
|
6056
|
+
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
6057
|
var flex = _a.flex;
|
|
6058
6058
|
return flex &&
|
|
6059
6059
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6068,23 +6068,23 @@ var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __
|
|
|
6068
6068
|
var Card$1 = function (_a) {
|
|
6069
6069
|
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
6070
|
var theme = useTheme();
|
|
6071
|
-
return (jsx$1(Container
|
|
6071
|
+
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
6072
|
};
|
|
6073
6073
|
var Card$2 = Object.assign(Card$1, {
|
|
6074
6074
|
Header: CardHeader,
|
|
6075
6075
|
Footer: CardFooter,
|
|
6076
6076
|
Body: CardBody,
|
|
6077
6077
|
});
|
|
6078
|
-
var templateObject_1$
|
|
6078
|
+
var templateObject_1$1x;
|
|
6079
6079
|
|
|
6080
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6081
|
-
var StyledContainer = newStyled.div(templateObject_2
|
|
6082
|
-
var TextLabel = newStyled(Text$7)(templateObject_3$
|
|
6080
|
+
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"])));
|
|
6081
|
+
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"])));
|
|
6082
|
+
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
6083
|
var color = _a.color;
|
|
6084
6084
|
return color;
|
|
6085
6085
|
});
|
|
6086
|
-
var YouAreSaving = newStyled(Text$7)(templateObject_4$
|
|
6087
|
-
var templateObject_1$
|
|
6086
|
+
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"])));
|
|
6087
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$P, templateObject_4$D;
|
|
6088
6088
|
|
|
6089
6089
|
var Minimalistic = function (_a) {
|
|
6090
6090
|
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 +6092,28 @@ var Minimalistic = function (_a) {
|
|
|
6092
6092
|
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
6093
|
};
|
|
6094
6094
|
|
|
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$
|
|
6095
|
+
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"])));
|
|
6096
|
+
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; });
|
|
6097
|
+
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; });
|
|
6098
|
+
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
6099
|
var Simple = function (_a) {
|
|
6100
6100
|
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
6101
|
var theme = useTheme();
|
|
6102
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
6102
|
+
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
6103
|
};
|
|
6104
|
-
var templateObject_1$
|
|
6104
|
+
var templateObject_1$1v, templateObject_2$$, templateObject_3$O, templateObject_4$C;
|
|
6105
6105
|
|
|
6106
6106
|
var Bundle = {
|
|
6107
6107
|
Minimalistic: Minimalistic,
|
|
6108
6108
|
Simple: Simple,
|
|
6109
6109
|
};
|
|
6110
6110
|
|
|
6111
|
-
var Container$
|
|
6111
|
+
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
6112
|
var displayBNPL = _a.displayBNPL;
|
|
6113
6113
|
return (displayBNPL ? 'flex' : 'none');
|
|
6114
6114
|
});
|
|
6115
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
6116
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
6115
|
+
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"])));
|
|
6116
|
+
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
6117
|
var BuyNowPayLater = function (_a) {
|
|
6118
6118
|
var _b;
|
|
6119
6119
|
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 +6123,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
6123
6123
|
console.error('Icon', iconName, 'not found');
|
|
6124
6124
|
return null;
|
|
6125
6125
|
}
|
|
6126
|
-
return (jsx$1(Container$
|
|
6126
|
+
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
6127
|
};
|
|
6128
|
-
var templateObject_1$
|
|
6128
|
+
var templateObject_1$1u, templateObject_2$_, templateObject_3$N;
|
|
6129
6129
|
|
|
6130
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6130
|
+
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
6131
|
var Title$5 = function (_a) {
|
|
6132
6132
|
var title = _a.title;
|
|
6133
6133
|
var theme = useTheme();
|
|
6134
6134
|
return jsx$1(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6135
6135
|
};
|
|
6136
|
-
var templateObject_1$
|
|
6136
|
+
var templateObject_1$1t;
|
|
6137
6137
|
|
|
6138
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6138
|
+
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
6139
|
var Promo = function (_a) {
|
|
6140
6140
|
var text = _a.text;
|
|
6141
6141
|
var theme = useTheme();
|
|
6142
6142
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6143
6143
|
};
|
|
6144
|
-
var templateObject_1$
|
|
6144
|
+
var templateObject_1$1s;
|
|
6145
6145
|
|
|
6146
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6146
|
+
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
6147
|
var Description$1 = function (_a) {
|
|
6148
6148
|
var text = _a.text;
|
|
6149
6149
|
var theme = useTheme();
|
|
6150
6150
|
return jsx$1(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6151
6151
|
};
|
|
6152
|
-
var templateObject_1$
|
|
6152
|
+
var templateObject_1$1r;
|
|
6153
6153
|
|
|
6154
|
-
var Container$
|
|
6154
|
+
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
6155
|
var CloseButton$1 = function (_a) {
|
|
6156
6156
|
var onClick = _a.onClick, size = _a.size;
|
|
6157
6157
|
var theme = useTheme();
|
|
6158
|
-
return (jsx$1(Container$
|
|
6158
|
+
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
6159
|
};
|
|
6160
|
-
var templateObject_1$
|
|
6160
|
+
var templateObject_1$1q;
|
|
6161
6161
|
|
|
6162
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6162
|
+
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
6163
|
var backgroundColor = _a.backgroundColor;
|
|
6164
6164
|
return backgroundColor;
|
|
6165
6165
|
}, function (_a) {
|
|
@@ -6174,7 +6174,7 @@ var OfferBanner = function (_a) {
|
|
|
6174
6174
|
var theme = useTheme();
|
|
6175
6175
|
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
6176
|
};
|
|
6177
|
-
var templateObject_1$
|
|
6177
|
+
var templateObject_1$1p;
|
|
6178
6178
|
|
|
6179
6179
|
var CartProductItem = {
|
|
6180
6180
|
Title: Title$5,
|
|
@@ -6184,20 +6184,20 @@ var CartProductItem = {
|
|
|
6184
6184
|
CloseButton: CloseButton$1,
|
|
6185
6185
|
};
|
|
6186
6186
|
|
|
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$
|
|
6187
|
+
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"])));
|
|
6188
|
+
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"])));
|
|
6189
|
+
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"])));
|
|
6190
|
+
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"])));
|
|
6191
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6192
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6193
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6194
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6195
6195
|
var ClubPriceLabel = function (_a) {
|
|
6196
6196
|
var clubPrice = _a.clubPrice;
|
|
6197
6197
|
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$
|
|
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$X, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6199
6199
|
};
|
|
6200
|
-
var templateObject_1$
|
|
6200
|
+
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
6201
|
|
|
6202
6202
|
var Spacing = function (_a) {
|
|
6203
6203
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6205,10 +6205,10 @@ var Spacing = function (_a) {
|
|
|
6205
6205
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6206
6206
|
};
|
|
6207
6207
|
|
|
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$
|
|
6208
|
+
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"])));
|
|
6209
|
+
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"])));
|
|
6210
|
+
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"])));
|
|
6211
|
+
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
6212
|
var index = _a.index;
|
|
6213
6213
|
return "".concat(6 + 3 * index, "px");
|
|
6214
6214
|
}, function (_a) {
|
|
@@ -6217,15 +6217,15 @@ var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __makeT
|
|
|
6217
6217
|
});
|
|
6218
6218
|
var StrengthBars = function (_a) {
|
|
6219
6219
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6220
|
-
return (jsxs$1(Container$
|
|
6220
|
+
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
6221
|
};
|
|
6222
|
-
var templateObject_1$
|
|
6222
|
+
var templateObject_1$1n, templateObject_2$Y, templateObject_3$L, templateObject_4$A;
|
|
6223
6223
|
|
|
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$
|
|
6224
|
+
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"])));
|
|
6225
|
+
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"])));
|
|
6226
|
+
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"])));
|
|
6227
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6228
|
+
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
6229
|
var RegularPriceTag = function () {
|
|
6230
6230
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6231
6231
|
};
|
|
@@ -6274,16 +6274,16 @@ var PriceLabelV4 = function (_a) {
|
|
|
6274
6274
|
: ComponentSize.XSmall;
|
|
6275
6275
|
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
6276
|
};
|
|
6277
|
-
return (jsxs$1(Container$
|
|
6277
|
+
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
6278
|
? finalPriceArray[0]
|
|
6279
6279
|
: (_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
6280
|
};
|
|
6281
|
-
var templateObject_1$
|
|
6281
|
+
var templateObject_1$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z, templateObject_5$q;
|
|
6282
6282
|
|
|
6283
|
-
var Container$
|
|
6284
|
-
var templateObject_1$
|
|
6283
|
+
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"])));
|
|
6284
|
+
var templateObject_1$1l;
|
|
6285
6285
|
|
|
6286
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6286
|
+
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
6287
|
var marginRight = _a.marginRight;
|
|
6288
6288
|
return marginRight;
|
|
6289
6289
|
});
|
|
@@ -6295,11 +6295,11 @@ var StarList = function (_a) {
|
|
|
6295
6295
|
width: theme.component.stars.element[size].width,
|
|
6296
6296
|
height: theme.component.stars.element[size].height,
|
|
6297
6297
|
};
|
|
6298
|
-
return (jsx$1(Container$
|
|
6298
|
+
return (jsx$1(Container$V, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6299
6299
|
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
6300
|
}) }, void 0));
|
|
6301
6301
|
};
|
|
6302
|
-
var templateObject_1$
|
|
6302
|
+
var templateObject_1$1k;
|
|
6303
6303
|
|
|
6304
6304
|
/* base styles & size variants */
|
|
6305
6305
|
var LabelStyles = {
|
|
@@ -6340,8 +6340,8 @@ var LabelStyles = {
|
|
|
6340
6340
|
});
|
|
6341
6341
|
},
|
|
6342
6342
|
};
|
|
6343
|
-
var Container$
|
|
6344
|
-
var templateObject_1$
|
|
6343
|
+
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"])));
|
|
6344
|
+
var templateObject_1$1j;
|
|
6345
6345
|
|
|
6346
6346
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6347
6347
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6361,7 +6361,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6361
6361
|
}),
|
|
6362
6362
|
];
|
|
6363
6363
|
});
|
|
6364
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6364
|
+
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
6365
|
var starsNumber = 5;
|
|
6366
6366
|
var Rating = function (_a) {
|
|
6367
6367
|
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 +6382,9 @@ var Rating = function (_a) {
|
|
|
6382
6382
|
href: reviewsContainerId,
|
|
6383
6383
|
}
|
|
6384
6384
|
: {};
|
|
6385
|
-
return (jsxs$1(Container$
|
|
6385
|
+
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
6386
|
};
|
|
6387
|
-
var templateObject_1$
|
|
6387
|
+
var templateObject_1$1i;
|
|
6388
6388
|
|
|
6389
6389
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6390
6390
|
var width = _a.width, height = _a.height;
|
|
@@ -6394,10 +6394,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6394
6394
|
height: height,
|
|
6395
6395
|
});
|
|
6396
6396
|
});
|
|
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$
|
|
6397
|
+
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"])));
|
|
6398
|
+
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"])));
|
|
6399
|
+
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"])));
|
|
6400
|
+
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
6401
|
var getStylesBySize$9 = function (size) {
|
|
6402
6402
|
switch (size) {
|
|
6403
6403
|
case ComponentSize.Medium:
|
|
@@ -6423,15 +6423,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6423
6423
|
};
|
|
6424
6424
|
}
|
|
6425
6425
|
};
|
|
6426
|
-
var TopTagContainer$
|
|
6426
|
+
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
6427
|
var style = _a.style;
|
|
6428
6428
|
return style.width;
|
|
6429
6429
|
});
|
|
6430
|
-
var BottomTagContainer$
|
|
6430
|
+
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
6431
|
var style = _a.style;
|
|
6432
6432
|
return style.width;
|
|
6433
6433
|
});
|
|
6434
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6434
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6435
6435
|
var ProductItemMobile = function (_a) {
|
|
6436
6436
|
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
6437
|
display: false,
|
|
@@ -6488,9 +6488,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6488
6488
|
return jsx(Fragment, {}, void 0);
|
|
6489
6489
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6490
6490
|
};
|
|
6491
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6491
|
+
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
6492
|
};
|
|
6493
|
-
var templateObject_1$
|
|
6493
|
+
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$l, templateObject_7$e;
|
|
6494
6494
|
|
|
6495
6495
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6496
6496
|
var width = _a.width, height = _a.height;
|
|
@@ -6500,10 +6500,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6500
6500
|
height: height,
|
|
6501
6501
|
});
|
|
6502
6502
|
});
|
|
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$
|
|
6503
|
+
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; });
|
|
6504
|
+
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"])));
|
|
6505
|
+
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"])));
|
|
6506
|
+
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
6507
|
var getStylesBySize$8 = function (size) {
|
|
6508
6508
|
switch (size) {
|
|
6509
6509
|
case ComponentSize.Medium:
|
|
@@ -6529,16 +6529,16 @@ var getStylesBySize$8 = function (size) {
|
|
|
6529
6529
|
};
|
|
6530
6530
|
}
|
|
6531
6531
|
};
|
|
6532
|
-
var TopTagContainer$
|
|
6532
|
+
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
6533
|
var style = _a.style;
|
|
6534
6534
|
return style.width;
|
|
6535
6535
|
});
|
|
6536
|
-
var TopRightTagContainer$2 = newStyled.div(templateObject_6$
|
|
6537
|
-
var BottomTagContainer$
|
|
6536
|
+
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"])));
|
|
6537
|
+
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
6538
|
var style = _a.style;
|
|
6539
6539
|
return style.width;
|
|
6540
6540
|
});
|
|
6541
|
-
var MarginTopContainer = newStyled.div(templateObject_8$
|
|
6541
|
+
var MarginTopContainer = newStyled.div(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6542
6542
|
var ProductItemTK = function (_a) {
|
|
6543
6543
|
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
6544
|
display: false,
|
|
@@ -6582,26 +6582,26 @@ var ProductItemTK = function (_a) {
|
|
|
6582
6582
|
: undefined }, void 0));
|
|
6583
6583
|
};
|
|
6584
6584
|
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$
|
|
6585
|
+
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
6586
|
// @ts-ignore
|
|
6587
6587
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6588
6588
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6589
6589
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6590
6590
|
} }, { 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
6591
|
};
|
|
6592
|
-
var templateObject_1$
|
|
6592
|
+
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
6593
|
|
|
6594
|
-
var Container$
|
|
6594
|
+
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
6595
|
function withProductGrid(ProductItemComponent, data) {
|
|
6596
6596
|
function WithProductGrid(props) {
|
|
6597
|
-
return (jsx$1(Container$
|
|
6597
|
+
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
6598
|
}
|
|
6599
6599
|
/* istanbul ignore next */
|
|
6600
6600
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6601
6601
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6602
6602
|
return WithProductGrid;
|
|
6603
6603
|
}
|
|
6604
|
-
var templateObject_1$
|
|
6604
|
+
var templateObject_1$1f;
|
|
6605
6605
|
|
|
6606
6606
|
var Collection = {
|
|
6607
6607
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6648,11 +6648,11 @@ var OutOfStock = function (_a) {
|
|
|
6648
6648
|
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
6649
|
};
|
|
6650
6650
|
|
|
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$
|
|
6651
|
+
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"])));
|
|
6652
|
+
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6653
|
+
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"])));
|
|
6654
|
+
var Span = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6655
|
+
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
6656
|
var Label$3 = function (_a) {
|
|
6657
6657
|
var label = _a.label, values = _a.values;
|
|
6658
6658
|
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 +6670,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6670
6670
|
Option: Option,
|
|
6671
6671
|
OptionsContainer: OptionsContainer,
|
|
6672
6672
|
});
|
|
6673
|
-
var templateObject_1$
|
|
6673
|
+
var templateObject_1$1e, templateObject_2$U, templateObject_3$H, templateObject_4$w, templateObject_5$n;
|
|
6674
6674
|
|
|
6675
|
-
var Container$
|
|
6675
|
+
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
6676
|
var borderColor = _a.borderColor;
|
|
6677
6677
|
return borderColor;
|
|
6678
6678
|
}, function (_a) {
|
|
6679
6679
|
var noStock = _a.noStock;
|
|
6680
6680
|
return (noStock ? '0.4' : '1');
|
|
6681
6681
|
});
|
|
6682
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6682
|
+
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
6683
|
var PatternSelector = function (_a) {
|
|
6684
6684
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6685
6685
|
var theme = useTheme();
|
|
6686
6686
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6687
|
-
return (jsx$1(Container$
|
|
6687
|
+
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
6688
|
};
|
|
6689
|
-
var templateObject_1$
|
|
6689
|
+
var templateObject_1$1d, templateObject_2$T;
|
|
6690
6690
|
|
|
6691
6691
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6692
6692
|
if (options == null || options.length === 0) {
|
|
@@ -6745,21 +6745,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6745
6745
|
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
6746
|
};
|
|
6747
6747
|
|
|
6748
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6749
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6750
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6748
|
+
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'); });
|
|
6749
|
+
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"])));
|
|
6750
|
+
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
6751
|
return props.rightToLeft &&
|
|
6752
6752
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6753
6753
|
});
|
|
6754
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6755
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6756
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6754
|
+
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; });
|
|
6755
|
+
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; });
|
|
6756
|
+
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
6757
|
var CrossSellCheckbox = function (_a) {
|
|
6758
6758
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6759
6759
|
var theme = useTheme();
|
|
6760
6760
|
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
6761
|
};
|
|
6762
|
-
var templateObject_1$
|
|
6762
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$m, templateObject_6$j;
|
|
6763
6763
|
|
|
6764
6764
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6765
6765
|
__proto__: null,
|
|
@@ -6787,7 +6787,7 @@ var sizeMapper = (_a = {},
|
|
|
6787
6787
|
_a[ComponentSize.Large] = 'large',
|
|
6788
6788
|
_a[ComponentSize.XSmall] = 'small',
|
|
6789
6789
|
_a);
|
|
6790
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6790
|
+
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
6791
|
var wide = _a.wide;
|
|
6792
6792
|
return (wide ? '100%' : 'fit-content');
|
|
6793
6793
|
}, function (_a) {
|
|
@@ -6809,8 +6809,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1a || (templateObj
|
|
|
6809
6809
|
var theme = _a.theme;
|
|
6810
6810
|
return theme.colors.text.disabled;
|
|
6811
6811
|
});
|
|
6812
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6813
|
-
var templateObject_1$
|
|
6812
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6813
|
+
var templateObject_1$1b, templateObject_2$R;
|
|
6814
6814
|
|
|
6815
6815
|
var BaseCTA = function (_a) {
|
|
6816
6816
|
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 +6877,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6877
6877
|
} }), void 0));
|
|
6878
6878
|
};
|
|
6879
6879
|
|
|
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$
|
|
6880
|
+
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; });
|
|
6881
|
+
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"])));
|
|
6882
|
+
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; });
|
|
6883
|
+
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
6884
|
var Note = function (_a) {
|
|
6885
6885
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6886
6886
|
var theme = useTheme();
|
|
6887
|
-
return (jsxs$1(Container$
|
|
6887
|
+
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
6888
|
};
|
|
6889
|
-
var templateObject_1$
|
|
6889
|
+
var templateObject_1$1a, templateObject_2$Q, templateObject_3$F, templateObject_4$u;
|
|
6890
6890
|
|
|
6891
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6891
|
+
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
6892
|
var theme = _a.theme;
|
|
6893
6893
|
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
6894
|
});
|
|
6895
|
-
var Line = newStyled.div(templateObject_2$
|
|
6896
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6895
|
+
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; });
|
|
6896
|
+
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
6897
|
flexDirection: ['column', 'row'],
|
|
6898
6898
|
}));
|
|
6899
|
-
var Col = newStyled.div(templateObject_4$
|
|
6899
|
+
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
6900
|
margin: ['0', '0 1.25rem'],
|
|
6901
6901
|
marginBottom: ['1.875rem', '0'],
|
|
6902
6902
|
alignItems: ['center', 'flex-start'],
|
|
6903
6903
|
textAlign: ['center', 'inherit'],
|
|
6904
6904
|
width: ['100%', 'inherit'],
|
|
6905
6905
|
}));
|
|
6906
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
6906
|
+
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
6907
|
marginRight: ['0', '0.438rem'],
|
|
6908
6908
|
marginBottom: ['10px', '0'],
|
|
6909
6909
|
width: ['auto', '1.5rem'],
|
|
6910
6910
|
}));
|
|
6911
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6911
|
+
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
6912
|
display: ['block', 'flex'],
|
|
6913
6913
|
}), function (_a) {
|
|
6914
6914
|
var theme = _a.theme;
|
|
6915
6915
|
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
6916
|
});
|
|
6917
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6917
|
+
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
6918
|
var theme = _a.theme;
|
|
6919
6919
|
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
6920
|
}, function (_a) {
|
|
@@ -6925,22 +6925,22 @@ var SectionDetails = newStyled.p(templateObject_7$b || (templateObject_7$b = __m
|
|
|
6925
6925
|
})
|
|
6926
6926
|
: '';
|
|
6927
6927
|
});
|
|
6928
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
6928
|
+
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
6929
|
var DeliveryDetails = function (_a) {
|
|
6930
6930
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6931
6931
|
var theme = useTheme();
|
|
6932
6932
|
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
6933
|
};
|
|
6934
|
-
var templateObject_1$
|
|
6934
|
+
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
6935
|
|
|
6936
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6936
|
+
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
6937
|
var top = _a.top;
|
|
6938
6938
|
return top;
|
|
6939
6939
|
}, function (_a) {
|
|
6940
6940
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6941
6941
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6942
6942
|
});
|
|
6943
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6943
|
+
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
6944
|
var height = _a.height;
|
|
6945
6945
|
return height;
|
|
6946
6946
|
}, function (_a) {
|
|
@@ -6987,20 +6987,20 @@ var Drawer = function (_a) {
|
|
|
6987
6987
|
}, [isOpen, onClose, onOpen]);
|
|
6988
6988
|
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
6989
|
};
|
|
6990
|
-
var templateObject_1$
|
|
6990
|
+
var templateObject_1$18, templateObject_2$O;
|
|
6991
6991
|
|
|
6992
6992
|
var TooltipArrow = function (_a) {
|
|
6993
6993
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6994
6994
|
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
6995
|
};
|
|
6996
6996
|
|
|
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$
|
|
6997
|
+
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"])));
|
|
6998
|
+
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"])));
|
|
6999
|
+
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"])));
|
|
7000
|
+
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"])));
|
|
7001
|
+
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; });
|
|
7002
|
+
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; });
|
|
7003
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$D, templateObject_4$s, templateObject_5$k, templateObject_6$h;
|
|
7004
7004
|
|
|
7005
7005
|
var DropdownListIcons = function (_a) {
|
|
7006
7006
|
var items = _a.items;
|
|
@@ -7013,13 +7013,13 @@ var Dropdown = function (_a) {
|
|
|
7013
7013
|
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
7014
|
};
|
|
7015
7015
|
|
|
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$
|
|
7016
|
+
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"])));
|
|
7017
|
+
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"])));
|
|
7018
|
+
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7019
|
+
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"])));
|
|
7020
|
+
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"])));
|
|
7021
|
+
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"])));
|
|
7022
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$j, templateObject_6$g;
|
|
7023
7023
|
|
|
7024
7024
|
var SizeDropdown = function (_a) {
|
|
7025
7025
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7042,10 +7042,10 @@ var SizeDropdown = function (_a) {
|
|
|
7042
7042
|
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
7043
|
};
|
|
7044
7044
|
|
|
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$
|
|
7045
|
+
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; });
|
|
7046
|
+
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; });
|
|
7047
|
+
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"])));
|
|
7048
|
+
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
7049
|
var DropdownDialog = function (_a) {
|
|
7050
7050
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
7051
7051
|
var theme = useTheme$1();
|
|
@@ -7054,7 +7054,7 @@ var DropdownDialog = function (_a) {
|
|
|
7054
7054
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7055
7055
|
}) }), void 0) }), void 0));
|
|
7056
7056
|
};
|
|
7057
|
-
var templateObject_1$
|
|
7057
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$B, templateObject_4$q;
|
|
7058
7058
|
|
|
7059
7059
|
function FilteringDropdown(_a) {
|
|
7060
7060
|
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 +7087,29 @@ function FilteringDropdown(_a) {
|
|
|
7087
7087
|
}) }, void 0)] }), void 0));
|
|
7088
7088
|
}
|
|
7089
7089
|
|
|
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$
|
|
7090
|
+
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; });
|
|
7091
|
+
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; });
|
|
7092
|
+
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"])));
|
|
7093
|
+
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
7094
|
var Accordion = function (_a) {
|
|
7095
7095
|
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
7096
|
var theme = useTheme();
|
|
7097
7097
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7098
|
-
return (jsxs$1(Container$
|
|
7098
|
+
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
7099
|
};
|
|
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$
|
|
7100
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$A, templateObject_4$p;
|
|
7101
|
+
|
|
7102
|
+
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; });
|
|
7103
|
+
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"])));
|
|
7104
|
+
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"])));
|
|
7105
|
+
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"])));
|
|
7106
|
+
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; });
|
|
7107
|
+
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; });
|
|
7108
|
+
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'); });
|
|
7109
|
+
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; });
|
|
7110
|
+
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
7111
|
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$
|
|
7112
|
+
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
7113
|
|
|
7114
7114
|
var getStylesBySize$7 = function (size, theme) {
|
|
7115
7115
|
switch (size) {
|
|
@@ -7174,9 +7174,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7174
7174
|
} }), id: id }, void 0));
|
|
7175
7175
|
};
|
|
7176
7176
|
|
|
7177
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7178
|
-
var LI = newStyled.li(templateObject_2$
|
|
7179
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7177
|
+
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"])));
|
|
7178
|
+
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; });
|
|
7179
|
+
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
7180
|
var Tags = function (_a) {
|
|
7181
7181
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7182
7182
|
var theme = useTheme();
|
|
@@ -7184,7 +7184,7 @@ var Tags = function (_a) {
|
|
|
7184
7184
|
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
7185
|
}) }), void 0));
|
|
7186
7186
|
};
|
|
7187
|
-
var templateObject_1$
|
|
7187
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$y;
|
|
7188
7188
|
|
|
7189
7189
|
var Filters = function (_a) {
|
|
7190
7190
|
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 +7320,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7320
7320
|
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
7321
|
};
|
|
7322
7322
|
|
|
7323
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7324
|
-
var Container$
|
|
7323
|
+
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"])));
|
|
7324
|
+
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
7325
|
var FitGuarantee = function (_a) {
|
|
7326
7326
|
var _b;
|
|
7327
7327
|
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 +7332,17 @@ var FitGuarantee = function (_a) {
|
|
|
7332
7332
|
console.error('Icon', iconName, 'not found');
|
|
7333
7333
|
return null;
|
|
7334
7334
|
}
|
|
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$
|
|
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$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
7336
|
margin: '0.1rem 0',
|
|
7337
7337
|
width: '100%',
|
|
7338
7338
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7339
7339
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7340
7340
|
} }, { 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
7341
|
};
|
|
7342
|
-
var templateObject_1$
|
|
7342
|
+
var templateObject_1$11, templateObject_2$H;
|
|
7343
7343
|
|
|
7344
|
-
var Container$
|
|
7345
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7344
|
+
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"])));
|
|
7345
|
+
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
7346
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7347
7347
|
border: 'none',
|
|
7348
7348
|
background: 'transparent',
|
|
@@ -7355,11 +7355,11 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7355
7355
|
var FitPredictor = function (_a) {
|
|
7356
7356
|
var onClick = _a.onClick;
|
|
7357
7357
|
var theme = useTheme();
|
|
7358
|
-
return (jsxs(Container$
|
|
7358
|
+
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
7359
|
};
|
|
7360
|
-
var templateObject_1
|
|
7360
|
+
var templateObject_1$10, templateObject_2$G;
|
|
7361
7361
|
|
|
7362
|
-
var Button$
|
|
7362
|
+
var Button$7 = newStyled.button(function () { return ({
|
|
7363
7363
|
background: 'transparent',
|
|
7364
7364
|
border: 'none',
|
|
7365
7365
|
cursor: 'pointer',
|
|
@@ -7371,7 +7371,7 @@ var Direction;
|
|
|
7371
7371
|
})(Direction || (Direction = {}));
|
|
7372
7372
|
var ArrowButton$1 = function (_a) {
|
|
7373
7373
|
var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
|
|
7374
|
-
return (jsx$1(Button$
|
|
7374
|
+
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
7375
|
};
|
|
7376
7376
|
|
|
7377
7377
|
function _defineProperty(obj, key, value) {
|
|
@@ -11601,14 +11601,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11601
11601
|
return Slider;
|
|
11602
11602
|
}(React__default.Component);
|
|
11603
11603
|
|
|
11604
|
-
var StyledSlider = newStyled(Slider)(templateObject_1
|
|
11604
|
+
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
11605
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11606
11606
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11607
11607
|
}, function (_a) {
|
|
11608
11608
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11609
11609
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11610
11610
|
});
|
|
11611
|
-
var templateObject_1
|
|
11611
|
+
var templateObject_1$$;
|
|
11612
11612
|
|
|
11613
11613
|
var getStylesBySize$6 = function (size) {
|
|
11614
11614
|
// rem units
|
|
@@ -11667,7 +11667,7 @@ var SliderNavigation = function (_a) {
|
|
|
11667
11667
|
} }, { 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
11668
|
};
|
|
11669
11669
|
|
|
11670
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
11670
|
+
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
11671
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11672
11672
|
return borderRadiusVariant &&
|
|
11673
11673
|
"\nborder-radius: 20px;\n";
|
|
@@ -11682,11 +11682,11 @@ var ImageSmallPreview = function (_a) {
|
|
|
11682
11682
|
var theme = useTheme();
|
|
11683
11683
|
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
11684
|
};
|
|
11685
|
-
var templateObject_1$
|
|
11685
|
+
var templateObject_1$_;
|
|
11686
11686
|
|
|
11687
|
-
var horizontalStyles = css(templateObject_1$
|
|
11688
|
-
var verticalStyles = css(templateObject_2$
|
|
11689
|
-
var Container$
|
|
11687
|
+
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"])));
|
|
11688
|
+
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"])));
|
|
11689
|
+
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
11690
|
var position = _a.position;
|
|
11691
11691
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11692
11692
|
}, function (_a) {
|
|
@@ -11694,11 +11694,11 @@ var Container$K = newStyled.div(templateObject_3$w || (templateObject_3$w = __ma
|
|
|
11694
11694
|
return hasOverflowArrows &&
|
|
11695
11695
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11696
11696
|
});
|
|
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$
|
|
11697
|
+
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"])));
|
|
11698
|
+
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"])));
|
|
11699
|
+
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"])));
|
|
11700
|
+
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"])));
|
|
11701
|
+
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
11702
|
var ImagePreviewList = function (_a) {
|
|
11703
11703
|
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
11704
|
var handleScrollVerticalPrev = function () {
|
|
@@ -11709,13 +11709,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11709
11709
|
var element = document.querySelector(".imageListContainer");
|
|
11710
11710
|
element.scrollBy(0, 200);
|
|
11711
11711
|
};
|
|
11712
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
11712
|
+
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
11713
|
arrowWidth: 0.75,
|
|
11714
11714
|
arrowHeight: 1.25,
|
|
11715
11715
|
arrowPadding: 1.625,
|
|
11716
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$
|
|
11716
|
+
}, 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
11717
|
};
|
|
11718
|
-
var templateObject_1$
|
|
11718
|
+
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
11719
|
|
|
11720
11720
|
var propTypes = {exports: {}};
|
|
11721
11721
|
|
|
@@ -13308,25 +13308,25 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13308
13308
|
afterZoomOut: PropTypes.func
|
|
13309
13309
|
} : {};
|
|
13310
13310
|
|
|
13311
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13312
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13313
|
-
var templateObject_1$
|
|
13311
|
+
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); });
|
|
13312
|
+
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; });
|
|
13313
|
+
var templateObject_1$Y, templateObject_2$E;
|
|
13314
13314
|
|
|
13315
13315
|
var ProgressBar$1 = function (_a) {
|
|
13316
13316
|
var progress = _a.progress, hide = _a.hide;
|
|
13317
13317
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13318
13318
|
};
|
|
13319
13319
|
|
|
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$
|
|
13320
|
+
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"])));
|
|
13321
|
+
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; });
|
|
13322
|
+
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"])));
|
|
13323
|
+
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"])));
|
|
13324
|
+
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"])));
|
|
13325
|
+
var templateObject_1$X, templateObject_2$D, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13326
13326
|
|
|
13327
13327
|
var Video$1 = function (_a) {
|
|
13328
13328
|
var _b, _c, _d, _e;
|
|
13329
|
-
var source = _a.source, thumbnail = _a.thumbnail;
|
|
13329
|
+
var source = _a.source, thumbnail = _a.thumbnail, height = _a.height;
|
|
13330
13330
|
var videoRef = useRef(null);
|
|
13331
13331
|
var _f = useState(true), isLoading = _f[0], setIsLoading = _f[1];
|
|
13332
13332
|
var _g = useState(false), isPlaying = _g[0], setIsPlaying = _g[1];
|
|
@@ -13361,43 +13361,43 @@ var Video$1 = function (_a) {
|
|
|
13361
13361
|
setVideoProgress(videoRef.current.currentTime);
|
|
13362
13362
|
}
|
|
13363
13363
|
};
|
|
13364
|
-
return (jsxs$1(Container$
|
|
13364
|
+
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
13365
|
};
|
|
13366
13366
|
|
|
13367
|
-
var Container$
|
|
13367
|
+
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
13368
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13369
13369
|
return borderRadiusVariant &&
|
|
13370
13370
|
"\n border-radius: 40px;\n ";
|
|
13371
13371
|
});
|
|
13372
|
-
var TopTagContainer$
|
|
13373
|
-
var BottomTagContainer$
|
|
13374
|
-
var TopRightTagContainer$1 = newStyled.div(templateObject_4$
|
|
13375
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$
|
|
13376
|
-
var
|
|
13372
|
+
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'); });
|
|
13373
|
+
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"])));
|
|
13374
|
+
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"])));
|
|
13375
|
+
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"])));
|
|
13376
|
+
var ImageProductSlide$1 = function (_a) {
|
|
13377
13377
|
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;
|
|
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, withZoom = _a.withZoom;
|
|
13379
13379
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13380
13380
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13381
|
-
return (jsxs$1(Container$
|
|
13381
|
+
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
13382
|
alt: content.alt,
|
|
13383
13383
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13384
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$
|
|
13384
|
+
}, 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
13385
|
};
|
|
13386
|
-
var templateObject_1$
|
|
13386
|
+
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$f;
|
|
13387
13387
|
|
|
13388
|
-
var Container$
|
|
13388
|
+
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
13389
|
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;
|
|
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, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e;
|
|
13391
13391
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
13392
|
-
var
|
|
13392
|
+
var _f = useState(initialValue), selectedImage = _f[0], setSelectedImage = _f[1];
|
|
13393
13393
|
useEffect(function () {
|
|
13394
13394
|
setSelectedImage(initialValue);
|
|
13395
13395
|
}, [initialValue]);
|
|
13396
|
-
return (jsxs$1(Container$
|
|
13396
|
+
return (jsxs$1(Container$I, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13397
13397
|
setSelectedImage(value);
|
|
13398
|
-
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(
|
|
13398
|
+
}, 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
13399
|
};
|
|
13400
|
-
var templateObject_1$
|
|
13400
|
+
var templateObject_1$V;
|
|
13401
13401
|
|
|
13402
13402
|
var getStylesBySize$5 = function (size) {
|
|
13403
13403
|
switch (size) {
|
|
@@ -13418,7 +13418,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13418
13418
|
};
|
|
13419
13419
|
}
|
|
13420
13420
|
};
|
|
13421
|
-
var Container$
|
|
13421
|
+
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
13422
|
var backgroundColor = _a.backgroundColor;
|
|
13423
13423
|
return backgroundColor;
|
|
13424
13424
|
}, function (_a) {
|
|
@@ -13446,11 +13446,11 @@ var Container$G = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
13446
13446
|
var IconButton = function (_a) {
|
|
13447
13447
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13448
13448
|
var theme = useTheme();
|
|
13449
|
-
return (jsx$1(Container$
|
|
13449
|
+
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
13450
|
};
|
|
13451
|
-
var templateObject_1$
|
|
13451
|
+
var templateObject_1$U;
|
|
13452
13452
|
|
|
13453
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13453
|
+
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
13454
|
var AmazonButton = function (_a) {
|
|
13455
13455
|
var onClick = _a.onClick;
|
|
13456
13456
|
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 +13459,9 @@ var PaypalButton = function (_a) {
|
|
|
13459
13459
|
var onClick = _a.onClick;
|
|
13460
13460
|
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
13461
|
};
|
|
13462
|
-
var templateObject_1$
|
|
13462
|
+
var templateObject_1$T;
|
|
13463
13463
|
|
|
13464
|
-
var Container$
|
|
13464
|
+
var Container$G = newStyled.div(function (props) { return ({
|
|
13465
13465
|
height: 'auto',
|
|
13466
13466
|
textAlign: 'center',
|
|
13467
13467
|
justifyContent: 'center',
|
|
@@ -13511,12 +13511,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13511
13511
|
textAlign: 'center',
|
|
13512
13512
|
lineHeight: '18px',
|
|
13513
13513
|
};
|
|
13514
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
13514
|
+
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
13515
|
};
|
|
13516
13516
|
|
|
13517
|
-
var Container$
|
|
13518
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13519
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13517
|
+
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'); });
|
|
13518
|
+
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'); });
|
|
13519
|
+
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13520
13520
|
var titlePosition = _a.titlePosition;
|
|
13521
13521
|
return titlePosition == 'center' &&
|
|
13522
13522
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13524,15 +13524,15 @@ var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __ma
|
|
|
13524
13524
|
var ImageCardWithDescription = function (_a) {
|
|
13525
13525
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13526
13526
|
var isMobile = useWindowDimensions().isMobile;
|
|
13527
|
-
return (jsxs$1(Container$
|
|
13527
|
+
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
13528
|
};
|
|
13529
|
-
var templateObject_1$
|
|
13529
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$u;
|
|
13530
13530
|
|
|
13531
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
13531
|
+
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
13532
|
var color = _a.color;
|
|
13533
13533
|
return color;
|
|
13534
13534
|
});
|
|
13535
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13535
|
+
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
13536
|
var color = _a.color;
|
|
13537
13537
|
return color;
|
|
13538
13538
|
});
|
|
@@ -13541,7 +13541,7 @@ var InputLabel = function (_a) {
|
|
|
13541
13541
|
var theme = useTheme();
|
|
13542
13542
|
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
13543
|
};
|
|
13544
|
-
var templateObject_1$
|
|
13544
|
+
var templateObject_1$R, templateObject_2$A;
|
|
13545
13545
|
|
|
13546
13546
|
var containerByStatus = function (theme, status) {
|
|
13547
13547
|
if (status === InputValidationType.Valid)
|
|
@@ -13550,12 +13550,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13550
13550
|
return theme.colors.semantic.urgent.color;
|
|
13551
13551
|
return '';
|
|
13552
13552
|
};
|
|
13553
|
-
var Container$
|
|
13553
|
+
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
13554
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13555
13555
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13556
13556
|
});
|
|
13557
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13558
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13557
|
+
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"])));
|
|
13558
|
+
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
13559
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13560
13560
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13561
13561
|
}, function (_a) {
|
|
@@ -13610,11 +13610,11 @@ var StyledInput = newStyled.input(templateObject_3$s || (templateObject_3$s = __
|
|
|
13610
13610
|
return hasValue &&
|
|
13611
13611
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13612
13612
|
});
|
|
13613
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13613
|
+
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
13614
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13615
13615
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13616
13616
|
});
|
|
13617
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13617
|
+
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
13618
|
var theme = _a.theme;
|
|
13619
13619
|
return theme.component.input.placeholderColor;
|
|
13620
13620
|
}, function (_a) {
|
|
@@ -13627,8 +13627,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$d || (templateObject_5
|
|
|
13627
13627
|
var theme = _a.theme;
|
|
13628
13628
|
return theme.component.input.lineHeight;
|
|
13629
13629
|
});
|
|
13630
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13631
|
-
var templateObject_1$
|
|
13630
|
+
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"])));
|
|
13631
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$t, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
13632
13632
|
|
|
13633
13633
|
var BaseInput = function (_a) {
|
|
13634
13634
|
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 +13651,14 @@ var BaseInput = function (_a) {
|
|
|
13651
13651
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13652
13652
|
}, [status]);
|
|
13653
13653
|
var hasValue = Boolean(value);
|
|
13654
|
-
return (jsxs$1(Container$
|
|
13654
|
+
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
13655
|
onChange(event.target.value, event);
|
|
13656
13656
|
}, 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
13657
|
onChange('', { target: { value: '' } });
|
|
13658
13658
|
}, "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
13659
|
};
|
|
13660
13660
|
|
|
13661
|
-
var Button$
|
|
13661
|
+
var Button$5 = function (_a) {
|
|
13662
13662
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
13663
13663
|
if (variant === 'primary') {
|
|
13664
13664
|
return jsx$1(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -13672,11 +13672,11 @@ var Button$4 = function (_a) {
|
|
|
13672
13672
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13673
13673
|
};
|
|
13674
13674
|
|
|
13675
|
-
var Container$
|
|
13675
|
+
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
13676
|
var theme = _a.theme;
|
|
13677
13677
|
return theme.component.inputCustom.input.borderRadius;
|
|
13678
13678
|
});
|
|
13679
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13679
|
+
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
13680
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13681
13681
|
return defaultRounded
|
|
13682
13682
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13691,23 +13691,23 @@ var Custom = function (_a) {
|
|
|
13691
13691
|
text: text,
|
|
13692
13692
|
disabled: rest.disabled,
|
|
13693
13693
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13694
|
-
return (jsx$1(Container$
|
|
13694
|
+
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
13695
|
};
|
|
13696
|
-
var templateObject_1$
|
|
13696
|
+
var templateObject_1$P, templateObject_2$y;
|
|
13697
13697
|
|
|
13698
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13698
|
+
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
13699
|
var size = _a.size;
|
|
13700
13700
|
return (size === 'small' ? '36px' : '');
|
|
13701
13701
|
});
|
|
13702
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13703
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13702
|
+
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"])));
|
|
13703
|
+
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
13704
|
var Success = function (_a) {
|
|
13705
13705
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13706
13706
|
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
13707
|
};
|
|
13708
|
-
var templateObject_1$
|
|
13708
|
+
var templateObject_1$O, templateObject_2$x, templateObject_3$s;
|
|
13709
13709
|
|
|
13710
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13710
|
+
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
13711
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13712
13712
|
return status === InputValidationType.Empty &&
|
|
13713
13713
|
type === 'primary' &&
|
|
@@ -13724,16 +13724,16 @@ var BasePlusButton = function (_a) {
|
|
|
13724
13724
|
}
|
|
13725
13725
|
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
13726
|
};
|
|
13727
|
-
var templateObject_1$
|
|
13727
|
+
var templateObject_1$N;
|
|
13728
13728
|
|
|
13729
|
-
var Container$
|
|
13730
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13729
|
+
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"])));
|
|
13730
|
+
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
13731
|
var BasePlusIcon = function (_a) {
|
|
13732
13732
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13733
13733
|
var theme = useTheme();
|
|
13734
|
-
return (jsx$1(Container$
|
|
13734
|
+
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
13735
|
};
|
|
13736
|
-
var templateObject_1$
|
|
13736
|
+
var templateObject_1$M, templateObject_2$w;
|
|
13737
13737
|
|
|
13738
13738
|
var Input$3 = {
|
|
13739
13739
|
Simple: BaseInput,
|
|
@@ -13742,7 +13742,43 @@ var Input$3 = {
|
|
|
13742
13742
|
SimplePlusIcon: BasePlusIcon,
|
|
13743
13743
|
};
|
|
13744
13744
|
|
|
13745
|
-
|
|
13745
|
+
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
13746
|
+
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13747
|
+
var firstClientX = useRef(0);
|
|
13748
|
+
var clientX = useRef(0);
|
|
13749
|
+
var preventTouch = useCallback(function (e) {
|
|
13750
|
+
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
13751
|
+
// Vertical scrolling does not work when you start swiping horizontally.
|
|
13752
|
+
if (Math.abs(clientX.current) > dragThreshold) {
|
|
13753
|
+
if (e.cancelable) {
|
|
13754
|
+
e.preventDefault();
|
|
13755
|
+
e.returnValue = false;
|
|
13756
|
+
}
|
|
13757
|
+
return false;
|
|
13758
|
+
}
|
|
13759
|
+
return true;
|
|
13760
|
+
}, [dragThreshold]);
|
|
13761
|
+
var touchStart = useCallback(function (e) {
|
|
13762
|
+
firstClientX.current = e.touches[0].clientX;
|
|
13763
|
+
}, []);
|
|
13764
|
+
useEffect(function () {
|
|
13765
|
+
var current = ref.current;
|
|
13766
|
+
if (current) {
|
|
13767
|
+
current.addEventListener('touchstart', touchStart);
|
|
13768
|
+
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
13769
|
+
}
|
|
13770
|
+
return function () {
|
|
13771
|
+
if (current) {
|
|
13772
|
+
current.removeEventListener('touchstart', touchStart);
|
|
13773
|
+
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
13774
|
+
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
13775
|
+
current.removeEventListener('touchmove', preventTouch);
|
|
13776
|
+
}
|
|
13777
|
+
};
|
|
13778
|
+
}, [preventTouch, ref, touchStart]);
|
|
13779
|
+
}
|
|
13780
|
+
|
|
13781
|
+
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
13782
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13747
13783
|
return borderRadiusVariant &&
|
|
13748
13784
|
"\n border-radius: 40px;\n ";
|
|
@@ -13751,11 +13787,11 @@ var Container$A = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13751
13787
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13752
13788
|
});
|
|
13753
13789
|
// max-height: 31.875rem;
|
|
13754
|
-
var TopTagContainer$
|
|
13755
|
-
var TopRightTagContainer = newStyled.div(templateObject_3$
|
|
13756
|
-
var BottomTagContainer$
|
|
13757
|
-
var NavButtonContainer$
|
|
13758
|
-
var Button$
|
|
13790
|
+
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'); });
|
|
13791
|
+
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"])));
|
|
13792
|
+
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"])));
|
|
13793
|
+
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"])));
|
|
13794
|
+
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
13795
|
var settings$1 = {
|
|
13760
13796
|
dots: true,
|
|
13761
13797
|
infinite: false,
|
|
@@ -13764,13 +13800,13 @@ var settings$1 = {
|
|
|
13764
13800
|
slidesToScroll: 1,
|
|
13765
13801
|
initialSlide: 0,
|
|
13766
13802
|
};
|
|
13767
|
-
var
|
|
13803
|
+
var ImageProductSlide = function (_a) {
|
|
13768
13804
|
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
13805
|
var slick = useRef(null);
|
|
13770
13806
|
var sliderWrapper = useRef(null);
|
|
13771
13807
|
useRef(null);
|
|
13772
13808
|
var _c = useState(false); _c[0]; var setIsPlaying = _c[1];
|
|
13773
|
-
usePreventVerticalScroll
|
|
13809
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
13774
13810
|
var onButtonClick = useCallback(function (i) {
|
|
13775
13811
|
var _a;
|
|
13776
13812
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -13800,62 +13836,27 @@ var ImageProductWithTags = function (_a) {
|
|
|
13800
13836
|
}
|
|
13801
13837
|
}
|
|
13802
13838
|
}, [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$
|
|
13839
|
+
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
13840
|
var _a;
|
|
13805
13841
|
var activeSlide = contents[e];
|
|
13806
13842
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13807
13843
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13808
13844
|
autoplay ? _playVideo() : _stopVideo();
|
|
13809
|
-
} }, settings$1, { nextArrow: jsx$1(NavButtonContainer$
|
|
13845
|
+
} }, 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
13846
|
var _a;
|
|
13811
13847
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13812
13848
|
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$
|
|
13849
|
+
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
13850
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13815
13851
|
};
|
|
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;
|
|
13852
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c;
|
|
13852
13853
|
|
|
13853
|
-
var Container$
|
|
13854
|
+
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
13855
|
var ProductGalleryMobile = function (_a) {
|
|
13855
13856
|
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$
|
|
13857
|
+
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
13858
|
};
|
|
13858
|
-
var templateObject_1$
|
|
13859
|
+
var templateObject_1$K;
|
|
13859
13860
|
|
|
13860
13861
|
function _extends() {
|
|
13861
13862
|
_extends = Object.assign || function (target) {
|
|
@@ -14122,27 +14123,27 @@ function useSwipeable(options) {
|
|
|
14122
14123
|
return handlers;
|
|
14123
14124
|
}
|
|
14124
14125
|
|
|
14125
|
-
var Button$
|
|
14126
|
+
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
14127
|
var ArrowButton = function (_a) {
|
|
14127
14128
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14128
|
-
return (jsx$1(Button$
|
|
14129
|
+
return (jsx$1(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14129
14130
|
};
|
|
14130
|
-
var templateObject_1$
|
|
14131
|
+
var templateObject_1$J;
|
|
14131
14132
|
|
|
14132
|
-
var Container$
|
|
14133
|
+
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
14134
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14134
14135
|
var SlideDots = function (_a) {
|
|
14135
14136
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
14136
14137
|
var theme = useTheme();
|
|
14137
|
-
return (jsx$1(Container$
|
|
14138
|
+
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
14139
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14139
14140
|
: 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
14141
|
};
|
|
14141
|
-
var templateObject_1$
|
|
14142
|
+
var templateObject_1$I;
|
|
14142
14143
|
|
|
14143
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14144
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14145
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
14144
|
+
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"])));
|
|
14145
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14146
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14146
14147
|
var SlideNavigation = function (_a) {
|
|
14147
14148
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
14148
14149
|
var theme = useTheme();
|
|
@@ -14154,23 +14155,23 @@ var SlideNavigation = function (_a) {
|
|
|
14154
14155
|
onNavigate(selectedIndex + 1);
|
|
14155
14156
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14156
14157
|
};
|
|
14157
|
-
var templateObject_1$
|
|
14158
|
+
var templateObject_1$H, templateObject_2$u, templateObject_3$q;
|
|
14158
14159
|
|
|
14159
|
-
var Container$
|
|
14160
|
+
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
14161
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14161
14162
|
return borderRadiusVariant &&
|
|
14162
14163
|
"\n border-radius: 40px;\n ";
|
|
14163
14164
|
});
|
|
14164
|
-
var TopTagContainer$
|
|
14165
|
-
var BottomTagContainer$
|
|
14166
|
-
var
|
|
14165
|
+
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'); });
|
|
14166
|
+
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"])));
|
|
14167
|
+
var ImageProductSlideV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14167
14168
|
var _b, _c;
|
|
14168
14169
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14169
|
-
return (jsxs$1(Container$
|
|
14170
|
+
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
14171
|
});
|
|
14171
|
-
var templateObject_1$
|
|
14172
|
+
var templateObject_1$G, templateObject_2$t, templateObject_3$p;
|
|
14172
14173
|
|
|
14173
|
-
var Container$
|
|
14174
|
+
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
14175
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14175
14176
|
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
14177
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14192,11 +14193,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14192
14193
|
useEffect(function () {
|
|
14193
14194
|
setSelectedImage(images[index]);
|
|
14194
14195
|
}, [index, images]);
|
|
14195
|
-
return (jsxs$1(Container$
|
|
14196
|
+
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
14197
|
};
|
|
14197
|
-
var templateObject_1$
|
|
14198
|
+
var templateObject_1$F;
|
|
14198
14199
|
|
|
14199
|
-
var Container$
|
|
14200
|
+
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
14201
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14201
14202
|
return borderRadiusVariant &&
|
|
14202
14203
|
"\n border-radius: 40px;\n ";
|
|
@@ -14205,14 +14206,14 @@ var Container$v = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
14205
14206
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14206
14207
|
});
|
|
14207
14208
|
// 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$
|
|
14209
|
+
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'); });
|
|
14210
|
+
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"])));
|
|
14211
|
+
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"])));
|
|
14212
|
+
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"])));
|
|
14213
|
+
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"])));
|
|
14214
|
+
var Text$2 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14215
|
+
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"])));
|
|
14216
|
+
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
14217
|
var settings = {
|
|
14217
14218
|
dots: true,
|
|
14218
14219
|
infinite: false,
|
|
@@ -14221,7 +14222,7 @@ var settings = {
|
|
|
14221
14222
|
slidesToScroll: 1,
|
|
14222
14223
|
initialSlide: 0,
|
|
14223
14224
|
};
|
|
14224
|
-
var
|
|
14225
|
+
var ImageProductSlideV3 = function (_a) {
|
|
14225
14226
|
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
14227
|
var slick = useRef(null);
|
|
14227
14228
|
var sliderWrapper = useRef(null);
|
|
@@ -14257,62 +14258,27 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14257
14258
|
}
|
|
14258
14259
|
}
|
|
14259
14260
|
}, [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$
|
|
14261
|
+
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
14262
|
var _a;
|
|
14262
14263
|
var activeSlide = images[e];
|
|
14263
14264
|
// If autoplay is true and iframe is the active slide, play the video
|
|
14264
14265
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14265
14266
|
autoplay ? _playVideo() : _stopVideo();
|
|
14266
|
-
} }, settings, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$
|
|
14267
|
+
} }, 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
14268
|
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 () {
|
|
14269
|
+
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
14270
|
isPlaying ? _stopVideo() : _playVideo();
|
|
14270
14271
|
} }, 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
14272
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14272
14273
|
};
|
|
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;
|
|
14274
|
+
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
14275
|
|
|
14310
|
-
var Container$
|
|
14276
|
+
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
14277
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14312
14278
|
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$
|
|
14279
|
+
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
14280
|
};
|
|
14315
|
-
var templateObject_1$
|
|
14281
|
+
var templateObject_1$D;
|
|
14316
14282
|
|
|
14317
14283
|
var __defProp$1 = Object.defineProperty;
|
|
14318
14284
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14445,17 +14411,17 @@ var Portal = function (_a) {
|
|
|
14445
14411
|
var visibleStyle = function (_a) {
|
|
14446
14412
|
var opened = _a.opened;
|
|
14447
14413
|
return opened
|
|
14448
|
-
? css(templateObject_1$
|
|
14414
|
+
? 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
14415
|
};
|
|
14450
14416
|
var transformStyle = function (_a) {
|
|
14451
14417
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14452
14418
|
return opened
|
|
14453
|
-
? css(templateObject_3$
|
|
14419
|
+
? 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
14420
|
};
|
|
14455
|
-
var Container$
|
|
14421
|
+
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
14422
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14457
14423
|
}), visibleStyle, transformStyle);
|
|
14458
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
14424
|
+
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
14425
|
var Modal = function (_a) {
|
|
14460
14426
|
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
14427
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14465,7 +14431,7 @@ var Modal = function (_a) {
|
|
|
14465
14431
|
}
|
|
14466
14432
|
close();
|
|
14467
14433
|
};
|
|
14468
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14434
|
+
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
14435
|
};
|
|
14470
14436
|
var modalEvent = function (id, detail) {
|
|
14471
14437
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14493,9 +14459,9 @@ var useModal = function (id) {
|
|
|
14493
14459
|
close: close,
|
|
14494
14460
|
}); }, [close, open, opened]);
|
|
14495
14461
|
};
|
|
14496
|
-
var templateObject_1$
|
|
14462
|
+
var templateObject_1$C, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a;
|
|
14497
14463
|
|
|
14498
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14464
|
+
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
14465
|
var height = _a.height;
|
|
14500
14466
|
return height || '0.5rem';
|
|
14501
14467
|
}, function (_a) {
|
|
@@ -14534,7 +14500,7 @@ var BarContainer = newStyled.div({
|
|
|
14534
14500
|
padding: '0 16px',
|
|
14535
14501
|
position: 'relative',
|
|
14536
14502
|
});
|
|
14537
|
-
var Container$
|
|
14503
|
+
var Container$t = newStyled.div(function (_a) {
|
|
14538
14504
|
var backgroundColor = _a.backgroundColor;
|
|
14539
14505
|
return ({
|
|
14540
14506
|
width: '475px',
|
|
@@ -14565,21 +14531,21 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14565
14531
|
var theme = useTheme();
|
|
14566
14532
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
14567
14533
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14568
|
-
return (jsxs$1(Container$
|
|
14534
|
+
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
14535
|
};
|
|
14570
|
-
var templateObject_1$
|
|
14536
|
+
var templateObject_1$B;
|
|
14571
14537
|
|
|
14572
|
-
var Container$
|
|
14538
|
+
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
14539
|
var theme = _a.theme;
|
|
14574
14540
|
return theme.component.orderBar.backgroundColor;
|
|
14575
14541
|
});
|
|
14576
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14542
|
+
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
14543
|
var OrderBar = function (_a) {
|
|
14578
14544
|
var message = _a.message, color = _a.color;
|
|
14579
14545
|
var theme = useTheme();
|
|
14580
|
-
return (jsxs$1(Container$
|
|
14546
|
+
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
14547
|
};
|
|
14582
|
-
var templateObject_1$
|
|
14548
|
+
var templateObject_1$A, templateObject_2$q;
|
|
14583
14549
|
|
|
14584
14550
|
var htmlReactParser = {exports: {}};
|
|
14585
14551
|
|
|
@@ -18360,17 +18326,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18360
18326
|
HTMLReactParser$1.attributesToProps;
|
|
18361
18327
|
HTMLReactParser$1.Element;
|
|
18362
18328
|
|
|
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$
|
|
18329
|
+
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"])));
|
|
18330
|
+
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"])));
|
|
18331
|
+
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"])));
|
|
18332
|
+
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"])));
|
|
18333
|
+
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"])));
|
|
18334
|
+
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"])));
|
|
18335
|
+
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"])));
|
|
18336
|
+
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
18337
|
var PackSelector = function (_a) {
|
|
18372
18338
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18373
|
-
return (jsx$1(Container$
|
|
18339
|
+
return (jsx$1(Container$r, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
18374
18340
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
18375
18341
|
}) }), void 0));
|
|
18376
18342
|
};
|
|
@@ -18397,14 +18363,14 @@ var PackCard = function (_a) {
|
|
|
18397
18363
|
currency: currencyCode || 'USD',
|
|
18398
18364
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18399
18365
|
};
|
|
18400
|
-
var templateObject_1$
|
|
18366
|
+
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
18367
|
|
|
18402
|
-
var Container$
|
|
18403
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18404
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
18368
|
+
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"])));
|
|
18369
|
+
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"])));
|
|
18370
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18405
18371
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18406
18372
|
}));
|
|
18407
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
18373
|
+
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
18374
|
var bold = _a.bold;
|
|
18409
18375
|
return (bold ? '700' : '500');
|
|
18410
18376
|
}, function (_a) {
|
|
@@ -18421,7 +18387,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
18421
18387
|
var background = _a.background;
|
|
18422
18388
|
return background || 'unset';
|
|
18423
18389
|
});
|
|
18424
|
-
var templateObject_1$
|
|
18390
|
+
var templateObject_1$y, templateObject_2$o, templateObject_3$l, templateObject_4$f;
|
|
18425
18391
|
|
|
18426
18392
|
var Pagination = function (_a) {
|
|
18427
18393
|
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 +18433,7 @@ var Pagination = function (_a) {
|
|
|
18467
18433
|
}
|
|
18468
18434
|
return pages;
|
|
18469
18435
|
}, [from, page, showReducedPages, to]);
|
|
18470
|
-
return (jsxs$1(Container$
|
|
18436
|
+
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
18437
|
};
|
|
18472
18438
|
|
|
18473
18439
|
var PaginatorBlog = function (_a) {
|
|
@@ -18481,12 +18447,12 @@ var PaginatorBlog = function (_a) {
|
|
|
18481
18447
|
setPage(page);
|
|
18482
18448
|
onChange(page);
|
|
18483
18449
|
};
|
|
18484
|
-
return (jsxs$1(Container$
|
|
18450
|
+
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
18451
|
? theme.colors.shades['white'].color
|
|
18486
18452
|
: 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
18453
|
};
|
|
18488
18454
|
|
|
18489
|
-
var Container$
|
|
18455
|
+
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
18456
|
var width = _a.width;
|
|
18491
18457
|
return width;
|
|
18492
18458
|
}, function (_a) {
|
|
@@ -18502,14 +18468,14 @@ var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __ma
|
|
|
18502
18468
|
var PaymentMethod = function (_a) {
|
|
18503
18469
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
18504
18470
|
var theme = useTheme();
|
|
18505
|
-
return (jsx$1(Container$
|
|
18471
|
+
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
18472
|
};
|
|
18507
|
-
var templateObject_1$
|
|
18473
|
+
var templateObject_1$x;
|
|
18508
18474
|
|
|
18509
|
-
var Container$
|
|
18475
|
+
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
18476
|
var IMAGE_WIDTH = '63px';
|
|
18511
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18512
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
18477
|
+
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);
|
|
18478
|
+
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
18479
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18514
18480
|
}), IMAGE_WIDTH);
|
|
18515
18481
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -18532,7 +18498,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
18532
18498
|
margin: '0.063rem 0',
|
|
18533
18499
|
});
|
|
18534
18500
|
});
|
|
18535
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
18501
|
+
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
18502
|
var withTag = _a.withTag; _a.theme;
|
|
18537
18503
|
return withTag
|
|
18538
18504
|
? mediaQueries({
|
|
@@ -18541,14 +18507,14 @@ var PriceContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = _
|
|
|
18541
18507
|
})
|
|
18542
18508
|
: 'justify-content: end';
|
|
18543
18509
|
});
|
|
18544
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
18545
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
18510
|
+
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"])));
|
|
18511
|
+
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
18512
|
var SimpleOrderItem = function (_a) {
|
|
18547
18513
|
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
18514
|
var theme = useTheme();
|
|
18549
|
-
return (jsxs$1(Container$
|
|
18515
|
+
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
18516
|
};
|
|
18551
|
-
var templateObject_1$
|
|
18517
|
+
var templateObject_1$w, templateObject_2$n, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
18552
18518
|
|
|
18553
18519
|
var P$1 = newStyled.p(function (_a) {
|
|
18554
18520
|
var color = _a.color;
|
|
@@ -18562,7 +18528,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18562
18528
|
margin: '0.938rem 4.188rem',
|
|
18563
18529
|
});
|
|
18564
18530
|
});
|
|
18565
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18531
|
+
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
18532
|
var height = _a.height;
|
|
18567
18533
|
return height || '0.5rem';
|
|
18568
18534
|
}, function (_a) {
|
|
@@ -18591,7 +18557,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
18591
18557
|
position: 'absolute',
|
|
18592
18558
|
});
|
|
18593
18559
|
});
|
|
18594
|
-
var Container$
|
|
18560
|
+
var Container$n = newStyled.div(function (_a) {
|
|
18595
18561
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
18596
18562
|
return ({
|
|
18597
18563
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -18605,14 +18571,14 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
18605
18571
|
var ProgressBar = function (_a) {
|
|
18606
18572
|
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
18573
|
var theme = useTheme();
|
|
18608
|
-
return (jsxs$1(Container$
|
|
18574
|
+
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
18575
|
};
|
|
18610
|
-
var templateObject_1$
|
|
18576
|
+
var templateObject_1$v;
|
|
18611
18577
|
|
|
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$
|
|
18578
|
+
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; });
|
|
18579
|
+
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"])));
|
|
18580
|
+
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"])));
|
|
18581
|
+
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
18582
|
var QuantityPicker = function (_a) {
|
|
18617
18583
|
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
18584
|
var theme = useTheme();
|
|
@@ -18635,9 +18601,9 @@ var QuantityPicker = function (_a) {
|
|
|
18635
18601
|
return clamp(value);
|
|
18636
18602
|
});
|
|
18637
18603
|
}, [value, clamp]);
|
|
18638
|
-
return (jsxs$1(Container$
|
|
18604
|
+
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
18605
|
};
|
|
18640
|
-
var templateObject_1$
|
|
18606
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$j, templateObject_4$d;
|
|
18641
18607
|
|
|
18642
18608
|
/* base styles & size variants */
|
|
18643
18609
|
var CustomRadioStyles$1 = {
|
|
@@ -18706,9 +18672,9 @@ var ContainerStyles$1 = {
|
|
|
18706
18672
|
},
|
|
18707
18673
|
};
|
|
18708
18674
|
|
|
18709
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18710
|
-
var Container$
|
|
18711
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18675
|
+
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"])));
|
|
18676
|
+
var Container$l = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18677
|
+
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
18678
|
var disabled = _a.disabled;
|
|
18713
18679
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18714
18680
|
});
|
|
@@ -18716,7 +18682,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
18716
18682
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18717
18683
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
18718
18684
|
]; });
|
|
18719
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
18685
|
+
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
18686
|
var RadioPrimary = function (_a) {
|
|
18721
18687
|
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
18688
|
var theme = useTheme();
|
|
@@ -18724,9 +18690,9 @@ var RadioPrimary = function (_a) {
|
|
|
18724
18690
|
var value = event.currentTarget.value;
|
|
18725
18691
|
onChange({ value: value, label: label });
|
|
18726
18692
|
};
|
|
18727
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
18693
|
+
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
18694
|
};
|
|
18729
|
-
var templateObject_1$
|
|
18695
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$i;
|
|
18730
18696
|
|
|
18731
18697
|
var RadioGroupInput = function (_a) {
|
|
18732
18698
|
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 +18771,9 @@ var ContainerStyles = {
|
|
|
18805
18771
|
},
|
|
18806
18772
|
};
|
|
18807
18773
|
|
|
18808
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18809
|
-
var Container$
|
|
18810
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18774
|
+
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"])));
|
|
18775
|
+
var Container$k = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18776
|
+
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
18777
|
var disabled = _a.disabled;
|
|
18812
18778
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18813
18779
|
});
|
|
@@ -18815,7 +18781,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
18815
18781
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
18816
18782
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
18817
18783
|
]; });
|
|
18818
|
-
var StyledLabel = newStyled(Label$4)(templateObject_3$
|
|
18784
|
+
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
18785
|
var theme = _a.theme;
|
|
18820
18786
|
return theme.component.radio.textSize;
|
|
18821
18787
|
}, function (_a) {
|
|
@@ -18829,9 +18795,9 @@ var ClubRadioInput = function (_a) {
|
|
|
18829
18795
|
var value = event.currentTarget.value;
|
|
18830
18796
|
onChange({ value: value, label: label });
|
|
18831
18797
|
};
|
|
18832
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
18798
|
+
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
18799
|
};
|
|
18834
|
-
var templateObject_1$
|
|
18800
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$h;
|
|
18835
18801
|
|
|
18836
18802
|
var ClubRadioGroupInput = function (_a) {
|
|
18837
18803
|
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 +18825,15 @@ function formatDate(date, format) {
|
|
|
18859
18825
|
}
|
|
18860
18826
|
}
|
|
18861
18827
|
|
|
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$
|
|
18828
|
+
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"])));
|
|
18829
|
+
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"])));
|
|
18830
|
+
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"])));
|
|
18831
|
+
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"])));
|
|
18832
|
+
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"])));
|
|
18833
|
+
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"])));
|
|
18834
|
+
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"])));
|
|
18835
|
+
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"])));
|
|
18836
|
+
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
18837
|
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
18838
|
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
18839
|
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 +18863,22 @@ var Review$1 = function (_a) {
|
|
|
18897
18863
|
}
|
|
18898
18864
|
}
|
|
18899
18865
|
}, [opened]);
|
|
18900
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
18866
|
+
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
18867
|
(!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
18868
|
};
|
|
18903
|
-
var templateObject_1$
|
|
18869
|
+
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
18870
|
|
|
18905
18871
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18906
18872
|
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$
|
|
18873
|
+
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"])));
|
|
18874
|
+
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"])));
|
|
18875
|
+
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"])));
|
|
18876
|
+
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"])));
|
|
18877
|
+
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"])));
|
|
18878
|
+
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"])));
|
|
18879
|
+
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"])));
|
|
18880
|
+
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"])));
|
|
18881
|
+
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
18882
|
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
18883
|
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
18884
|
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 +18912,7 @@ var Review = function (_a) {
|
|
|
18946
18912
|
});
|
|
18947
18913
|
};
|
|
18948
18914
|
}, [randomId]);
|
|
18949
|
-
return (jsxs$1(Container$
|
|
18915
|
+
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
18916
|
__html: showMoreMobile
|
|
18951
18917
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
18952
18918
|
: description,
|
|
@@ -18956,15 +18922,15 @@ var Review = function (_a) {
|
|
|
18956
18922
|
: description,
|
|
18957
18923
|
} }, 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
18924
|
};
|
|
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$
|
|
18925
|
+
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;
|
|
18926
|
+
|
|
18927
|
+
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"])));
|
|
18928
|
+
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"])));
|
|
18929
|
+
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"])));
|
|
18930
|
+
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"])));
|
|
18931
|
+
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"])));
|
|
18932
|
+
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"])));
|
|
18933
|
+
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
18934
|
var backgroundUrl = _a.backgroundUrl;
|
|
18969
18935
|
return "url(".concat(backgroundUrl, ")");
|
|
18970
18936
|
});
|
|
@@ -18972,19 +18938,19 @@ var ReviewsHeader = function (_a) {
|
|
|
18972
18938
|
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
18939
|
var starsNumber = 5;
|
|
18974
18940
|
var theme = useTheme();
|
|
18975
|
-
return (jsxs$1(Container$
|
|
18941
|
+
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
18942
|
};
|
|
18977
|
-
var templateObject_1$
|
|
18943
|
+
var templateObject_1$p, templateObject_2$h, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5;
|
|
18978
18944
|
|
|
18979
|
-
var Container$
|
|
18980
|
-
var Text = newStyled.p(templateObject_2$
|
|
18945
|
+
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"])));
|
|
18946
|
+
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
18947
|
var ScrollToTop = function (_a) {
|
|
18982
18948
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18983
18949
|
var theme = useTheme();
|
|
18984
18950
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18985
|
-
return (jsxs$1(Container$
|
|
18951
|
+
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
18952
|
};
|
|
18987
|
-
var templateObject_1$
|
|
18953
|
+
var templateObject_1$o, templateObject_2$g;
|
|
18988
18954
|
|
|
18989
18955
|
var Input = newStyled.input(function (props) { return ({
|
|
18990
18956
|
padding: props.theme.component.input.padding,
|
|
@@ -19015,7 +18981,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19015
18981
|
},
|
|
19016
18982
|
}); });
|
|
19017
18983
|
|
|
19018
|
-
var Container$
|
|
18984
|
+
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
18985
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19020
18986
|
}));
|
|
19021
18987
|
var Description = newStyled.div({
|
|
@@ -19032,25 +18998,25 @@ var Description = newStyled.div({
|
|
|
19032
18998
|
var ProductItem = function (_a) {
|
|
19033
18999
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
19034
19000
|
var theme = useTheme();
|
|
19035
|
-
return (jsxs$1(Container$
|
|
19001
|
+
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
19002
|
};
|
|
19037
|
-
var templateObject_1$
|
|
19003
|
+
var templateObject_1$n;
|
|
19038
19004
|
|
|
19039
|
-
var Container$
|
|
19005
|
+
var Container$e = newStyled.div({
|
|
19040
19006
|
display: 'flex',
|
|
19041
19007
|
justifyContent: 'center',
|
|
19042
19008
|
padding: '1rem',
|
|
19043
19009
|
});
|
|
19044
19010
|
var Footer = function (_a) {
|
|
19045
19011
|
var text = _a.text, onClick = _a.onClick;
|
|
19046
|
-
return (jsx$1(Container$
|
|
19012
|
+
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
19013
|
};
|
|
19048
19014
|
|
|
19049
19015
|
var Ul = newStyled.ul({
|
|
19050
19016
|
margin: '0px',
|
|
19051
19017
|
padding: '0px',
|
|
19052
19018
|
});
|
|
19053
|
-
var Li = newStyled.li(templateObject_1$
|
|
19019
|
+
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
19020
|
padding: [0, '0rem 1rem'],
|
|
19055
19021
|
borderRadius: [0, '0.5rem'],
|
|
19056
19022
|
}));
|
|
@@ -19062,31 +19028,31 @@ var Anchor = newStyled.a({
|
|
|
19062
19028
|
padding: 0,
|
|
19063
19029
|
textDecoration: 'none',
|
|
19064
19030
|
});
|
|
19065
|
-
var Container$
|
|
19031
|
+
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
19032
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19067
19033
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19068
19034
|
borderRadius: ['0', '0.5rem'],
|
|
19069
19035
|
}));
|
|
19070
|
-
var Header = newStyled.div(templateObject_3$
|
|
19036
|
+
var Header = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
19071
19037
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
19072
19038
|
}));
|
|
19073
19039
|
var ResultsPanel = function (_a) {
|
|
19074
19040
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
19075
19041
|
var theme = useTheme();
|
|
19076
|
-
return (jsxs$1(Container$
|
|
19042
|
+
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
19043
|
};
|
|
19078
|
-
var templateObject_1$
|
|
19044
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$d;
|
|
19079
19045
|
|
|
19080
|
-
var Button = newStyled.button(templateObject_1$
|
|
19046
|
+
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
19047
|
right: ['1rem', '7.75rem'],
|
|
19082
19048
|
top: ['0.75rem', '0.75rem'],
|
|
19083
19049
|
}));
|
|
19084
19050
|
var ClearButton = function (_a) {
|
|
19085
19051
|
var onClick = _a.onClick;
|
|
19086
19052
|
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));
|
|
19053
|
+
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
19054
|
};
|
|
19089
|
-
var templateObject_1$
|
|
19055
|
+
var templateObject_1$l;
|
|
19090
19056
|
|
|
19091
19057
|
var SearchIconContainer = newStyled.div({
|
|
19092
19058
|
display: 'flex',
|
|
@@ -19096,7 +19062,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19096
19062
|
background: 'white',
|
|
19097
19063
|
alignSelf: 'center',
|
|
19098
19064
|
});
|
|
19099
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19065
|
+
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
19066
|
var SearchControl = function (_a) {
|
|
19101
19067
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19102
19068
|
var theme = useTheme();
|
|
@@ -19112,7 +19078,7 @@ var SearchControl = function (_a) {
|
|
|
19112
19078
|
}
|
|
19113
19079
|
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
19080
|
};
|
|
19115
|
-
var templateObject_1$
|
|
19081
|
+
var templateObject_1$k;
|
|
19116
19082
|
|
|
19117
19083
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19118
19084
|
var reducer = function (state, action) {
|
|
@@ -19128,7 +19094,7 @@ var reducer = function (state, action) {
|
|
|
19128
19094
|
}
|
|
19129
19095
|
}
|
|
19130
19096
|
};
|
|
19131
|
-
var Container$
|
|
19097
|
+
var Container$c = newStyled.div({
|
|
19132
19098
|
position: 'relative',
|
|
19133
19099
|
display: 'flex',
|
|
19134
19100
|
});
|
|
@@ -19168,7 +19134,7 @@ var SearchBar = function (_a) {
|
|
|
19168
19134
|
if (e.cancelable) {
|
|
19169
19135
|
e.preventDefault();
|
|
19170
19136
|
}
|
|
19171
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
19137
|
+
}, 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
19138
|
if (e.key === 'Enter') {
|
|
19173
19139
|
if (e.cancelable) {
|
|
19174
19140
|
e.preventDefault();
|
|
@@ -19179,20 +19145,20 @@ var SearchBar = function (_a) {
|
|
|
19179
19145
|
} }, 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
19146
|
};
|
|
19181
19147
|
|
|
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$
|
|
19148
|
+
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"])));
|
|
19149
|
+
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"])));
|
|
19150
|
+
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"])));
|
|
19151
|
+
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"])));
|
|
19152
|
+
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
19153
|
var SearchNavigation = function (_a) {
|
|
19188
19154
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
19189
|
-
return (jsxs$1(Container$
|
|
19155
|
+
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
19156
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19191
19157
|
}) }, void 0)] }, void 0));
|
|
19192
19158
|
};
|
|
19193
|
-
var templateObject_1$
|
|
19159
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$c, templateObject_4$9, templateObject_5$5;
|
|
19194
19160
|
|
|
19195
|
-
var Container$
|
|
19161
|
+
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
19162
|
var alignCenter = _a.alignCenter;
|
|
19197
19163
|
return alignCenter &&
|
|
19198
19164
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19202,26 +19168,26 @@ var Container$9 = newStyled.div(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
19202
19168
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19203
19169
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19204
19170
|
});
|
|
19205
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19206
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
19171
|
+
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"])));
|
|
19172
|
+
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
19173
|
var ShortBanner = function (_a) {
|
|
19208
19174
|
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
19175
|
var theme = useTheme();
|
|
19210
|
-
return (jsxs$1(Container$
|
|
19176
|
+
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
19177
|
};
|
|
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$
|
|
19178
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$b;
|
|
19179
|
+
|
|
19180
|
+
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; });
|
|
19181
|
+
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; });
|
|
19182
|
+
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; });
|
|
19183
|
+
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"])));
|
|
19184
|
+
var TopLabel = newStyled(Label)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19185
|
+
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"])));
|
|
19186
|
+
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"])));
|
|
19187
|
+
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"])));
|
|
19188
|
+
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
19189
|
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$
|
|
19190
|
+
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
19191
|
|
|
19226
19192
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19227
19193
|
var getCellColor = function (index, cell) {
|
|
@@ -19257,21 +19223,21 @@ var SizeChartTable = function (_a) {
|
|
|
19257
19223
|
var theme = useTheme();
|
|
19258
19224
|
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
19225
|
var isMultilabel = xLabel && yLabel;
|
|
19260
|
-
return (jsxs$1(Container$
|
|
19226
|
+
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
19227
|
backgroundColor: getCellColor(index, cell),
|
|
19262
19228
|
}, 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
19229
|
};
|
|
19264
19230
|
|
|
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$
|
|
19231
|
+
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; });
|
|
19232
|
+
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; });
|
|
19233
|
+
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; });
|
|
19234
|
+
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
19235
|
var SizeTable = function (_a) {
|
|
19270
19236
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
19271
19237
|
var theme = useTheme();
|
|
19272
19238
|
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
19239
|
};
|
|
19274
|
-
var templateObject_1$
|
|
19240
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$9, templateObject_4$7;
|
|
19275
19241
|
|
|
19276
19242
|
var getStylesBySize$4 = function (size) {
|
|
19277
19243
|
switch (size) {
|
|
@@ -19298,7 +19264,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19298
19264
|
} });
|
|
19299
19265
|
};
|
|
19300
19266
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19301
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19267
|
+
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
19268
|
};
|
|
19303
19269
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19304
19270
|
if (disabled)
|
|
@@ -19314,23 +19280,23 @@ var TextButton = function (_a) {
|
|
|
19314
19280
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19315
19281
|
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
19282
|
};
|
|
19317
|
-
var templateObject_1$
|
|
19283
|
+
var templateObject_1$f;
|
|
19318
19284
|
|
|
19319
|
-
var Container$
|
|
19320
|
-
var P = newStyled.p(templateObject_2$
|
|
19321
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
19285
|
+
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"])));
|
|
19286
|
+
var P = newStyled.p(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19287
|
+
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
19288
|
var SizeFitGuide = function (_a) {
|
|
19323
19289
|
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$
|
|
19290
|
+
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
19291
|
};
|
|
19326
|
-
var templateObject_1$
|
|
19292
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$8;
|
|
19327
19293
|
|
|
19328
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19294
|
+
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
19295
|
var inline = _a.inline;
|
|
19330
19296
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19331
19297
|
});
|
|
19332
|
-
var Row = newStyled.div(templateObject_2$
|
|
19333
|
-
var templateObject_1$
|
|
19298
|
+
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"])));
|
|
19299
|
+
var templateObject_1$d, templateObject_2$9;
|
|
19334
19300
|
|
|
19335
19301
|
var SizeSelector = function (_a) {
|
|
19336
19302
|
var _b;
|
|
@@ -19349,7 +19315,7 @@ var SizeSelector = function (_a) {
|
|
|
19349
19315
|
}) }), void 0)] }), void 0));
|
|
19350
19316
|
};
|
|
19351
19317
|
|
|
19352
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19318
|
+
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
19319
|
var titleSize = _a.titleSize;
|
|
19354
19320
|
return titleSize;
|
|
19355
19321
|
}, function (_a) {
|
|
@@ -19366,18 +19332,18 @@ var Tab = function (_a) {
|
|
|
19366
19332
|
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
19333
|
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
19334
|
};
|
|
19369
|
-
var templateObject_1$
|
|
19335
|
+
var templateObject_1$c;
|
|
19370
19336
|
|
|
19371
|
-
var Container$
|
|
19372
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19337
|
+
var Container$7 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19338
|
+
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
19339
|
var backgroundColor = _a.backgroundColor;
|
|
19374
19340
|
return backgroundColor;
|
|
19375
19341
|
}, function (_a) {
|
|
19376
19342
|
var borderColor = _a.borderColor;
|
|
19377
19343
|
return (borderColor ? "border-bottom: 1px solid ".concat(borderColor) : '');
|
|
19378
19344
|
});
|
|
19379
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
19380
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
19345
|
+
var TabContent = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
19346
|
+
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
19347
|
var Tabs = function (_a) {
|
|
19382
19348
|
var _b;
|
|
19383
19349
|
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 +19352,16 @@ var Tabs = function (_a) {
|
|
|
19386
19352
|
return null;
|
|
19387
19353
|
}
|
|
19388
19354
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19389
|
-
return (jsxs$1(Container$
|
|
19355
|
+
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
19356
|
};
|
|
19391
|
-
var templateObject_1$
|
|
19357
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$7, templateObject_4$6;
|
|
19392
19358
|
|
|
19393
|
-
var Container$
|
|
19359
|
+
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
19360
|
var Tag = function (_a) {
|
|
19395
19361
|
var text = _a.text, className = _a.className;
|
|
19396
|
-
return jsx$1(Container$
|
|
19362
|
+
return jsx$1(Container$6, __assign$1({ className: className }, { children: text }), void 0);
|
|
19397
19363
|
};
|
|
19398
|
-
var templateObject_1$
|
|
19364
|
+
var templateObject_1$a;
|
|
19399
19365
|
|
|
19400
19366
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19401
19367
|
switch (size) {
|
|
@@ -19426,10 +19392,10 @@ var getStylesBySize$3 = function (size, styledBorder) {
|
|
|
19426
19392
|
}
|
|
19427
19393
|
};
|
|
19428
19394
|
var CategoryTag = function (_a) {
|
|
19429
|
-
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b;
|
|
19395
|
+
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b, backgroundColor = _a.backgroundColor;
|
|
19430
19396
|
var theme = useTheme();
|
|
19431
19397
|
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));
|
|
19398
|
+
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
19399
|
};
|
|
19434
19400
|
|
|
19435
19401
|
var getStylesBySize$2 = function (size) {
|
|
@@ -19506,9 +19472,9 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19506
19472
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19507
19473
|
};
|
|
19508
19474
|
|
|
19509
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19510
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19511
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
19475
|
+
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"])));
|
|
19476
|
+
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"])));
|
|
19477
|
+
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
19478
|
var ImageVideo = function (_a) {
|
|
19513
19479
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
19514
19480
|
var video = useRef(null);
|
|
@@ -19528,12 +19494,12 @@ var ImageVideo = function (_a) {
|
|
|
19528
19494
|
height: '100%',
|
|
19529
19495
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19530
19496
|
};
|
|
19531
|
-
var templateObject_1$
|
|
19497
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$6;
|
|
19532
19498
|
|
|
19533
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19534
|
-
var ContainerMobile = css(templateObject_2$
|
|
19535
|
-
var Container$
|
|
19536
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
19499
|
+
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"])));
|
|
19500
|
+
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"])));
|
|
19501
|
+
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);
|
|
19502
|
+
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
19503
|
var TextWithImage = function (_a) {
|
|
19538
19504
|
var _b, _c, _d, _e;
|
|
19539
19505
|
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 +19519,7 @@ var TextWithImage = function (_a) {
|
|
|
19553
19519
|
// @ts-ignore
|
|
19554
19520
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19555
19521
|
};
|
|
19556
|
-
return (jsxs(Container$
|
|
19522
|
+
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
19523
|
backgroundColor: props.btnBGColor,
|
|
19558
19524
|
color: '#ffffff',
|
|
19559
19525
|
border: props.btnBGColor,
|
|
@@ -19563,9 +19529,9 @@ var TextWithImage = function (_a) {
|
|
|
19563
19529
|
},
|
|
19564
19530
|
} }, 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
19531
|
};
|
|
19566
|
-
var templateObject_1$
|
|
19532
|
+
var templateObject_1$8, templateObject_2$6, templateObject_3$5, templateObject_4$5;
|
|
19567
19533
|
|
|
19568
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19534
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19569
19535
|
var timerColor = _a.timerColor;
|
|
19570
19536
|
return timerColor || '';
|
|
19571
19537
|
});
|
|
@@ -19601,11 +19567,11 @@ var Timer = function (_a) {
|
|
|
19601
19567
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19602
19568
|
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
19569
|
};
|
|
19604
|
-
var templateObject_1$
|
|
19570
|
+
var templateObject_1$7;
|
|
19605
19571
|
|
|
19606
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19607
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19608
|
-
var Currency = newStyled.span(templateObject_3$
|
|
19572
|
+
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"])));
|
|
19573
|
+
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; });
|
|
19574
|
+
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
19575
|
var theme = _a.theme;
|
|
19610
19576
|
return theme.component.total.basicTotal.currency.color;
|
|
19611
19577
|
}, function (_a) {
|
|
@@ -19618,41 +19584,41 @@ var Currency = newStyled.span(templateObject_3$3 || (templateObject_3$3 = __make
|
|
|
19618
19584
|
var theme = _a.theme;
|
|
19619
19585
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
19620
19586
|
});
|
|
19621
|
-
var Container$
|
|
19587
|
+
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
19588
|
var highlightColor = _a.highlightColor;
|
|
19623
19589
|
return highlightColor;
|
|
19624
19590
|
});
|
|
19625
|
-
var TotalContainer = newStyled(Container$
|
|
19591
|
+
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
19592
|
var showTotalLabel = _a.showTotalLabel;
|
|
19627
19593
|
return (showTotalLabel ? 'space-between' : 'flex-end');
|
|
19628
19594
|
});
|
|
19629
|
-
var DiscountText = newStyled.h3(templateObject_6$
|
|
19630
|
-
var DiscountAmount = newStyled.h3(templateObject_7$
|
|
19595
|
+
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"])));
|
|
19596
|
+
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
19597
|
var theme = _a.theme;
|
|
19632
19598
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19633
19599
|
});
|
|
19634
|
-
var TotalLabel = newStyled(Text$7)(templateObject_8$
|
|
19635
|
-
var templateObject_1$
|
|
19600
|
+
var TotalLabel = newStyled(Text$7)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19601
|
+
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
19602
|
|
|
19637
19603
|
var Total = function (_a) {
|
|
19638
19604
|
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
19605
|
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$
|
|
19606
|
+
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
19607
|
};
|
|
19642
19608
|
|
|
19643
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19609
|
+
var Wrapper = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19644
19610
|
var color = _a.color;
|
|
19645
19611
|
return color;
|
|
19646
19612
|
});
|
|
19647
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19648
|
-
var Item = newStyled.h4(templateObject_3$
|
|
19613
|
+
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"])));
|
|
19614
|
+
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
19615
|
var theme = _a.theme;
|
|
19650
19616
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
19651
19617
|
}, function (_a) {
|
|
19652
19618
|
var theme = _a.theme;
|
|
19653
19619
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
19654
19620
|
});
|
|
19655
|
-
var CouponItem = newStyled(Item)(templateObject_4$
|
|
19621
|
+
var CouponItem = newStyled(Item)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19656
19622
|
var color = _a.color;
|
|
19657
19623
|
return color;
|
|
19658
19624
|
});
|
|
@@ -19665,30 +19631,30 @@ var Subtotal = function (_a) {
|
|
|
19665
19631
|
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
19632
|
})] }), void 0));
|
|
19667
19633
|
};
|
|
19668
|
-
var templateObject_1$
|
|
19634
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3;
|
|
19669
19635
|
|
|
19670
19636
|
var Totals = {
|
|
19671
19637
|
Total: Total,
|
|
19672
19638
|
Subtotal: Subtotal,
|
|
19673
19639
|
};
|
|
19674
19640
|
|
|
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$
|
|
19641
|
+
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"])));
|
|
19642
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19643
|
+
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; });
|
|
19644
|
+
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'); });
|
|
19645
|
+
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"])));
|
|
19646
|
+
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
19647
|
return props.finishedTrack
|
|
19682
19648
|
? props.finishedTrackColor
|
|
19683
19649
|
: props.activeTrack
|
|
19684
19650
|
? props.activeTrackColor
|
|
19685
19651
|
: '';
|
|
19686
19652
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
19687
|
-
var CheckpointStatusMessage = newStyled.span(templateObject_7$
|
|
19688
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_8$
|
|
19653
|
+
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"])));
|
|
19654
|
+
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
19655
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19690
19656
|
}, 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)'); });
|
|
19657
|
+
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
19658
|
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
19659
|
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
19660
|
var TrackingProgressV2 = function (_a) {
|
|
@@ -19713,7 +19679,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19713
19679
|
}
|
|
19714
19680
|
return '30px';
|
|
19715
19681
|
};
|
|
19716
|
-
return (jsxs$1(Container$
|
|
19682
|
+
return (jsxs$1(Container$3, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19717
19683
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19718
19684
|
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
19685
|
? activeCheckpointColor
|
|
@@ -19724,18 +19690,18 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19724
19690
|
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
19691
|
})] }), void 0));
|
|
19726
19692
|
};
|
|
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) {
|
|
19693
|
+
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;
|
|
19694
|
+
|
|
19695
|
+
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"])));
|
|
19696
|
+
var CheckpointContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19697
|
+
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; });
|
|
19698
|
+
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'); });
|
|
19699
|
+
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'); });
|
|
19700
|
+
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
19701
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
19736
19702
|
}, 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; });
|
|
19703
|
+
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)'); });
|
|
19704
|
+
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
19705
|
var TrackingProgress = function (_a) {
|
|
19740
19706
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
19741
19707
|
var theme = useTheme();
|
|
@@ -19755,7 +19721,7 @@ var TrackingProgress = function (_a) {
|
|
|
19755
19721
|
}
|
|
19756
19722
|
return '30px';
|
|
19757
19723
|
};
|
|
19758
|
-
return (jsxs$1(Container$
|
|
19724
|
+
return (jsxs$1(Container$2, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
19759
19725
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
19760
19726
|
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
19727
|
? theme.colors.semantic.informative.color
|
|
@@ -19764,9 +19730,9 @@ var TrackingProgress = function (_a) {
|
|
|
19764
19730
|
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
19731
|
})] }), void 0));
|
|
19766
19732
|
};
|
|
19767
|
-
var templateObject_1$
|
|
19733
|
+
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
19734
|
|
|
19769
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
19735
|
+
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
19736
|
var textPosition = _a.textPosition;
|
|
19771
19737
|
return textPosition;
|
|
19772
19738
|
}, function (_a) {
|
|
@@ -19779,7 +19745,7 @@ var TimerContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = _
|
|
|
19779
19745
|
var borderRadius = _a.borderRadius;
|
|
19780
19746
|
return borderRadius || '8px';
|
|
19781
19747
|
});
|
|
19782
|
-
var templateObject_1$
|
|
19748
|
+
var templateObject_1$2;
|
|
19783
19749
|
|
|
19784
19750
|
var getDefaultCountdown = function () {
|
|
19785
19751
|
var tomorrowDate = new Date();
|
|
@@ -19795,7 +19761,7 @@ var HurryUp = function (_a) {
|
|
|
19795
19761
|
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
19762
|
};
|
|
19797
19763
|
|
|
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) {
|
|
19764
|
+
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
19765
|
var size = _a.size;
|
|
19800
19766
|
return (size ? size : '100%');
|
|
19801
19767
|
}, function (_a) {
|
|
@@ -19809,7 +19775,7 @@ var borderSize = {
|
|
|
19809
19775
|
large: '3px',
|
|
19810
19776
|
};
|
|
19811
19777
|
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) {
|
|
19778
|
+
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
19779
|
var size = _a.size;
|
|
19814
19780
|
return borderSize[size];
|
|
19815
19781
|
}, function (_a) {
|
|
@@ -19822,12 +19788,97 @@ var StyledSpinner = newStyled.div(templateObject_2 || (templateObject_2 = __make
|
|
|
19822
19788
|
var _b = _a.duration, duration = _b === void 0 ? 0.7 : _b;
|
|
19823
19789
|
return duration;
|
|
19824
19790
|
});
|
|
19825
|
-
var templateObject_1, templateObject_2;
|
|
19791
|
+
var templateObject_1$1, templateObject_2$1;
|
|
19826
19792
|
|
|
19827
19793
|
var Spinner = function (_a) {
|
|
19828
19794
|
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));
|
|
19795
|
+
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));
|
|
19796
|
+
};
|
|
19797
|
+
|
|
19798
|
+
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"])));
|
|
19799
|
+
var SliderContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"], ["\n ", "\n position: relative;\n overflow: hidden;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n\n .slick-slide {\n position: relative;\n aspect-ratio: ", ";\n }\n\n .slick-arrow {\n cursor: pointer;\n position: absolute;\n top: 45%;\n z-index: 1;\n }\n\n .slick-arrow::before {\n content: '' !important;\n }\n\n @media only screen and (max-width: 480px) {\n .slick-arrow {\n display: block !important;\n }\n }\n\n .slick-arrow.slick-disabled {\n display: none !important;\n }\n\n .slick-prev {\n left: 0;\n }\n\n .slick-next {\n right: 0;\n }\n\n .slick-dots {\n bottom: 15px;\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n text-align: center;\n width: 100%;\n }\n\n .slick-dots li {\n position: relative;\n display: inline-block;\n height: 20px;\n width: 20px;\n margin: 0;\n padding: 0;\n cursor: pointer;\n }\n\n .slick-dots li.slick-active {\n display: inline-block !important;\n }\n\n .slick-dots li:nth-child(n + 10) {\n display: none;\n }\n\n .slick-dots li button {\n background: transparent;\n border: 0;\n color: transparent;\n cursor: pointer;\n display: block;\n height: 20px;\n line-height: 0;\n outline: none;\n padding: 5px;\n width: 20px;\n }\n\n .slick-dots li button:focus:before,\n .slick-dots li button:hover:before {\n opacity: 0.5;\n }\n\n .slick-dots li button:before {\n background: rgba(27, 25, 25, 0.5);\n border-radius: 20px;\n content: ' ';\n display: block;\n height: 8px;\n left: 0;\n margin: 5px;\n position: absolute;\n top: 0;\n width: 8px;\n opacity: 1;\n }\n\n .slick-dots li.slick-active button:before {\n background-color: #fff;\n opacity: 1;\n width: 12px;\n height: 12px;\n top: -1px;\n }\n\n .slick-dots li:not(.slick-active) button:before {\n border: 1px solid hsla(0, 0%, 100%, 0.6);\n }\n"])), function (_a) {
|
|
19800
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
19801
|
+
return borderRadiusVariant &&
|
|
19802
|
+
"\n border-radius: 40px;\n ";
|
|
19803
|
+
}, function (_a) {
|
|
19804
|
+
var theme = _a.theme;
|
|
19805
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
19806
|
+
}, function (_a) {
|
|
19807
|
+
var theme = _a.theme;
|
|
19808
|
+
return theme.component.gallery.aspectRatio;
|
|
19809
|
+
});
|
|
19810
|
+
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"])));
|
|
19811
|
+
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"])));
|
|
19812
|
+
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) {
|
|
19813
|
+
var theme = _a.theme;
|
|
19814
|
+
return theme.colors.shades.white.color;
|
|
19815
|
+
});
|
|
19816
|
+
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"])));
|
|
19817
|
+
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) {
|
|
19818
|
+
var theme = _a.theme;
|
|
19819
|
+
return theme.colors.pallete.primary.color;
|
|
19820
|
+
});
|
|
19821
|
+
var SlideItem = newStyled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-right: 10px;\n"], ["\n padding-right: 10px;\n"])));
|
|
19822
|
+
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) {
|
|
19823
|
+
var theme = _a.theme;
|
|
19824
|
+
return theme.component.gallery.aspectRatio;
|
|
19825
|
+
});
|
|
19826
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
19827
|
+
|
|
19828
|
+
var SETTINGS = {
|
|
19829
|
+
infinite: false,
|
|
19830
|
+
speed: 200,
|
|
19831
|
+
slidesToShow: 1,
|
|
19832
|
+
slidesToScroll: 1,
|
|
19833
|
+
initialSlide: 0,
|
|
19834
|
+
arrows: true,
|
|
19835
|
+
dots: false,
|
|
19836
|
+
};
|
|
19837
|
+
var THUMBNAIL_SETTINGS = {
|
|
19838
|
+
slidesToShow: 3.5,
|
|
19839
|
+
swipeToSlide: true,
|
|
19840
|
+
focusOnSelect: true,
|
|
19841
|
+
infinite: false,
|
|
19842
|
+
centerPadding: '16px',
|
|
19843
|
+
responsive: [
|
|
19844
|
+
{
|
|
19845
|
+
breakpoint: 1024,
|
|
19846
|
+
settings: {
|
|
19847
|
+
slidesToShow: 5,
|
|
19848
|
+
},
|
|
19849
|
+
},
|
|
19850
|
+
{
|
|
19851
|
+
breakpoint: 640,
|
|
19852
|
+
settings: {
|
|
19853
|
+
slidesToShow: 4.5,
|
|
19854
|
+
},
|
|
19855
|
+
},
|
|
19856
|
+
],
|
|
19857
|
+
};
|
|
19858
|
+
var ProductGalleryMobileV4 = function (_a) {
|
|
19859
|
+
var images = _a.images, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId;
|
|
19860
|
+
var _b = useTheme$1(), colors = _b.colors, component = _b.component;
|
|
19861
|
+
var _c = useState(undefined), nav1 = _c[0], setNav1 = _c[1];
|
|
19862
|
+
var _d = useState(undefined), nav2 = _d[0], setNav2 = _d[1];
|
|
19863
|
+
var slick = useRef(null);
|
|
19864
|
+
var thumbnailRef = useRef(null);
|
|
19865
|
+
var sliderWrapper = useRef(null);
|
|
19866
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
19867
|
+
useEffect(function () {
|
|
19868
|
+
if (slick.current)
|
|
19869
|
+
setNav1(slick.current);
|
|
19870
|
+
if (thumbnailRef.current)
|
|
19871
|
+
setNav2(thumbnailRef.current);
|
|
19872
|
+
}, []);
|
|
19873
|
+
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) {
|
|
19874
|
+
var url = _a.url, key = _a.key, alt = _a.alt;
|
|
19875
|
+
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));
|
|
19876
|
+
}) }), void 0), jsx$1(SliderThumbnail, __assign$1({ asNavFor: nav1, ref: function (slider) { return (thumbnailRef.current = slider); } }, THUMBNAIL_SETTINGS, { children: images.map(function (_a) {
|
|
19877
|
+
var _b, _c;
|
|
19878
|
+
var url = _a.url, key = _a.key;
|
|
19879
|
+
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));
|
|
19880
|
+
}) }), void 0)] }), void 0) }), void 0));
|
|
19830
19881
|
};
|
|
19831
19882
|
|
|
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 };
|
|
19883
|
+
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
19884
|
//# sourceMappingURL=index.esm.js.map
|