@trafilea/afrodita-components 6.8.3 → 6.8.5
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.css +2 -1
- package/build/index.d.ts +16 -5
- package/build/index.esm.css +2 -1
- package/build/index.esm.js +541 -423
- package/build/index.esm.js.map +1 -1
- package/build/index.js +542 -423
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3125,7 +3125,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3125
3125
|
desktop: 1280,
|
|
3126
3126
|
};
|
|
3127
3127
|
|
|
3128
|
-
var Container$
|
|
3128
|
+
var Container$19 = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __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) {
|
|
3129
3129
|
var height = _a.height;
|
|
3130
3130
|
return (height ? height : '1.5em');
|
|
3131
3131
|
}, function (_a) {
|
|
@@ -3150,11 +3150,11 @@ var Container$17 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = _
|
|
|
3150
3150
|
var SkeletonBox = function (_a) {
|
|
3151
3151
|
var width = _a.width, height = _a.height;
|
|
3152
3152
|
var theme = useTheme();
|
|
3153
|
-
return jsx$1(Container$
|
|
3153
|
+
return jsx$1(Container$19, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3154
3154
|
};
|
|
3155
|
-
var templateObject_1$
|
|
3155
|
+
var templateObject_1$1U;
|
|
3156
3156
|
|
|
3157
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3157
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1T || (templateObject_1$1T = __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) {
|
|
3158
3158
|
var width = _a.width;
|
|
3159
3159
|
return width;
|
|
3160
3160
|
}, function (_a) {
|
|
@@ -3170,7 +3170,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1R || (templateObject_1$1R
|
|
|
3170
3170
|
var opacity = _a.opacity;
|
|
3171
3171
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3172
3172
|
});
|
|
3173
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3173
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1e || (templateObject_2$1e = __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) {
|
|
3174
3174
|
var width = _a.width;
|
|
3175
3175
|
return width;
|
|
3176
3176
|
}, function (_a) {
|
|
@@ -3183,7 +3183,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1d || (templateObject_2$
|
|
|
3183
3183
|
var opacity = _a.opacity;
|
|
3184
3184
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3185
3185
|
});
|
|
3186
|
-
var templateObject_1$
|
|
3186
|
+
var templateObject_1$1T, templateObject_2$1e;
|
|
3187
3187
|
|
|
3188
3188
|
/* eslint-disable no-undef */
|
|
3189
3189
|
var cache = new Map();
|
|
@@ -4083,15 +4083,15 @@ function jsxs(type, props, key) {
|
|
|
4083
4083
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4084
4084
|
// `variants` styles that are consistent through all themes.
|
|
4085
4085
|
var TAGS = {
|
|
4086
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4087
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4088
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4089
|
-
display1: newStyled.h1(templateObject_4$
|
|
4090
|
-
display2: newStyled.h2(templateObject_5$
|
|
4091
|
-
display3: newStyled.h3(templateObject_6$
|
|
4092
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4093
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4094
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4086
|
+
hero1: newStyled.h1(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject([""], [""]))),
|
|
4087
|
+
hero2: newStyled.h2(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject([""], [""]))),
|
|
4088
|
+
hero3: newStyled.h3(templateObject_3$X || (templateObject_3$X = __makeTemplateObject([""], [""]))),
|
|
4089
|
+
display1: newStyled.h1(templateObject_4$H || (templateObject_4$H = __makeTemplateObject([""], [""]))),
|
|
4090
|
+
display2: newStyled.h2(templateObject_5$s || (templateObject_5$s = __makeTemplateObject([""], [""]))),
|
|
4091
|
+
display3: newStyled.h3(templateObject_6$q || (templateObject_6$q = __makeTemplateObject([""], [""]))),
|
|
4092
|
+
heading1: newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject([""], [""]))),
|
|
4093
|
+
heading2: newStyled.h2(templateObject_8$e || (templateObject_8$e = __makeTemplateObject([""], [""]))),
|
|
4094
|
+
heading3: newStyled.h3(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject([""], [""]))),
|
|
4095
4095
|
heading4: newStyled.h4(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject([""], [""]))),
|
|
4096
4096
|
heading5: newStyled.h5(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject([""], [""]))),
|
|
4097
4097
|
heading6: newStyled.h6(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4107,7 +4107,7 @@ var TAGS = {
|
|
|
4107
4107
|
}),
|
|
4108
4108
|
tag: newStyled.span(templateObject_20$1 || (templateObject_20$1 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
4109
4109
|
};
|
|
4110
|
-
var Text$
|
|
4110
|
+
var Text$9 = function (_a) {
|
|
4111
4111
|
var _b;
|
|
4112
4112
|
var variant = _a.variant, children = _a.children, testId = _a.testId, asSpan = _a.asSpan, allProps = __rest(_a, ["variant", "children", "testId", "asSpan"]);
|
|
4113
4113
|
var theme = useTheme();
|
|
@@ -4219,17 +4219,17 @@ var DEFAULTS = {
|
|
|
4219
4219
|
size: 'regular',
|
|
4220
4220
|
},
|
|
4221
4221
|
};
|
|
4222
|
-
var templateObject_1$
|
|
4223
|
-
|
|
4224
|
-
var Container$
|
|
4225
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4226
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4227
|
-
var Label$4 = newStyled.div(templateObject_4$
|
|
4228
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4229
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4222
|
+
var templateObject_1$1S, templateObject_2$1d, templateObject_3$X, templateObject_4$H, templateObject_5$s, templateObject_6$q, templateObject_7$i, templateObject_8$e, templateObject_9$7, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4223
|
+
|
|
4224
|
+
var Container$18 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __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"])));
|
|
4225
|
+
var Card$3 = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
4226
|
+
var Tag$2 = newStyled.div(templateObject_3$W || (templateObject_3$W = __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"])));
|
|
4227
|
+
var Label$4 = 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"])));
|
|
4228
|
+
var Check$1 = newStyled.div(templateObject_5$r || (templateObject_5$r = __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"])));
|
|
4229
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$p || (templateObject_6$p = __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"])));
|
|
4230
4230
|
var PackSelectorV2 = function (_a) {
|
|
4231
4231
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4232
|
-
return (jsx$1(Container$
|
|
4232
|
+
return (jsx$1(Container$18, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4233
4233
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4234
4234
|
}) }), void 0));
|
|
4235
4235
|
};
|
|
@@ -4243,35 +4243,35 @@ var PackCard$1 = function (_a) {
|
|
|
4243
4243
|
.then(function (icon) { return setIcon(icon); })
|
|
4244
4244
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4245
4245
|
}, [pack.meta.icon]);
|
|
4246
|
-
return (jsxs$1(Card$3, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$
|
|
4246
|
+
return (jsxs$1(Card$3, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$9, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$4, { children: [jsx$1(Text$9, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsx$1(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(DiscountContainer$1, { children: [jsx$1(Text$9, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4247
4247
|
locale: 'en-US',
|
|
4248
4248
|
currency: currencyCode || 'USD',
|
|
4249
|
-
}) }), void 0), pack.meta.quantity > 1 ? (jsxs$1(Text$
|
|
4249
|
+
}) }), void 0), pack.meta.quantity > 1 ? (jsxs$1(Text$9, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
4250
4250
|
locale: 'en-US',
|
|
4251
4251
|
currency: currencyCode || 'USD',
|
|
4252
4252
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4253
4253
|
};
|
|
4254
|
-
var templateObject_1$
|
|
4254
|
+
var templateObject_1$1R, templateObject_2$1c, templateObject_3$W, templateObject_4$G, templateObject_5$r, templateObject_6$p;
|
|
4255
4255
|
|
|
4256
|
-
var Container$
|
|
4257
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4256
|
+
var Container$17 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4257
|
+
var DropContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4258
4258
|
var DropList = function (_a) {
|
|
4259
4259
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4260
|
-
return (jsx$1(Container$
|
|
4260
|
+
return (jsx$1(Container$17, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4261
4261
|
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));
|
|
4262
4262
|
}) }, void 0));
|
|
4263
4263
|
};
|
|
4264
|
-
var templateObject_1$
|
|
4264
|
+
var templateObject_1$1Q, templateObject_2$1b;
|
|
4265
4265
|
|
|
4266
4266
|
var DROPS_TOTAL = 5;
|
|
4267
|
-
var Container$
|
|
4268
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4269
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4267
|
+
var Container$16 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4268
|
+
var Title$8 = newStyled.p(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
4269
|
+
var Description$3 = newStyled.p(templateObject_3$V || (templateObject_3$V = __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"])));
|
|
4270
4270
|
var AbsorbencyLevel = function (_a) {
|
|
4271
4271
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4272
|
-
return (jsxs$1(Container$
|
|
4272
|
+
return (jsxs$1(Container$16, { 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));
|
|
4273
4273
|
};
|
|
4274
|
-
var templateObject_1$
|
|
4274
|
+
var templateObject_1$1P, templateObject_2$1a, templateObject_3$V;
|
|
4275
4275
|
|
|
4276
4276
|
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(`
|
|
4277
4277
|
`),"","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(`
|
|
@@ -4347,7 +4347,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4347
4347
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4348
4348
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4349
4349
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4350
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4350
|
+
var StyledContent = newStyled.button(templateObject_1$1O || (templateObject_1$1O = __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"])));
|
|
4351
4351
|
var Accordion$1 = function (_a) {
|
|
4352
4352
|
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;
|
|
4353
4353
|
var theme = useTheme();
|
|
@@ -4371,9 +4371,9 @@ var Accordion$1 = function (_a) {
|
|
|
4371
4371
|
} }, { 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));
|
|
4372
4372
|
} }), void 0));
|
|
4373
4373
|
};
|
|
4374
|
-
var templateObject_1$
|
|
4374
|
+
var templateObject_1$1O;
|
|
4375
4375
|
|
|
4376
|
-
var Container$
|
|
4376
|
+
var Container$15 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4377
4377
|
var AccordionOptions = function (_a) {
|
|
4378
4378
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4379
4379
|
var _b = useState({
|
|
@@ -4386,7 +4386,7 @@ var AccordionOptions = function (_a) {
|
|
|
4386
4386
|
}
|
|
4387
4387
|
return false;
|
|
4388
4388
|
};
|
|
4389
|
-
return (jsx$1(Container$
|
|
4389
|
+
return (jsx$1(Container$15, { children: accordions.map(function (accordion, index) {
|
|
4390
4390
|
var forceOpenValue = getForceOpen(index);
|
|
4391
4391
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4392
4392
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4397,7 +4397,7 @@ var AccordionOptions = function (_a) {
|
|
|
4397
4397
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4398
4398
|
}) }, void 0));
|
|
4399
4399
|
};
|
|
4400
|
-
var templateObject_1$
|
|
4400
|
+
var templateObject_1$1N;
|
|
4401
4401
|
|
|
4402
4402
|
var CardSectionType;
|
|
4403
4403
|
(function (CardSectionType) {
|
|
@@ -4559,14 +4559,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4559
4559
|
literal: true,
|
|
4560
4560
|
});
|
|
4561
4561
|
|
|
4562
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4563
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4562
|
+
var ErrorText = newStyled.h3(templateObject_1$1M || (templateObject_1$1M = __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; });
|
|
4563
|
+
var ErrorContainer = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __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"])));
|
|
4564
4564
|
var Error$1 = function (_a) {
|
|
4565
4565
|
var error = _a.error;
|
|
4566
4566
|
var theme = useTheme();
|
|
4567
4567
|
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));
|
|
4568
4568
|
};
|
|
4569
|
-
var templateObject_1$
|
|
4569
|
+
var templateObject_1$1M, templateObject_2$19;
|
|
4570
4570
|
|
|
4571
4571
|
var BaseSelectButton = function (_a) {
|
|
4572
4572
|
var children = _a.children, as = _a.as;
|
|
@@ -4583,7 +4583,7 @@ function BaseSelectOption(_a) {
|
|
|
4583
4583
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4584
4584
|
}
|
|
4585
4585
|
|
|
4586
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4586
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4587
4587
|
function BaseSelect(_a) {
|
|
4588
4588
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4589
4589
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4593,7 +4593,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4593
4593
|
Options: BaseSelectOptions,
|
|
4594
4594
|
Option: BaseSelectOption,
|
|
4595
4595
|
});
|
|
4596
|
-
var templateObject_1$
|
|
4596
|
+
var templateObject_1$1L;
|
|
4597
4597
|
|
|
4598
4598
|
var CustomButton = newStyled.button(function (_a) {
|
|
4599
4599
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4632,7 +4632,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4632
4632
|
});
|
|
4633
4633
|
});
|
|
4634
4634
|
//TODO Remove this when we find the real solution
|
|
4635
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4635
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4636
4636
|
var open = _a.open;
|
|
4637
4637
|
return open &&
|
|
4638
4638
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4652,7 +4652,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4652
4652
|
} }), void 0));
|
|
4653
4653
|
};
|
|
4654
4654
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4655
|
-
var templateObject_1$
|
|
4655
|
+
var templateObject_1$1K;
|
|
4656
4656
|
|
|
4657
4657
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4658
4658
|
var theme = _a.theme;
|
|
@@ -4819,7 +4819,7 @@ var CustomCheckboxStyles = {
|
|
|
4819
4819
|
},
|
|
4820
4820
|
};
|
|
4821
4821
|
|
|
4822
|
-
var Container$
|
|
4822
|
+
var Container$14 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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"])));
|
|
4823
4823
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4824
4824
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4825
4825
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4830,7 +4830,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4830
4830
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4831
4831
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4832
4832
|
]; });
|
|
4833
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4833
|
+
var Input$5 = newStyled.input(templateObject_2$18 || (templateObject_2$18 = __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) {
|
|
4834
4834
|
var disabled = _a.disabled;
|
|
4835
4835
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4836
4836
|
});
|
|
@@ -4844,9 +4844,9 @@ var Checkbox = function (_a) {
|
|
|
4844
4844
|
}
|
|
4845
4845
|
onChange(e.target.checked);
|
|
4846
4846
|
};
|
|
4847
|
-
return (jsxs$1(Container$
|
|
4847
|
+
return (jsxs$1(Container$14, { 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$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4848
4848
|
};
|
|
4849
|
-
var templateObject_1$
|
|
4849
|
+
var templateObject_1$1J, templateObject_2$18;
|
|
4850
4850
|
|
|
4851
4851
|
var CustomOption = newStyled.li(function (_a) {
|
|
4852
4852
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4895,8 +4895,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4895
4895
|
Option: BaseDropdownOption,
|
|
4896
4896
|
});
|
|
4897
4897
|
|
|
4898
|
-
var Container$
|
|
4899
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4898
|
+
var Container$13 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject([""], [""])));
|
|
4899
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __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"])));
|
|
4900
4900
|
function SimpleDropdown(_a) {
|
|
4901
4901
|
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;
|
|
4902
4902
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4925,10 +4925,10 @@ function SimpleDropdown(_a) {
|
|
|
4925
4925
|
}
|
|
4926
4926
|
setSelectedValue(value);
|
|
4927
4927
|
}, [value, options, initialValue]);
|
|
4928
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4928
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$13 : Fragment$1;
|
|
4929
4929
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4930
4930
|
}
|
|
4931
|
-
var templateObject_1$
|
|
4931
|
+
var templateObject_1$1I, templateObject_2$17;
|
|
4932
4932
|
|
|
4933
4933
|
/* base styles & size variants */
|
|
4934
4934
|
var CustomRadioStyles$2 = {
|
|
@@ -4993,9 +4993,9 @@ var ContainerStyles$2 = {
|
|
|
4993
4993
|
},
|
|
4994
4994
|
};
|
|
4995
4995
|
|
|
4996
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
4997
|
-
var Container$
|
|
4998
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
4996
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4997
|
+
var Container$12 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
4998
|
+
var Input$4 = newStyled.input(templateObject_2$16 || (templateObject_2$16 = __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) {
|
|
4999
4999
|
var disabled = _a.disabled;
|
|
5000
5000
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5001
5001
|
});
|
|
@@ -5003,7 +5003,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5003
5003
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5004
5004
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5005
5005
|
]; });
|
|
5006
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
5006
|
+
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5007
5007
|
var theme = _a.theme;
|
|
5008
5008
|
return theme.component.radio.textSize;
|
|
5009
5009
|
}, function (_a) {
|
|
@@ -5017,9 +5017,9 @@ var RadioInput = function (_a) {
|
|
|
5017
5017
|
var value = event.currentTarget.value;
|
|
5018
5018
|
onChange({ value: value, label: label });
|
|
5019
5019
|
};
|
|
5020
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5020
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$12, __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), 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));
|
|
5021
5021
|
};
|
|
5022
|
-
var templateObject_1$
|
|
5022
|
+
var templateObject_1$1H, templateObject_2$16, templateObject_3$U;
|
|
5023
5023
|
|
|
5024
5024
|
var getWrapperFlexDirection = function (position) {
|
|
5025
5025
|
switch (position) {
|
|
@@ -5070,7 +5070,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5070
5070
|
}
|
|
5071
5071
|
};
|
|
5072
5072
|
|
|
5073
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5073
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __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) {
|
|
5074
5074
|
var position = _a.position;
|
|
5075
5075
|
return getWrapperFlexDirection(position);
|
|
5076
5076
|
}, function (_a) {
|
|
@@ -5080,7 +5080,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __ma
|
|
|
5080
5080
|
var disableHover = _a.disableHover;
|
|
5081
5081
|
return (disableHover ? 0 : 1);
|
|
5082
5082
|
});
|
|
5083
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5083
|
+
var TooltipContainer = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5084
5084
|
var position = _a.position;
|
|
5085
5085
|
return getContainerFlexDirection(position);
|
|
5086
5086
|
}, function (_a) {
|
|
@@ -5108,25 +5108,25 @@ var TooltipContainer = newStyled.div(templateObject_2$14 || (templateObject_2$14
|
|
|
5108
5108
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5109
5109
|
return actual === expected ? margin : '0';
|
|
5110
5110
|
};
|
|
5111
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5111
|
+
var ContentWrapper = newStyled.div(templateObject_3$T || (templateObject_3$T = __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) {
|
|
5112
5112
|
var borderColor = _a.borderColor;
|
|
5113
5113
|
return borderColor;
|
|
5114
5114
|
}, function (_a) {
|
|
5115
5115
|
var backgroundColor = _a.backgroundColor;
|
|
5116
5116
|
return backgroundColor;
|
|
5117
5117
|
});
|
|
5118
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5118
|
+
var TooltipText = newStyled.div(templateObject_4$F || (templateObject_4$F = __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) {
|
|
5119
5119
|
var color = _a.color;
|
|
5120
5120
|
return color;
|
|
5121
5121
|
});
|
|
5122
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5123
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5122
|
+
var TopSection = newStyled.div(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
5123
|
+
var Title$7 = newStyled.h1(templateObject_6$o || (templateObject_6$o = __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) {
|
|
5124
5124
|
var color = _a.color;
|
|
5125
5125
|
return color;
|
|
5126
5126
|
});
|
|
5127
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5128
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5129
|
-
var templateObject_1$
|
|
5127
|
+
var IconContainer$5 = newStyled.div(templateObject_7$h || (templateObject_7$h = __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"])));
|
|
5128
|
+
var CloseToolTip = newStyled.button(templateObject_8$d || (templateObject_8$d = __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"])));
|
|
5129
|
+
var templateObject_1$1G, templateObject_2$15, templateObject_3$T, templateObject_4$F, templateObject_5$q, templateObject_6$o, templateObject_7$h, templateObject_8$d;
|
|
5130
5130
|
|
|
5131
5131
|
var useOnClickOutside = function (ref, handler) {
|
|
5132
5132
|
useEffect(function () {
|
|
@@ -5268,7 +5268,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5268
5268
|
};
|
|
5269
5269
|
}
|
|
5270
5270
|
};
|
|
5271
|
-
var Container
|
|
5271
|
+
var Container$11 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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) {
|
|
5272
5272
|
var backgroundColor = _a.backgroundColor;
|
|
5273
5273
|
return backgroundColor;
|
|
5274
5274
|
}, function (_a) {
|
|
@@ -5290,7 +5290,7 @@ var Container$$ = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __
|
|
|
5290
5290
|
var size = _a.size;
|
|
5291
5291
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5292
5292
|
});
|
|
5293
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5293
|
+
var H3$3 = newStyled.h3(templateObject_2$14 || (templateObject_2$14 = __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) {
|
|
5294
5294
|
var textColor = _a.textColor;
|
|
5295
5295
|
return textColor;
|
|
5296
5296
|
}, function (_a) {
|
|
@@ -5305,9 +5305,9 @@ var H3$3 = newStyled.h3(templateObject_2$13 || (templateObject_2$13 = __makeTemp
|
|
|
5305
5305
|
var ClubOfferTag = function (_a) {
|
|
5306
5306
|
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;
|
|
5307
5307
|
var theme = useTheme();
|
|
5308
|
-
return (jsx$1(Container
|
|
5308
|
+
return (jsx$1(Container$11, __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));
|
|
5309
5309
|
};
|
|
5310
|
-
var templateObject_1$
|
|
5310
|
+
var templateObject_1$1F, templateObject_2$14;
|
|
5311
5311
|
|
|
5312
5312
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5313
5313
|
var _a, _b, _c;
|
|
@@ -5338,7 +5338,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5338
5338
|
};
|
|
5339
5339
|
}
|
|
5340
5340
|
};
|
|
5341
|
-
var Container$
|
|
5341
|
+
var Container$10 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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) {
|
|
5342
5342
|
var backgroundColor = _a.backgroundColor;
|
|
5343
5343
|
return backgroundColor;
|
|
5344
5344
|
}, function (_a) {
|
|
@@ -5360,7 +5360,7 @@ var Container$_ = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __
|
|
|
5360
5360
|
var size = _a.size;
|
|
5361
5361
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5362
5362
|
});
|
|
5363
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5363
|
+
var H3$2 = newStyled.h3(templateObject_2$13 || (templateObject_2$13 = __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) {
|
|
5364
5364
|
var textColor = _a.textColor;
|
|
5365
5365
|
return textColor;
|
|
5366
5366
|
}, function (_a) {
|
|
@@ -5375,9 +5375,9 @@ var H3$2 = newStyled.h3(templateObject_2$12 || (templateObject_2$12 = __makeTemp
|
|
|
5375
5375
|
var DiscountTag = function (_a) {
|
|
5376
5376
|
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;
|
|
5377
5377
|
var theme = useTheme();
|
|
5378
|
-
return (jsx$1(Container$
|
|
5378
|
+
return (jsx$1(Container$10, __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));
|
|
5379
5379
|
};
|
|
5380
|
-
var templateObject_1$
|
|
5380
|
+
var templateObject_1$1E, templateObject_2$13;
|
|
5381
5381
|
|
|
5382
5382
|
var getStylesBySize$b = function (size, theme) {
|
|
5383
5383
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5419,8 +5419,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5419
5419
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5420
5420
|
}
|
|
5421
5421
|
};
|
|
5422
|
-
var Container
|
|
5423
|
-
var Price = newStyled.p(templateObject_2$
|
|
5422
|
+
var Container$$ = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5423
|
+
var Price = newStyled.p(templateObject_2$12 || (templateObject_2$12 = __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) {
|
|
5424
5424
|
var weight = _a.weight;
|
|
5425
5425
|
return (weight ? weight : '400');
|
|
5426
5426
|
}, function (_a) {
|
|
@@ -5444,7 +5444,7 @@ var Price = newStyled.p(templateObject_2$11 || (templateObject_2$11 = __makeTemp
|
|
|
5444
5444
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5445
5445
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5446
5446
|
});
|
|
5447
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5447
|
+
var TagContainer = newStyled.div(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5448
5448
|
var _b;
|
|
5449
5449
|
var size = _a.size;
|
|
5450
5450
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5475,11 +5475,11 @@ var PriceLabel = function (_a) {
|
|
|
5475
5475
|
: ComponentSize.XSmall;
|
|
5476
5476
|
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));
|
|
5477
5477
|
};
|
|
5478
|
-
return (jsxs$1(Container
|
|
5478
|
+
return (jsxs$1(Container$$, __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, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5479
5479
|
};
|
|
5480
|
-
var templateObject_1$
|
|
5480
|
+
var templateObject_1$1D, templateObject_2$12, templateObject_3$S;
|
|
5481
5481
|
|
|
5482
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5482
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5483
5483
|
var PriceLabelV2 = function (_a) {
|
|
5484
5484
|
var _b;
|
|
5485
5485
|
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, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem"]);
|
|
@@ -5530,7 +5530,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5530
5530
|
var savetoString = saveto.toFixed(2);
|
|
5531
5531
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5532
5532
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5533
|
-
return (jsxs$1(Container
|
|
5533
|
+
return (jsxs$1(Container$$, __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: {
|
|
5534
5534
|
marginTop: '-5px',
|
|
5535
5535
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5536
5536
|
? finalPriceArray[0]
|
|
@@ -5548,11 +5548,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5548
5548
|
lineHeight: '22px',
|
|
5549
5549
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5550
5550
|
};
|
|
5551
|
-
var templateObject_1$
|
|
5551
|
+
var templateObject_1$1C;
|
|
5552
5552
|
|
|
5553
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5554
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5555
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5553
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5554
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5555
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5556
5556
|
var PriceLabelV3 = function (_a) {
|
|
5557
5557
|
var _b;
|
|
5558
5558
|
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"]);
|
|
@@ -5607,7 +5607,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5607
5607
|
return null;
|
|
5608
5608
|
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));
|
|
5609
5609
|
};
|
|
5610
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container
|
|
5610
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$$, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$$, { 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: {
|
|
5611
5611
|
marginTop: '-5px',
|
|
5612
5612
|
} }, 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: {
|
|
5613
5613
|
marginTop: '-6px',
|
|
@@ -5623,10 +5623,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5623
5623
|
lineHeight: '22px',
|
|
5624
5624
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5625
5625
|
};
|
|
5626
|
-
var templateObject_1$
|
|
5626
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$R;
|
|
5627
5627
|
|
|
5628
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5629
|
-
var ContainerBase = newStyled.div(templateObject_2
|
|
5628
|
+
var FlexContainer = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5629
|
+
var ContainerBase = newStyled.div(templateObject_2$10 || (templateObject_2$10 = __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) {
|
|
5630
5630
|
var selected = _a.selected, theme = _a.theme;
|
|
5631
5631
|
return selected
|
|
5632
5632
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5640,30 +5640,30 @@ var ContainerBase = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __
|
|
|
5640
5640
|
var theme = _a.theme;
|
|
5641
5641
|
return theme.colors.pallete.primary.color;
|
|
5642
5642
|
});
|
|
5643
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5643
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$Q || (templateObject_3$Q = __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) {
|
|
5644
5644
|
var onClick = _a.onClick;
|
|
5645
5645
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5646
5646
|
});
|
|
5647
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5648
|
-
var SubscriptionHeader = newStyled.div(templateObject_5$
|
|
5647
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5648
|
+
var SubscriptionHeader = newStyled.div(templateObject_5$p || (templateObject_5$p = __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) {
|
|
5649
5649
|
var theme = _a.theme;
|
|
5650
5650
|
return theme.colors.shades[200].color;
|
|
5651
5651
|
}, function (_a) {
|
|
5652
5652
|
var theme = _a.theme;
|
|
5653
5653
|
return theme.colors.pallete.primary.color;
|
|
5654
5654
|
});
|
|
5655
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5656
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5657
|
-
var BenefitText = newStyled(Text$
|
|
5658
|
-
var SubscriptionDetails = newStyled(Text$
|
|
5655
|
+
var BenefitsContainer = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5656
|
+
var Benefit = newStyled.div(templateObject_7$g || (templateObject_7$g = __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"])));
|
|
5657
|
+
var BenefitText = newStyled(Text$9)(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5658
|
+
var SubscriptionDetails = newStyled(Text$9)(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5659
5659
|
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
5660
|
-
var DeliveryFrequencyLabel = newStyled(Text$
|
|
5660
|
+
var DeliveryFrequencyLabel = newStyled(Text$9)(templateObject_11$3 || (templateObject_11$3 = __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"])));
|
|
5661
5661
|
var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5662
5662
|
var selected = _a.selected, theme = _a.theme;
|
|
5663
5663
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5664
5664
|
});
|
|
5665
|
-
var Container$
|
|
5666
|
-
var templateObject_1$
|
|
5665
|
+
var Container$_ = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5666
|
+
var templateObject_1$1A, templateObject_2$10, templateObject_3$Q, templateObject_4$E, templateObject_5$p, templateObject_6$n, templateObject_7$g, templateObject_8$c, templateObject_9$6, templateObject_10$4, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5667
5667
|
|
|
5668
5668
|
var radioIds = {
|
|
5669
5669
|
oneTime: {
|
|
@@ -5713,17 +5713,17 @@ var Autoship = function (_a) {
|
|
|
5713
5713
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5714
5714
|
};
|
|
5715
5715
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5716
|
-
return (jsxs$1(Container$
|
|
5716
|
+
return (jsxs$1(Container$_, __assign$1({ className: className }, { children: [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'); } }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { 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'); } }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.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
|
|
5717
5717
|
? benefitsColor.selected
|
|
5718
5718
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __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, { 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));
|
|
5719
5719
|
};
|
|
5720
5720
|
|
|
5721
|
-
var Img = newStyled.img(templateObject_1$
|
|
5721
|
+
var Img = newStyled.img(templateObject_1$1z || (templateObject_1$1z = __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; });
|
|
5722
5722
|
var Image$3 = function (_a) {
|
|
5723
5723
|
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, className = _a.className;
|
|
5724
5724
|
return (jsx$1(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
5725
5725
|
};
|
|
5726
|
-
var templateObject_1$
|
|
5726
|
+
var templateObject_1$1z;
|
|
5727
5727
|
|
|
5728
5728
|
var _a$2;
|
|
5729
5729
|
var BeforeAfterVariant;
|
|
@@ -5738,13 +5738,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5738
5738
|
_a$2[ComponentSize.Large] = ComponentSize.Medium,
|
|
5739
5739
|
_a$2);
|
|
5740
5740
|
|
|
5741
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5742
|
-
var CustomerInfo = newStyled.div(templateObject_2
|
|
5743
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5744
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
5745
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
5746
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
5747
|
-
var templateObject_1$
|
|
5741
|
+
var CustomerDetails = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject([""], [""])));
|
|
5742
|
+
var CustomerInfo = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __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"])));
|
|
5743
|
+
var Name = newStyled.h4(templateObject_3$P || (templateObject_3$P = __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"])));
|
|
5744
|
+
var StarIconContainer = newStyled.div(templateObject_4$D || (templateObject_4$D = __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"])));
|
|
5745
|
+
var Description$2 = newStyled.p(templateObject_5$o || (templateObject_5$o = __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"])));
|
|
5746
|
+
var ReviewDays = newStyled.span(templateObject_6$m || (templateObject_6$m = __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"])));
|
|
5747
|
+
var templateObject_1$1y, templateObject_2$$, templateObject_3$P, templateObject_4$D, templateObject_5$o, templateObject_6$m;
|
|
5748
5748
|
|
|
5749
5749
|
var NameWithStars = function (_a) {
|
|
5750
5750
|
var name = _a.name, size = _a.size;
|
|
@@ -5762,10 +5762,10 @@ var ResultFeedback = function (_a) {
|
|
|
5762
5762
|
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));
|
|
5763
5763
|
};
|
|
5764
5764
|
|
|
5765
|
-
var Container$
|
|
5766
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5767
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5768
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
5765
|
+
var Container$Z = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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; });
|
|
5766
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
5767
|
+
var ImageCard = newStyled.div(templateObject_3$O || (templateObject_3$O = __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; });
|
|
5768
|
+
var UserInfoText = newStyled.div(templateObject_4$C || (templateObject_4$C = __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) {
|
|
5769
5769
|
var theme = _a.theme;
|
|
5770
5770
|
return theme.colors.pallete.secondary.color;
|
|
5771
5771
|
}, function (_a) {
|
|
@@ -5775,7 +5775,7 @@ var UserInfoText = newStyled.div(templateObject_4$B || (templateObject_4$B = __m
|
|
|
5775
5775
|
var theme = _a.theme, size = _a.size;
|
|
5776
5776
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5777
5777
|
});
|
|
5778
|
-
var templateObject_1$
|
|
5778
|
+
var templateObject_1$1x, templateObject_2$_, templateObject_3$O, templateObject_4$C;
|
|
5779
5779
|
|
|
5780
5780
|
/* base styles & size variants */
|
|
5781
5781
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5850,10 +5850,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
5850
5850
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5851
5851
|
var infoText = buildInfoText(name, age, months);
|
|
5852
5852
|
var Component = componentByVariant[variant];
|
|
5853
|
-
return (jsxs$1(Container$
|
|
5853
|
+
return (jsxs$1(Container$Z, __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));
|
|
5854
5854
|
};
|
|
5855
5855
|
|
|
5856
|
-
var Section = newStyled.div(templateObject_1$
|
|
5856
|
+
var Section = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
5857
5857
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5858
5858
|
});
|
|
5859
5859
|
var CardHeader = function (_a) {
|
|
@@ -5864,16 +5864,16 @@ var CardFooter = function (_a) {
|
|
|
5864
5864
|
var children = _a.children;
|
|
5865
5865
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
5866
5866
|
};
|
|
5867
|
-
var templateObject_1$
|
|
5867
|
+
var templateObject_1$1w;
|
|
5868
5868
|
|
|
5869
|
-
var Body = newStyled.div(templateObject_1$
|
|
5869
|
+
var Body = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
5870
5870
|
var CardBody = function (_a) {
|
|
5871
5871
|
var children = _a.children;
|
|
5872
5872
|
return jsx$1(Body, { children: children }, void 0);
|
|
5873
5873
|
};
|
|
5874
|
-
var templateObject_1$
|
|
5874
|
+
var templateObject_1$1v;
|
|
5875
5875
|
|
|
5876
|
-
var Container$
|
|
5876
|
+
var Container$Y = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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) {
|
|
5877
5877
|
var flex = _a.flex;
|
|
5878
5878
|
return flex &&
|
|
5879
5879
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5888,23 +5888,23 @@ var Container$W = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __
|
|
|
5888
5888
|
var Card$1 = function (_a) {
|
|
5889
5889
|
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;
|
|
5890
5890
|
var theme = useTheme();
|
|
5891
|
-
return (jsx$1(Container$
|
|
5891
|
+
return (jsx$1(Container$Y, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
5892
5892
|
};
|
|
5893
5893
|
var Card$2 = Object.assign(Card$1, {
|
|
5894
5894
|
Header: CardHeader,
|
|
5895
5895
|
Footer: CardFooter,
|
|
5896
5896
|
Body: CardBody,
|
|
5897
5897
|
});
|
|
5898
|
-
var templateObject_1$
|
|
5898
|
+
var templateObject_1$1u;
|
|
5899
5899
|
|
|
5900
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5901
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
5902
|
-
var TextLabel = newStyled(Text$
|
|
5900
|
+
var StyledWrapper = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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"])));
|
|
5901
|
+
var StyledContainer = newStyled.div(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
5902
|
+
var TextLabel = newStyled(Text$9)(templateObject_3$N || (templateObject_3$N = __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) {
|
|
5903
5903
|
var color = _a.color;
|
|
5904
5904
|
return color;
|
|
5905
5905
|
});
|
|
5906
|
-
var YouAreSaving = newStyled(Text$
|
|
5907
|
-
var templateObject_1$
|
|
5906
|
+
var YouAreSaving = newStyled(Text$9)(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
5907
|
+
var templateObject_1$1t, templateObject_2$Z, templateObject_3$N, templateObject_4$B;
|
|
5908
5908
|
|
|
5909
5909
|
var Minimalistic = function (_a) {
|
|
5910
5910
|
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;
|
|
@@ -5912,28 +5912,28 @@ var Minimalistic = function (_a) {
|
|
|
5912
5912
|
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));
|
|
5913
5913
|
};
|
|
5914
5914
|
|
|
5915
|
-
var Container$
|
|
5916
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5917
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5918
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
5915
|
+
var Container$X = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5916
|
+
var Title$6 = newStyled.h1(templateObject_2$Y || (templateObject_2$Y = __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; });
|
|
5917
|
+
var Details$1 = newStyled.span(templateObject_3$M || (templateObject_3$M = __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; });
|
|
5918
|
+
var PriceContainer$2 = newStyled.span(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
5919
5919
|
var Simple = function (_a) {
|
|
5920
5920
|
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;
|
|
5921
5921
|
var theme = useTheme();
|
|
5922
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
5922
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$X, { 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));
|
|
5923
5923
|
};
|
|
5924
|
-
var templateObject_1$
|
|
5924
|
+
var templateObject_1$1s, templateObject_2$Y, templateObject_3$M, templateObject_4$A;
|
|
5925
5925
|
|
|
5926
5926
|
var Bundle = {
|
|
5927
5927
|
Minimalistic: Minimalistic,
|
|
5928
5928
|
Simple: Simple,
|
|
5929
5929
|
};
|
|
5930
5930
|
|
|
5931
|
-
var Container$
|
|
5931
|
+
var Container$W = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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) {
|
|
5932
5932
|
var displayBNPL = _a.displayBNPL;
|
|
5933
5933
|
return (displayBNPL ? 'flex' : 'none');
|
|
5934
5934
|
});
|
|
5935
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5936
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
5935
|
+
var TextContainer$1 = newStyled.div(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
5936
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
5937
5937
|
var BuyNowPayLater = function (_a) {
|
|
5938
5938
|
var _b;
|
|
5939
5939
|
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;
|
|
@@ -5943,43 +5943,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
5943
5943
|
console.error('Icon', iconName, 'not found');
|
|
5944
5944
|
return null;
|
|
5945
5945
|
}
|
|
5946
|
-
return (jsx$1(Container$
|
|
5946
|
+
return (jsx$1(Container$W, __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$9, __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));
|
|
5947
5947
|
};
|
|
5948
|
-
var templateObject_1$
|
|
5948
|
+
var templateObject_1$1r, templateObject_2$X, templateObject_3$L;
|
|
5949
5949
|
|
|
5950
|
-
var Text$
|
|
5950
|
+
var Text$8 = newStyled.span(templateObject_1$1q || (templateObject_1$1q = __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; });
|
|
5951
5951
|
var Title$5 = function (_a) {
|
|
5952
5952
|
var title = _a.title;
|
|
5953
5953
|
var theme = useTheme();
|
|
5954
|
-
return jsx$1(Text$
|
|
5954
|
+
return jsx$1(Text$8, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5955
5955
|
};
|
|
5956
|
-
var templateObject_1$
|
|
5956
|
+
var templateObject_1$1q;
|
|
5957
5957
|
|
|
5958
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5958
|
+
var P$3 = newStyled.p(templateObject_1$1p || (templateObject_1$1p = __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; });
|
|
5959
5959
|
var Promo = function (_a) {
|
|
5960
5960
|
var text = _a.text;
|
|
5961
5961
|
var theme = useTheme();
|
|
5962
5962
|
return (jsx$1(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5963
5963
|
};
|
|
5964
|
-
var templateObject_1$
|
|
5964
|
+
var templateObject_1$1p;
|
|
5965
5965
|
|
|
5966
|
-
var Text$
|
|
5966
|
+
var Text$7 = newStyled.span(templateObject_1$1o || (templateObject_1$1o = __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; });
|
|
5967
5967
|
var Description$1 = function (_a) {
|
|
5968
5968
|
var text = _a.text;
|
|
5969
5969
|
var theme = useTheme();
|
|
5970
|
-
return jsx$1(Text$
|
|
5970
|
+
return jsx$1(Text$7, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5971
5971
|
};
|
|
5972
|
-
var templateObject_1$
|
|
5972
|
+
var templateObject_1$1o;
|
|
5973
5973
|
|
|
5974
|
-
var Container$
|
|
5974
|
+
var Container$V = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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"); });
|
|
5975
5975
|
var CloseButton$1 = function (_a) {
|
|
5976
5976
|
var onClick = _a.onClick, size = _a.size;
|
|
5977
5977
|
var theme = useTheme();
|
|
5978
|
-
return (jsx$1(Container$
|
|
5978
|
+
return (jsx$1(Container$V, __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));
|
|
5979
5979
|
};
|
|
5980
|
-
var templateObject_1$
|
|
5980
|
+
var templateObject_1$1n;
|
|
5981
5981
|
|
|
5982
|
-
var Text$
|
|
5982
|
+
var Text$6 = newStyled.h3(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
5983
5983
|
var backgroundColor = _a.backgroundColor;
|
|
5984
5984
|
return backgroundColor;
|
|
5985
5985
|
}, function (_a) {
|
|
@@ -5992,9 +5992,9 @@ var Text$5 = newStyled.h3(templateObject_1$1k || (templateObject_1$1k = __makeTe
|
|
|
5992
5992
|
var OfferBanner = function (_a) {
|
|
5993
5993
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
5994
5994
|
var theme = useTheme();
|
|
5995
|
-
return (jsx$1(Text$
|
|
5995
|
+
return (jsx$1(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
5996
5996
|
};
|
|
5997
|
-
var templateObject_1$
|
|
5997
|
+
var templateObject_1$1m;
|
|
5998
5998
|
|
|
5999
5999
|
var CartProductItem = {
|
|
6000
6000
|
Title: Title$5,
|
|
@@ -6004,20 +6004,20 @@ var CartProductItem = {
|
|
|
6004
6004
|
CloseButton: CloseButton$1,
|
|
6005
6005
|
};
|
|
6006
6006
|
|
|
6007
|
-
var Container$
|
|
6008
|
-
var MobileContainer = newStyled(Container$
|
|
6009
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6010
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6011
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6012
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6013
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6014
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6007
|
+
var Container$U = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
6008
|
+
var MobileContainer = newStyled(Container$U)(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6009
|
+
var DollarPart = newStyled.span(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
6010
|
+
var ClubMembersText = newStyled.span(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
6011
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6012
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6013
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6014
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6015
6015
|
var ClubPriceLabel = function (_a) {
|
|
6016
6016
|
var clubPrice = _a.clubPrice;
|
|
6017
6017
|
var isMobile = useWindowDimensions().isMobile;
|
|
6018
|
-
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$
|
|
6018
|
+
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$U, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6019
6019
|
};
|
|
6020
|
-
var templateObject_1$
|
|
6020
|
+
var templateObject_1$1l, templateObject_2$W, templateObject_3$K, templateObject_4$z, templateObject_5$n, templateObject_6$l, templateObject_7$f, templateObject_8$b;
|
|
6021
6021
|
|
|
6022
6022
|
var Spacing = function (_a) {
|
|
6023
6023
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6025,10 +6025,10 @@ var Spacing = function (_a) {
|
|
|
6025
6025
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6026
6026
|
};
|
|
6027
6027
|
|
|
6028
|
-
var Container$
|
|
6029
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6030
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6031
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6028
|
+
var Container$T = newStyled('div')(templateObject_1$1k || (templateObject_1$1k = __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"])));
|
|
6029
|
+
var Content$2 = newStyled('div')(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
6030
|
+
var BarContainer$1 = newStyled('div')(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
6031
|
+
var Bar$2 = newStyled('div')(templateObject_4$y || (templateObject_4$y = __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) {
|
|
6032
6032
|
var index = _a.index;
|
|
6033
6033
|
return "".concat(6 + 3 * index, "px");
|
|
6034
6034
|
}, function (_a) {
|
|
@@ -6037,14 +6037,14 @@ var Bar$2 = newStyled('div')(templateObject_4$x || (templateObject_4$x = __makeT
|
|
|
6037
6037
|
});
|
|
6038
6038
|
var StrengthBars = function (_a) {
|
|
6039
6039
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6040
|
-
return (jsxs$1(Container$
|
|
6040
|
+
return (jsxs$1(Container$T, __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));
|
|
6041
6041
|
};
|
|
6042
|
-
var templateObject_1$
|
|
6042
|
+
var templateObject_1$1k, templateObject_2$V, templateObject_3$J, templateObject_4$y;
|
|
6043
6043
|
|
|
6044
|
-
var Container$
|
|
6045
|
-
var templateObject_1$
|
|
6044
|
+
var Container$S = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6045
|
+
var templateObject_1$1j;
|
|
6046
6046
|
|
|
6047
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6047
|
+
var StarContainer = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6048
6048
|
var marginRight = _a.marginRight;
|
|
6049
6049
|
return marginRight;
|
|
6050
6050
|
});
|
|
@@ -6056,11 +6056,11 @@ var StarList = function (_a) {
|
|
|
6056
6056
|
width: theme.component.stars.element[size].width,
|
|
6057
6057
|
height: theme.component.stars.element[size].height,
|
|
6058
6058
|
};
|
|
6059
|
-
return (jsx$1(Container$
|
|
6059
|
+
return (jsx$1(Container$S, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6060
6060
|
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)));
|
|
6061
6061
|
}) }, void 0));
|
|
6062
6062
|
};
|
|
6063
|
-
var templateObject_1$
|
|
6063
|
+
var templateObject_1$1i;
|
|
6064
6064
|
|
|
6065
6065
|
/* base styles & size variants */
|
|
6066
6066
|
var LabelStyles = {
|
|
@@ -6101,8 +6101,8 @@ var LabelStyles = {
|
|
|
6101
6101
|
});
|
|
6102
6102
|
},
|
|
6103
6103
|
};
|
|
6104
|
-
var Container$
|
|
6105
|
-
var templateObject_1$
|
|
6104
|
+
var Container$R = newStyled.a(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
6105
|
+
var templateObject_1$1h;
|
|
6106
6106
|
|
|
6107
6107
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6108
6108
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6122,7 +6122,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6122
6122
|
}),
|
|
6123
6123
|
];
|
|
6124
6124
|
});
|
|
6125
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6125
|
+
var RatingLabel = newStyled.span(templateObject_1$1g || (templateObject_1$1g = __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; });
|
|
6126
6126
|
var starsNumber = 5;
|
|
6127
6127
|
var Rating = function (_a) {
|
|
6128
6128
|
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;
|
|
@@ -6143,14 +6143,14 @@ var Rating = function (_a) {
|
|
|
6143
6143
|
href: reviewsContainerId,
|
|
6144
6144
|
}
|
|
6145
6145
|
: {};
|
|
6146
|
-
return (jsxs$1(Container$
|
|
6146
|
+
return (jsxs$1(Container$R, __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));
|
|
6147
6147
|
};
|
|
6148
|
-
var templateObject_1$
|
|
6148
|
+
var templateObject_1$1g;
|
|
6149
6149
|
|
|
6150
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6151
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6152
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6153
|
-
var PriceWithTagContainer = newStyled.span(templateObject_4$
|
|
6150
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1f || (templateObject_1$1f = __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"])));
|
|
6151
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$U || (templateObject_2$U = __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"])));
|
|
6152
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6153
|
+
var PriceWithTagContainer = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n display: flex;\n gap: 5px;\n"], ["\n display: flex;\n gap: 5px;\n"])));
|
|
6154
6154
|
var RegularPriceTag = function () {
|
|
6155
6155
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6156
6156
|
};
|
|
@@ -6199,11 +6199,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
6199
6199
|
: ComponentSize.XSmall;
|
|
6200
6200
|
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));
|
|
6201
6201
|
};
|
|
6202
|
-
return (jsxs$1(Container
|
|
6202
|
+
return (jsxs$1(Container$$, __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: [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]
|
|
6203
6203
|
? finalPriceArray[0]
|
|
6204
6204
|
: (_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), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6205
6205
|
};
|
|
6206
|
-
var templateObject_1$
|
|
6206
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$I, templateObject_4$x;
|
|
6207
6207
|
|
|
6208
6208
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6209
6209
|
var width = _a.width, height = _a.height;
|
|
@@ -6213,10 +6213,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6213
6213
|
height: height,
|
|
6214
6214
|
});
|
|
6215
6215
|
});
|
|
6216
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6217
|
-
var Container$
|
|
6218
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6219
|
-
var Title$4 = newStyled.p(templateObject_4$
|
|
6216
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1e || (templateObject_1$1e = __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"])));
|
|
6217
|
+
var Container$Q = newStyled.a(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
6218
|
+
var ProdCardContainer$1 = newStyled.div(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
6219
|
+
var Title$4 = newStyled.p(templateObject_4$w || (templateObject_4$w = __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; });
|
|
6220
6220
|
var getStylesBySize$9 = function (size) {
|
|
6221
6221
|
switch (size) {
|
|
6222
6222
|
case ComponentSize.Medium:
|
|
@@ -6242,15 +6242,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6242
6242
|
};
|
|
6243
6243
|
}
|
|
6244
6244
|
};
|
|
6245
|
-
var TopTagContainer$
|
|
6245
|
+
var TopTagContainer$5 = newStyled.div(templateObject_5$m || (templateObject_5$m = __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) {
|
|
6246
6246
|
var style = _a.style;
|
|
6247
6247
|
return style.width;
|
|
6248
6248
|
});
|
|
6249
|
-
var BottomTagContainer$
|
|
6249
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_6$k || (templateObject_6$k = __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) {
|
|
6250
6250
|
var style = _a.style;
|
|
6251
6251
|
return style.width;
|
|
6252
6252
|
});
|
|
6253
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6253
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6254
6254
|
var ProductItemMobile = function (_a) {
|
|
6255
6255
|
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 ? {
|
|
6256
6256
|
display: false,
|
|
@@ -6307,9 +6307,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6307
6307
|
return jsx(Fragment, {}, void 0);
|
|
6308
6308
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6309
6309
|
};
|
|
6310
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6310
|
+
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$Q, __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$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)] }), 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$Q, __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));
|
|
6311
6311
|
};
|
|
6312
|
-
var templateObject_1$
|
|
6312
|
+
var templateObject_1$1e, templateObject_2$T, templateObject_3$H, templateObject_4$w, templateObject_5$m, templateObject_6$k, templateObject_7$e;
|
|
6313
6313
|
|
|
6314
6314
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6315
6315
|
var width = _a.width, height = _a.height;
|
|
@@ -6319,10 +6319,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6319
6319
|
height: height,
|
|
6320
6320
|
});
|
|
6321
6321
|
});
|
|
6322
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6323
|
-
var Container$
|
|
6324
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6325
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
6322
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1d || (templateObject_1$1d = __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; });
|
|
6323
|
+
var Container$P = newStyled.a(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
6324
|
+
var ProdCardContainer = newStyled.div(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
6325
|
+
var Title$3 = newStyled.p(templateObject_4$v || (templateObject_4$v = __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; });
|
|
6326
6326
|
var getStylesBySize$8 = function (size) {
|
|
6327
6327
|
switch (size) {
|
|
6328
6328
|
case ComponentSize.Medium:
|
|
@@ -6348,15 +6348,15 @@ var getStylesBySize$8 = function (size) {
|
|
|
6348
6348
|
};
|
|
6349
6349
|
}
|
|
6350
6350
|
};
|
|
6351
|
-
var TopTagContainer$
|
|
6351
|
+
var TopTagContainer$4 = newStyled.div(templateObject_5$l || (templateObject_5$l = __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) {
|
|
6352
6352
|
var style = _a.style;
|
|
6353
6353
|
return style.width;
|
|
6354
6354
|
});
|
|
6355
|
-
var BottomTagContainer$
|
|
6355
|
+
var BottomTagContainer$4 = newStyled.div(templateObject_6$j || (templateObject_6$j = __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) {
|
|
6356
6356
|
var style = _a.style;
|
|
6357
6357
|
return style.width;
|
|
6358
6358
|
});
|
|
6359
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
6359
|
+
var MarginTopContainer = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6360
6360
|
var ProductItemTK = function (_a) {
|
|
6361
6361
|
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, 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 ? {
|
|
6362
6362
|
display: false,
|
|
@@ -6400,26 +6400,26 @@ var ProductItemTK = function (_a) {
|
|
|
6400
6400
|
: undefined }, void 0));
|
|
6401
6401
|
};
|
|
6402
6402
|
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)); };
|
|
6403
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6403
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$P, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (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$4, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$4, __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, 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$P, __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 ? (
|
|
6404
6404
|
// @ts-ignore
|
|
6405
|
-
jsx(Text$
|
|
6405
|
+
jsx(Text$9, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6406
6406
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6407
6407
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6408
6408
|
} }, { 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));
|
|
6409
6409
|
};
|
|
6410
|
-
var templateObject_1$
|
|
6410
|
+
var templateObject_1$1d, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6411
6411
|
|
|
6412
|
-
var Container$
|
|
6412
|
+
var Container$O = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
6413
6413
|
function withProductGrid(ProductItemComponent, data) {
|
|
6414
6414
|
function WithProductGrid(props) {
|
|
6415
|
-
return (jsx$1(Container$
|
|
6415
|
+
return (jsx$1(Container$O, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6416
6416
|
}
|
|
6417
6417
|
/* istanbul ignore next */
|
|
6418
6418
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6419
6419
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6420
6420
|
return WithProductGrid;
|
|
6421
6421
|
}
|
|
6422
|
-
var templateObject_1$
|
|
6422
|
+
var templateObject_1$1c;
|
|
6423
6423
|
|
|
6424
6424
|
var Collection = {
|
|
6425
6425
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6466,14 +6466,14 @@ var OutOfStock = function (_a) {
|
|
|
6466
6466
|
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));
|
|
6467
6467
|
};
|
|
6468
6468
|
|
|
6469
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6470
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6471
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6472
|
-
var Span = newStyled.span(templateObject_4$
|
|
6473
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6469
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6470
|
+
newStyled(lt.Label)(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6471
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
6472
|
+
var Span = newStyled.span(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6473
|
+
var OptionsContainer = newStyled.div(templateObject_5$k || (templateObject_5$k = __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"])));
|
|
6474
6474
|
var Label$2 = function (_a) {
|
|
6475
6475
|
var label = _a.label, values = _a.values;
|
|
6476
|
-
return (jsxs$1(Text$
|
|
6476
|
+
return (jsxs$1(Text$9, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
6477
6477
|
};
|
|
6478
6478
|
var Option = function (_a) {
|
|
6479
6479
|
var value = _a.value, children = _a.children;
|
|
@@ -6488,23 +6488,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6488
6488
|
Option: Option,
|
|
6489
6489
|
OptionsContainer: OptionsContainer,
|
|
6490
6490
|
});
|
|
6491
|
-
var templateObject_1$
|
|
6491
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$k;
|
|
6492
6492
|
|
|
6493
|
-
var Container$
|
|
6493
|
+
var Container$N = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
6494
6494
|
var borderColor = _a.borderColor;
|
|
6495
6495
|
return borderColor;
|
|
6496
6496
|
}, function (_a) {
|
|
6497
6497
|
var noStock = _a.noStock;
|
|
6498
6498
|
return (noStock ? '0.4' : '1');
|
|
6499
6499
|
});
|
|
6500
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6500
|
+
var Image$2 = newStyled.img(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6501
6501
|
var PatternSelector = function (_a) {
|
|
6502
6502
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6503
6503
|
var theme = useTheme();
|
|
6504
6504
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6505
|
-
return (jsx$1(Container$
|
|
6505
|
+
return (jsx$1(Container$N, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6506
6506
|
};
|
|
6507
|
-
var templateObject_1$
|
|
6507
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
6508
6508
|
|
|
6509
6509
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6510
6510
|
if (options == null || options.length === 0) {
|
|
@@ -6563,21 +6563,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6563
6563
|
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));
|
|
6564
6564
|
};
|
|
6565
6565
|
|
|
6566
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6567
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6568
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6566
|
+
var Wrapper$5 = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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'); });
|
|
6567
|
+
var Col$1 = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6568
|
+
var Row$2 = newStyled.div(templateObject_3$E || (templateObject_3$E = __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) {
|
|
6569
6569
|
return props.rightToLeft &&
|
|
6570
6570
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6571
6571
|
});
|
|
6572
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6573
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6574
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6572
|
+
var H5 = newStyled.h5(templateObject_4$t || (templateObject_4$t = __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; });
|
|
6573
|
+
var H3$1 = newStyled.h3(templateObject_5$j || (templateObject_5$j = __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; });
|
|
6574
|
+
var FreeShipping = newStyled.span(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6575
6575
|
var CrossSellCheckbox = function (_a) {
|
|
6576
6576
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6577
6577
|
var theme = useTheme();
|
|
6578
6578
|
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));
|
|
6579
6579
|
};
|
|
6580
|
-
var templateObject_1$
|
|
6580
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$j, templateObject_6$i;
|
|
6581
6581
|
|
|
6582
6582
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6583
6583
|
__proto__: null,
|
|
@@ -6605,7 +6605,7 @@ var sizeMapper = (_a = {},
|
|
|
6605
6605
|
_a[ComponentSize.Large] = 'large',
|
|
6606
6606
|
_a[ComponentSize.XSmall] = 'small',
|
|
6607
6607
|
_a);
|
|
6608
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6608
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
6609
6609
|
var wide = _a.wide;
|
|
6610
6610
|
return (wide ? '100%' : 'fit-content');
|
|
6611
6611
|
}, function (_a) {
|
|
@@ -6627,8 +6627,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$16 || (templateObj
|
|
|
6627
6627
|
var theme = _a.theme;
|
|
6628
6628
|
return theme.colors.text.disabled;
|
|
6629
6629
|
});
|
|
6630
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6631
|
-
var templateObject_1$
|
|
6630
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6631
|
+
var templateObject_1$18, templateObject_2$O;
|
|
6632
6632
|
|
|
6633
6633
|
var BaseCTA = function (_a) {
|
|
6634
6634
|
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"]);
|
|
@@ -6695,44 +6695,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6695
6695
|
} }), void 0));
|
|
6696
6696
|
};
|
|
6697
6697
|
|
|
6698
|
-
var Container$
|
|
6699
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6700
|
-
var Text$
|
|
6701
|
-
var Details = newStyled.span(templateObject_4$
|
|
6698
|
+
var Container$M = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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; });
|
|
6699
|
+
var IconContainer$4 = newStyled.div(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
6700
|
+
var Text$5 = newStyled.p(templateObject_3$D || (templateObject_3$D = __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; });
|
|
6701
|
+
var Details = newStyled.span(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
6702
6702
|
var Note = function (_a) {
|
|
6703
6703
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6704
6704
|
var theme = useTheme();
|
|
6705
|
-
return (jsxs$1(Container$
|
|
6705
|
+
return (jsxs$1(Container$M, __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$5, __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));
|
|
6706
6706
|
};
|
|
6707
|
-
var templateObject_1$
|
|
6707
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$D, templateObject_4$s;
|
|
6708
6708
|
|
|
6709
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6709
|
+
var Title$2 = newStyled.h1(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
6710
6710
|
var theme = _a.theme;
|
|
6711
6711
|
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 ");
|
|
6712
6712
|
});
|
|
6713
|
-
var Line = newStyled.div(templateObject_2$
|
|
6714
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6713
|
+
var Line = newStyled.div(templateObject_2$M || (templateObject_2$M = __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; });
|
|
6714
|
+
var Row$1 = newStyled.div(templateObject_3$C || (templateObject_3$C = __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({
|
|
6715
6715
|
flexDirection: ['column', 'row'],
|
|
6716
6716
|
}));
|
|
6717
|
-
var Col = newStyled.div(templateObject_4$
|
|
6717
|
+
var Col = newStyled.div(templateObject_4$r || (templateObject_4$r = __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({
|
|
6718
6718
|
margin: ['0', '0 1.25rem'],
|
|
6719
6719
|
marginBottom: ['1.875rem', '0'],
|
|
6720
6720
|
alignItems: ['center', 'flex-start'],
|
|
6721
6721
|
textAlign: ['center', 'inherit'],
|
|
6722
6722
|
width: ['100%', 'inherit'],
|
|
6723
6723
|
}));
|
|
6724
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
6724
|
+
var IconContainer$3 = newStyled.div(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
6725
6725
|
marginRight: ['0', '0.438rem'],
|
|
6726
6726
|
marginBottom: ['10px', '0'],
|
|
6727
6727
|
width: ['auto', '1.5rem'],
|
|
6728
6728
|
}));
|
|
6729
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6729
|
+
var SectionTitle = newStyled.h1(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
6730
6730
|
display: ['block', 'flex'],
|
|
6731
6731
|
}), function (_a) {
|
|
6732
6732
|
var theme = _a.theme;
|
|
6733
6733
|
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 ");
|
|
6734
6734
|
});
|
|
6735
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6735
|
+
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) {
|
|
6736
6736
|
var theme = _a.theme;
|
|
6737
6737
|
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 ");
|
|
6738
6738
|
}, function (_a) {
|
|
@@ -6743,22 +6743,22 @@ var SectionDetails = newStyled.p(templateObject_7$b || (templateObject_7$b = __m
|
|
|
6743
6743
|
})
|
|
6744
6744
|
: '';
|
|
6745
6745
|
});
|
|
6746
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
6746
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$a || (templateObject_8$a = __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; });
|
|
6747
6747
|
var DeliveryDetails = function (_a) {
|
|
6748
6748
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6749
6749
|
var theme = useTheme();
|
|
6750
6750
|
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));
|
|
6751
6751
|
};
|
|
6752
|
-
var templateObject_1$
|
|
6752
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$C, templateObject_4$r, templateObject_5$i, templateObject_6$h, templateObject_7$c, templateObject_8$a;
|
|
6753
6753
|
|
|
6754
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6754
|
+
var Backdrop = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
6755
6755
|
var top = _a.top;
|
|
6756
6756
|
return top;
|
|
6757
6757
|
}, function (_a) {
|
|
6758
6758
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6759
6759
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6760
6760
|
});
|
|
6761
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6761
|
+
var Sidebar = newStyled.div(templateObject_2$L || (templateObject_2$L = __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) {
|
|
6762
6762
|
var height = _a.height;
|
|
6763
6763
|
return height;
|
|
6764
6764
|
}, function (_a) {
|
|
@@ -6805,20 +6805,20 @@ var Drawer = function (_a) {
|
|
|
6805
6805
|
}, [isOpen, onClose, onOpen]);
|
|
6806
6806
|
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;
|
|
6807
6807
|
};
|
|
6808
|
-
var templateObject_1$
|
|
6808
|
+
var templateObject_1$15, templateObject_2$L;
|
|
6809
6809
|
|
|
6810
6810
|
var TooltipArrow = function (_a) {
|
|
6811
6811
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6812
6812
|
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));
|
|
6813
6813
|
};
|
|
6814
6814
|
|
|
6815
|
-
var List = newStyled.ul(templateObject_1$
|
|
6816
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6817
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
6818
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
6819
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
6820
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
6821
|
-
var templateObject_1$
|
|
6815
|
+
var List = newStyled.ul(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
6816
|
+
var Item$2 = newStyled.li(templateObject_2$K || (templateObject_2$K = __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"])));
|
|
6817
|
+
var DropdownWrapper = newStyled.div(templateObject_3$B || (templateObject_3$B = __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"])));
|
|
6818
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
6819
|
+
var StyledDropdown = newStyled.ul(templateObject_5$h || (templateObject_5$h = __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; });
|
|
6820
|
+
var DropdownItem = newStyled.li(templateObject_6$g || (templateObject_6$g = __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; });
|
|
6821
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$g;
|
|
6822
6822
|
|
|
6823
6823
|
var DropdownListIcons = function (_a) {
|
|
6824
6824
|
var items = _a.items;
|
|
@@ -6831,13 +6831,13 @@ var Dropdown = function (_a) {
|
|
|
6831
6831
|
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));
|
|
6832
6832
|
};
|
|
6833
6833
|
|
|
6834
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
6835
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6836
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
6837
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
6838
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
6839
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
6840
|
-
var templateObject_1$
|
|
6834
|
+
var DropdownContainer = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
6835
|
+
var DropdownLabel = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
6836
|
+
var SizeLabel = newStyled.span(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6837
|
+
var DetailLabel = newStyled.span(templateObject_4$p || (templateObject_4$p = __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"])));
|
|
6838
|
+
var DropdownOptions = newStyled.div(templateObject_5$g || (templateObject_5$g = __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"])));
|
|
6839
|
+
var DropdownOption = newStyled.div(templateObject_6$f || (templateObject_6$f = __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"])));
|
|
6840
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$A, templateObject_4$p, templateObject_5$g, templateObject_6$f;
|
|
6841
6841
|
|
|
6842
6842
|
var SizeDropdown = function (_a) {
|
|
6843
6843
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6860,10 +6860,10 @@ var SizeDropdown = function (_a) {
|
|
|
6860
6860
|
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));
|
|
6861
6861
|
};
|
|
6862
6862
|
|
|
6863
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6864
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6865
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
6866
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
6863
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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; });
|
|
6864
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$I || (templateObject_2$I = __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; });
|
|
6865
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$z || (templateObject_3$z = __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"])));
|
|
6866
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$o || (templateObject_4$o = __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"])));
|
|
6867
6867
|
var DropdownDialog = function (_a) {
|
|
6868
6868
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
6869
6869
|
var theme = useTheme$1();
|
|
@@ -6872,7 +6872,7 @@ var DropdownDialog = function (_a) {
|
|
|
6872
6872
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6873
6873
|
}) }), void 0) }), void 0));
|
|
6874
6874
|
};
|
|
6875
|
-
var templateObject_1$
|
|
6875
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$z, templateObject_4$o;
|
|
6876
6876
|
|
|
6877
6877
|
function FilteringDropdown(_a) {
|
|
6878
6878
|
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;
|
|
@@ -6905,29 +6905,29 @@ function FilteringDropdown(_a) {
|
|
|
6905
6905
|
}) }, void 0)] }), void 0));
|
|
6906
6906
|
}
|
|
6907
6907
|
|
|
6908
|
-
var Title$1 = newStyled.div(templateObject_1
|
|
6909
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6910
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
6911
|
-
var Container$
|
|
6908
|
+
var Title$1 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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; });
|
|
6909
|
+
var H3 = newStyled.h3(templateObject_2$H || (templateObject_2$H = __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; });
|
|
6910
|
+
var ArrowContainer = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
6911
|
+
var Container$L = newStyled.div(templateObject_4$n || (templateObject_4$n = __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'); });
|
|
6912
6912
|
var Accordion = function (_a) {
|
|
6913
6913
|
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;
|
|
6914
6914
|
var theme = useTheme();
|
|
6915
6915
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6916
|
-
return (jsxs$1(Container$
|
|
6916
|
+
return (jsxs$1(Container$L, __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));
|
|
6917
6917
|
};
|
|
6918
|
-
var templateObject_1
|
|
6919
|
-
|
|
6920
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6921
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6922
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
6923
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
6924
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
6925
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
6926
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
6927
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
6928
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
6918
|
+
var templateObject_1$11, templateObject_2$H, templateObject_3$y, templateObject_4$n;
|
|
6919
|
+
|
|
6920
|
+
var SectionContent = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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; });
|
|
6921
|
+
var Header$1 = newStyled.div(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
6922
|
+
var MobileHeader = newStyled.div(templateObject_3$x || (templateObject_3$x = __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"])));
|
|
6923
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __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"])));
|
|
6924
|
+
var H4 = newStyled.h4(templateObject_5$f || (templateObject_5$f = __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; });
|
|
6925
|
+
var FilterLink = newStyled.a(templateObject_6$e || (templateObject_6$e = __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; });
|
|
6926
|
+
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'); });
|
|
6927
|
+
var ClearAll = newStyled.span(templateObject_8$9 || (templateObject_8$9 = __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; });
|
|
6928
|
+
var MobileFooter = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __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"])));
|
|
6929
6929
|
var MobileClearContainer = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __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"])));
|
|
6930
|
-
var templateObject_1$
|
|
6930
|
+
var templateObject_1$10, templateObject_2$G, templateObject_3$x, templateObject_4$m, templateObject_5$f, templateObject_6$e, templateObject_7$b, templateObject_8$9, templateObject_9$5, templateObject_10$3;
|
|
6931
6931
|
|
|
6932
6932
|
var getStylesBySize$7 = function (size, theme) {
|
|
6933
6933
|
switch (size) {
|
|
@@ -6992,9 +6992,9 @@ var SelectorSecondary = function (_a) {
|
|
|
6992
6992
|
} }), id: id }, void 0));
|
|
6993
6993
|
};
|
|
6994
6994
|
|
|
6995
|
-
var UL = newStyled.ul(templateObject_1
|
|
6996
|
-
var LI = newStyled.li(templateObject_2$
|
|
6997
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
6995
|
+
var UL = newStyled.ul(templateObject_1$$ || (templateObject_1$$ = __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"])));
|
|
6996
|
+
var LI = newStyled.li(templateObject_2$F || (templateObject_2$F = __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; });
|
|
6997
|
+
var CloseIconContainer = newStyled.div(templateObject_3$w || (templateObject_3$w = __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"])));
|
|
6998
6998
|
var Tags = function (_a) {
|
|
6999
6999
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7000
7000
|
var theme = useTheme();
|
|
@@ -7002,7 +7002,7 @@ var Tags = function (_a) {
|
|
|
7002
7002
|
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));
|
|
7003
7003
|
}) }), void 0));
|
|
7004
7004
|
};
|
|
7005
|
-
var templateObject_1
|
|
7005
|
+
var templateObject_1$$, templateObject_2$F, templateObject_3$w;
|
|
7006
7006
|
|
|
7007
7007
|
var Filters = function (_a) {
|
|
7008
7008
|
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;
|
|
@@ -7138,8 +7138,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7138
7138
|
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));
|
|
7139
7139
|
};
|
|
7140
7140
|
|
|
7141
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7142
|
-
var Container$
|
|
7141
|
+
var Wrapper$4 = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
7142
|
+
var Container$K = newStyled.div(templateObject_2$E || (templateObject_2$E = __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"])));
|
|
7143
7143
|
var FitGuarantee = function (_a) {
|
|
7144
7144
|
var _b;
|
|
7145
7145
|
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;
|
|
@@ -7150,17 +7150,17 @@ var FitGuarantee = function (_a) {
|
|
|
7150
7150
|
console.error('Icon', iconName, 'not found');
|
|
7151
7151
|
return null;
|
|
7152
7152
|
}
|
|
7153
|
-
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$
|
|
7153
|
+
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$K, __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$K, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$9, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7154
7154
|
margin: '0.1rem 0',
|
|
7155
7155
|
width: '100%',
|
|
7156
7156
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7157
7157
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7158
|
-
} }, { children: title }), void 0), jsx$1(Text$
|
|
7158
|
+
} }, { children: title }), void 0), jsx$1(Text$9, __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));
|
|
7159
7159
|
};
|
|
7160
|
-
var templateObject_1$
|
|
7160
|
+
var templateObject_1$_, templateObject_2$E;
|
|
7161
7161
|
|
|
7162
|
-
var Container$
|
|
7163
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7162
|
+
var Container$J = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
7163
|
+
var P$2 = newStyled.p(templateObject_2$D || (templateObject_2$D = __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; });
|
|
7164
7164
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7165
7165
|
border: 'none',
|
|
7166
7166
|
background: 'transparent',
|
|
@@ -7173,11 +7173,11 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7173
7173
|
var FitPredictor = function (_a) {
|
|
7174
7174
|
var onClick = _a.onClick;
|
|
7175
7175
|
var theme = useTheme();
|
|
7176
|
-
return (jsxs(Container$
|
|
7176
|
+
return (jsxs(Container$J, __assign$1({ theme: theme }, { children: [jsx(Container$J, { 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));
|
|
7177
7177
|
};
|
|
7178
|
-
var templateObject_1$
|
|
7178
|
+
var templateObject_1$Z, templateObject_2$D;
|
|
7179
7179
|
|
|
7180
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
7180
|
+
var Image$1 = newStyled.img(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
7181
7181
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
7182
7182
|
return borderRadiusVariant &&
|
|
7183
7183
|
"\nborder-radius: 20px;\n";
|
|
@@ -7192,9 +7192,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
7192
7192
|
var theme = useTheme();
|
|
7193
7193
|
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));
|
|
7194
7194
|
};
|
|
7195
|
-
var templateObject_1$
|
|
7195
|
+
var templateObject_1$Y;
|
|
7196
7196
|
|
|
7197
|
-
var Button$
|
|
7197
|
+
var Button$6 = newStyled.button(function () { return ({
|
|
7198
7198
|
background: 'transparent',
|
|
7199
7199
|
border: 'none',
|
|
7200
7200
|
cursor: 'pointer',
|
|
@@ -7206,7 +7206,7 @@ var Direction;
|
|
|
7206
7206
|
})(Direction || (Direction = {}));
|
|
7207
7207
|
var ArrowButton$1 = function (_a) {
|
|
7208
7208
|
var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
|
|
7209
|
-
return (jsx$1(Button$
|
|
7209
|
+
return (jsx$1(Button$6, __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));
|
|
7210
7210
|
};
|
|
7211
7211
|
|
|
7212
7212
|
function _defineProperty(obj, key, value) {
|
|
@@ -11436,14 +11436,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11436
11436
|
return Slider;
|
|
11437
11437
|
}(React__default.Component);
|
|
11438
11438
|
|
|
11439
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11439
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$X || (templateObject_1$X = __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) {
|
|
11440
11440
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11441
11441
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11442
11442
|
}, function (_a) {
|
|
11443
11443
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11444
11444
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11445
11445
|
});
|
|
11446
|
-
var templateObject_1$
|
|
11446
|
+
var templateObject_1$X;
|
|
11447
11447
|
|
|
11448
11448
|
var getStylesBySize$6 = function (size) {
|
|
11449
11449
|
// rem units
|
|
@@ -11502,9 +11502,9 @@ var SliderNavigation = function (_a) {
|
|
|
11502
11502
|
} }, { 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));
|
|
11503
11503
|
};
|
|
11504
11504
|
|
|
11505
|
-
var horizontalStyles = css(templateObject_1$
|
|
11506
|
-
var verticalStyles = css(templateObject_2$
|
|
11507
|
-
var Container$
|
|
11505
|
+
var horizontalStyles = css(templateObject_1$W || (templateObject_1$W = __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"])));
|
|
11506
|
+
var verticalStyles = css(templateObject_2$C || (templateObject_2$C = __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"])));
|
|
11507
|
+
var Container$I = newStyled.div(templateObject_3$v || (templateObject_3$v = __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) {
|
|
11508
11508
|
var position = _a.position;
|
|
11509
11509
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11510
11510
|
}, function (_a) {
|
|
@@ -11512,11 +11512,11 @@ var Container$G = newStyled.div(templateObject_3$u || (templateObject_3$u = __ma
|
|
|
11512
11512
|
return hasOverflowArrows &&
|
|
11513
11513
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11514
11514
|
});
|
|
11515
|
-
var Button$
|
|
11516
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11517
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11518
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11519
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11515
|
+
var Button$5 = newStyled.button(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
11516
|
+
var ArrowsContainer = newStyled.div(templateObject_5$e || (templateObject_5$e = __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"])));
|
|
11517
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
11518
|
+
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"])));
|
|
11519
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$8 || (templateObject_8$8 = __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"])));
|
|
11520
11520
|
var ImagePreviewList = function (_a) {
|
|
11521
11521
|
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;
|
|
11522
11522
|
var handleScrollVerticalPrev = function () {
|
|
@@ -11527,13 +11527,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11527
11527
|
var element = document.querySelector(".imageListContainer");
|
|
11528
11528
|
element.scrollBy(0, 200);
|
|
11529
11529
|
};
|
|
11530
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
11530
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$I, __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: {
|
|
11531
11531
|
arrowWidth: 0.75,
|
|
11532
11532
|
arrowHeight: 1.25,
|
|
11533
11533
|
arrowPadding: 1.625,
|
|
11534
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$
|
|
11534
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$5, __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.imageUrl, 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$5, __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.imageUrl, 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));
|
|
11535
11535
|
};
|
|
11536
|
-
var templateObject_1$
|
|
11536
|
+
var templateObject_1$W, templateObject_2$C, templateObject_3$v, templateObject_4$l, templateObject_5$e, templateObject_6$d, templateObject_7$a, templateObject_8$8;
|
|
11537
11537
|
|
|
11538
11538
|
var propTypes = {exports: {}};
|
|
11539
11539
|
|
|
@@ -13126,28 +13126,28 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13126
13126
|
afterZoomOut: PropTypes.func
|
|
13127
13127
|
} : {};
|
|
13128
13128
|
|
|
13129
|
-
var Container$
|
|
13129
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n ", "\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 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) {
|
|
13130
13130
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13131
13131
|
return borderRadiusVariant &&
|
|
13132
13132
|
"\n border-radius: 40px;\n ";
|
|
13133
13133
|
});
|
|
13134
|
-
var TopTagContainer$
|
|
13135
|
-
var BottomTagContainer$
|
|
13136
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$
|
|
13137
|
-
var Video$
|
|
13138
|
-
var VideoTag$
|
|
13139
|
-
var Text$
|
|
13134
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$B || (templateObject_2$B = __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'); });
|
|
13135
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13136
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$k || (templateObject_4$k = __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"])));
|
|
13137
|
+
var Video$2 = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"])));
|
|
13138
|
+
var VideoTag$2 = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n gap: 8px;\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 display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
13139
|
+
var Text$4 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13140
13140
|
var ImageProductWithTags$1 = function (_a) {
|
|
13141
13141
|
var _b, _c;
|
|
13142
13142
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
13143
|
-
return (jsxs$1(Container$
|
|
13143
|
+
return (jsxs$1(Container$H, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), 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.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
13144
13144
|
alt: image.alt,
|
|
13145
13145
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13146
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$
|
|
13146
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { 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')) && (jsxs$1(Fragment$2, { children: [jsx$1(Video$2, { children: jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxs$1(VideoTag$2, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$4, { children: "VIDEO" }, void 0)] }, void 0)] }, 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));
|
|
13147
13147
|
};
|
|
13148
|
-
var templateObject_1$
|
|
13148
|
+
var templateObject_1$V, templateObject_2$B, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$9;
|
|
13149
13149
|
|
|
13150
|
-
var Container$
|
|
13150
|
+
var Container$G = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
13151
13151
|
var ProductGallery = function (_a) {
|
|
13152
13152
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
13153
13153
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13155,11 +13155,11 @@ var ProductGallery = function (_a) {
|
|
|
13155
13155
|
useEffect(function () {
|
|
13156
13156
|
setSelectedImage(initialValue);
|
|
13157
13157
|
}, [initialValue]);
|
|
13158
|
-
return (jsxs$1(Container$
|
|
13158
|
+
return (jsxs$1(Container$G, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13159
13159
|
setSelectedImage(value);
|
|
13160
13160
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13161
13161
|
};
|
|
13162
|
-
var templateObject_1$
|
|
13162
|
+
var templateObject_1$U;
|
|
13163
13163
|
|
|
13164
13164
|
var getStylesBySize$5 = function (size) {
|
|
13165
13165
|
switch (size) {
|
|
@@ -13180,7 +13180,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13180
13180
|
};
|
|
13181
13181
|
}
|
|
13182
13182
|
};
|
|
13183
|
-
var Container$
|
|
13183
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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) {
|
|
13184
13184
|
var backgroundColor = _a.backgroundColor;
|
|
13185
13185
|
return backgroundColor;
|
|
13186
13186
|
}, function (_a) {
|
|
@@ -13208,11 +13208,11 @@ var Container$D = newStyled.div(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
13208
13208
|
var IconButton = function (_a) {
|
|
13209
13209
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13210
13210
|
var theme = useTheme();
|
|
13211
|
-
return (jsx$1(Container$
|
|
13211
|
+
return (jsx$1(Container$F, __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));
|
|
13212
13212
|
};
|
|
13213
|
-
var templateObject_1$
|
|
13213
|
+
var templateObject_1$T;
|
|
13214
13214
|
|
|
13215
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13215
|
+
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$S || (templateObject_1$S = __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; });
|
|
13216
13216
|
var AmazonButton = function (_a) {
|
|
13217
13217
|
var onClick = _a.onClick;
|
|
13218
13218
|
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));
|
|
@@ -13221,9 +13221,9 @@ var PaypalButton = function (_a) {
|
|
|
13221
13221
|
var onClick = _a.onClick;
|
|
13222
13222
|
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));
|
|
13223
13223
|
};
|
|
13224
|
-
var templateObject_1$
|
|
13224
|
+
var templateObject_1$S;
|
|
13225
13225
|
|
|
13226
|
-
var Container$
|
|
13226
|
+
var Container$E = newStyled.div(function (props) { return ({
|
|
13227
13227
|
height: 'auto',
|
|
13228
13228
|
textAlign: 'center',
|
|
13229
13229
|
justifyContent: 'center',
|
|
@@ -13273,12 +13273,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13273
13273
|
textAlign: 'center',
|
|
13274
13274
|
lineHeight: '18px',
|
|
13275
13275
|
};
|
|
13276
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
13276
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$E, __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$9, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13277
13277
|
};
|
|
13278
13278
|
|
|
13279
|
-
var Container$
|
|
13280
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13281
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13279
|
+
var Container$D = newStyled.div(templateObject_1$R || (templateObject_1$R = __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'); });
|
|
13280
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$A || (templateObject_2$A = __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'); });
|
|
13281
|
+
var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13282
13282
|
var titlePosition = _a.titlePosition;
|
|
13283
13283
|
return titlePosition == 'center' &&
|
|
13284
13284
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13286,15 +13286,15 @@ var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __ma
|
|
|
13286
13286
|
var ImageCardWithDescription = function (_a) {
|
|
13287
13287
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13288
13288
|
var isMobile = useWindowDimensions().isMobile;
|
|
13289
|
-
return (jsxs$1(Container$
|
|
13289
|
+
return (jsxs$1(Container$D, __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$9, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$9, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$9, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13290
13290
|
};
|
|
13291
|
-
var templateObject_1$
|
|
13291
|
+
var templateObject_1$R, templateObject_2$A, templateObject_3$t;
|
|
13292
13292
|
|
|
13293
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
13293
|
+
var Label$1 = newStyled.span(templateObject_1$Q || (templateObject_1$Q = __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) {
|
|
13294
13294
|
var color = _a.color;
|
|
13295
13295
|
return color;
|
|
13296
13296
|
});
|
|
13297
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13297
|
+
var MandatoryIcon = newStyled.span(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13298
13298
|
var color = _a.color;
|
|
13299
13299
|
return color;
|
|
13300
13300
|
});
|
|
@@ -13303,7 +13303,7 @@ var InputLabel = function (_a) {
|
|
|
13303
13303
|
var theme = useTheme();
|
|
13304
13304
|
return (jsxs$1(Label$1, __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));
|
|
13305
13305
|
};
|
|
13306
|
-
var templateObject_1$
|
|
13306
|
+
var templateObject_1$Q, templateObject_2$z;
|
|
13307
13307
|
|
|
13308
13308
|
var containerByStatus = function (theme, status) {
|
|
13309
13309
|
if (status === InputValidationType.Valid)
|
|
@@ -13312,12 +13312,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13312
13312
|
return theme.colors.semantic.urgent.color;
|
|
13313
13313
|
return '';
|
|
13314
13314
|
};
|
|
13315
|
-
var Container$
|
|
13315
|
+
var Container$C = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13316
13316
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13317
13317
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13318
13318
|
});
|
|
13319
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13320
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13319
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
13320
|
+
var StyledInput = newStyled.input(templateObject_3$s || (templateObject_3$s = __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) {
|
|
13321
13321
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13322
13322
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13323
13323
|
}, function (_a) {
|
|
@@ -13372,11 +13372,11 @@ var StyledInput = newStyled.input(templateObject_3$r || (templateObject_3$r = __
|
|
|
13372
13372
|
return hasValue &&
|
|
13373
13373
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13374
13374
|
});
|
|
13375
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13375
|
+
var InputWrapper = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
13376
13376
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13377
13377
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13378
13378
|
});
|
|
13379
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13379
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$c || (templateObject_5$c = __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) {
|
|
13380
13380
|
var theme = _a.theme;
|
|
13381
13381
|
return theme.component.input.placeholderColor;
|
|
13382
13382
|
}, function (_a) {
|
|
@@ -13389,8 +13389,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$b || (templateObject_5
|
|
|
13389
13389
|
var theme = _a.theme;
|
|
13390
13390
|
return theme.component.input.lineHeight;
|
|
13391
13391
|
});
|
|
13392
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13393
|
-
var templateObject_1$
|
|
13392
|
+
var ClearInput = newStyled.div(templateObject_6$b || (templateObject_6$b = __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"])));
|
|
13393
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$j, templateObject_5$c, templateObject_6$b;
|
|
13394
13394
|
|
|
13395
13395
|
var BaseInput = function (_a) {
|
|
13396
13396
|
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"]);
|
|
@@ -13413,14 +13413,14 @@ var BaseInput = function (_a) {
|
|
|
13413
13413
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13414
13414
|
}, [status]);
|
|
13415
13415
|
var hasValue = Boolean(value);
|
|
13416
|
-
return (jsxs$1(Container$
|
|
13416
|
+
return (jsxs$1(Container$C, __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) {
|
|
13417
13417
|
onChange(event.target.value, event);
|
|
13418
13418
|
}, 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 () {
|
|
13419
13419
|
onChange('', { target: { value: '' } });
|
|
13420
13420
|
}, "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));
|
|
13421
13421
|
};
|
|
13422
13422
|
|
|
13423
|
-
var Button$
|
|
13423
|
+
var Button$4 = function (_a) {
|
|
13424
13424
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
13425
13425
|
if (variant === 'primary') {
|
|
13426
13426
|
return jsx$1(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -13434,11 +13434,11 @@ var Button$3 = function (_a) {
|
|
|
13434
13434
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13435
13435
|
};
|
|
13436
13436
|
|
|
13437
|
-
var Container$
|
|
13437
|
+
var Container$B = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
13438
13438
|
var theme = _a.theme;
|
|
13439
13439
|
return theme.component.inputCustom.input.borderRadius;
|
|
13440
13440
|
});
|
|
13441
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13441
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$x || (templateObject_2$x = __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) {
|
|
13442
13442
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13443
13443
|
return defaultRounded
|
|
13444
13444
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13453,23 +13453,23 @@ var Custom = function (_a) {
|
|
|
13453
13453
|
text: text,
|
|
13454
13454
|
disabled: rest.disabled,
|
|
13455
13455
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13456
|
-
return (jsx$1(Container$
|
|
13456
|
+
return (jsx$1(Container$B, __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$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13457
13457
|
};
|
|
13458
|
-
var templateObject_1$
|
|
13458
|
+
var templateObject_1$O, templateObject_2$x;
|
|
13459
13459
|
|
|
13460
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13460
|
+
var SuccessContainer = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13461
13461
|
var size = _a.size;
|
|
13462
13462
|
return (size === 'small' ? '36px' : '');
|
|
13463
13463
|
});
|
|
13464
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13465
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13464
|
+
var SuccessMessage = newStyled.div(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
13465
|
+
var SuccessText = newStyled.span(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
13466
13466
|
var Success = function (_a) {
|
|
13467
13467
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13468
13468
|
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));
|
|
13469
13469
|
};
|
|
13470
|
-
var templateObject_1$
|
|
13470
|
+
var templateObject_1$N, templateObject_2$w, templateObject_3$r;
|
|
13471
13471
|
|
|
13472
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13472
|
+
var ButtonContainer = newStyled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
13473
13473
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13474
13474
|
return status === InputValidationType.Empty &&
|
|
13475
13475
|
type === 'primary' &&
|
|
@@ -13486,16 +13486,16 @@ var BasePlusButton = function (_a) {
|
|
|
13486
13486
|
}
|
|
13487
13487
|
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));
|
|
13488
13488
|
};
|
|
13489
|
-
var templateObject_1$
|
|
13489
|
+
var templateObject_1$M;
|
|
13490
13490
|
|
|
13491
|
-
var Container$
|
|
13492
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13491
|
+
var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13492
|
+
var IconContainer$2 = newStyled.div(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
13493
13493
|
var BasePlusIcon = function (_a) {
|
|
13494
13494
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13495
13495
|
var theme = useTheme();
|
|
13496
|
-
return (jsx$1(Container$
|
|
13496
|
+
return (jsx$1(Container$A, { 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));
|
|
13497
13497
|
};
|
|
13498
|
-
var templateObject_1$
|
|
13498
|
+
var templateObject_1$L, templateObject_2$v;
|
|
13499
13499
|
|
|
13500
13500
|
var Input$3 = {
|
|
13501
13501
|
Simple: BaseInput,
|
|
@@ -13504,7 +13504,7 @@ var Input$3 = {
|
|
|
13504
13504
|
SimplePlusIcon: BasePlusIcon,
|
|
13505
13505
|
};
|
|
13506
13506
|
|
|
13507
|
-
var Container$
|
|
13507
|
+
var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
13508
13508
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13509
13509
|
return borderRadiusVariant &&
|
|
13510
13510
|
"\n border-radius: 40px;\n ";
|
|
@@ -13513,15 +13513,15 @@ var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
13513
13513
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13514
13514
|
});
|
|
13515
13515
|
// max-height: 31.875rem;
|
|
13516
|
-
var TopTagContainer$
|
|
13517
|
-
var BottomTagContainer$
|
|
13518
|
-
var VideoOverlay$
|
|
13519
|
-
var Video = newStyled.div(templateObject_5$
|
|
13520
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
13521
|
-
var Text$
|
|
13522
|
-
var NavButtonContainer = newStyled.div(templateObject_8$
|
|
13523
|
-
var Button$
|
|
13524
|
-
var settings = {
|
|
13516
|
+
var TopTagContainer$2 = newStyled.div(templateObject_2$u || (templateObject_2$u = __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'); });
|
|
13517
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13518
|
+
var VideoOverlay$2 = 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"])));
|
|
13519
|
+
var Video$1 = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
|
|
13520
|
+
var VideoTag$1 = newStyled.div(templateObject_6$a || (templateObject_6$a = __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"])));
|
|
13521
|
+
var Text$3 = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13522
|
+
var NavButtonContainer$1 = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13523
|
+
var Button$3 = newStyled.button(templateObject_9$4 || (templateObject_9$4 = __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"])));
|
|
13524
|
+
var settings$1 = {
|
|
13525
13525
|
dots: true,
|
|
13526
13526
|
infinite: false,
|
|
13527
13527
|
speed: 200,
|
|
@@ -13535,7 +13535,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13535
13535
|
var sliderWrapper = useRef(null);
|
|
13536
13536
|
var iframeRef = useRef(null);
|
|
13537
13537
|
var _c = useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
|
|
13538
|
-
usePreventVerticalScroll(sliderWrapper);
|
|
13538
|
+
usePreventVerticalScroll$1(sliderWrapper);
|
|
13539
13539
|
var onButtonClick = useCallback(function (i) {
|
|
13540
13540
|
var _a;
|
|
13541
13541
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -13565,20 +13565,20 @@ var ImageProductWithTags = function (_a) {
|
|
|
13565
13565
|
}
|
|
13566
13566
|
}
|
|
13567
13567
|
}, [images, selectedValue]);
|
|
13568
|
-
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$
|
|
13568
|
+
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$z, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
13569
13569
|
var _a;
|
|
13570
13570
|
var activeSlide = images[e];
|
|
13571
13571
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13572
13572
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.imageUrl) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13573
13573
|
autoplay ? _playVideo() : _stopVideo();
|
|
13574
|
-
} }, settings, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$
|
|
13574
|
+
} }, settings$1, { nextArrow: jsx$1(NavButtonContainer$1, { children: jsx$1(Button$3, { 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$3, { 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) {
|
|
13575
13575
|
var _a, _b;
|
|
13576
|
-
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.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$
|
|
13576
|
+
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.imageUrl, zoomSrc: image.imageUrl, 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, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __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$1, { 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.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$2, { onClick: function () {
|
|
13577
13577
|
isPlaying ? _stopVideo() : _playVideo();
|
|
13578
|
-
} }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$
|
|
13578
|
+
} }, void 0), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
13579
13579
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13580
13580
|
};
|
|
13581
|
-
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
13581
|
+
function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
13582
13582
|
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13583
13583
|
var firstClientX = useRef(0);
|
|
13584
13584
|
var clientX = useRef(0);
|
|
@@ -13613,14 +13613,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13613
13613
|
};
|
|
13614
13614
|
}, [preventTouch, ref, touchStart]);
|
|
13615
13615
|
}
|
|
13616
|
-
var templateObject_1$
|
|
13616
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$q, templateObject_4$i, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$7, templateObject_9$4;
|
|
13617
13617
|
|
|
13618
|
-
var Container$
|
|
13618
|
+
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
13619
13619
|
var ProductGalleryMobile = function (_a) {
|
|
13620
13620
|
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;
|
|
13621
|
-
return (jsx$1(Container$
|
|
13621
|
+
return (jsx$1(Container$y, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13622
13622
|
};
|
|
13623
|
-
var templateObject_1$
|
|
13623
|
+
var templateObject_1$J;
|
|
13624
13624
|
|
|
13625
13625
|
function _extends() {
|
|
13626
13626
|
_extends = Object.assign || function (target) {
|
|
@@ -13887,41 +13887,41 @@ function useSwipeable(options) {
|
|
|
13887
13887
|
return handlers;
|
|
13888
13888
|
}
|
|
13889
13889
|
|
|
13890
|
-
var Container$
|
|
13890
|
+
var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __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) {
|
|
13891
13891
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13892
13892
|
return borderRadiusVariant &&
|
|
13893
13893
|
"\n border-radius: 40px;\n ";
|
|
13894
13894
|
});
|
|
13895
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13896
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
13895
|
+
var TopTagContainer$1 = 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'); });
|
|
13896
|
+
var BottomTagContainer$1 = 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"])));
|
|
13897
13897
|
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13898
13898
|
var _b, _c;
|
|
13899
13899
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13900
|
-
return (jsxs$1(Container$
|
|
13900
|
+
return (jsxs$1(Container$x, __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.imageUrl, zoomSrc: image.imageUrl, 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 }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, { 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.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
13901
13901
|
});
|
|
13902
|
-
var templateObject_1$
|
|
13902
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$p;
|
|
13903
13903
|
|
|
13904
|
-
var Button$
|
|
13904
|
+
var Button$2 = newStyled.button(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
13905
13905
|
var ArrowButton = function (_a) {
|
|
13906
13906
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13907
|
-
return (jsx$1(Button$
|
|
13907
|
+
return (jsx$1(Button$2, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13908
13908
|
};
|
|
13909
|
-
var templateObject_1$
|
|
13909
|
+
var templateObject_1$H;
|
|
13910
13910
|
|
|
13911
|
-
var Container$
|
|
13911
|
+
var Container$w = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
13912
13912
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13913
13913
|
var SlideDots = function (_a) {
|
|
13914
13914
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13915
13915
|
var theme = useTheme();
|
|
13916
|
-
return (jsx$1(Container$
|
|
13916
|
+
return (jsx$1(Container$w, __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
|
|
13917
13917
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13918
13918
|
: 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));
|
|
13919
13919
|
};
|
|
13920
|
-
var templateObject_1$
|
|
13920
|
+
var templateObject_1$G;
|
|
13921
13921
|
|
|
13922
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13923
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13924
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
13922
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
13923
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13924
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13925
13925
|
var SlideNavigation = function (_a) {
|
|
13926
13926
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
13927
13927
|
var theme = useTheme();
|
|
@@ -13933,9 +13933,9 @@ var SlideNavigation = function (_a) {
|
|
|
13933
13933
|
onNavigate(selectedIndex + 1);
|
|
13934
13934
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13935
13935
|
};
|
|
13936
|
-
var templateObject_1$
|
|
13936
|
+
var templateObject_1$F, templateObject_2$s, templateObject_3$o;
|
|
13937
13937
|
|
|
13938
|
-
var Container$
|
|
13938
|
+
var Container$v = newStyled.div(templateObject_1$E || (templateObject_1$E = __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"])));
|
|
13939
13939
|
var ProductGalleryMobileV2 = function (_a) {
|
|
13940
13940
|
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;
|
|
13941
13941
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -13957,7 +13957,125 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
13957
13957
|
useEffect(function () {
|
|
13958
13958
|
setSelectedImage(images[index]);
|
|
13959
13959
|
}, [index, images]);
|
|
13960
|
-
return (jsxs$1(Container$
|
|
13960
|
+
return (jsxs$1(Container$v, { children: [jsx$1(ImageProductWithTagsMobileV2, __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));
|
|
13961
|
+
};
|
|
13962
|
+
var templateObject_1$E;
|
|
13963
|
+
|
|
13964
|
+
var Container$u = newStyled.div(templateObject_1$D || (templateObject_1$D = __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) {
|
|
13965
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13966
|
+
return borderRadiusVariant &&
|
|
13967
|
+
"\n border-radius: 40px;\n ";
|
|
13968
|
+
}, function (_a) {
|
|
13969
|
+
var theme = _a.theme;
|
|
13970
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13971
|
+
});
|
|
13972
|
+
// max-height: 31.875rem;
|
|
13973
|
+
var TopTagContainer = newStyled.div(templateObject_2$r || (templateObject_2$r = __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'); });
|
|
13974
|
+
var BottomTagContainer = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13975
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __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"])));
|
|
13976
|
+
var Video = newStyled.div(templateObject_5$a || (templateObject_5$a = __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"])));
|
|
13977
|
+
var VideoTag = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __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"])));
|
|
13978
|
+
var Text$2 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13979
|
+
var NavButtonContainer = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13980
|
+
var Button$1 = newStyled.button(templateObject_9$3 || (templateObject_9$3 = __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"])));
|
|
13981
|
+
var settings = {
|
|
13982
|
+
dots: true,
|
|
13983
|
+
infinite: false,
|
|
13984
|
+
speed: 200,
|
|
13985
|
+
slidesToShow: 1,
|
|
13986
|
+
slidesToScroll: 1,
|
|
13987
|
+
initialSlide: 0,
|
|
13988
|
+
};
|
|
13989
|
+
var ImageProductWithTagsMobileV3 = function (_a) {
|
|
13990
|
+
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;
|
|
13991
|
+
var slick = useRef(null);
|
|
13992
|
+
var sliderWrapper = useRef(null);
|
|
13993
|
+
var iframeRef = useRef(null);
|
|
13994
|
+
var _c = useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
|
|
13995
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
13996
|
+
var onButtonClick = useCallback(function (i) {
|
|
13997
|
+
var _a;
|
|
13998
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
13999
|
+
}, [slick]);
|
|
14000
|
+
var _sendCommandToIframe = function (command) {
|
|
14001
|
+
var iframe = document.getElementById('vwo-video');
|
|
14002
|
+
(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
|
|
14003
|
+
iframe.contentWindow.postMessage(JSON.stringify({
|
|
14004
|
+
event: 'command',
|
|
14005
|
+
func: command,
|
|
14006
|
+
}), '*');
|
|
14007
|
+
};
|
|
14008
|
+
var _stopVideo = function () {
|
|
14009
|
+
_sendCommandToIframe('stopVideo');
|
|
14010
|
+
setIsPlaying(false);
|
|
14011
|
+
};
|
|
14012
|
+
var _playVideo = function () {
|
|
14013
|
+
_sendCommandToIframe('playVideo');
|
|
14014
|
+
setIsPlaying(true);
|
|
14015
|
+
};
|
|
14016
|
+
useEffect(function () {
|
|
14017
|
+
var _a;
|
|
14018
|
+
if (selectedValue) {
|
|
14019
|
+
var matchingIndex = images.findIndex(function (image) { return image.imageUrl === selectedValue.imageUrl; });
|
|
14020
|
+
if (matchingIndex !== -1) {
|
|
14021
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(matchingIndex);
|
|
14022
|
+
}
|
|
14023
|
+
}
|
|
14024
|
+
}, [images, selectedValue]);
|
|
14025
|
+
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$u, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14026
|
+
var _a;
|
|
14027
|
+
var activeSlide = images[e];
|
|
14028
|
+
// If autoplay is true and iframe is the active slide, play the video
|
|
14029
|
+
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.imageUrl) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14030
|
+
autoplay ? _playVideo() : _stopVideo();
|
|
14031
|
+
} }, settings, { nextArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer, { children: jsx$1(Button$1, { 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) {
|
|
14032
|
+
var _a, _b;
|
|
14033
|
+
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.imageUrl, zoomSrc: image.imageUrl, 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.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$1, { onClick: function () {
|
|
14034
|
+
isPlaying ? _stopVideo() : _playVideo();
|
|
14035
|
+
} }, 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));
|
|
14036
|
+
}) }), void 0) }), void 0)] }, void 0));
|
|
14037
|
+
};
|
|
14038
|
+
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
14039
|
+
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14040
|
+
var firstClientX = useRef(0);
|
|
14041
|
+
var clientX = useRef(0);
|
|
14042
|
+
var preventTouch = useCallback(function (e) {
|
|
14043
|
+
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
14044
|
+
// Vertical scrolling does not work when you start swiping horizontally.
|
|
14045
|
+
if (Math.abs(clientX.current) > dragThreshold) {
|
|
14046
|
+
if (e.cancelable) {
|
|
14047
|
+
e.preventDefault();
|
|
14048
|
+
e.returnValue = false;
|
|
14049
|
+
}
|
|
14050
|
+
return false;
|
|
14051
|
+
}
|
|
14052
|
+
return true;
|
|
14053
|
+
}, [dragThreshold]);
|
|
14054
|
+
var touchStart = useCallback(function (e) {
|
|
14055
|
+
firstClientX.current = e.touches[0].clientX;
|
|
14056
|
+
}, []);
|
|
14057
|
+
useEffect(function () {
|
|
14058
|
+
var current = ref.current;
|
|
14059
|
+
if (current) {
|
|
14060
|
+
current.addEventListener('touchstart', touchStart);
|
|
14061
|
+
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
14062
|
+
}
|
|
14063
|
+
return function () {
|
|
14064
|
+
if (current) {
|
|
14065
|
+
current.removeEventListener('touchstart', touchStart);
|
|
14066
|
+
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
14067
|
+
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
14068
|
+
current.removeEventListener('touchmove', preventTouch);
|
|
14069
|
+
}
|
|
14070
|
+
};
|
|
14071
|
+
}, [preventTouch, ref, touchStart]);
|
|
14072
|
+
}
|
|
14073
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4$h, templateObject_5$a, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$3;
|
|
14074
|
+
|
|
14075
|
+
var Container$t = newStyled.div(templateObject_1$C || (templateObject_1$C = __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"])));
|
|
14076
|
+
var ProductGalleryMobileV3 = function (_a) {
|
|
14077
|
+
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;
|
|
14078
|
+
return (jsx$1(Container$t, { children: jsx$1(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13961
14079
|
};
|
|
13962
14080
|
var templateObject_1$C;
|
|
13963
14081
|
|
|
@@ -18031,15 +18149,15 @@ var PackCard = function (_a) {
|
|
|
18031
18149
|
.then(function (icon) { return setIcon(icon); })
|
|
18032
18150
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18033
18151
|
}, [pack.meta.icon]);
|
|
18034
|
-
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$
|
|
18152
|
+
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$9, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label, { children: [jsx$1(Text$9, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(Text$9, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18035
18153
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18036
|
-
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$
|
|
18154
|
+
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$9, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
18037
18155
|
locale: 'en-US',
|
|
18038
18156
|
currency: currencyCode || 'USD',
|
|
18039
|
-
}) }), void 0), jsxs$1(Text$
|
|
18157
|
+
}) }), void 0), jsxs$1(Text$9, __assign$1({ variant: "label", size: "small" }, { children: [' - ', ' ', formatPrice(pack.meta.price, {
|
|
18040
18158
|
locale: 'en-US',
|
|
18041
18159
|
currency: currencyCode || 'USD',
|
|
18042
|
-
})] }), void 0)] }, void 0), jsxs$1(Text$
|
|
18160
|
+
})] }), void 0)] }, void 0), jsxs$1(Text$9, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
18043
18161
|
locale: 'en-US',
|
|
18044
18162
|
currency: currencyCode || 'USD',
|
|
18045
18163
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
@@ -18602,7 +18720,7 @@ var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __ma
|
|
|
18602
18720
|
var ReviewsContainer = newStyled.div(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
18603
18721
|
var ReviewsCount = newStyled.div(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
18604
18722
|
var ReviewsStars = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
18605
|
-
var ReviewsTextCount = newStyled(Text$
|
|
18723
|
+
var ReviewsTextCount = newStyled(Text$9)(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
18606
18724
|
var ReviewsImages = newStyled.div(templateObject_6$3 || (templateObject_6$3 = __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"])));
|
|
18607
18725
|
var SummaryItem = newStyled.div(templateObject_7$3 || (templateObject_7$3 = __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) {
|
|
18608
18726
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -18612,7 +18730,7 @@ var ReviewsHeader = function (_a) {
|
|
|
18612
18730
|
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;
|
|
18613
18731
|
var starsNumber = 5;
|
|
18614
18732
|
var theme = useTheme();
|
|
18615
|
-
return (jsxs$1(Container$f, { children: [jsx$1(Text$
|
|
18733
|
+
return (jsxs$1(Container$f, { children: [jsx$1(Text$9, __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$9, __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));
|
|
18616
18734
|
};
|
|
18617
18735
|
var templateObject_1$o, templateObject_2$g, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18618
18736
|
|
|
@@ -18672,7 +18790,7 @@ var Description = newStyled.div({
|
|
|
18672
18790
|
var ProductItem = function (_a) {
|
|
18673
18791
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
18674
18792
|
var theme = useTheme();
|
|
18675
|
-
return (jsxs$1(Container$d, __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$
|
|
18793
|
+
return (jsxs$1(Container$d, __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$9, __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));
|
|
18676
18794
|
};
|
|
18677
18795
|
var templateObject_1$m;
|
|
18678
18796
|
|
|
@@ -18683,7 +18801,7 @@ var Container$c = newStyled.div({
|
|
|
18683
18801
|
});
|
|
18684
18802
|
var Footer = function (_a) {
|
|
18685
18803
|
var text = _a.text, onClick = _a.onClick;
|
|
18686
|
-
return (jsx$1(Container$c, { children: jsx$1(Text$
|
|
18804
|
+
return (jsx$1(Container$c, { children: jsx$1(Text$9, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
18687
18805
|
};
|
|
18688
18806
|
|
|
18689
18807
|
var Ul = newStyled.ul({
|
|
@@ -18713,7 +18831,7 @@ var Header = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTem
|
|
|
18713
18831
|
var ResultsPanel = function (_a) {
|
|
18714
18832
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
18715
18833
|
var theme = useTheme();
|
|
18716
|
-
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$
|
|
18834
|
+
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$9, __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));
|
|
18717
18835
|
};
|
|
18718
18836
|
var templateObject_1$l, templateObject_2$e, templateObject_3$c;
|
|
18719
18837
|
|
|
@@ -18826,7 +18944,7 @@ var NormalSpan = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __ma
|
|
|
18826
18944
|
var SearchNavigationParents = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __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"])));
|
|
18827
18945
|
var SearchNavigation = function (_a) {
|
|
18828
18946
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
18829
|
-
return (jsxs$1(Container$9, { children: [jsxs$1(Text$
|
|
18947
|
+
return (jsxs$1(Container$9, { children: [jsxs$1(Text$9, __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) {
|
|
18830
18948
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18831
18949
|
}) }, void 0)] }, void 0));
|
|
18832
18950
|
};
|
|
@@ -18966,7 +19084,7 @@ var SizeSelector = function (_a) {
|
|
|
18966
19084
|
display: 'flex',
|
|
18967
19085
|
flexDirection: inline ? 'row' : 'column',
|
|
18968
19086
|
alignItems: inline ? 'center' : 'start',
|
|
18969
|
-
} }, { children: [jsxs(Text$
|
|
19087
|
+
} }, { children: [jsxs(Text$9, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$9, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$9, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), jsx(Text$9, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: (_b = sizeTipReferences === null || sizeTipReferences === void 0 ? void 0 : sizeTipReferences[selectedValue.label]) !== null && _b !== void 0 ? _b : 'Refer to our' }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { title: "Size and Fit Guide", onClick: onClickSizeTip, hideIcon: true }, void 0))] }, void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
|
|
18970
19088
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
18971
19089
|
return (jsx(SelectorSecondary, { css: {
|
|
18972
19090
|
padding: '0.75rem 1rem 0.625rem',
|
|
@@ -19143,7 +19261,7 @@ var ImageVideo = function (_a) {
|
|
|
19143
19261
|
var handleOnClick = function () {
|
|
19144
19262
|
setOpened(true);
|
|
19145
19263
|
};
|
|
19146
|
-
return (jsxs$1(Fragment$2, { children: [jsxs$1(ImageWrapper, { children: [jsx$1(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$
|
|
19264
|
+
return (jsxs$1(Fragment$2, { children: [jsxs$1(ImageWrapper, { children: [jsx$1(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsx$1(Text$9, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxs$1(VideoOverlay, { children: [jsx$1(Text$9, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsx$1(Text$9, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsx$1(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxs$1(FullscreenVideo, { children: [jsx$1(Text$9, __assign$1({ variant: "link", style: {
|
|
19147
19265
|
position: 'absolute',
|
|
19148
19266
|
top: '10px',
|
|
19149
19267
|
right: '10px',
|
|
@@ -19165,12 +19283,12 @@ var TextWithImage = function (_a) {
|
|
|
19165
19283
|
var _b, _c, _d, _e;
|
|
19166
19284
|
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"]);
|
|
19167
19285
|
var isMobile = useWindowDimensions().isMobile;
|
|
19168
|
-
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$
|
|
19286
|
+
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$9, __assign$1({ variant: "heading2", weight: "bold", style: titleStyle
|
|
19169
19287
|
? titleStyle
|
|
19170
19288
|
: {
|
|
19171
19289
|
color: '#000000',
|
|
19172
19290
|
textAlign: 'center',
|
|
19173
|
-
} }, { children: title }), void 0)) : (jsx(Text$
|
|
19291
|
+
} }, { children: title }), void 0)) : (jsx(Text$9, __assign$1({ variant: "heading3", weight: "bold", style: titleStyle
|
|
19174
19292
|
? titleStyle
|
|
19175
19293
|
: {
|
|
19176
19294
|
color: '#000000',
|
|
@@ -19180,7 +19298,7 @@ var TextWithImage = function (_a) {
|
|
|
19180
19298
|
// @ts-ignore
|
|
19181
19299
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19182
19300
|
};
|
|
19183
|
-
return (jsxs(Container$4, __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$
|
|
19301
|
+
return (jsxs(Container$4, __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$9, __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: {
|
|
19184
19302
|
backgroundColor: props.btnBGColor,
|
|
19185
19303
|
color: '#ffffff',
|
|
19186
19304
|
border: props.btnBGColor,
|
|
@@ -19258,7 +19376,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19258
19376
|
var theme = _a.theme;
|
|
19259
19377
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19260
19378
|
});
|
|
19261
|
-
var TotalLabel = newStyled(Text$
|
|
19379
|
+
var TotalLabel = newStyled(Text$9)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19262
19380
|
var templateObject_1$5, templateObject_2$4, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2;
|
|
19263
19381
|
|
|
19264
19382
|
var Total = function (_a) {
|
|
@@ -19419,7 +19537,7 @@ var getDefaultCountdown = function () {
|
|
|
19419
19537
|
var HurryUp = function (_a) {
|
|
19420
19538
|
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d, _e = _a.clockPosition, clockPosition = _e === void 0 ? 'left' : _e, _f = _a.countdown, countdown = _f === void 0 ? getDefaultCountdown() : _f, timerProps = __rest(_a, ["hurryUpText", "backgroundColor", "iconSize", "textPosition", "showTimer", "clockPosition", "countdown"]);
|
|
19421
19539
|
var theme = useTheme();
|
|
19422
|
-
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$
|
|
19540
|
+
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$9, __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));
|
|
19423
19541
|
};
|
|
19424
19542
|
|
|
19425
19543
|
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) {
|
|
@@ -19456,5 +19574,5 @@ var Spinner = function (_a) {
|
|
|
19456
19574
|
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));
|
|
19457
19575
|
};
|
|
19458
19576
|
|
|
19459
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, 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, 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, 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$
|
|
19577
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, 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, 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$9 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, 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 };
|
|
19460
19578
|
//# sourceMappingURL=index.esm.js.map
|