@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.js
CHANGED
|
@@ -3151,7 +3151,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3151
3151
|
desktop: 1280,
|
|
3152
3152
|
};
|
|
3153
3153
|
|
|
3154
|
-
var Container$
|
|
3154
|
+
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) {
|
|
3155
3155
|
var height = _a.height;
|
|
3156
3156
|
return (height ? height : '1.5em');
|
|
3157
3157
|
}, function (_a) {
|
|
@@ -3176,11 +3176,11 @@ var Container$17 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = _
|
|
|
3176
3176
|
var SkeletonBox = function (_a) {
|
|
3177
3177
|
var width = _a.width, height = _a.height;
|
|
3178
3178
|
var theme = useTheme();
|
|
3179
|
-
return jsxRuntime.jsx(Container$
|
|
3179
|
+
return jsxRuntime.jsx(Container$19, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3180
3180
|
};
|
|
3181
|
-
var templateObject_1$
|
|
3181
|
+
var templateObject_1$1U;
|
|
3182
3182
|
|
|
3183
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3183
|
+
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) {
|
|
3184
3184
|
var width = _a.width;
|
|
3185
3185
|
return width;
|
|
3186
3186
|
}, function (_a) {
|
|
@@ -3196,7 +3196,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1R || (templateObject_1$1R
|
|
|
3196
3196
|
var opacity = _a.opacity;
|
|
3197
3197
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3198
3198
|
});
|
|
3199
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3199
|
+
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) {
|
|
3200
3200
|
var width = _a.width;
|
|
3201
3201
|
return width;
|
|
3202
3202
|
}, function (_a) {
|
|
@@ -3209,7 +3209,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1d || (templateObject_2$
|
|
|
3209
3209
|
var opacity = _a.opacity;
|
|
3210
3210
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3211
3211
|
});
|
|
3212
|
-
var templateObject_1$
|
|
3212
|
+
var templateObject_1$1T, templateObject_2$1e;
|
|
3213
3213
|
|
|
3214
3214
|
/* eslint-disable no-undef */
|
|
3215
3215
|
var cache = new Map();
|
|
@@ -4109,15 +4109,15 @@ function jsxs(type, props, key) {
|
|
|
4109
4109
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4110
4110
|
// `variants` styles that are consistent through all themes.
|
|
4111
4111
|
var TAGS = {
|
|
4112
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4113
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4114
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4115
|
-
display1: newStyled.h1(templateObject_4$
|
|
4116
|
-
display2: newStyled.h2(templateObject_5$
|
|
4117
|
-
display3: newStyled.h3(templateObject_6$
|
|
4118
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4119
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4120
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4112
|
+
hero1: newStyled.h1(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject([""], [""]))),
|
|
4113
|
+
hero2: newStyled.h2(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject([""], [""]))),
|
|
4114
|
+
hero3: newStyled.h3(templateObject_3$X || (templateObject_3$X = __makeTemplateObject([""], [""]))),
|
|
4115
|
+
display1: newStyled.h1(templateObject_4$H || (templateObject_4$H = __makeTemplateObject([""], [""]))),
|
|
4116
|
+
display2: newStyled.h2(templateObject_5$s || (templateObject_5$s = __makeTemplateObject([""], [""]))),
|
|
4117
|
+
display3: newStyled.h3(templateObject_6$q || (templateObject_6$q = __makeTemplateObject([""], [""]))),
|
|
4118
|
+
heading1: newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject([""], [""]))),
|
|
4119
|
+
heading2: newStyled.h2(templateObject_8$e || (templateObject_8$e = __makeTemplateObject([""], [""]))),
|
|
4120
|
+
heading3: newStyled.h3(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject([""], [""]))),
|
|
4121
4121
|
heading4: newStyled.h4(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject([""], [""]))),
|
|
4122
4122
|
heading5: newStyled.h5(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject([""], [""]))),
|
|
4123
4123
|
heading6: newStyled.h6(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4133,7 +4133,7 @@ var TAGS = {
|
|
|
4133
4133
|
}),
|
|
4134
4134
|
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' : ''); }),
|
|
4135
4135
|
};
|
|
4136
|
-
var Text$
|
|
4136
|
+
var Text$9 = function (_a) {
|
|
4137
4137
|
var _b;
|
|
4138
4138
|
var variant = _a.variant, children = _a.children, testId = _a.testId, asSpan = _a.asSpan, allProps = __rest(_a, ["variant", "children", "testId", "asSpan"]);
|
|
4139
4139
|
var theme = useTheme();
|
|
@@ -4245,17 +4245,17 @@ var DEFAULTS = {
|
|
|
4245
4245
|
size: 'regular',
|
|
4246
4246
|
},
|
|
4247
4247
|
};
|
|
4248
|
-
var templateObject_1$
|
|
4249
|
-
|
|
4250
|
-
var Container$
|
|
4251
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4252
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4253
|
-
var Label$4 = newStyled.div(templateObject_4$
|
|
4254
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4255
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4248
|
+
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;
|
|
4249
|
+
|
|
4250
|
+
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"])));
|
|
4251
|
+
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"])));
|
|
4252
|
+
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"])));
|
|
4253
|
+
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"])));
|
|
4254
|
+
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"])));
|
|
4255
|
+
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"])));
|
|
4256
4256
|
var PackSelectorV2 = function (_a) {
|
|
4257
4257
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4258
|
-
return (jsxRuntime.jsx(Container$
|
|
4258
|
+
return (jsxRuntime.jsx(Container$18, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4259
4259
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4260
4260
|
}) }), void 0));
|
|
4261
4261
|
};
|
|
@@ -4269,35 +4269,35 @@ var PackCard$1 = function (_a) {
|
|
|
4269
4269
|
.then(function (icon) { return setIcon(icon); })
|
|
4270
4270
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4271
4271
|
}, [pack.meta.icon]);
|
|
4272
|
-
return (jsxRuntime.jsxs(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 ? (jsxRuntime.jsx(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$
|
|
4272
|
+
return (jsxRuntime.jsxs(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 ? (jsxRuntime.jsx(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$9, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label$4, { children: [jsxRuntime.jsx(Text$9, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsxRuntime.jsx(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(DiscountContainer$1, { children: [jsxRuntime.jsx(Text$9, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4273
4273
|
locale: 'en-US',
|
|
4274
4274
|
currency: currencyCode || 'USD',
|
|
4275
|
-
}) }), void 0), pack.meta.quantity > 1 ? (jsxRuntime.jsxs(Text$
|
|
4275
|
+
}) }), void 0), pack.meta.quantity > 1 ? (jsxRuntime.jsxs(Text$9, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
4276
4276
|
locale: 'en-US',
|
|
4277
4277
|
currency: currencyCode || 'USD',
|
|
4278
4278
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4279
4279
|
};
|
|
4280
|
-
var templateObject_1$
|
|
4280
|
+
var templateObject_1$1R, templateObject_2$1c, templateObject_3$W, templateObject_4$G, templateObject_5$r, templateObject_6$p;
|
|
4281
4281
|
|
|
4282
|
-
var Container$
|
|
4283
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4282
|
+
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"])));
|
|
4283
|
+
var DropContainer = newStyled.div(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4284
4284
|
var DropList = function (_a) {
|
|
4285
4285
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4286
|
-
return (jsxRuntime.jsx(Container$
|
|
4286
|
+
return (jsxRuntime.jsx(Container$17, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4287
4287
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4288
4288
|
}) }, void 0));
|
|
4289
4289
|
};
|
|
4290
|
-
var templateObject_1$
|
|
4290
|
+
var templateObject_1$1Q, templateObject_2$1b;
|
|
4291
4291
|
|
|
4292
4292
|
var DROPS_TOTAL = 5;
|
|
4293
|
-
var Container$
|
|
4294
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4295
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4293
|
+
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"])));
|
|
4294
|
+
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"])));
|
|
4295
|
+
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"])));
|
|
4296
4296
|
var AbsorbencyLevel = function (_a) {
|
|
4297
4297
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4298
|
-
return (jsxRuntime.jsxs(Container$
|
|
4298
|
+
return (jsxRuntime.jsxs(Container$16, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4299
4299
|
};
|
|
4300
|
-
var templateObject_1$
|
|
4300
|
+
var templateObject_1$1P, templateObject_2$1a, templateObject_3$V;
|
|
4301
4301
|
|
|
4302
4302
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4303
4303
|
`),"","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(`
|
|
@@ -4373,7 +4373,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4373
4373
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4374
4374
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4375
4375
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4376
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4376
|
+
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"])));
|
|
4377
4377
|
var Accordion$1 = function (_a) {
|
|
4378
4378
|
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;
|
|
4379
4379
|
var theme = useTheme();
|
|
@@ -4397,9 +4397,9 @@ var Accordion$1 = function (_a) {
|
|
|
4397
4397
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4398
4398
|
} }), void 0));
|
|
4399
4399
|
};
|
|
4400
|
-
var templateObject_1$
|
|
4400
|
+
var templateObject_1$1O;
|
|
4401
4401
|
|
|
4402
|
-
var Container$
|
|
4402
|
+
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"])));
|
|
4403
4403
|
var AccordionOptions = function (_a) {
|
|
4404
4404
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4405
4405
|
var _b = React$2.useState({
|
|
@@ -4412,7 +4412,7 @@ var AccordionOptions = function (_a) {
|
|
|
4412
4412
|
}
|
|
4413
4413
|
return false;
|
|
4414
4414
|
};
|
|
4415
|
-
return (jsxRuntime.jsx(Container$
|
|
4415
|
+
return (jsxRuntime.jsx(Container$15, { children: accordions.map(function (accordion, index) {
|
|
4416
4416
|
var forceOpenValue = getForceOpen(index);
|
|
4417
4417
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4418
4418
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4423,7 +4423,7 @@ var AccordionOptions = function (_a) {
|
|
|
4423
4423
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4424
4424
|
}) }, void 0));
|
|
4425
4425
|
};
|
|
4426
|
-
var templateObject_1$
|
|
4426
|
+
var templateObject_1$1N;
|
|
4427
4427
|
|
|
4428
4428
|
exports.CardSectionType = void 0;
|
|
4429
4429
|
(function (CardSectionType) {
|
|
@@ -4585,14 +4585,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4585
4585
|
literal: true,
|
|
4586
4586
|
});
|
|
4587
4587
|
|
|
4588
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4589
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4588
|
+
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; });
|
|
4589
|
+
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"])));
|
|
4590
4590
|
var Error$1 = function (_a) {
|
|
4591
4591
|
var error = _a.error;
|
|
4592
4592
|
var theme = useTheme();
|
|
4593
4593
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4594
4594
|
};
|
|
4595
|
-
var templateObject_1$
|
|
4595
|
+
var templateObject_1$1M, templateObject_2$19;
|
|
4596
4596
|
|
|
4597
4597
|
var BaseSelectButton = function (_a) {
|
|
4598
4598
|
var children = _a.children, as = _a.as;
|
|
@@ -4609,7 +4609,7 @@ function BaseSelectOption(_a) {
|
|
|
4609
4609
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4610
4610
|
}
|
|
4611
4611
|
|
|
4612
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4612
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4613
4613
|
function BaseSelect(_a) {
|
|
4614
4614
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4615
4615
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4619,7 +4619,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4619
4619
|
Options: BaseSelectOptions,
|
|
4620
4620
|
Option: BaseSelectOption,
|
|
4621
4621
|
});
|
|
4622
|
-
var templateObject_1$
|
|
4622
|
+
var templateObject_1$1L;
|
|
4623
4623
|
|
|
4624
4624
|
var CustomButton = newStyled.button(function (_a) {
|
|
4625
4625
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4658,7 +4658,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4658
4658
|
});
|
|
4659
4659
|
});
|
|
4660
4660
|
//TODO Remove this when we find the real solution
|
|
4661
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4661
|
+
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) {
|
|
4662
4662
|
var open = _a.open;
|
|
4663
4663
|
return open &&
|
|
4664
4664
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4678,7 +4678,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4678
4678
|
} }), void 0));
|
|
4679
4679
|
};
|
|
4680
4680
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4681
|
-
var templateObject_1$
|
|
4681
|
+
var templateObject_1$1K;
|
|
4682
4682
|
|
|
4683
4683
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4684
4684
|
var theme = _a.theme;
|
|
@@ -4845,7 +4845,7 @@ var CustomCheckboxStyles = {
|
|
|
4845
4845
|
},
|
|
4846
4846
|
};
|
|
4847
4847
|
|
|
4848
|
-
var Container$
|
|
4848
|
+
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"])));
|
|
4849
4849
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4850
4850
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4851
4851
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4856,7 +4856,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4856
4856
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4857
4857
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4858
4858
|
]; });
|
|
4859
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4859
|
+
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) {
|
|
4860
4860
|
var disabled = _a.disabled;
|
|
4861
4861
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4862
4862
|
});
|
|
@@ -4870,9 +4870,9 @@ var Checkbox = function (_a) {
|
|
|
4870
4870
|
}
|
|
4871
4871
|
onChange(e.target.checked);
|
|
4872
4872
|
};
|
|
4873
|
-
return (jsxRuntime.jsxs(Container$
|
|
4873
|
+
return (jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4874
4874
|
};
|
|
4875
|
-
var templateObject_1$
|
|
4875
|
+
var templateObject_1$1J, templateObject_2$18;
|
|
4876
4876
|
|
|
4877
4877
|
var CustomOption = newStyled.li(function (_a) {
|
|
4878
4878
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4921,8 +4921,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4921
4921
|
Option: BaseDropdownOption,
|
|
4922
4922
|
});
|
|
4923
4923
|
|
|
4924
|
-
var Container$
|
|
4925
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4924
|
+
var Container$13 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject([""], [""])));
|
|
4925
|
+
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"])));
|
|
4926
4926
|
function SimpleDropdown(_a) {
|
|
4927
4927
|
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;
|
|
4928
4928
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4951,10 +4951,10 @@ function SimpleDropdown(_a) {
|
|
|
4951
4951
|
}
|
|
4952
4952
|
setSelectedValue(value);
|
|
4953
4953
|
}, [value, options, initialValue]);
|
|
4954
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4954
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$13 : React$2.Fragment;
|
|
4955
4955
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4956
4956
|
}
|
|
4957
|
-
var templateObject_1$
|
|
4957
|
+
var templateObject_1$1I, templateObject_2$17;
|
|
4958
4958
|
|
|
4959
4959
|
/* base styles & size variants */
|
|
4960
4960
|
var CustomRadioStyles$2 = {
|
|
@@ -5019,9 +5019,9 @@ var ContainerStyles$2 = {
|
|
|
5019
5019
|
},
|
|
5020
5020
|
};
|
|
5021
5021
|
|
|
5022
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5023
|
-
var Container$
|
|
5024
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5022
|
+
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"])));
|
|
5023
|
+
var Container$12 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5024
|
+
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) {
|
|
5025
5025
|
var disabled = _a.disabled;
|
|
5026
5026
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5027
5027
|
});
|
|
@@ -5029,7 +5029,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5029
5029
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5030
5030
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5031
5031
|
]; });
|
|
5032
|
-
var StyledLabel$3 = newStyled(Label$3)(templateObject_3$
|
|
5032
|
+
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) {
|
|
5033
5033
|
var theme = _a.theme;
|
|
5034
5034
|
return theme.component.radio.textSize;
|
|
5035
5035
|
}, function (_a) {
|
|
@@ -5043,9 +5043,9 @@ var RadioInput = function (_a) {
|
|
|
5043
5043
|
var value = event.currentTarget.value;
|
|
5044
5044
|
onChange({ value: value, label: label });
|
|
5045
5045
|
};
|
|
5046
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5046
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$12, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5047
5047
|
};
|
|
5048
|
-
var templateObject_1$
|
|
5048
|
+
var templateObject_1$1H, templateObject_2$16, templateObject_3$U;
|
|
5049
5049
|
|
|
5050
5050
|
var getWrapperFlexDirection = function (position) {
|
|
5051
5051
|
switch (position) {
|
|
@@ -5096,7 +5096,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5096
5096
|
}
|
|
5097
5097
|
};
|
|
5098
5098
|
|
|
5099
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5099
|
+
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) {
|
|
5100
5100
|
var position = _a.position;
|
|
5101
5101
|
return getWrapperFlexDirection(position);
|
|
5102
5102
|
}, function (_a) {
|
|
@@ -5106,7 +5106,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __ma
|
|
|
5106
5106
|
var disableHover = _a.disableHover;
|
|
5107
5107
|
return (disableHover ? 0 : 1);
|
|
5108
5108
|
});
|
|
5109
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5109
|
+
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) {
|
|
5110
5110
|
var position = _a.position;
|
|
5111
5111
|
return getContainerFlexDirection(position);
|
|
5112
5112
|
}, function (_a) {
|
|
@@ -5134,25 +5134,25 @@ var TooltipContainer = newStyled.div(templateObject_2$14 || (templateObject_2$14
|
|
|
5134
5134
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5135
5135
|
return actual === expected ? margin : '0';
|
|
5136
5136
|
};
|
|
5137
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5137
|
+
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) {
|
|
5138
5138
|
var borderColor = _a.borderColor;
|
|
5139
5139
|
return borderColor;
|
|
5140
5140
|
}, function (_a) {
|
|
5141
5141
|
var backgroundColor = _a.backgroundColor;
|
|
5142
5142
|
return backgroundColor;
|
|
5143
5143
|
});
|
|
5144
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5144
|
+
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) {
|
|
5145
5145
|
var color = _a.color;
|
|
5146
5146
|
return color;
|
|
5147
5147
|
});
|
|
5148
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5149
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5148
|
+
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"])));
|
|
5149
|
+
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) {
|
|
5150
5150
|
var color = _a.color;
|
|
5151
5151
|
return color;
|
|
5152
5152
|
});
|
|
5153
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5154
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5155
|
-
var templateObject_1$
|
|
5153
|
+
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"])));
|
|
5154
|
+
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"])));
|
|
5155
|
+
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;
|
|
5156
5156
|
|
|
5157
5157
|
var useOnClickOutside = function (ref, handler) {
|
|
5158
5158
|
React$2.useEffect(function () {
|
|
@@ -5294,7 +5294,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5294
5294
|
};
|
|
5295
5295
|
}
|
|
5296
5296
|
};
|
|
5297
|
-
var Container
|
|
5297
|
+
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) {
|
|
5298
5298
|
var backgroundColor = _a.backgroundColor;
|
|
5299
5299
|
return backgroundColor;
|
|
5300
5300
|
}, function (_a) {
|
|
@@ -5316,7 +5316,7 @@ var Container$$ = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __
|
|
|
5316
5316
|
var size = _a.size;
|
|
5317
5317
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5318
5318
|
});
|
|
5319
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5319
|
+
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) {
|
|
5320
5320
|
var textColor = _a.textColor;
|
|
5321
5321
|
return textColor;
|
|
5322
5322
|
}, function (_a) {
|
|
@@ -5331,9 +5331,9 @@ var H3$3 = newStyled.h3(templateObject_2$13 || (templateObject_2$13 = __makeTemp
|
|
|
5331
5331
|
var ClubOfferTag = function (_a) {
|
|
5332
5332
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5333
5333
|
var theme = useTheme();
|
|
5334
|
-
return (jsxRuntime.jsx(Container
|
|
5334
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsx(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5335
5335
|
};
|
|
5336
|
-
var templateObject_1$
|
|
5336
|
+
var templateObject_1$1F, templateObject_2$14;
|
|
5337
5337
|
|
|
5338
5338
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5339
5339
|
var _a, _b, _c;
|
|
@@ -5364,7 +5364,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5364
5364
|
};
|
|
5365
5365
|
}
|
|
5366
5366
|
};
|
|
5367
|
-
var Container$
|
|
5367
|
+
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) {
|
|
5368
5368
|
var backgroundColor = _a.backgroundColor;
|
|
5369
5369
|
return backgroundColor;
|
|
5370
5370
|
}, function (_a) {
|
|
@@ -5386,7 +5386,7 @@ var Container$_ = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __
|
|
|
5386
5386
|
var size = _a.size;
|
|
5387
5387
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5388
5388
|
});
|
|
5389
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5389
|
+
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) {
|
|
5390
5390
|
var textColor = _a.textColor;
|
|
5391
5391
|
return textColor;
|
|
5392
5392
|
}, function (_a) {
|
|
@@ -5401,9 +5401,9 @@ var H3$2 = newStyled.h3(templateObject_2$12 || (templateObject_2$12 = __makeTemp
|
|
|
5401
5401
|
var DiscountTag = function (_a) {
|
|
5402
5402
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5403
5403
|
var theme = useTheme();
|
|
5404
|
-
return (jsxRuntime.jsx(Container$
|
|
5404
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5405
5405
|
};
|
|
5406
|
-
var templateObject_1$
|
|
5406
|
+
var templateObject_1$1E, templateObject_2$13;
|
|
5407
5407
|
|
|
5408
5408
|
var getStylesBySize$b = function (size, theme) {
|
|
5409
5409
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5445,8 +5445,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5445
5445
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5446
5446
|
}
|
|
5447
5447
|
};
|
|
5448
|
-
var Container
|
|
5449
|
-
var Price = newStyled.p(templateObject_2$
|
|
5448
|
+
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"])));
|
|
5449
|
+
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) {
|
|
5450
5450
|
var weight = _a.weight;
|
|
5451
5451
|
return (weight ? weight : '400');
|
|
5452
5452
|
}, function (_a) {
|
|
@@ -5470,7 +5470,7 @@ var Price = newStyled.p(templateObject_2$11 || (templateObject_2$11 = __makeTemp
|
|
|
5470
5470
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5471
5471
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5472
5472
|
});
|
|
5473
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5473
|
+
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) {
|
|
5474
5474
|
var _b;
|
|
5475
5475
|
var size = _a.size;
|
|
5476
5476
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5501,11 +5501,11 @@ var PriceLabel = function (_a) {
|
|
|
5501
5501
|
: exports.ComponentSize.XSmall;
|
|
5502
5502
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5503
5503
|
};
|
|
5504
|
-
return (jsxRuntime.jsxs(Container
|
|
5504
|
+
return (jsxRuntime.jsxs(Container$$, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5505
5505
|
};
|
|
5506
|
-
var templateObject_1$
|
|
5506
|
+
var templateObject_1$1D, templateObject_2$12, templateObject_3$S;
|
|
5507
5507
|
|
|
5508
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5508
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5509
5509
|
var PriceLabelV2 = function (_a) {
|
|
5510
5510
|
var _b;
|
|
5511
5511
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem"]);
|
|
@@ -5556,7 +5556,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5556
5556
|
var savetoString = saveto.toFixed(2);
|
|
5557
5557
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5558
5558
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5559
|
-
return (jsxRuntime.jsxs(Container
|
|
5559
|
+
return (jsxRuntime.jsxs(Container$$, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5560
5560
|
marginTop: '-5px',
|
|
5561
5561
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5562
5562
|
? finalPriceArray[0]
|
|
@@ -5574,11 +5574,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5574
5574
|
lineHeight: '22px',
|
|
5575
5575
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5576
5576
|
};
|
|
5577
|
-
var templateObject_1$
|
|
5577
|
+
var templateObject_1$1C;
|
|
5578
5578
|
|
|
5579
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5580
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5581
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5579
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5580
|
+
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"])));
|
|
5581
|
+
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"])));
|
|
5582
5582
|
var PriceLabelV3 = function (_a) {
|
|
5583
5583
|
var _b;
|
|
5584
5584
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -5633,7 +5633,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5633
5633
|
return null;
|
|
5634
5634
|
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5635
5635
|
};
|
|
5636
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container
|
|
5636
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$$, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$$, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5637
5637
|
marginTop: '-5px',
|
|
5638
5638
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5639
5639
|
marginTop: '-6px',
|
|
@@ -5649,10 +5649,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5649
5649
|
lineHeight: '22px',
|
|
5650
5650
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5651
5651
|
};
|
|
5652
|
-
var templateObject_1$
|
|
5652
|
+
var templateObject_1$1B, templateObject_2$11, templateObject_3$R;
|
|
5653
5653
|
|
|
5654
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5655
|
-
var ContainerBase = newStyled.div(templateObject_2
|
|
5654
|
+
var FlexContainer = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5655
|
+
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) {
|
|
5656
5656
|
var selected = _a.selected, theme = _a.theme;
|
|
5657
5657
|
return selected
|
|
5658
5658
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5666,30 +5666,30 @@ var ContainerBase = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __
|
|
|
5666
5666
|
var theme = _a.theme;
|
|
5667
5667
|
return theme.colors.pallete.primary.color;
|
|
5668
5668
|
});
|
|
5669
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5669
|
+
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) {
|
|
5670
5670
|
var onClick = _a.onClick;
|
|
5671
5671
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5672
5672
|
});
|
|
5673
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5674
|
-
var SubscriptionHeader = newStyled.div(templateObject_5$
|
|
5673
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5674
|
+
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) {
|
|
5675
5675
|
var theme = _a.theme;
|
|
5676
5676
|
return theme.colors.shades[200].color;
|
|
5677
5677
|
}, function (_a) {
|
|
5678
5678
|
var theme = _a.theme;
|
|
5679
5679
|
return theme.colors.pallete.primary.color;
|
|
5680
5680
|
});
|
|
5681
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5682
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5683
|
-
var BenefitText = newStyled(Text$
|
|
5684
|
-
var SubscriptionDetails = newStyled(Text$
|
|
5681
|
+
var BenefitsContainer = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5682
|
+
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"])));
|
|
5683
|
+
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"])));
|
|
5684
|
+
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"])));
|
|
5685
5685
|
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"])));
|
|
5686
|
-
var DeliveryFrequencyLabel = newStyled(Text$
|
|
5686
|
+
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"])));
|
|
5687
5687
|
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) {
|
|
5688
5688
|
var selected = _a.selected, theme = _a.theme;
|
|
5689
5689
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5690
5690
|
});
|
|
5691
|
-
var Container$
|
|
5692
|
-
var templateObject_1$
|
|
5691
|
+
var Container$_ = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5692
|
+
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;
|
|
5693
5693
|
|
|
5694
5694
|
var radioIds = {
|
|
5695
5695
|
oneTime: {
|
|
@@ -5739,17 +5739,17 @@ var Autoship = function (_a) {
|
|
|
5739
5739
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5740
5740
|
};
|
|
5741
5741
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5742
|
-
return (jsxRuntime.jsxs(Container$
|
|
5742
|
+
return (jsxRuntime.jsxs(Container$_, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5743
5743
|
? benefitsColor.selected
|
|
5744
5744
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5745
5745
|
};
|
|
5746
5746
|
|
|
5747
|
-
var Img = newStyled.img(templateObject_1$
|
|
5747
|
+
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; });
|
|
5748
5748
|
var Image$3 = function (_a) {
|
|
5749
5749
|
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;
|
|
5750
5750
|
return (jsxRuntime.jsx(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));
|
|
5751
5751
|
};
|
|
5752
|
-
var templateObject_1$
|
|
5752
|
+
var templateObject_1$1z;
|
|
5753
5753
|
|
|
5754
5754
|
var _a$2;
|
|
5755
5755
|
exports.BeforeAfterVariant = void 0;
|
|
@@ -5764,13 +5764,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5764
5764
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5765
5765
|
_a$2);
|
|
5766
5766
|
|
|
5767
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5768
|
-
var CustomerInfo = newStyled.div(templateObject_2
|
|
5769
|
-
var Name = newStyled.h4(templateObject_3$
|
|
5770
|
-
var StarIconContainer = newStyled.div(templateObject_4$
|
|
5771
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
5772
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
5773
|
-
var templateObject_1$
|
|
5767
|
+
var CustomerDetails = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject([""], [""])));
|
|
5768
|
+
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"])));
|
|
5769
|
+
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"])));
|
|
5770
|
+
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"])));
|
|
5771
|
+
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"])));
|
|
5772
|
+
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"])));
|
|
5773
|
+
var templateObject_1$1y, templateObject_2$$, templateObject_3$P, templateObject_4$D, templateObject_5$o, templateObject_6$m;
|
|
5774
5774
|
|
|
5775
5775
|
var NameWithStars = function (_a) {
|
|
5776
5776
|
var name = _a.name, size = _a.size;
|
|
@@ -5788,10 +5788,10 @@ var ResultFeedback = function (_a) {
|
|
|
5788
5788
|
return (jsxRuntime.jsxs(CustomerDetails, { children: [jsxRuntime.jsx(NameWithStars, { name: name, size: size }, void 0), description && jsxRuntime.jsx(Description$2, { children: description }, void 0), reviewDays && jsxRuntime.jsx(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5789
5789
|
};
|
|
5790
5790
|
|
|
5791
|
-
var Container$
|
|
5792
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
5793
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
5794
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
5791
|
+
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; });
|
|
5792
|
+
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"])));
|
|
5793
|
+
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; });
|
|
5794
|
+
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) {
|
|
5795
5795
|
var theme = _a.theme;
|
|
5796
5796
|
return theme.colors.pallete.secondary.color;
|
|
5797
5797
|
}, function (_a) {
|
|
@@ -5801,7 +5801,7 @@ var UserInfoText = newStyled.div(templateObject_4$B || (templateObject_4$B = __m
|
|
|
5801
5801
|
var theme = _a.theme, size = _a.size;
|
|
5802
5802
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
5803
5803
|
});
|
|
5804
|
-
var templateObject_1$
|
|
5804
|
+
var templateObject_1$1x, templateObject_2$_, templateObject_3$O, templateObject_4$C;
|
|
5805
5805
|
|
|
5806
5806
|
/* base styles & size variants */
|
|
5807
5807
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -5876,10 +5876,10 @@ var BeforeAfterCard = function (_a) {
|
|
|
5876
5876
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5877
5877
|
var infoText = buildInfoText(name, age, months);
|
|
5878
5878
|
var Component = componentByVariant[variant];
|
|
5879
|
-
return (jsxRuntime.jsxs(Container$
|
|
5879
|
+
return (jsxRuntime.jsxs(Container$Z, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5880
5880
|
};
|
|
5881
5881
|
|
|
5882
|
-
var Section = newStyled.div(templateObject_1$
|
|
5882
|
+
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) {
|
|
5883
5883
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
5884
5884
|
});
|
|
5885
5885
|
var CardHeader = function (_a) {
|
|
@@ -5890,16 +5890,16 @@ var CardFooter = function (_a) {
|
|
|
5890
5890
|
var children = _a.children;
|
|
5891
5891
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
5892
5892
|
};
|
|
5893
|
-
var templateObject_1$
|
|
5893
|
+
var templateObject_1$1w;
|
|
5894
5894
|
|
|
5895
|
-
var Body = newStyled.div(templateObject_1$
|
|
5895
|
+
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"])));
|
|
5896
5896
|
var CardBody = function (_a) {
|
|
5897
5897
|
var children = _a.children;
|
|
5898
5898
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
5899
5899
|
};
|
|
5900
|
-
var templateObject_1$
|
|
5900
|
+
var templateObject_1$1v;
|
|
5901
5901
|
|
|
5902
|
-
var Container$
|
|
5902
|
+
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) {
|
|
5903
5903
|
var flex = _a.flex;
|
|
5904
5904
|
return flex &&
|
|
5905
5905
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5914,23 +5914,23 @@ var Container$W = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __
|
|
|
5914
5914
|
var Card$1 = function (_a) {
|
|
5915
5915
|
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;
|
|
5916
5916
|
var theme = useTheme();
|
|
5917
|
-
return (jsxRuntime.jsx(Container$
|
|
5917
|
+
return (jsxRuntime.jsx(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));
|
|
5918
5918
|
};
|
|
5919
5919
|
var Card$2 = Object.assign(Card$1, {
|
|
5920
5920
|
Header: CardHeader,
|
|
5921
5921
|
Footer: CardFooter,
|
|
5922
5922
|
Body: CardBody,
|
|
5923
5923
|
});
|
|
5924
|
-
var templateObject_1$
|
|
5924
|
+
var templateObject_1$1u;
|
|
5925
5925
|
|
|
5926
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
5927
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
5928
|
-
var TextLabel = newStyled(Text$
|
|
5926
|
+
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"])));
|
|
5927
|
+
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"])));
|
|
5928
|
+
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) {
|
|
5929
5929
|
var color = _a.color;
|
|
5930
5930
|
return color;
|
|
5931
5931
|
});
|
|
5932
|
-
var YouAreSaving = newStyled(Text$
|
|
5933
|
-
var templateObject_1$
|
|
5932
|
+
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"])));
|
|
5933
|
+
var templateObject_1$1t, templateObject_2$Z, templateObject_3$N, templateObject_4$B;
|
|
5934
5934
|
|
|
5935
5935
|
var Minimalistic = function (_a) {
|
|
5936
5936
|
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;
|
|
@@ -5938,28 +5938,28 @@ var Minimalistic = function (_a) {
|
|
|
5938
5938
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(StyledWrapper, { children: [jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(StyledContainer, { children: jsxRuntime.jsx(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5939
5939
|
};
|
|
5940
5940
|
|
|
5941
|
-
var Container$
|
|
5942
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
5943
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
5944
|
-
var PriceContainer$2 = newStyled.span(templateObject_4$
|
|
5941
|
+
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"])));
|
|
5942
|
+
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; });
|
|
5943
|
+
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; });
|
|
5944
|
+
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"])));
|
|
5945
5945
|
var Simple = function (_a) {
|
|
5946
5946
|
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;
|
|
5947
5947
|
var theme = useTheme();
|
|
5948
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
5948
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$X, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5949
5949
|
};
|
|
5950
|
-
var templateObject_1$
|
|
5950
|
+
var templateObject_1$1s, templateObject_2$Y, templateObject_3$M, templateObject_4$A;
|
|
5951
5951
|
|
|
5952
5952
|
var Bundle = {
|
|
5953
5953
|
Minimalistic: Minimalistic,
|
|
5954
5954
|
Simple: Simple,
|
|
5955
5955
|
};
|
|
5956
5956
|
|
|
5957
|
-
var Container$
|
|
5957
|
+
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) {
|
|
5958
5958
|
var displayBNPL = _a.displayBNPL;
|
|
5959
5959
|
return (displayBNPL ? 'flex' : 'none');
|
|
5960
5960
|
});
|
|
5961
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
5962
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
5961
|
+
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"])));
|
|
5962
|
+
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"])));
|
|
5963
5963
|
var BuyNowPayLater = function (_a) {
|
|
5964
5964
|
var _b;
|
|
5965
5965
|
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;
|
|
@@ -5969,43 +5969,43 @@ var BuyNowPayLater = function (_a) {
|
|
|
5969
5969
|
console.error('Icon', iconName, 'not found');
|
|
5970
5970
|
return null;
|
|
5971
5971
|
}
|
|
5972
|
-
return (jsxRuntime.jsx(Container$
|
|
5972
|
+
return (jsxRuntime.jsx(Container$W, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$9, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5973
5973
|
};
|
|
5974
|
-
var templateObject_1$
|
|
5974
|
+
var templateObject_1$1r, templateObject_2$X, templateObject_3$L;
|
|
5975
5975
|
|
|
5976
|
-
var Text$
|
|
5976
|
+
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; });
|
|
5977
5977
|
var Title$5 = function (_a) {
|
|
5978
5978
|
var title = _a.title;
|
|
5979
5979
|
var theme = useTheme();
|
|
5980
|
-
return jsxRuntime.jsx(Text$
|
|
5980
|
+
return jsxRuntime.jsx(Text$8, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
5981
5981
|
};
|
|
5982
|
-
var templateObject_1$
|
|
5982
|
+
var templateObject_1$1q;
|
|
5983
5983
|
|
|
5984
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
5984
|
+
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; });
|
|
5985
5985
|
var Promo = function (_a) {
|
|
5986
5986
|
var text = _a.text;
|
|
5987
5987
|
var theme = useTheme();
|
|
5988
5988
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
5989
5989
|
};
|
|
5990
|
-
var templateObject_1$
|
|
5990
|
+
var templateObject_1$1p;
|
|
5991
5991
|
|
|
5992
|
-
var Text$
|
|
5992
|
+
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; });
|
|
5993
5993
|
var Description$1 = function (_a) {
|
|
5994
5994
|
var text = _a.text;
|
|
5995
5995
|
var theme = useTheme();
|
|
5996
|
-
return jsxRuntime.jsx(Text$
|
|
5996
|
+
return jsxRuntime.jsx(Text$7, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
5997
5997
|
};
|
|
5998
|
-
var templateObject_1$
|
|
5998
|
+
var templateObject_1$1o;
|
|
5999
5999
|
|
|
6000
|
-
var Container$
|
|
6000
|
+
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"); });
|
|
6001
6001
|
var CloseButton$1 = function (_a) {
|
|
6002
6002
|
var onClick = _a.onClick, size = _a.size;
|
|
6003
6003
|
var theme = useTheme();
|
|
6004
|
-
return (jsxRuntime.jsx(Container$
|
|
6004
|
+
return (jsxRuntime.jsx(Container$V, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6005
6005
|
};
|
|
6006
|
-
var templateObject_1$
|
|
6006
|
+
var templateObject_1$1n;
|
|
6007
6007
|
|
|
6008
|
-
var Text$
|
|
6008
|
+
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) {
|
|
6009
6009
|
var backgroundColor = _a.backgroundColor;
|
|
6010
6010
|
return backgroundColor;
|
|
6011
6011
|
}, function (_a) {
|
|
@@ -6018,9 +6018,9 @@ var Text$5 = newStyled.h3(templateObject_1$1k || (templateObject_1$1k = __makeTe
|
|
|
6018
6018
|
var OfferBanner = function (_a) {
|
|
6019
6019
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
6020
6020
|
var theme = useTheme();
|
|
6021
|
-
return (jsxRuntime.jsx(Text$
|
|
6021
|
+
return (jsxRuntime.jsx(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));
|
|
6022
6022
|
};
|
|
6023
|
-
var templateObject_1$
|
|
6023
|
+
var templateObject_1$1m;
|
|
6024
6024
|
|
|
6025
6025
|
var CartProductItem = {
|
|
6026
6026
|
Title: Title$5,
|
|
@@ -6030,20 +6030,20 @@ var CartProductItem = {
|
|
|
6030
6030
|
CloseButton: CloseButton$1,
|
|
6031
6031
|
};
|
|
6032
6032
|
|
|
6033
|
-
var Container$
|
|
6034
|
-
var MobileContainer = newStyled(Container$
|
|
6035
|
-
var DollarPart = newStyled.span(templateObject_3$
|
|
6036
|
-
var ClubMembersText = newStyled.span(templateObject_4$
|
|
6037
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6038
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6039
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6040
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6033
|
+
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"])));
|
|
6034
|
+
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"])));
|
|
6035
|
+
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"])));
|
|
6036
|
+
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"])));
|
|
6037
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6038
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$l || (templateObject_6$l = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6039
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6040
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6041
6041
|
var ClubPriceLabel = function (_a) {
|
|
6042
6042
|
var clubPrice = _a.clubPrice;
|
|
6043
6043
|
var isMobile = useWindowDimensions().isMobile;
|
|
6044
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$
|
|
6044
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$U, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6045
6045
|
};
|
|
6046
|
-
var templateObject_1$
|
|
6046
|
+
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;
|
|
6047
6047
|
|
|
6048
6048
|
var Spacing = function (_a) {
|
|
6049
6049
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6051,10 +6051,10 @@ var Spacing = function (_a) {
|
|
|
6051
6051
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6052
6052
|
};
|
|
6053
6053
|
|
|
6054
|
-
var Container$
|
|
6055
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6056
|
-
var BarContainer$1 = newStyled('div')(templateObject_3$
|
|
6057
|
-
var Bar$2 = newStyled('div')(templateObject_4$
|
|
6054
|
+
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"])));
|
|
6055
|
+
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"])));
|
|
6056
|
+
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"])));
|
|
6057
|
+
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) {
|
|
6058
6058
|
var index = _a.index;
|
|
6059
6059
|
return "".concat(6 + 3 * index, "px");
|
|
6060
6060
|
}, function (_a) {
|
|
@@ -6063,14 +6063,14 @@ var Bar$2 = newStyled('div')(templateObject_4$x || (templateObject_4$x = __makeT
|
|
|
6063
6063
|
});
|
|
6064
6064
|
var StrengthBars = function (_a) {
|
|
6065
6065
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6066
|
-
return (jsxRuntime.jsxs(Container$
|
|
6066
|
+
return (jsxRuntime.jsxs(Container$T, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6067
6067
|
};
|
|
6068
|
-
var templateObject_1$
|
|
6068
|
+
var templateObject_1$1k, templateObject_2$V, templateObject_3$J, templateObject_4$y;
|
|
6069
6069
|
|
|
6070
|
-
var Container$
|
|
6071
|
-
var templateObject_1$
|
|
6070
|
+
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"])));
|
|
6071
|
+
var templateObject_1$1j;
|
|
6072
6072
|
|
|
6073
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6073
|
+
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) {
|
|
6074
6074
|
var marginRight = _a.marginRight;
|
|
6075
6075
|
return marginRight;
|
|
6076
6076
|
});
|
|
@@ -6082,11 +6082,11 @@ var StarList = function (_a) {
|
|
|
6082
6082
|
width: theme.component.stars.element[size].width,
|
|
6083
6083
|
height: theme.component.stars.element[size].height,
|
|
6084
6084
|
};
|
|
6085
|
-
return (jsxRuntime.jsx(Container$
|
|
6085
|
+
return (jsxRuntime.jsx(Container$S, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6086
6086
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6087
6087
|
}) }, void 0));
|
|
6088
6088
|
};
|
|
6089
|
-
var templateObject_1$
|
|
6089
|
+
var templateObject_1$1i;
|
|
6090
6090
|
|
|
6091
6091
|
/* base styles & size variants */
|
|
6092
6092
|
var LabelStyles = {
|
|
@@ -6127,8 +6127,8 @@ var LabelStyles = {
|
|
|
6127
6127
|
});
|
|
6128
6128
|
},
|
|
6129
6129
|
};
|
|
6130
|
-
var Container$
|
|
6131
|
-
var templateObject_1$
|
|
6130
|
+
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"])));
|
|
6131
|
+
var templateObject_1$1h;
|
|
6132
6132
|
|
|
6133
6133
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6134
6134
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6148,7 +6148,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6148
6148
|
}),
|
|
6149
6149
|
];
|
|
6150
6150
|
});
|
|
6151
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6151
|
+
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; });
|
|
6152
6152
|
var starsNumber = 5;
|
|
6153
6153
|
var Rating = function (_a) {
|
|
6154
6154
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6169,14 +6169,14 @@ var Rating = function (_a) {
|
|
|
6169
6169
|
href: reviewsContainerId,
|
|
6170
6170
|
}
|
|
6171
6171
|
: {};
|
|
6172
|
-
return (jsxRuntime.jsxs(Container$
|
|
6172
|
+
return (jsxRuntime.jsxs(Container$R, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6173
6173
|
};
|
|
6174
|
-
var templateObject_1$
|
|
6174
|
+
var templateObject_1$1g;
|
|
6175
6175
|
|
|
6176
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6177
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6178
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$
|
|
6179
|
-
var PriceWithTagContainer = newStyled.span(templateObject_4$
|
|
6176
|
+
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"])));
|
|
6177
|
+
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"])));
|
|
6178
|
+
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"])));
|
|
6179
|
+
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"])));
|
|
6180
6180
|
var RegularPriceTag = function () {
|
|
6181
6181
|
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6182
6182
|
};
|
|
@@ -6225,11 +6225,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
6225
6225
|
: exports.ComponentSize.XSmall;
|
|
6226
6226
|
return (jsxRuntime.jsx(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6227
6227
|
};
|
|
6228
|
-
return (jsxRuntime.jsxs(Container
|
|
6228
|
+
return (jsxRuntime.jsxs(Container$$, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6229
6229
|
? finalPriceArray[0]
|
|
6230
6230
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6231
6231
|
};
|
|
6232
|
-
var templateObject_1$
|
|
6232
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$I, templateObject_4$x;
|
|
6233
6233
|
|
|
6234
6234
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6235
6235
|
var width = _a.width, height = _a.height;
|
|
@@ -6239,10 +6239,10 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6239
6239
|
height: height,
|
|
6240
6240
|
});
|
|
6241
6241
|
});
|
|
6242
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6243
|
-
var Container$
|
|
6244
|
-
var ProdCardContainer$1 = newStyled.div(templateObject_3$
|
|
6245
|
-
var Title$4 = newStyled.p(templateObject_4$
|
|
6242
|
+
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"])));
|
|
6243
|
+
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"])));
|
|
6244
|
+
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"])));
|
|
6245
|
+
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; });
|
|
6246
6246
|
var getStylesBySize$9 = function (size) {
|
|
6247
6247
|
switch (size) {
|
|
6248
6248
|
case exports.ComponentSize.Medium:
|
|
@@ -6268,15 +6268,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6268
6268
|
};
|
|
6269
6269
|
}
|
|
6270
6270
|
};
|
|
6271
|
-
var TopTagContainer$
|
|
6271
|
+
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) {
|
|
6272
6272
|
var style = _a.style;
|
|
6273
6273
|
return style.width;
|
|
6274
6274
|
});
|
|
6275
|
-
var BottomTagContainer$
|
|
6275
|
+
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) {
|
|
6276
6276
|
var style = _a.style;
|
|
6277
6277
|
return style.width;
|
|
6278
6278
|
});
|
|
6279
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6279
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6280
6280
|
var ProductItemMobile = function (_a) {
|
|
6281
6281
|
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 ? {
|
|
6282
6282
|
display: false,
|
|
@@ -6333,9 +6333,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6333
6333
|
return jsx(Fragment, {}, void 0);
|
|
6334
6334
|
return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6335
6335
|
};
|
|
6336
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6336
|
+
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));
|
|
6337
6337
|
};
|
|
6338
|
-
var templateObject_1$
|
|
6338
|
+
var templateObject_1$1e, templateObject_2$T, templateObject_3$H, templateObject_4$w, templateObject_5$m, templateObject_6$k, templateObject_7$e;
|
|
6339
6339
|
|
|
6340
6340
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6341
6341
|
var width = _a.width, height = _a.height;
|
|
@@ -6345,10 +6345,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6345
6345
|
height: height,
|
|
6346
6346
|
});
|
|
6347
6347
|
});
|
|
6348
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6349
|
-
var Container$
|
|
6350
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
6351
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
6348
|
+
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; });
|
|
6349
|
+
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"])));
|
|
6350
|
+
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"])));
|
|
6351
|
+
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; });
|
|
6352
6352
|
var getStylesBySize$8 = function (size) {
|
|
6353
6353
|
switch (size) {
|
|
6354
6354
|
case exports.ComponentSize.Medium:
|
|
@@ -6374,15 +6374,15 @@ var getStylesBySize$8 = function (size) {
|
|
|
6374
6374
|
};
|
|
6375
6375
|
}
|
|
6376
6376
|
};
|
|
6377
|
-
var TopTagContainer$
|
|
6377
|
+
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) {
|
|
6378
6378
|
var style = _a.style;
|
|
6379
6379
|
return style.width;
|
|
6380
6380
|
});
|
|
6381
|
-
var BottomTagContainer$
|
|
6381
|
+
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) {
|
|
6382
6382
|
var style = _a.style;
|
|
6383
6383
|
return style.width;
|
|
6384
6384
|
});
|
|
6385
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
6385
|
+
var MarginTopContainer = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6386
6386
|
var ProductItemTK = function (_a) {
|
|
6387
6387
|
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 ? {
|
|
6388
6388
|
display: false,
|
|
@@ -6426,26 +6426,26 @@ var ProductItemTK = function (_a) {
|
|
|
6426
6426
|
: undefined }, void 0));
|
|
6427
6427
|
};
|
|
6428
6428
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6429
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6429
|
+
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 ? (
|
|
6430
6430
|
// @ts-ignore
|
|
6431
|
-
jsx(Text$
|
|
6431
|
+
jsx(Text$9, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6432
6432
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6433
6433
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6434
6434
|
} }, { 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));
|
|
6435
6435
|
};
|
|
6436
|
-
var templateObject_1$
|
|
6436
|
+
var templateObject_1$1d, templateObject_2$S, templateObject_3$G, templateObject_4$v, templateObject_5$l, templateObject_6$j, templateObject_7$d;
|
|
6437
6437
|
|
|
6438
|
-
var Container$
|
|
6438
|
+
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"])));
|
|
6439
6439
|
function withProductGrid(ProductItemComponent, data) {
|
|
6440
6440
|
function WithProductGrid(props) {
|
|
6441
|
-
return (jsxRuntime.jsx(Container$
|
|
6441
|
+
return (jsxRuntime.jsx(Container$O, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6442
6442
|
}
|
|
6443
6443
|
/* istanbul ignore next */
|
|
6444
6444
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
6445
6445
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6446
6446
|
return WithProductGrid;
|
|
6447
6447
|
}
|
|
6448
|
-
var templateObject_1$
|
|
6448
|
+
var templateObject_1$1c;
|
|
6449
6449
|
|
|
6450
6450
|
var Collection = {
|
|
6451
6451
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6492,14 +6492,14 @@ var OutOfStock = function (_a) {
|
|
|
6492
6492
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6493
6493
|
};
|
|
6494
6494
|
|
|
6495
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6496
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6497
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
6498
|
-
var Span = newStyled.span(templateObject_4$
|
|
6499
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6495
|
+
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"])));
|
|
6496
|
+
newStyled(lt.Label)(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6497
|
+
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"])));
|
|
6498
|
+
var Span = newStyled.span(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6499
|
+
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"])));
|
|
6500
6500
|
var Label$2 = function (_a) {
|
|
6501
6501
|
var label = _a.label, values = _a.values;
|
|
6502
|
-
return (jsxRuntime.jsxs(Text$
|
|
6502
|
+
return (jsxRuntime.jsxs(Text$9, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
6503
6503
|
};
|
|
6504
6504
|
var Option = function (_a) {
|
|
6505
6505
|
var value = _a.value, children = _a.children;
|
|
@@ -6514,23 +6514,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6514
6514
|
Option: Option,
|
|
6515
6515
|
OptionsContainer: OptionsContainer,
|
|
6516
6516
|
});
|
|
6517
|
-
var templateObject_1$
|
|
6517
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u, templateObject_5$k;
|
|
6518
6518
|
|
|
6519
|
-
var Container$
|
|
6519
|
+
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) {
|
|
6520
6520
|
var borderColor = _a.borderColor;
|
|
6521
6521
|
return borderColor;
|
|
6522
6522
|
}, function (_a) {
|
|
6523
6523
|
var noStock = _a.noStock;
|
|
6524
6524
|
return (noStock ? '0.4' : '1');
|
|
6525
6525
|
});
|
|
6526
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6526
|
+
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"])));
|
|
6527
6527
|
var PatternSelector = function (_a) {
|
|
6528
6528
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6529
6529
|
var theme = useTheme();
|
|
6530
6530
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6531
|
-
return (jsxRuntime.jsx(Container$
|
|
6531
|
+
return (jsxRuntime.jsx(Container$N, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6532
6532
|
};
|
|
6533
|
-
var templateObject_1$
|
|
6533
|
+
var templateObject_1$1a, templateObject_2$Q;
|
|
6534
6534
|
|
|
6535
6535
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6536
6536
|
if (options == null || options.length === 0) {
|
|
@@ -6589,21 +6589,21 @@ var SingleColorPicker = function (_a) {
|
|
|
6589
6589
|
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));
|
|
6590
6590
|
};
|
|
6591
6591
|
|
|
6592
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6593
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6594
|
-
var Row$2 = newStyled.div(templateObject_3$
|
|
6592
|
+
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'); });
|
|
6593
|
+
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"])));
|
|
6594
|
+
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) {
|
|
6595
6595
|
return props.rightToLeft &&
|
|
6596
6596
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6597
6597
|
});
|
|
6598
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
6599
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6600
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6598
|
+
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; });
|
|
6599
|
+
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; });
|
|
6600
|
+
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; });
|
|
6601
6601
|
var CrossSellCheckbox = function (_a) {
|
|
6602
6602
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6603
6603
|
var theme = useTheme();
|
|
6604
6604
|
return (jsxRuntime.jsxs(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col$1, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6605
6605
|
};
|
|
6606
|
-
var templateObject_1$
|
|
6606
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$E, templateObject_4$t, templateObject_5$j, templateObject_6$i;
|
|
6607
6607
|
|
|
6608
6608
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6609
6609
|
__proto__: null,
|
|
@@ -6631,7 +6631,7 @@ var sizeMapper = (_a = {},
|
|
|
6631
6631
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6632
6632
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6633
6633
|
_a);
|
|
6634
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6634
|
+
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) {
|
|
6635
6635
|
var wide = _a.wide;
|
|
6636
6636
|
return (wide ? '100%' : 'fit-content');
|
|
6637
6637
|
}, function (_a) {
|
|
@@ -6653,8 +6653,8 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$16 || (templateObj
|
|
|
6653
6653
|
var theme = _a.theme;
|
|
6654
6654
|
return theme.colors.text.disabled;
|
|
6655
6655
|
});
|
|
6656
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6657
|
-
var templateObject_1$
|
|
6656
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
6657
|
+
var templateObject_1$18, templateObject_2$O;
|
|
6658
6658
|
|
|
6659
6659
|
var BaseCTA = function (_a) {
|
|
6660
6660
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, iconName = _a.iconName, props = __rest(_a, ["text", "wide", "size", "iconName"]);
|
|
@@ -6721,44 +6721,44 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6721
6721
|
} }), void 0));
|
|
6722
6722
|
};
|
|
6723
6723
|
|
|
6724
|
-
var Container$
|
|
6725
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
6726
|
-
var Text$
|
|
6727
|
-
var Details = newStyled.span(templateObject_4$
|
|
6724
|
+
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; });
|
|
6725
|
+
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"])));
|
|
6726
|
+
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; });
|
|
6727
|
+
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; });
|
|
6728
6728
|
var Note = function (_a) {
|
|
6729
6729
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6730
6730
|
var theme = useTheme();
|
|
6731
|
-
return (jsxRuntime.jsxs(Container$
|
|
6731
|
+
return (jsxRuntime.jsxs(Container$M, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$5, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6732
6732
|
};
|
|
6733
|
-
var templateObject_1$
|
|
6733
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$D, templateObject_4$s;
|
|
6734
6734
|
|
|
6735
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
6735
|
+
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) {
|
|
6736
6736
|
var theme = _a.theme;
|
|
6737
6737
|
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 ");
|
|
6738
6738
|
});
|
|
6739
|
-
var Line = newStyled.div(templateObject_2$
|
|
6740
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
6739
|
+
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; });
|
|
6740
|
+
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({
|
|
6741
6741
|
flexDirection: ['column', 'row'],
|
|
6742
6742
|
}));
|
|
6743
|
-
var Col = newStyled.div(templateObject_4$
|
|
6743
|
+
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({
|
|
6744
6744
|
margin: ['0', '0 1.25rem'],
|
|
6745
6745
|
marginBottom: ['1.875rem', '0'],
|
|
6746
6746
|
alignItems: ['center', 'flex-start'],
|
|
6747
6747
|
textAlign: ['center', 'inherit'],
|
|
6748
6748
|
width: ['100%', 'inherit'],
|
|
6749
6749
|
}));
|
|
6750
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
6750
|
+
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({
|
|
6751
6751
|
marginRight: ['0', '0.438rem'],
|
|
6752
6752
|
marginBottom: ['10px', '0'],
|
|
6753
6753
|
width: ['auto', '1.5rem'],
|
|
6754
6754
|
}));
|
|
6755
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6755
|
+
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({
|
|
6756
6756
|
display: ['block', 'flex'],
|
|
6757
6757
|
}), function (_a) {
|
|
6758
6758
|
var theme = _a.theme;
|
|
6759
6759
|
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 ");
|
|
6760
6760
|
});
|
|
6761
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6761
|
+
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) {
|
|
6762
6762
|
var theme = _a.theme;
|
|
6763
6763
|
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 ");
|
|
6764
6764
|
}, function (_a) {
|
|
@@ -6769,22 +6769,22 @@ var SectionDetails = newStyled.p(templateObject_7$b || (templateObject_7$b = __m
|
|
|
6769
6769
|
})
|
|
6770
6770
|
: '';
|
|
6771
6771
|
});
|
|
6772
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
6772
|
+
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; });
|
|
6773
6773
|
var DeliveryDetails = function (_a) {
|
|
6774
6774
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6775
6775
|
var theme = useTheme();
|
|
6776
6776
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$3, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6777
6777
|
};
|
|
6778
|
-
var templateObject_1$
|
|
6778
|
+
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;
|
|
6779
6779
|
|
|
6780
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
6780
|
+
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) {
|
|
6781
6781
|
var top = _a.top;
|
|
6782
6782
|
return top;
|
|
6783
6783
|
}, function (_a) {
|
|
6784
6784
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6785
6785
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6786
6786
|
});
|
|
6787
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
6787
|
+
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) {
|
|
6788
6788
|
var height = _a.height;
|
|
6789
6789
|
return height;
|
|
6790
6790
|
}, function (_a) {
|
|
@@ -6831,20 +6831,20 @@ var Drawer = function (_a) {
|
|
|
6831
6831
|
}, [isOpen, onClose, onOpen]);
|
|
6832
6832
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, top: top, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, height: height, top: top, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
6833
6833
|
};
|
|
6834
|
-
var templateObject_1$
|
|
6834
|
+
var templateObject_1$15, templateObject_2$L;
|
|
6835
6835
|
|
|
6836
6836
|
var TooltipArrow = function (_a) {
|
|
6837
6837
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
6838
6838
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "".concat(width, "rem"), height: "".concat(height, "rem"), viewBox: "0 0 20 12", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: "Tooltip Arrow" }, void 0), jsxRuntime.jsx("path", { d: "M11.1523 8.83618L18.9325 -0.500001L1.06752 -0.500001L8.84767 8.83618C9.44736 9.55581 10.5526 9.55581 11.1523 8.83618Z", fill: fill, stroke: stroke }, void 0)] }), void 0));
|
|
6839
6839
|
};
|
|
6840
6840
|
|
|
6841
|
-
var List = newStyled.ul(templateObject_1$
|
|
6842
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
6843
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
6844
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
6845
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
6846
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
6847
|
-
var templateObject_1$
|
|
6841
|
+
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"])));
|
|
6842
|
+
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"])));
|
|
6843
|
+
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"])));
|
|
6844
|
+
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"])));
|
|
6845
|
+
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; });
|
|
6846
|
+
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; });
|
|
6847
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$B, templateObject_4$q, templateObject_5$h, templateObject_6$g;
|
|
6848
6848
|
|
|
6849
6849
|
var DropdownListIcons = function (_a) {
|
|
6850
6850
|
var items = _a.items;
|
|
@@ -6857,13 +6857,13 @@ var Dropdown = function (_a) {
|
|
|
6857
6857
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
6858
6858
|
};
|
|
6859
6859
|
|
|
6860
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
6861
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
6862
|
-
var SizeLabel = newStyled.span(templateObject_3$
|
|
6863
|
-
var DetailLabel = newStyled.span(templateObject_4$
|
|
6864
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
6865
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
6866
|
-
var templateObject_1$
|
|
6860
|
+
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"])));
|
|
6861
|
+
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"])));
|
|
6862
|
+
var SizeLabel = newStyled.span(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6863
|
+
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"])));
|
|
6864
|
+
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"])));
|
|
6865
|
+
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"])));
|
|
6866
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$A, templateObject_4$p, templateObject_5$g, templateObject_6$f;
|
|
6867
6867
|
|
|
6868
6868
|
var SizeDropdown = function (_a) {
|
|
6869
6869
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6886,10 +6886,10 @@ var SizeDropdown = function (_a) {
|
|
|
6886
6886
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsxRuntime.jsx(SizeLabel, { children: selectedOption.size }, void 0), jsxRuntime.jsx(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsxRuntime.jsx(DropdownOptions, { children: options.map(function (option) { return (jsxRuntime.jsxs(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsxRuntime.jsx("span", { children: option.size }, void 0), jsxRuntime.jsx("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
6887
6887
|
};
|
|
6888
6888
|
|
|
6889
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
6890
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
6891
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
6892
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
6889
|
+
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; });
|
|
6890
|
+
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; });
|
|
6891
|
+
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"])));
|
|
6892
|
+
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"])));
|
|
6893
6893
|
var DropdownDialog = function (_a) {
|
|
6894
6894
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
6895
6895
|
var theme = useTheme$1();
|
|
@@ -6898,7 +6898,7 @@ var DropdownDialog = function (_a) {
|
|
|
6898
6898
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
6899
6899
|
}) }), void 0) }), void 0));
|
|
6900
6900
|
};
|
|
6901
|
-
var templateObject_1$
|
|
6901
|
+
var templateObject_1$12, templateObject_2$I, templateObject_3$z, templateObject_4$o;
|
|
6902
6902
|
|
|
6903
6903
|
function FilteringDropdown(_a) {
|
|
6904
6904
|
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;
|
|
@@ -6931,29 +6931,29 @@ function FilteringDropdown(_a) {
|
|
|
6931
6931
|
}) }, void 0)] }), void 0));
|
|
6932
6932
|
}
|
|
6933
6933
|
|
|
6934
|
-
var Title$1 = newStyled.div(templateObject_1
|
|
6935
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
6936
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
6937
|
-
var Container$
|
|
6934
|
+
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; });
|
|
6935
|
+
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; });
|
|
6936
|
+
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"])));
|
|
6937
|
+
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'); });
|
|
6938
6938
|
var Accordion = function (_a) {
|
|
6939
6939
|
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;
|
|
6940
6940
|
var theme = useTheme();
|
|
6941
6941
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6942
|
-
return (jsxRuntime.jsxs(Container$
|
|
6942
|
+
return (jsxRuntime.jsxs(Container$L, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
6943
6943
|
};
|
|
6944
|
-
var templateObject_1
|
|
6945
|
-
|
|
6946
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
6947
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
6948
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
6949
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
6950
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
6951
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
6952
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
6953
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
6954
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
6944
|
+
var templateObject_1$11, templateObject_2$H, templateObject_3$y, templateObject_4$n;
|
|
6945
|
+
|
|
6946
|
+
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; });
|
|
6947
|
+
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"])));
|
|
6948
|
+
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"])));
|
|
6949
|
+
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"])));
|
|
6950
|
+
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; });
|
|
6951
|
+
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; });
|
|
6952
|
+
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'); });
|
|
6953
|
+
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; });
|
|
6954
|
+
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"])));
|
|
6955
6955
|
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"])));
|
|
6956
|
-
var templateObject_1$
|
|
6956
|
+
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;
|
|
6957
6957
|
|
|
6958
6958
|
var getStylesBySize$7 = function (size, theme) {
|
|
6959
6959
|
switch (size) {
|
|
@@ -7018,9 +7018,9 @@ var SelectorSecondary = function (_a) {
|
|
|
7018
7018
|
} }), id: id }, void 0));
|
|
7019
7019
|
};
|
|
7020
7020
|
|
|
7021
|
-
var UL = newStyled.ul(templateObject_1
|
|
7022
|
-
var LI = newStyled.li(templateObject_2$
|
|
7023
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
7021
|
+
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"])));
|
|
7022
|
+
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; });
|
|
7023
|
+
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"])));
|
|
7024
7024
|
var Tags = function (_a) {
|
|
7025
7025
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
7026
7026
|
var theme = useTheme();
|
|
@@ -7028,7 +7028,7 @@ var Tags = function (_a) {
|
|
|
7028
7028
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color, width: "100%", height: "100%" }, void 0) }), void 0)] }), index));
|
|
7029
7029
|
}) }), void 0));
|
|
7030
7030
|
};
|
|
7031
|
-
var templateObject_1
|
|
7031
|
+
var templateObject_1$$, templateObject_2$F, templateObject_3$w;
|
|
7032
7032
|
|
|
7033
7033
|
var Filters = function (_a) {
|
|
7034
7034
|
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;
|
|
@@ -7164,8 +7164,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7164
7164
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
7165
7165
|
};
|
|
7166
7166
|
|
|
7167
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7168
|
-
var Container$
|
|
7167
|
+
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"])));
|
|
7168
|
+
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"])));
|
|
7169
7169
|
var FitGuarantee = function (_a) {
|
|
7170
7170
|
var _b;
|
|
7171
7171
|
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;
|
|
@@ -7176,17 +7176,17 @@ var FitGuarantee = function (_a) {
|
|
|
7176
7176
|
console.error('Icon', iconName, 'not found');
|
|
7177
7177
|
return null;
|
|
7178
7178
|
}
|
|
7179
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$
|
|
7179
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Container$K, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsxRuntime.jsx(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxRuntime.jsxs(Container$K, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsx(Text$9, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7180
7180
|
margin: '0.1rem 0',
|
|
7181
7181
|
width: '100%',
|
|
7182
7182
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
7183
7183
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7184
|
-
} }, { children: title }), void 0), jsxRuntime.jsx(Text$
|
|
7184
|
+
} }, { children: title }), void 0), jsxRuntime.jsx(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));
|
|
7185
7185
|
};
|
|
7186
|
-
var templateObject_1$
|
|
7186
|
+
var templateObject_1$_, templateObject_2$E;
|
|
7187
7187
|
|
|
7188
|
-
var Container$
|
|
7189
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7188
|
+
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"])));
|
|
7189
|
+
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; });
|
|
7190
7190
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7191
7191
|
border: 'none',
|
|
7192
7192
|
background: 'transparent',
|
|
@@ -7199,11 +7199,11 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7199
7199
|
var FitPredictor = function (_a) {
|
|
7200
7200
|
var onClick = _a.onClick;
|
|
7201
7201
|
var theme = useTheme();
|
|
7202
|
-
return (jsxs(Container$
|
|
7202
|
+
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));
|
|
7203
7203
|
};
|
|
7204
|
-
var templateObject_1$
|
|
7204
|
+
var templateObject_1$Z, templateObject_2$D;
|
|
7205
7205
|
|
|
7206
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
7206
|
+
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) {
|
|
7207
7207
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
7208
7208
|
return borderRadiusVariant &&
|
|
7209
7209
|
"\nborder-radius: 20px;\n";
|
|
@@ -7218,9 +7218,9 @@ var ImageSmallPreview = function (_a) {
|
|
|
7218
7218
|
var theme = useTheme();
|
|
7219
7219
|
return (jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
7220
7220
|
};
|
|
7221
|
-
var templateObject_1$
|
|
7221
|
+
var templateObject_1$Y;
|
|
7222
7222
|
|
|
7223
|
-
var Button$
|
|
7223
|
+
var Button$6 = newStyled.button(function () { return ({
|
|
7224
7224
|
background: 'transparent',
|
|
7225
7225
|
border: 'none',
|
|
7226
7226
|
cursor: 'pointer',
|
|
@@ -7232,7 +7232,7 @@ var Direction;
|
|
|
7232
7232
|
})(Direction || (Direction = {}));
|
|
7233
7233
|
var ArrowButton$1 = function (_a) {
|
|
7234
7234
|
var direction = _a.direction, onClick = _a.onClick, width = _a.width, height = _a.height, className = _a.className;
|
|
7235
|
-
return (jsxRuntime.jsx(Button$
|
|
7235
|
+
return (jsxRuntime.jsx(Button$6, __assign$1({ className: className, type: "button", onClick: onClick, "data-testid": "arrow-button-".concat(direction) }, { children: direction === 'left' ? (jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { testId: "arrow-button-left", width: width, height: height, opacity: 0.5 }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronRight, { testId: "arrow-button-right", width: width, height: height, opacity: 0.5 }, void 0)) }), void 0));
|
|
7236
7236
|
};
|
|
7237
7237
|
|
|
7238
7238
|
function _defineProperty(obj, key, value) {
|
|
@@ -11462,14 +11462,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11462
11462
|
return Slider;
|
|
11463
11463
|
}(React__default["default"].Component);
|
|
11464
11464
|
|
|
11465
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
11465
|
+
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) {
|
|
11466
11466
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11467
11467
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11468
11468
|
}, function (_a) {
|
|
11469
11469
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11470
11470
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11471
11471
|
});
|
|
11472
|
-
var templateObject_1$
|
|
11472
|
+
var templateObject_1$X;
|
|
11473
11473
|
|
|
11474
11474
|
var getStylesBySize$6 = function (size) {
|
|
11475
11475
|
// rem units
|
|
@@ -11528,9 +11528,9 @@ var SliderNavigation = function (_a) {
|
|
|
11528
11528
|
} }, { 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));
|
|
11529
11529
|
};
|
|
11530
11530
|
|
|
11531
|
-
var horizontalStyles = css(templateObject_1$
|
|
11532
|
-
var verticalStyles = css(templateObject_2$
|
|
11533
|
-
var Container$
|
|
11531
|
+
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"])));
|
|
11532
|
+
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"])));
|
|
11533
|
+
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) {
|
|
11534
11534
|
var position = _a.position;
|
|
11535
11535
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11536
11536
|
}, function (_a) {
|
|
@@ -11538,11 +11538,11 @@ var Container$G = newStyled.div(templateObject_3$u || (templateObject_3$u = __ma
|
|
|
11538
11538
|
return hasOverflowArrows &&
|
|
11539
11539
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11540
11540
|
});
|
|
11541
|
-
var Button$
|
|
11542
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11543
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11544
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11545
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11541
|
+
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"])));
|
|
11542
|
+
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"])));
|
|
11543
|
+
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"])));
|
|
11544
|
+
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"])));
|
|
11545
|
+
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"])));
|
|
11546
11546
|
var ImagePreviewList = function (_a) {
|
|
11547
11547
|
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;
|
|
11548
11548
|
var handleScrollVerticalPrev = function () {
|
|
@@ -11553,13 +11553,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11553
11553
|
var element = document.querySelector(".imageListContainer");
|
|
11554
11554
|
element.scrollBy(0, 200);
|
|
11555
11555
|
};
|
|
11556
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$
|
|
11556
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$I, __assign$1({ "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
11557
11557
|
arrowWidth: 0.75,
|
|
11558
11558
|
arrowHeight: 1.25,
|
|
11559
11559
|
arrowPadding: 1.625,
|
|
11560
|
-
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$
|
|
11560
|
+
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.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 (jsxRuntime.jsx(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11561
11561
|
};
|
|
11562
|
-
var templateObject_1$
|
|
11562
|
+
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;
|
|
11563
11563
|
|
|
11564
11564
|
var propTypes = {exports: {}};
|
|
11565
11565
|
|
|
@@ -13152,28 +13152,28 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13152
13152
|
afterZoomOut: PropTypes.func
|
|
13153
13153
|
} : {};
|
|
13154
13154
|
|
|
13155
|
-
var Container$
|
|
13155
|
+
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) {
|
|
13156
13156
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13157
13157
|
return borderRadiusVariant &&
|
|
13158
13158
|
"\n border-radius: 40px;\n ";
|
|
13159
13159
|
});
|
|
13160
|
-
var TopTagContainer$
|
|
13161
|
-
var BottomTagContainer$
|
|
13162
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$
|
|
13163
|
-
var Video$
|
|
13164
|
-
var VideoTag$
|
|
13165
|
-
var Text$
|
|
13160
|
+
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'); });
|
|
13161
|
+
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"])));
|
|
13162
|
+
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"])));
|
|
13163
|
+
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"])));
|
|
13164
|
+
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"])));
|
|
13165
|
+
var Text$4 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13166
13166
|
var ImageProductWithTags$1 = function (_a) {
|
|
13167
13167
|
var _b, _c;
|
|
13168
13168
|
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;
|
|
13169
|
-
return (jsxRuntime.jsxs(Container$
|
|
13169
|
+
return (jsxRuntime.jsxs(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
13170
13170
|
alt: image.alt,
|
|
13171
13171
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13172
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$
|
|
13172
|
+
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Video$2, { children: jsxRuntime.jsx("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), jsxRuntime.jsxs(VideoTag$2, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsxRuntime.jsx(Text$4, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13173
13173
|
};
|
|
13174
|
-
var templateObject_1$
|
|
13174
|
+
var templateObject_1$V, templateObject_2$B, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c, templateObject_7$9;
|
|
13175
13175
|
|
|
13176
|
-
var Container$
|
|
13176
|
+
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"])));
|
|
13177
13177
|
var ProductGallery = function (_a) {
|
|
13178
13178
|
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;
|
|
13179
13179
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13181,11 +13181,11 @@ var ProductGallery = function (_a) {
|
|
|
13181
13181
|
React$2.useEffect(function () {
|
|
13182
13182
|
setSelectedImage(initialValue);
|
|
13183
13183
|
}, [initialValue]);
|
|
13184
|
-
return (jsxRuntime.jsxs(Container$
|
|
13184
|
+
return (jsxRuntime.jsxs(Container$G, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13185
13185
|
setSelectedImage(value);
|
|
13186
13186
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13187
13187
|
};
|
|
13188
|
-
var templateObject_1$
|
|
13188
|
+
var templateObject_1$U;
|
|
13189
13189
|
|
|
13190
13190
|
var getStylesBySize$5 = function (size) {
|
|
13191
13191
|
switch (size) {
|
|
@@ -13206,7 +13206,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13206
13206
|
};
|
|
13207
13207
|
}
|
|
13208
13208
|
};
|
|
13209
|
-
var Container$
|
|
13209
|
+
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) {
|
|
13210
13210
|
var backgroundColor = _a.backgroundColor;
|
|
13211
13211
|
return backgroundColor;
|
|
13212
13212
|
}, function (_a) {
|
|
@@ -13234,11 +13234,11 @@ var Container$D = newStyled.div(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
13234
13234
|
var IconButton = function (_a) {
|
|
13235
13235
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13236
13236
|
var theme = useTheme();
|
|
13237
|
-
return (jsxRuntime.jsx(Container$
|
|
13237
|
+
return (jsxRuntime.jsx(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));
|
|
13238
13238
|
};
|
|
13239
|
-
var templateObject_1$
|
|
13239
|
+
var templateObject_1$T;
|
|
13240
13240
|
|
|
13241
|
-
var StyledButton$1 = newStyled(BaseButton)(templateObject_1$
|
|
13241
|
+
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; });
|
|
13242
13242
|
var AmazonButton = function (_a) {
|
|
13243
13243
|
var onClick = _a.onClick;
|
|
13244
13244
|
return (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13247,9 +13247,9 @@ var PaypalButton = function (_a) {
|
|
|
13247
13247
|
var onClick = _a.onClick;
|
|
13248
13248
|
return (jsxRuntime.jsx(StyledButton$1, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13249
13249
|
};
|
|
13250
|
-
var templateObject_1$
|
|
13250
|
+
var templateObject_1$S;
|
|
13251
13251
|
|
|
13252
|
-
var Container$
|
|
13252
|
+
var Container$E = newStyled.div(function (props) { return ({
|
|
13253
13253
|
height: 'auto',
|
|
13254
13254
|
textAlign: 'center',
|
|
13255
13255
|
justifyContent: 'center',
|
|
@@ -13299,12 +13299,12 @@ var IconsWithTitle = function (_a) {
|
|
|
13299
13299
|
textAlign: 'center',
|
|
13300
13300
|
lineHeight: '18px',
|
|
13301
13301
|
};
|
|
13302
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
13302
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$E, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$9, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13303
13303
|
};
|
|
13304
13304
|
|
|
13305
|
-
var Container$
|
|
13306
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13307
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
13305
|
+
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'); });
|
|
13306
|
+
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'); });
|
|
13307
|
+
var StyledTitle = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13308
13308
|
var titlePosition = _a.titlePosition;
|
|
13309
13309
|
return titlePosition == 'center' &&
|
|
13310
13310
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -13312,15 +13312,15 @@ var StyledTitle = newStyled.div(templateObject_3$s || (templateObject_3$s = __ma
|
|
|
13312
13312
|
var ImageCardWithDescription = function (_a) {
|
|
13313
13313
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13314
13314
|
var isMobile = useWindowDimensions().isMobile;
|
|
13315
|
-
return (jsxRuntime.jsxs(Container$
|
|
13315
|
+
return (jsxRuntime.jsxs(Container$D, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$9, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$9, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$9, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13316
13316
|
};
|
|
13317
|
-
var templateObject_1$
|
|
13317
|
+
var templateObject_1$R, templateObject_2$A, templateObject_3$t;
|
|
13318
13318
|
|
|
13319
|
-
var Label$1 = newStyled.span(templateObject_1$
|
|
13319
|
+
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) {
|
|
13320
13320
|
var color = _a.color;
|
|
13321
13321
|
return color;
|
|
13322
13322
|
});
|
|
13323
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13323
|
+
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) {
|
|
13324
13324
|
var color = _a.color;
|
|
13325
13325
|
return color;
|
|
13326
13326
|
});
|
|
@@ -13329,7 +13329,7 @@ var InputLabel = function (_a) {
|
|
|
13329
13329
|
var theme = useTheme();
|
|
13330
13330
|
return (jsxRuntime.jsxs(Label$1, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13331
13331
|
};
|
|
13332
|
-
var templateObject_1$
|
|
13332
|
+
var templateObject_1$Q, templateObject_2$z;
|
|
13333
13333
|
|
|
13334
13334
|
var containerByStatus = function (theme, status) {
|
|
13335
13335
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13338,12 +13338,12 @@ var containerByStatus = function (theme, status) {
|
|
|
13338
13338
|
return theme.colors.semantic.urgent.color;
|
|
13339
13339
|
return '';
|
|
13340
13340
|
};
|
|
13341
|
-
var Container$
|
|
13341
|
+
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) {
|
|
13342
13342
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13343
13343
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13344
13344
|
});
|
|
13345
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13346
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
13345
|
+
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"])));
|
|
13346
|
+
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) {
|
|
13347
13347
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13348
13348
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
13349
13349
|
}, function (_a) {
|
|
@@ -13398,11 +13398,11 @@ var StyledInput = newStyled.input(templateObject_3$r || (templateObject_3$r = __
|
|
|
13398
13398
|
return hasValue &&
|
|
13399
13399
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
13400
13400
|
});
|
|
13401
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
13401
|
+
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) {
|
|
13402
13402
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13403
13403
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13404
13404
|
});
|
|
13405
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13405
|
+
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) {
|
|
13406
13406
|
var theme = _a.theme;
|
|
13407
13407
|
return theme.component.input.placeholderColor;
|
|
13408
13408
|
}, function (_a) {
|
|
@@ -13415,8 +13415,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$b || (templateObject_5
|
|
|
13415
13415
|
var theme = _a.theme;
|
|
13416
13416
|
return theme.component.input.lineHeight;
|
|
13417
13417
|
});
|
|
13418
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13419
|
-
var templateObject_1$
|
|
13418
|
+
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"])));
|
|
13419
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s, templateObject_4$j, templateObject_5$c, templateObject_6$b;
|
|
13420
13420
|
|
|
13421
13421
|
var BaseInput = function (_a) {
|
|
13422
13422
|
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"]);
|
|
@@ -13439,14 +13439,14 @@ var BaseInput = function (_a) {
|
|
|
13439
13439
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13440
13440
|
}, [status]);
|
|
13441
13441
|
var hasValue = Boolean(value);
|
|
13442
|
-
return (jsxRuntime.jsxs(Container$
|
|
13442
|
+
return (jsxRuntime.jsxs(Container$C, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13443
13443
|
onChange(event.target.value, event);
|
|
13444
13444
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
13445
13445
|
onChange('', { target: { value: '' } });
|
|
13446
13446
|
}, "data-testid": "clear-value" }, { children: jsxRuntime.jsx(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
13447
13447
|
};
|
|
13448
13448
|
|
|
13449
|
-
var Button$
|
|
13449
|
+
var Button$4 = function (_a) {
|
|
13450
13450
|
var variant = _a.variant, props = __rest(_a, ["variant"]);
|
|
13451
13451
|
if (variant === 'primary') {
|
|
13452
13452
|
return jsxRuntime.jsx(ButtonPrimary, __assign$1({}, props), void 0);
|
|
@@ -13460,11 +13460,11 @@ var Button$3 = function (_a) {
|
|
|
13460
13460
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13461
13461
|
};
|
|
13462
13462
|
|
|
13463
|
-
var Container$
|
|
13463
|
+
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) {
|
|
13464
13464
|
var theme = _a.theme;
|
|
13465
13465
|
return theme.component.inputCustom.input.borderRadius;
|
|
13466
13466
|
});
|
|
13467
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13467
|
+
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) {
|
|
13468
13468
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13469
13469
|
return defaultRounded
|
|
13470
13470
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13479,23 +13479,23 @@ var Custom = function (_a) {
|
|
|
13479
13479
|
text: text,
|
|
13480
13480
|
disabled: rest.disabled,
|
|
13481
13481
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13482
|
-
return (jsxRuntime.jsx(Container$
|
|
13482
|
+
return (jsxRuntime.jsx(Container$B, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13483
13483
|
};
|
|
13484
|
-
var templateObject_1$
|
|
13484
|
+
var templateObject_1$O, templateObject_2$x;
|
|
13485
13485
|
|
|
13486
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13486
|
+
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) {
|
|
13487
13487
|
var size = _a.size;
|
|
13488
13488
|
return (size === 'small' ? '36px' : '');
|
|
13489
13489
|
});
|
|
13490
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13491
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
13490
|
+
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"])));
|
|
13491
|
+
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"])));
|
|
13492
13492
|
var Success = function (_a) {
|
|
13493
13493
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13494
13494
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
13495
13495
|
};
|
|
13496
|
-
var templateObject_1$
|
|
13496
|
+
var templateObject_1$N, templateObject_2$w, templateObject_3$r;
|
|
13497
13497
|
|
|
13498
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13498
|
+
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) {
|
|
13499
13499
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13500
13500
|
return status === exports.InputValidationType.Empty &&
|
|
13501
13501
|
type === 'primary' &&
|
|
@@ -13512,16 +13512,16 @@ var BasePlusButton = function (_a) {
|
|
|
13512
13512
|
}
|
|
13513
13513
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
13514
13514
|
};
|
|
13515
|
-
var templateObject_1$
|
|
13515
|
+
var templateObject_1$M;
|
|
13516
13516
|
|
|
13517
|
-
var Container$
|
|
13518
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13517
|
+
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"])));
|
|
13518
|
+
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"])));
|
|
13519
13519
|
var BasePlusIcon = function (_a) {
|
|
13520
13520
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13521
13521
|
var theme = useTheme();
|
|
13522
|
-
return (jsxRuntime.jsx(Container$
|
|
13522
|
+
return (jsxRuntime.jsx(Container$A, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13523
13523
|
};
|
|
13524
|
-
var templateObject_1$
|
|
13524
|
+
var templateObject_1$L, templateObject_2$v;
|
|
13525
13525
|
|
|
13526
13526
|
var Input$3 = {
|
|
13527
13527
|
Simple: BaseInput,
|
|
@@ -13530,7 +13530,7 @@ var Input$3 = {
|
|
|
13530
13530
|
SimplePlusIcon: BasePlusIcon,
|
|
13531
13531
|
};
|
|
13532
13532
|
|
|
13533
|
-
var Container$
|
|
13533
|
+
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) {
|
|
13534
13534
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13535
13535
|
return borderRadiusVariant &&
|
|
13536
13536
|
"\n border-radius: 40px;\n ";
|
|
@@ -13539,15 +13539,15 @@ var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
13539
13539
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13540
13540
|
});
|
|
13541
13541
|
// max-height: 31.875rem;
|
|
13542
|
-
var TopTagContainer$
|
|
13543
|
-
var BottomTagContainer$
|
|
13544
|
-
var VideoOverlay$
|
|
13545
|
-
var Video = newStyled.div(templateObject_5$
|
|
13546
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
13547
|
-
var Text$
|
|
13548
|
-
var NavButtonContainer = newStyled.div(templateObject_8$
|
|
13549
|
-
var Button$
|
|
13550
|
-
var settings = {
|
|
13542
|
+
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'); });
|
|
13543
|
+
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"])));
|
|
13544
|
+
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"])));
|
|
13545
|
+
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"])));
|
|
13546
|
+
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"])));
|
|
13547
|
+
var Text$3 = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13548
|
+
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"])));
|
|
13549
|
+
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"])));
|
|
13550
|
+
var settings$1 = {
|
|
13551
13551
|
dots: true,
|
|
13552
13552
|
infinite: false,
|
|
13553
13553
|
speed: 200,
|
|
@@ -13561,7 +13561,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13561
13561
|
var sliderWrapper = React$2.useRef(null);
|
|
13562
13562
|
var iframeRef = React$2.useRef(null);
|
|
13563
13563
|
var _c = React$2.useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
|
|
13564
|
-
usePreventVerticalScroll(sliderWrapper);
|
|
13564
|
+
usePreventVerticalScroll$1(sliderWrapper);
|
|
13565
13565
|
var onButtonClick = React$2.useCallback(function (i) {
|
|
13566
13566
|
var _a;
|
|
13567
13567
|
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
@@ -13591,20 +13591,20 @@ var ImageProductWithTags = function (_a) {
|
|
|
13591
13591
|
}
|
|
13592
13592
|
}
|
|
13593
13593
|
}, [images, selectedValue]);
|
|
13594
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
13594
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$z, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
13595
13595
|
var _a;
|
|
13596
13596
|
var activeSlide = images[e];
|
|
13597
13597
|
// If autoplay is true and iframe is the active slide, play the video
|
|
13598
13598
|
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.imageUrl) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
13599
13599
|
autoplay ? _playVideo() : _stopVideo();
|
|
13600
|
-
} }, settings, { nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$
|
|
13600
|
+
} }, settings$1, { nextArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$3, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$1, { children: jsxRuntime.jsx(Button$3, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
13601
13601
|
var _a, _b;
|
|
13602
|
-
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$
|
|
13602
|
+
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsxs(Video$1, { children: [jsxRuntime.jsx("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsxRuntime.jsx(VideoOverlay$2, { onClick: function () {
|
|
13603
13603
|
isPlaying ? _stopVideo() : _playVideo();
|
|
13604
|
-
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$
|
|
13604
|
+
} }, void 0), jsxRuntime.jsxs(VideoTag$1, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
13605
13605
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13606
13606
|
};
|
|
13607
|
-
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
13607
|
+
function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
13608
13608
|
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
13609
13609
|
var firstClientX = React$2.useRef(0);
|
|
13610
13610
|
var clientX = React$2.useRef(0);
|
|
@@ -13639,14 +13639,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13639
13639
|
};
|
|
13640
13640
|
}, [preventTouch, ref, touchStart]);
|
|
13641
13641
|
}
|
|
13642
|
-
var templateObject_1$
|
|
13642
|
+
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;
|
|
13643
13643
|
|
|
13644
|
-
var Container$
|
|
13644
|
+
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"])));
|
|
13645
13645
|
var ProductGalleryMobile = function (_a) {
|
|
13646
13646
|
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;
|
|
13647
|
-
return (jsxRuntime.jsx(Container$
|
|
13647
|
+
return (jsxRuntime.jsx(Container$y, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13648
13648
|
};
|
|
13649
|
-
var templateObject_1$
|
|
13649
|
+
var templateObject_1$J;
|
|
13650
13650
|
|
|
13651
13651
|
function _extends() {
|
|
13652
13652
|
_extends = Object.assign || function (target) {
|
|
@@ -13913,41 +13913,41 @@ function useSwipeable(options) {
|
|
|
13913
13913
|
return handlers;
|
|
13914
13914
|
}
|
|
13915
13915
|
|
|
13916
|
-
var Container$
|
|
13916
|
+
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) {
|
|
13917
13917
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13918
13918
|
return borderRadiusVariant &&
|
|
13919
13919
|
"\n border-radius: 40px;\n ";
|
|
13920
13920
|
});
|
|
13921
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
13922
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
13921
|
+
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'); });
|
|
13922
|
+
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"])));
|
|
13923
13923
|
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
13924
13924
|
var _b, _c;
|
|
13925
13925
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
13926
|
-
return (jsxRuntime.jsxs(Container$
|
|
13926
|
+
return (jsxRuntime.jsxs(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsx("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));
|
|
13927
13927
|
});
|
|
13928
|
-
var templateObject_1$
|
|
13928
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$p;
|
|
13929
13929
|
|
|
13930
|
-
var Button$
|
|
13930
|
+
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"])));
|
|
13931
13931
|
var ArrowButton = function (_a) {
|
|
13932
13932
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
13933
|
-
return (jsxRuntime.jsx(Button$
|
|
13933
|
+
return (jsxRuntime.jsx(Button$2, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
13934
13934
|
};
|
|
13935
|
-
var templateObject_1$
|
|
13935
|
+
var templateObject_1$H;
|
|
13936
13936
|
|
|
13937
|
-
var Container$
|
|
13937
|
+
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"])));
|
|
13938
13938
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13939
13939
|
var SlideDots = function (_a) {
|
|
13940
13940
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13941
13941
|
var theme = useTheme();
|
|
13942
|
-
return (jsxRuntime.jsx(Container$
|
|
13942
|
+
return (jsxRuntime.jsx(Container$w, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13943
13943
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13944
13944
|
: 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));
|
|
13945
13945
|
};
|
|
13946
|
-
var templateObject_1$
|
|
13946
|
+
var templateObject_1$G;
|
|
13947
13947
|
|
|
13948
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
13949
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
13950
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
13948
|
+
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"])));
|
|
13949
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
13950
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
13951
13951
|
var SlideNavigation = function (_a) {
|
|
13952
13952
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
13953
13953
|
var theme = useTheme();
|
|
@@ -13959,9 +13959,9 @@ var SlideNavigation = function (_a) {
|
|
|
13959
13959
|
onNavigate(selectedIndex + 1);
|
|
13960
13960
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
13961
13961
|
};
|
|
13962
|
-
var templateObject_1$
|
|
13962
|
+
var templateObject_1$F, templateObject_2$s, templateObject_3$o;
|
|
13963
13963
|
|
|
13964
|
-
var Container$
|
|
13964
|
+
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"])));
|
|
13965
13965
|
var ProductGalleryMobileV2 = function (_a) {
|
|
13966
13966
|
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;
|
|
13967
13967
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -13983,7 +13983,125 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
13983
13983
|
React$2.useEffect(function () {
|
|
13984
13984
|
setSelectedImage(images[index]);
|
|
13985
13985
|
}, [index, images]);
|
|
13986
|
-
return (jsxRuntime.jsxs(Container$
|
|
13986
|
+
return (jsxRuntime.jsxs(Container$v, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
13987
|
+
};
|
|
13988
|
+
var templateObject_1$E;
|
|
13989
|
+
|
|
13990
|
+
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) {
|
|
13991
|
+
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13992
|
+
return borderRadiusVariant &&
|
|
13993
|
+
"\n border-radius: 40px;\n ";
|
|
13994
|
+
}, function (_a) {
|
|
13995
|
+
var theme = _a.theme;
|
|
13996
|
+
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13997
|
+
});
|
|
13998
|
+
// max-height: 31.875rem;
|
|
13999
|
+
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'); });
|
|
14000
|
+
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"])));
|
|
14001
|
+
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"])));
|
|
14002
|
+
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"])));
|
|
14003
|
+
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"])));
|
|
14004
|
+
var Text$2 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14005
|
+
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"])));
|
|
14006
|
+
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"])));
|
|
14007
|
+
var settings = {
|
|
14008
|
+
dots: true,
|
|
14009
|
+
infinite: false,
|
|
14010
|
+
speed: 200,
|
|
14011
|
+
slidesToShow: 1,
|
|
14012
|
+
slidesToScroll: 1,
|
|
14013
|
+
initialSlide: 0,
|
|
14014
|
+
};
|
|
14015
|
+
var ImageProductWithTagsMobileV3 = function (_a) {
|
|
14016
|
+
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;
|
|
14017
|
+
var slick = React$2.useRef(null);
|
|
14018
|
+
var sliderWrapper = React$2.useRef(null);
|
|
14019
|
+
var iframeRef = React$2.useRef(null);
|
|
14020
|
+
var _c = React$2.useState(false), isPlaying = _c[0], setIsPlaying = _c[1];
|
|
14021
|
+
usePreventVerticalScroll(sliderWrapper);
|
|
14022
|
+
var onButtonClick = React$2.useCallback(function (i) {
|
|
14023
|
+
var _a;
|
|
14024
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
|
|
14025
|
+
}, [slick]);
|
|
14026
|
+
var _sendCommandToIframe = function (command) {
|
|
14027
|
+
var iframe = document.getElementById('vwo-video');
|
|
14028
|
+
(iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
|
|
14029
|
+
iframe.contentWindow.postMessage(JSON.stringify({
|
|
14030
|
+
event: 'command',
|
|
14031
|
+
func: command,
|
|
14032
|
+
}), '*');
|
|
14033
|
+
};
|
|
14034
|
+
var _stopVideo = function () {
|
|
14035
|
+
_sendCommandToIframe('stopVideo');
|
|
14036
|
+
setIsPlaying(false);
|
|
14037
|
+
};
|
|
14038
|
+
var _playVideo = function () {
|
|
14039
|
+
_sendCommandToIframe('playVideo');
|
|
14040
|
+
setIsPlaying(true);
|
|
14041
|
+
};
|
|
14042
|
+
React$2.useEffect(function () {
|
|
14043
|
+
var _a;
|
|
14044
|
+
if (selectedValue) {
|
|
14045
|
+
var matchingIndex = images.findIndex(function (image) { return image.imageUrl === selectedValue.imageUrl; });
|
|
14046
|
+
if (matchingIndex !== -1) {
|
|
14047
|
+
(_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(matchingIndex);
|
|
14048
|
+
}
|
|
14049
|
+
}
|
|
14050
|
+
}, [images, selectedValue]);
|
|
14051
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$u, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({ afterChange: function (e) {
|
|
14052
|
+
var _a;
|
|
14053
|
+
var activeSlide = images[e];
|
|
14054
|
+
// If autoplay is true and iframe is the active slide, play the video
|
|
14055
|
+
var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.imageUrl) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
|
|
14056
|
+
autoplay ? _playVideo() : _stopVideo();
|
|
14057
|
+
} }, settings, { nextArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer, { children: jsxRuntime.jsx(Button$1, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
|
|
14058
|
+
var _a, _b;
|
|
14059
|
+
return (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(Video, { children: [jsxRuntime.jsx("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsxRuntime.jsx(VideoOverlay$1, { onClick: function () {
|
|
14060
|
+
isPlaying ? _stopVideo() : _playVideo();
|
|
14061
|
+
} }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text$2, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
|
|
14062
|
+
}) }), void 0) }), void 0)] }, void 0));
|
|
14063
|
+
};
|
|
14064
|
+
function usePreventVerticalScroll(ref, dragThreshold) {
|
|
14065
|
+
if (dragThreshold === void 0) { dragThreshold = 5; }
|
|
14066
|
+
var firstClientX = React$2.useRef(0);
|
|
14067
|
+
var clientX = React$2.useRef(0);
|
|
14068
|
+
var preventTouch = React$2.useCallback(function (e) {
|
|
14069
|
+
clientX.current = e.touches[0].clientX - firstClientX.current;
|
|
14070
|
+
// Vertical scrolling does not work when you start swiping horizontally.
|
|
14071
|
+
if (Math.abs(clientX.current) > dragThreshold) {
|
|
14072
|
+
if (e.cancelable) {
|
|
14073
|
+
e.preventDefault();
|
|
14074
|
+
e.returnValue = false;
|
|
14075
|
+
}
|
|
14076
|
+
return false;
|
|
14077
|
+
}
|
|
14078
|
+
return true;
|
|
14079
|
+
}, [dragThreshold]);
|
|
14080
|
+
var touchStart = React$2.useCallback(function (e) {
|
|
14081
|
+
firstClientX.current = e.touches[0].clientX;
|
|
14082
|
+
}, []);
|
|
14083
|
+
React$2.useEffect(function () {
|
|
14084
|
+
var current = ref.current;
|
|
14085
|
+
if (current) {
|
|
14086
|
+
current.addEventListener('touchstart', touchStart);
|
|
14087
|
+
current.addEventListener('touchmove', preventTouch, { passive: false });
|
|
14088
|
+
}
|
|
14089
|
+
return function () {
|
|
14090
|
+
if (current) {
|
|
14091
|
+
current.removeEventListener('touchstart', touchStart);
|
|
14092
|
+
// Had to change this line to prevent a typing error. You may not have the issue:
|
|
14093
|
+
// current.removeEventListener('touchmove', preventTouch, { passive: false })
|
|
14094
|
+
current.removeEventListener('touchmove', preventTouch);
|
|
14095
|
+
}
|
|
14096
|
+
};
|
|
14097
|
+
}, [preventTouch, ref, touchStart]);
|
|
14098
|
+
}
|
|
14099
|
+
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;
|
|
14100
|
+
|
|
14101
|
+
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"])));
|
|
14102
|
+
var ProductGalleryMobileV3 = function (_a) {
|
|
14103
|
+
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;
|
|
14104
|
+
return (jsxRuntime.jsx(Container$t, { children: jsxRuntime.jsx(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13987
14105
|
};
|
|
13988
14106
|
var templateObject_1$C;
|
|
13989
14107
|
|
|
@@ -18057,15 +18175,15 @@ var PackCard = function (_a) {
|
|
|
18057
18175
|
.then(function (icon) { return setIcon(icon); })
|
|
18058
18176
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
18059
18177
|
}, [pack.meta.icon]);
|
|
18060
|
-
return (jsxRuntime.jsxs(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 ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$
|
|
18178
|
+
return (jsxRuntime.jsxs(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 ? (jsxRuntime.jsx(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$9, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Text$9, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$9, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
18061
18179
|
color: 'var(--colors-semantic-urgent-color)',
|
|
18062
|
-
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$
|
|
18180
|
+
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(DiscountContainer, { children: [jsxRuntime.jsx(Text$9, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
18063
18181
|
locale: 'en-US',
|
|
18064
18182
|
currency: currencyCode || 'USD',
|
|
18065
|
-
}) }), void 0), jsxRuntime.jsxs(Text$
|
|
18183
|
+
}) }), void 0), jsxRuntime.jsxs(Text$9, __assign$1({ variant: "label", size: "small" }, { children: [' - ', ' ', formatPrice(pack.meta.price, {
|
|
18066
18184
|
locale: 'en-US',
|
|
18067
18185
|
currency: currencyCode || 'USD',
|
|
18068
|
-
})] }), void 0)] }, void 0), jsxRuntime.jsxs(Text$
|
|
18186
|
+
})] }), void 0)] }, void 0), jsxRuntime.jsxs(Text$9, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
18069
18187
|
locale: 'en-US',
|
|
18070
18188
|
currency: currencyCode || 'USD',
|
|
18071
18189
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
@@ -18628,7 +18746,7 @@ var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __ma
|
|
|
18628
18746
|
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"])));
|
|
18629
18747
|
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"])));
|
|
18630
18748
|
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"])));
|
|
18631
|
-
var ReviewsTextCount = newStyled(Text$
|
|
18749
|
+
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"])));
|
|
18632
18750
|
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"])));
|
|
18633
18751
|
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) {
|
|
18634
18752
|
var backgroundUrl = _a.backgroundUrl;
|
|
@@ -18638,7 +18756,7 @@ var ReviewsHeader = function (_a) {
|
|
|
18638
18756
|
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;
|
|
18639
18757
|
var starsNumber = 5;
|
|
18640
18758
|
var theme = useTheme();
|
|
18641
|
-
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Text$
|
|
18759
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Text$9, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$9, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18642
18760
|
};
|
|
18643
18761
|
var templateObject_1$o, templateObject_2$g, templateObject_3$d, templateObject_4$9, templateObject_5$4, templateObject_6$3, templateObject_7$3;
|
|
18644
18762
|
|
|
@@ -18698,7 +18816,7 @@ var Description = newStyled.div({
|
|
|
18698
18816
|
var ProductItem = function (_a) {
|
|
18699
18817
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
18700
18818
|
var theme = useTheme();
|
|
18701
|
-
return (jsxRuntime.jsxs(Container$d, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$
|
|
18819
|
+
return (jsxRuntime.jsxs(Container$d, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$9, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
18702
18820
|
};
|
|
18703
18821
|
var templateObject_1$m;
|
|
18704
18822
|
|
|
@@ -18709,7 +18827,7 @@ var Container$c = newStyled.div({
|
|
|
18709
18827
|
});
|
|
18710
18828
|
var Footer = function (_a) {
|
|
18711
18829
|
var text = _a.text, onClick = _a.onClick;
|
|
18712
|
-
return (jsxRuntime.jsx(Container$c, { children: jsxRuntime.jsx(Text$
|
|
18830
|
+
return (jsxRuntime.jsx(Container$c, { children: jsxRuntime.jsx(Text$9, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
18713
18831
|
};
|
|
18714
18832
|
|
|
18715
18833
|
var Ul = newStyled.ul({
|
|
@@ -18739,7 +18857,7 @@ var Header = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTem
|
|
|
18739
18857
|
var ResultsPanel = function (_a) {
|
|
18740
18858
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
18741
18859
|
var theme = useTheme();
|
|
18742
|
-
return (jsxRuntime.jsxs(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$
|
|
18860
|
+
return (jsxRuntime.jsxs(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$9, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
18743
18861
|
};
|
|
18744
18862
|
var templateObject_1$l, templateObject_2$e, templateObject_3$c;
|
|
18745
18863
|
|
|
@@ -18852,7 +18970,7 @@ var NormalSpan = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __ma
|
|
|
18852
18970
|
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"])));
|
|
18853
18971
|
var SearchNavigation = function (_a) {
|
|
18854
18972
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
18855
|
-
return (jsxRuntime.jsxs(Container$9, { children: [jsxRuntime.jsxs(Text$
|
|
18973
|
+
return (jsxRuntime.jsxs(Container$9, { children: [jsxRuntime.jsxs(Text$9, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
18856
18974
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18857
18975
|
}) }, void 0)] }, void 0));
|
|
18858
18976
|
};
|
|
@@ -18992,7 +19110,7 @@ var SizeSelector = function (_a) {
|
|
|
18992
19110
|
display: 'flex',
|
|
18993
19111
|
flexDirection: inline ? 'row' : 'column',
|
|
18994
19112
|
alignItems: inline ? 'center' : 'start',
|
|
18995
|
-
} }, { children: [jsxs(Text$
|
|
19113
|
+
} }, { 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) {
|
|
18996
19114
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
18997
19115
|
return (jsx(SelectorSecondary, { css: {
|
|
18998
19116
|
padding: '0.75rem 1rem 0.625rem',
|
|
@@ -19169,7 +19287,7 @@ var ImageVideo = function (_a) {
|
|
|
19169
19287
|
var handleOnClick = function () {
|
|
19170
19288
|
setOpened(true);
|
|
19171
19289
|
};
|
|
19172
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper, { children: [jsxRuntime.jsx(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$
|
|
19290
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(ImageWrapper, { children: [jsxRuntime.jsx(Image$3, { src: imageLink, alt: "#", width: "100%", height: isMobile ? '400px' : '100%', borderRadius: "16px", objectFit: "cover" }, void 0), isVideo && (jsxRuntime.jsx(Text$9, __assign$1({ variant: "link", onClick: handleOnClick }, { children: jsxRuntime.jsxs(VideoOverlay, { children: [jsxRuntime.jsx(Text$9, __assign$1({ variant: "heading3", style: { color: isVideo.textColor, fontSize: isMobile ? '42px' : '56px' } }, { children: isVideo.videoTitle }), void 0), jsxRuntime.jsx(Text$9, __assign$1({ variant: "body", weight: "demi", style: { color: isVideo.textColor } }, { children: isVideo.videoSubtitle }), void 0), jsxRuntime.jsx(Icon.Other.Play, { fill: "#ffffff", width: 6.125, height: 6.125 }, void 0)] }, void 0) }), void 0))] }, void 0), opened && (jsxRuntime.jsxs(FullscreenVideo, { children: [jsxRuntime.jsx(Text$9, __assign$1({ variant: "link", style: {
|
|
19173
19291
|
position: 'absolute',
|
|
19174
19292
|
top: '10px',
|
|
19175
19293
|
right: '10px',
|
|
@@ -19191,12 +19309,12 @@ var TextWithImage = function (_a) {
|
|
|
19191
19309
|
var _b, _c, _d, _e;
|
|
19192
19310
|
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"]);
|
|
19193
19311
|
var isMobile = useWindowDimensions().isMobile;
|
|
19194
|
-
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$
|
|
19312
|
+
var ImageTitle = function () { return (jsx(Fragment, { children: !isMobile ? (jsx(Text$9, __assign$1({ variant: "heading2", weight: "bold", style: titleStyle
|
|
19195
19313
|
? titleStyle
|
|
19196
19314
|
: {
|
|
19197
19315
|
color: '#000000',
|
|
19198
19316
|
textAlign: 'center',
|
|
19199
|
-
} }, { children: title }), void 0)) : (jsx(Text$
|
|
19317
|
+
} }, { children: title }), void 0)) : (jsx(Text$9, __assign$1({ variant: "heading3", weight: "bold", style: titleStyle
|
|
19200
19318
|
? titleStyle
|
|
19201
19319
|
: {
|
|
19202
19320
|
color: '#000000',
|
|
@@ -19206,7 +19324,7 @@ var TextWithImage = function (_a) {
|
|
|
19206
19324
|
// @ts-ignore
|
|
19207
19325
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19208
19326
|
};
|
|
19209
|
-
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$
|
|
19327
|
+
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: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
19210
19328
|
backgroundColor: props.btnBGColor,
|
|
19211
19329
|
color: '#ffffff',
|
|
19212
19330
|
border: props.btnBGColor,
|
|
@@ -19284,7 +19402,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$2 || (templateObject_7$2 = __
|
|
|
19284
19402
|
var theme = _a.theme;
|
|
19285
19403
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19286
19404
|
});
|
|
19287
|
-
var TotalLabel = newStyled(Text$
|
|
19405
|
+
var TotalLabel = newStyled(Text$9)(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19288
19406
|
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;
|
|
19289
19407
|
|
|
19290
19408
|
var Total = function (_a) {
|
|
@@ -19445,7 +19563,7 @@ var getDefaultCountdown = function () {
|
|
|
19445
19563
|
var HurryUp = function (_a) {
|
|
19446
19564
|
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"]);
|
|
19447
19565
|
var theme = useTheme();
|
|
19448
|
-
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$
|
|
19566
|
+
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, borderRadius: theme.component.hurryUp.borderRadius, "data-testid": "HurryUp" }, { children: [clockPosition === 'left' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), jsxRuntime.jsx(Text$9, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", clockPosition === 'right' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0"] }, void 0)), showTimer && jsxRuntime.jsx(Timer, __assign$1({ countdown: countdown, onTimeUp: function () { } }, timerProps), void 0)] }), void 0));
|
|
19449
19567
|
};
|
|
19450
19568
|
|
|
19451
19569
|
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) {
|
|
@@ -19542,6 +19660,7 @@ exports.PriceLabelV3 = PriceLabelV3;
|
|
|
19542
19660
|
exports.ProductGallery = ProductGallery;
|
|
19543
19661
|
exports.ProductGalleryMobile = ProductGalleryMobile;
|
|
19544
19662
|
exports.ProductGalleryMobileV2 = ProductGalleryMobileV2;
|
|
19663
|
+
exports.ProductGalleryMobileV3 = ProductGalleryMobileV3;
|
|
19545
19664
|
exports.ProgressBar = ProgressBar;
|
|
19546
19665
|
exports.QuantityPicker = QuantityPicker;
|
|
19547
19666
|
exports.RadioGroupInput = RadioGroupInput;
|
|
@@ -19571,7 +19690,7 @@ exports.StarList = StarList;
|
|
|
19571
19690
|
exports.StrengthBars = StrengthBars;
|
|
19572
19691
|
exports.Tab = Tab;
|
|
19573
19692
|
exports.Tabs = Tabs;
|
|
19574
|
-
exports.Text = Text$
|
|
19693
|
+
exports.Text = Text$9;
|
|
19575
19694
|
exports.TextButton = TextButton;
|
|
19576
19695
|
exports.TextWithImage = TextWithImage;
|
|
19577
19696
|
exports.ThemeProvider = ThemeProvider;
|