@trafilea/afrodita-components 6.15.5 → 6.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +58 -5
- package/build/index.esm.js +539 -357
- package/build/index.esm.js.map +1 -1
- package/build/index.js +541 -355
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.js +1 -1
- package/build/theme/shapermint.theme.js +1 -1
- package/build/theme/thebodcon.theme.js +1 -1
- package/build/theme/thespadr.theme.js +1 -1
- package/build/theme/truekind.theme.js +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3153,7 +3153,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3153
3153
|
desktop: 1280,
|
|
3154
3154
|
};
|
|
3155
3155
|
|
|
3156
|
-
var Container$
|
|
3156
|
+
var Container$1e = newStyled.div(templateObject_1$1$ || (templateObject_1$1$ = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3157
3157
|
var height = _a.height;
|
|
3158
3158
|
return (height ? height : '1.5em');
|
|
3159
3159
|
}, function (_a) {
|
|
@@ -3178,11 +3178,11 @@ var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = _
|
|
|
3178
3178
|
var SkeletonBox = function (_a) {
|
|
3179
3179
|
var width = _a.width, height = _a.height;
|
|
3180
3180
|
var theme = useTheme();
|
|
3181
|
-
return jsxRuntime.jsx(Container$
|
|
3181
|
+
return jsxRuntime.jsx(Container$1e, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3182
3182
|
};
|
|
3183
|
-
var templateObject_1$
|
|
3183
|
+
var templateObject_1$1$;
|
|
3184
3184
|
|
|
3185
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3185
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1_ || (templateObject_1$1_ = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3186
3186
|
var width = _a.width;
|
|
3187
3187
|
return width;
|
|
3188
3188
|
}, function (_a) {
|
|
@@ -3198,7 +3198,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1X || (templateObject_1$1X
|
|
|
3198
3198
|
var opacity = _a.opacity;
|
|
3199
3199
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3200
3200
|
});
|
|
3201
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3201
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1l || (templateObject_2$1l = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3202
3202
|
var width = _a.width;
|
|
3203
3203
|
return width;
|
|
3204
3204
|
}, function (_a) {
|
|
@@ -3211,7 +3211,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1i || (templateObject_2$
|
|
|
3211
3211
|
var opacity = _a.opacity;
|
|
3212
3212
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3213
3213
|
});
|
|
3214
|
-
var templateObject_1$
|
|
3214
|
+
var templateObject_1$1_, templateObject_2$1l;
|
|
3215
3215
|
|
|
3216
3216
|
/* eslint-disable no-undef */
|
|
3217
3217
|
var cache = new Map();
|
|
@@ -3387,7 +3387,7 @@ var buildImageUrl = function (_a) {
|
|
|
3387
3387
|
}
|
|
3388
3388
|
};
|
|
3389
3389
|
|
|
3390
|
-
var Img = newStyled.img(templateObject_1$
|
|
3390
|
+
var Img = newStyled.img(templateObject_1$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; });
|
|
3391
3391
|
var Image$3 = function (_a) {
|
|
3392
3392
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, rest = __rest(_a, ["src", "srcSet", "sizes", "loading", "alt", "height", "width", "borderRadius", "objectFit", "objectPosition", "quality"]);
|
|
3393
3393
|
var config = useTheme().config;
|
|
@@ -3396,7 +3396,7 @@ var Image$3 = function (_a) {
|
|
|
3396
3396
|
: src;
|
|
3397
3397
|
return (jsxRuntime.jsx(Img, __assign$1({ src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, rest), void 0));
|
|
3398
3398
|
};
|
|
3399
|
-
var templateObject_1$
|
|
3399
|
+
var templateObject_1$1Z;
|
|
3400
3400
|
|
|
3401
3401
|
var Add = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3402
3402
|
|
|
@@ -3834,6 +3834,8 @@ var EllipsisHorizontal = function (props) { return (jsxRuntime.jsx(Icon$1, __ass
|
|
|
3834
3834
|
|
|
3835
3835
|
var Filters$1 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/filters" }), void 0); };
|
|
3836
3836
|
|
|
3837
|
+
var FiltersV2 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/filters_v2" }), void 0); };
|
|
3838
|
+
|
|
3837
3839
|
var Hamburger = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/hamburger" }), void 0); };
|
|
3838
3840
|
|
|
3839
3841
|
var Home = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/home" }), void 0); };
|
|
@@ -3884,6 +3886,7 @@ var Navigation = /*#__PURE__*/Object.freeze({
|
|
|
3884
3886
|
Ellipsis: Ellipsis,
|
|
3885
3887
|
EllipsisHorizontal: EllipsisHorizontal,
|
|
3886
3888
|
Filters: Filters$1,
|
|
3889
|
+
FiltersV2: FiltersV2,
|
|
3887
3890
|
Hamburger: Hamburger,
|
|
3888
3891
|
Home: Home,
|
|
3889
3892
|
HomeSolid: HomeSolid,
|
|
@@ -4181,11 +4184,11 @@ function jsxs(type, props, key) {
|
|
|
4181
4184
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4182
4185
|
// `variants` styles that are consistent through all themes.
|
|
4183
4186
|
var TAGS = {
|
|
4184
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4185
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4186
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4187
|
-
display1: newStyled.h1(templateObject_4$
|
|
4188
|
-
display2: newStyled.h2(templateObject_5$
|
|
4187
|
+
hero1: newStyled.h1(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject([""], [""]))),
|
|
4188
|
+
hero2: newStyled.h2(templateObject_2$1k || (templateObject_2$1k = __makeTemplateObject([""], [""]))),
|
|
4189
|
+
hero3: newStyled.h3(templateObject_3$10 || (templateObject_3$10 = __makeTemplateObject([""], [""]))),
|
|
4190
|
+
display1: newStyled.h1(templateObject_4$M || (templateObject_4$M = __makeTemplateObject([""], [""]))),
|
|
4191
|
+
display2: newStyled.h2(templateObject_5$y || (templateObject_5$y = __makeTemplateObject([""], [""]))),
|
|
4189
4192
|
display3: newStyled.h3(templateObject_6$s || (templateObject_6$s = __makeTemplateObject([""], [""]))),
|
|
4190
4193
|
heading1: newStyled.h1(templateObject_7$j || (templateObject_7$j = __makeTemplateObject([""], [""]))),
|
|
4191
4194
|
heading2: newStyled.h2(templateObject_8$h || (templateObject_8$h = __makeTemplateObject([""], [""]))),
|
|
@@ -4210,7 +4213,7 @@ var Text$7 = function (_a) {
|
|
|
4210
4213
|
var variant = _a.variant, children = _a.children, testId = _a.testId, asSpan = _a.asSpan, allProps = __rest(_a, ["variant", "children", "testId", "asSpan"]);
|
|
4211
4214
|
var theme = useTheme();
|
|
4212
4215
|
var Tag = asSpan ? 'span' : TAGS[variant] || 'p';
|
|
4213
|
-
var _c = __assign$1(__assign$1({}, ((_b = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _b !== void 0 ? _b : {})), allProps), size = _c.size, weight = _c.weight, props = __rest(_c, ["size", "weight"]);
|
|
4216
|
+
var _c = __assign$1(__assign$1({}, ((_b = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _b !== void 0 ? _b : {})), allProps), size = _c.size, weight = _c.weight, color = _c.color, props = __rest(_c, ["size", "weight", "color"]);
|
|
4214
4217
|
var commonCSS = React$2.useMemo(function () {
|
|
4215
4218
|
var _a, _b;
|
|
4216
4219
|
// These are the common style inside a `variant`.
|
|
@@ -4227,7 +4230,7 @@ var Text$7 = function (_a) {
|
|
|
4227
4230
|
var variantName = [variant, size].filter(Boolean).join('-');
|
|
4228
4231
|
// These are styles specific to `variation-size`.
|
|
4229
4232
|
var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
|
|
4230
|
-
var style = __assign$1(__assign$1(__assign$1({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle), { fontFamily: theme.fonts.config[0].family });
|
|
4233
|
+
var style = __assign$1(__assign$1(__assign$1({ margin: 0, color: color || theme.colors.text.color }, variantstyle), variantSizeStyle), { fontFamily: theme.fonts.config[0].family });
|
|
4231
4234
|
if (weight) {
|
|
4232
4235
|
style.fontWeight = theme.typography.config.weight[weight];
|
|
4233
4236
|
}
|
|
@@ -4237,7 +4240,7 @@ var Text$7 = function (_a) {
|
|
|
4237
4240
|
style.color = theme.colors.text.disabled;
|
|
4238
4241
|
}
|
|
4239
4242
|
return style;
|
|
4240
|
-
}, [theme, variant, weight, size, props.disabled]);
|
|
4243
|
+
}, [theme, variant, weight, size, color, props.disabled]);
|
|
4241
4244
|
// This is to make TS happy, because `href` doesn't exists on other `variants`
|
|
4242
4245
|
var propsHref = props.href;
|
|
4243
4246
|
var href = React$2.useMemo(function () {
|
|
@@ -4317,17 +4320,17 @@ var DEFAULTS = {
|
|
|
4317
4320
|
size: 'regular',
|
|
4318
4321
|
},
|
|
4319
4322
|
};
|
|
4320
|
-
var templateObject_1$
|
|
4323
|
+
var templateObject_1$1Y, templateObject_2$1k, templateObject_3$10, templateObject_4$M, templateObject_5$y, templateObject_6$s, templateObject_7$j, templateObject_8$h, templateObject_9$9, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4321
4324
|
|
|
4322
|
-
var Container$
|
|
4323
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4324
|
-
var Tag$2 = newStyled.div(templateObject_3
|
|
4325
|
-
var Label$5 = newStyled.div(templateObject_4$
|
|
4326
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4325
|
+
var Container$1d = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __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"])));
|
|
4326
|
+
var Card$3 = newStyled.div(templateObject_2$1j || (templateObject_2$1j = __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"])));
|
|
4327
|
+
var Tag$2 = newStyled.div(templateObject_3$$ || (templateObject_3$$ = __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"])));
|
|
4328
|
+
var Label$5 = newStyled.div(templateObject_4$L || (templateObject_4$L = __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"])));
|
|
4329
|
+
var Check$1 = newStyled.div(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4327
4330
|
var DiscountContainer$1 = newStyled.div(templateObject_6$r || (templateObject_6$r = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4328
4331
|
var PackSelectorV2 = function (_a) {
|
|
4329
4332
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4330
|
-
return (jsxRuntime.jsx(Container$
|
|
4333
|
+
return (jsxRuntime.jsx(Container$1d, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4331
4334
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4332
4335
|
}) }), void 0));
|
|
4333
4336
|
};
|
|
@@ -4349,27 +4352,27 @@ var PackCard$1 = function (_a) {
|
|
|
4349
4352
|
currency: currencyCode || 'USD',
|
|
4350
4353
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4351
4354
|
};
|
|
4352
|
-
var templateObject_1$
|
|
4355
|
+
var templateObject_1$1X, templateObject_2$1j, templateObject_3$$, templateObject_4$L, templateObject_5$x, templateObject_6$r;
|
|
4353
4356
|
|
|
4354
|
-
var Container$
|
|
4355
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4357
|
+
var Container$1c = newStyled.div(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4358
|
+
var DropContainer = newStyled.div(templateObject_2$1i || (templateObject_2$1i = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4356
4359
|
var DropList = function (_a) {
|
|
4357
4360
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4358
|
-
return (jsxRuntime.jsx(Container$
|
|
4361
|
+
return (jsxRuntime.jsx(Container$1c, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4359
4362
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4360
4363
|
}) }, void 0));
|
|
4361
4364
|
};
|
|
4362
|
-
var templateObject_1$
|
|
4365
|
+
var templateObject_1$1W, templateObject_2$1i;
|
|
4363
4366
|
|
|
4364
4367
|
var DROPS_TOTAL = 5;
|
|
4365
|
-
var Container$
|
|
4366
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4367
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4368
|
+
var Container$1b = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4369
|
+
var Title$8 = newStyled.p(templateObject_2$1h || (templateObject_2$1h = __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"])));
|
|
4370
|
+
var Description$3 = newStyled.p(templateObject_3$_ || (templateObject_3$_ = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4368
4371
|
var AbsorbencyLevel = function (_a) {
|
|
4369
4372
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4370
|
-
return (jsxRuntime.jsxs(Container$
|
|
4373
|
+
return (jsxRuntime.jsxs(Container$1b, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4371
4374
|
};
|
|
4372
|
-
var templateObject_1$
|
|
4375
|
+
var templateObject_1$1V, templateObject_2$1h, templateObject_3$_;
|
|
4373
4376
|
|
|
4374
4377
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4375
4378
|
`),"","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(`
|
|
@@ -4440,38 +4443,38 @@ var AccordionDetailsStyles = {
|
|
|
4440
4443
|
},
|
|
4441
4444
|
};
|
|
4442
4445
|
|
|
4443
|
-
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled, props.controlIconPos)]; });
|
|
4444
|
-
var StyledButton$
|
|
4446
|
+
var StyledDisclosure$1 = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled, props.controlIconPos)]; });
|
|
4447
|
+
var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [
|
|
4445
4448
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4446
4449
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4447
|
-
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4448
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4450
|
+
var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4451
|
+
var StyledContent$1 = newStyled.button(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
4449
4452
|
var Accordion$1 = function (_a) {
|
|
4450
4453
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
4451
4454
|
var theme = useTheme();
|
|
4452
|
-
return (jsxRuntime.jsx(StyledDisclosure, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick, controlIconPos: controlIconPos }, { children: function (_a) {
|
|
4455
|
+
return (jsxRuntime.jsx(StyledDisclosure$1, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick, controlIconPos: controlIconPos }, { children: function (_a) {
|
|
4453
4456
|
var open = _a.open;
|
|
4454
4457
|
var openWithForce = forceOpenHandler ? forceOpenValue : open;
|
|
4455
4458
|
var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
|
|
4456
4459
|
var showPanel = openWithForce && !disabled;
|
|
4457
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$
|
|
4460
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$3, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor, controlIconPos: controlIconPos }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, controlIconPos === 'right' && (jsxRuntime.jsx(ControlIcon, { title: openWithForce ? 'close icon' : 'open 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)), controlIconPos === 'bottom' && !(backgroundCover === null || backgroundCover === void 0 ? void 0 : backgroundCover.value) && !showPanel && (jsxRuntime.jsx("div", __assign$1({ className: "openIconBottom", style: {
|
|
4458
4461
|
width: '100%',
|
|
4459
4462
|
display: 'flex',
|
|
4460
4463
|
justifyContent: 'center',
|
|
4461
4464
|
padding: '0 0 15px 0',
|
|
4462
4465
|
backgroundColor: backgroundCover.iconBgColor || 'inherit',
|
|
4463
|
-
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "open 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)), controlIconPos === 'bottom' && showPanel && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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), jsxRuntime.jsx("div", __assign$1({ className: "closeIconBottom", style: {
|
|
4466
|
+
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "open 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)), controlIconPos === 'bottom' && showPanel && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledContent$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0), jsxRuntime.jsx("div", __assign$1({ className: "closeIconBottom", style: {
|
|
4464
4467
|
width: '100%',
|
|
4465
4468
|
display: 'flex',
|
|
4466
4469
|
justifyContent: 'center',
|
|
4467
4470
|
margin: '20px 0',
|
|
4468
4471
|
backgroundColor: 'transparent',
|
|
4469
|
-
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4472
|
+
} }, { 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$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel$1, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4470
4473
|
} }), void 0));
|
|
4471
4474
|
};
|
|
4472
|
-
var templateObject_1$
|
|
4475
|
+
var templateObject_1$1U;
|
|
4473
4476
|
|
|
4474
|
-
var Container$
|
|
4477
|
+
var Container$1a = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4475
4478
|
var AccordionOptions = function (_a) {
|
|
4476
4479
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4477
4480
|
var _b = React$2.useState({
|
|
@@ -4484,7 +4487,7 @@ var AccordionOptions = function (_a) {
|
|
|
4484
4487
|
}
|
|
4485
4488
|
return false;
|
|
4486
4489
|
};
|
|
4487
|
-
return (jsxRuntime.jsx(Container$
|
|
4490
|
+
return (jsxRuntime.jsx(Container$1a, { children: accordions.map(function (accordion, index) {
|
|
4488
4491
|
var forceOpenValue = getForceOpen(index);
|
|
4489
4492
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4490
4493
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4495,7 +4498,7 @@ var AccordionOptions = function (_a) {
|
|
|
4495
4498
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4496
4499
|
}) }, void 0));
|
|
4497
4500
|
};
|
|
4498
|
-
var templateObject_1$
|
|
4501
|
+
var templateObject_1$1T;
|
|
4499
4502
|
|
|
4500
4503
|
exports.CardSectionType = void 0;
|
|
4501
4504
|
(function (CardSectionType) {
|
|
@@ -4657,14 +4660,73 @@ var isValidDate = function (value) {
|
|
|
4657
4660
|
return /^\d{4}-\d{2}-\d{2}$/.test(value);
|
|
4658
4661
|
};
|
|
4659
4662
|
|
|
4660
|
-
var
|
|
4661
|
-
var
|
|
4663
|
+
var Bold = newStyled.span(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n font-weight: bold;\n"], ["\n font-weight: bold;\n"])));
|
|
4664
|
+
var FlexContainer$2 = newStyled.div(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 12px;\n background-color: white;\n border-radius: 8px;\n text-align: start;\n margin: 10px;\n"])));
|
|
4665
|
+
var templateObject_1$1S, templateObject_2$1g;
|
|
4666
|
+
|
|
4667
|
+
var Container$19 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n width: ", ";\n height: ", ";\n border-radius: 12px;\n background-color: #fff;\n"])), function (_a) {
|
|
4668
|
+
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
4669
|
+
return width;
|
|
4670
|
+
}, function (_a) {
|
|
4671
|
+
var _b = _a.height, height = _b === void 0 ? '100%' : _b;
|
|
4672
|
+
return height;
|
|
4673
|
+
});
|
|
4674
|
+
var FlexCentered = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 100%;\n padding: 0 12px;\n margin-bottom: 3px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 100%;\n padding: 0 12px;\n margin-bottom: 3px;\n"])));
|
|
4675
|
+
var LeftSide = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n width: 40%;\n height: 100%;\n resize: vertical;\n"], ["\n width: 40%;\n height: 100%;\n resize: vertical;\n"])));
|
|
4676
|
+
var RightSide = newStyled.div(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 60%;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n width: 60%;\n height: 100%;\n"])));
|
|
4677
|
+
var FlexStart = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 5px;\n width: 100%;\n padding: 12px;\n"])));
|
|
4678
|
+
var templateObject_1$1R, templateObject_2$1f, templateObject_3$Z, templateObject_4$K, templateObject_5$w;
|
|
4679
|
+
|
|
4680
|
+
var _this$1 = undefined;
|
|
4681
|
+
var Coupon = function (_a) {
|
|
4682
|
+
var imgSrc = _a.imgSrc, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b;
|
|
4683
|
+
var _c = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
|
|
4684
|
+
var _d = React$2.useState('176px'), containerHeight = _d[0], setContainerHeight = _d[1];
|
|
4685
|
+
var handleCopy = React$2.useCallback(function (couponCode) { return (couponCode ? navigator.clipboard.writeText(couponCode) : undefined); }, []);
|
|
4686
|
+
React$2.useEffect(function () {
|
|
4687
|
+
setContainerHeight(function (prev) { return (showCoupon ? '220px' : prev); });
|
|
4688
|
+
}, [showCoupon]);
|
|
4689
|
+
return (jsxRuntime.jsxs(Container$19, __assign$1({ height: containerHeight, width: width }, { children: [jsxRuntime.jsx(LeftSide, { children: jsxRuntime.jsx(Image$3, { src: imgSrc, alt: "Product", width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxRuntime.jsxs(RightSide, { children: [jsxRuntime.jsxs(FlexStart, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsxRuntime.jsx(FlexCentered, { children: !showCoupon ? (jsxRuntime.jsx(ButtonPrimary, { type: "button", text: btnText, wide: true, size: exports.ComponentSize.Small, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: exports.ComponentSize.Small, icon: {
|
|
4690
|
+
name: 'actions/copy_outlined',
|
|
4691
|
+
position: 'right',
|
|
4692
|
+
margin: '10px',
|
|
4693
|
+
}, onClick: handleCopy.bind(_this$1, couponCode !== null && couponCode !== void 0 ? couponCode : '') }, void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi", underline: true, href: offerLink }, { children: "Go to offer" }), void 0)] }, void 0)) }, void 0)] }, void 0)] }), void 0));
|
|
4694
|
+
};
|
|
4695
|
+
|
|
4696
|
+
// Partner titles
|
|
4697
|
+
var REVEL_BEAUTY_TITLE = 'REVEL BEAUTY';
|
|
4698
|
+
var THE_SPA_DR_TITLE = 'THE SPA DR.';
|
|
4699
|
+
// Coupon contents
|
|
4700
|
+
var CouponDefaultBody = function (firstLine, secondLine) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { textAlign: 'initial' } }, { children: firstLine }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading5", weight: "bold" }, { children: secondLine }), void 0)] }, void 0)); };
|
|
4701
|
+
var TheBodConContent = function () { return (jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [jsxRuntime.jsx(Bold, { children: "FREE and PREMIUM" }, void 0), " access to The BodCon Community App."] }), void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: ["The #1 Body Confidence Community. You'll have ", jsxRuntime.jsx(Bold, { children: "FREE access to:" }, void 0)] }), void 0), jsxRuntime.jsxs("ul", __assign$1({ style: { marginBottom: '5px', padding: '11px' } }, { children: [jsxRuntime.jsx("li", __assign$1({ style: { marginBottom: '5px' } }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Our confidence series: great courses made by the top influencers in the field, just for you to start your body-confidence journey!" }), void 0) }), void 0), jsxRuntime.jsx("li", { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Our more than 1.000 women's community and get-togethers to talk about women's empowerment." }), void 0) }, void 0)] }), void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [jsxRuntime.jsx(Bold, { children: "FREE" }, void 0), " access to The BodCon 2023 replays!"] }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Empower yourself and change how you see and feel about your body forever." }), void 0)] }, void 0)); };
|
|
4702
|
+
var cancellationFlowContentPerKey = {
|
|
4703
|
+
'RevelBeauty-1': CouponDefaultBody('Beauty Lift and Tighten Serum', '$10 OFF'),
|
|
4704
|
+
'RevelBeauty-2': CouponDefaultBody('Orders above $50', 'FREE SHIPPING'),
|
|
4705
|
+
'TheSpaDr-1': CouponDefaultBody('Daily Essentials 4-Step Skin Care System', '25% OFF'),
|
|
4706
|
+
'TheSpaDr-2': CouponDefaultBody('Nourish Antioxidant Serum', '$10 OFF'),
|
|
4707
|
+
TheBodCon: TheBodConContent(),
|
|
4708
|
+
};
|
|
4709
|
+
var couponWidth = '90%';
|
|
4710
|
+
var CancellationFlowAccordionContentPerPartner = {
|
|
4711
|
+
RevelBeauty: [
|
|
4712
|
+
jsxRuntime.jsx(Coupon, { width: couponWidth, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Beauty_Lift_and_Tighten_Serum.png?v=1709316823', content: cancellationFlowContentPerKey['RevelBeauty-1'], couponCode: 'CLUBFRIENDS', offerLink: 'https://revelbeauty.com/products/lift-tighten-serum' }, "RevelBeauty-1"),
|
|
4713
|
+
jsxRuntime.jsx(Coupon, { width: couponWidth, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/revel-beauty-orders-above-50.png?v=1709326588', content: cancellationFlowContentPerKey['RevelBeauty-2'], couponCode: 'SHIPPINGONUS', offerLink: 'https://revelbeauty.com/' }, "RevelBeauty-2"),
|
|
4714
|
+
],
|
|
4715
|
+
TheSpaDr: [
|
|
4716
|
+
jsxRuntime.jsx(Coupon, { width: couponWidth, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Daily_Essentials_4-Step_Skin_Care_System.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-1'], couponCode: 'SHMCLUBFRIENDS', offerLink: 'https://thespadr.com/products/4-step-age-defying-clean-skincare-system-3?variant=42658350727366' }, "TheSpaDr-1"),
|
|
4717
|
+
jsxRuntime.jsx(Coupon, { width: couponWidth, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Nourish_Antioxidant_Serum.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-2'], couponCode: 'SHMCLUB10OFF', offerLink: 'https://thespadr.com/products/step-2-age-defying-lift-tight-serum?variant=15992476860510' }, "TheSpaDr-2"),
|
|
4718
|
+
],
|
|
4719
|
+
TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
|
|
4720
|
+
};
|
|
4721
|
+
|
|
4722
|
+
var ErrorText = newStyled.h3(templateObject_1$1Q || (templateObject_1$1Q = __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; });
|
|
4723
|
+
var ErrorContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
4662
4724
|
var Error$1 = function (_a) {
|
|
4663
4725
|
var error = _a.error;
|
|
4664
4726
|
var theme = useTheme();
|
|
4665
4727
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4666
4728
|
};
|
|
4667
|
-
var templateObject_1$
|
|
4729
|
+
var templateObject_1$1Q, templateObject_2$1e;
|
|
4668
4730
|
|
|
4669
4731
|
var BaseSelectButton = function (_a) {
|
|
4670
4732
|
var children = _a.children, as = _a.as;
|
|
@@ -4681,7 +4743,7 @@ function BaseSelectOption(_a) {
|
|
|
4681
4743
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4682
4744
|
}
|
|
4683
4745
|
|
|
4684
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4746
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4685
4747
|
function BaseSelect(_a) {
|
|
4686
4748
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4687
4749
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4691,7 +4753,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4691
4753
|
Options: BaseSelectOptions,
|
|
4692
4754
|
Option: BaseSelectOption,
|
|
4693
4755
|
});
|
|
4694
|
-
var templateObject_1$
|
|
4756
|
+
var templateObject_1$1P;
|
|
4695
4757
|
|
|
4696
4758
|
var CustomButton = newStyled.button(function (_a) {
|
|
4697
4759
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4729,8 +4791,8 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4729
4791
|
},
|
|
4730
4792
|
});
|
|
4731
4793
|
});
|
|
4732
|
-
//TODO Remove this when we find the real solution
|
|
4733
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4794
|
+
// TODO Remove this when we find the real solution
|
|
4795
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4734
4796
|
var open = _a.open;
|
|
4735
4797
|
return open &&
|
|
4736
4798
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4750,7 +4812,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4750
4812
|
} }), void 0));
|
|
4751
4813
|
};
|
|
4752
4814
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4753
|
-
var templateObject_1$
|
|
4815
|
+
var templateObject_1$1O;
|
|
4754
4816
|
|
|
4755
4817
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4756
4818
|
var theme = _a.theme;
|
|
@@ -4917,7 +4979,7 @@ var CustomCheckboxStyles = {
|
|
|
4917
4979
|
},
|
|
4918
4980
|
};
|
|
4919
4981
|
|
|
4920
|
-
var Container$18 = newStyled.div(templateObject_1$
|
|
4982
|
+
var Container$18 = newStyled.div(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4921
4983
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4922
4984
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4923
4985
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4928,7 +4990,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4928
4990
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4929
4991
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4930
4992
|
]; });
|
|
4931
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4993
|
+
var Input$5 = newStyled.input(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
4932
4994
|
var disabled = _a.disabled;
|
|
4933
4995
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4934
4996
|
});
|
|
@@ -4944,7 +5006,7 @@ var Checkbox = function (_a) {
|
|
|
4944
5006
|
};
|
|
4945
5007
|
return (jsxRuntime.jsxs(Container$18, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4946
5008
|
};
|
|
4947
|
-
var templateObject_1$
|
|
5009
|
+
var templateObject_1$1N, templateObject_2$1d;
|
|
4948
5010
|
|
|
4949
5011
|
var CustomOption = newStyled.li(function (_a) {
|
|
4950
5012
|
var theme = _a.theme, selected = _a.selected, active = _a.active, hasImage = _a.hasImage;
|
|
@@ -4993,10 +5055,14 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4993
5055
|
Option: BaseDropdownOption,
|
|
4994
5056
|
});
|
|
4995
5057
|
|
|
4996
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
4997
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
5058
|
+
var Container$17 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
5059
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1c || (templateObject_2$1c = __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"])));
|
|
5060
|
+
var SelectedOption = newStyled.span(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n font-weight: ", ";\n"], ["\n font-weight: ", ";\n"])), function (_a) {
|
|
5061
|
+
var fontWeight = _a.fontWeight;
|
|
5062
|
+
return fontWeight || '';
|
|
5063
|
+
});
|
|
4998
5064
|
function SimpleDropdown(_a) {
|
|
4999
|
-
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
|
|
5065
|
+
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, selectedOptionWeight = _a.selectedOptionWeight;
|
|
5000
5066
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
5001
5067
|
var selectedOptionLabel = React$2.useMemo(function () {
|
|
5002
5068
|
if (selectedValue) {
|
|
@@ -5024,9 +5090,9 @@ function SimpleDropdown(_a) {
|
|
|
5024
5090
|
setSelectedValue(value);
|
|
5025
5091
|
}, [value, options, initialValue]);
|
|
5026
5092
|
var DropdownContainer = showRequiredPlaceholder ? Container$17 : React$2.Fragment;
|
|
5027
|
-
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionLabel] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5093
|
+
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsxs(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: [!!(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.imageURL) && (jsxRuntime.jsx("img", { src: selectedValue.imageURL, alt: selectedValue.label, style: { paddingRight: 8 } }, void 0)), selectedOptionWeight && disabled ? (jsxRuntime.jsx(SelectedOption, __assign$1({ fontWeight: selectedOptionWeight }, { children: selectedOptionLabel }), void 0)) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: selectedOptionLabel }, void 0))] }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsxs(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled, hasImage: !!item.imageURL }, { children: [!!item.imageURL && (jsxRuntime.jsx("img", { src: item.imageURL, alt: item.label, style: { paddingRight: 8 } }, void 0)), item.label] }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
5028
5094
|
}
|
|
5029
|
-
var templateObject_1$
|
|
5095
|
+
var templateObject_1$1M, templateObject_2$1c, templateObject_3$Y;
|
|
5030
5096
|
|
|
5031
5097
|
/* base styles & size variants */
|
|
5032
5098
|
var CustomRadioStyles$2 = {
|
|
@@ -5091,9 +5157,9 @@ var ContainerStyles$2 = {
|
|
|
5091
5157
|
},
|
|
5092
5158
|
};
|
|
5093
5159
|
|
|
5094
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5160
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5095
5161
|
var Container$16 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5096
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5162
|
+
var Input$4 = newStyled.input(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5097
5163
|
var disabled = _a.disabled;
|
|
5098
5164
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5099
5165
|
});
|
|
@@ -5124,7 +5190,7 @@ var RadioInput = function (_a) {
|
|
|
5124
5190
|
};
|
|
5125
5191
|
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$16, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5126
5192
|
};
|
|
5127
|
-
var templateObject_1$
|
|
5193
|
+
var templateObject_1$1L, templateObject_2$1b, templateObject_3$X, templateObject_4$J;
|
|
5128
5194
|
|
|
5129
5195
|
var getWrapperFlexDirection = function (position) {
|
|
5130
5196
|
switch (position) {
|
|
@@ -5175,7 +5241,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5175
5241
|
}
|
|
5176
5242
|
};
|
|
5177
5243
|
|
|
5178
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5244
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5179
5245
|
var position = _a.position;
|
|
5180
5246
|
return getWrapperFlexDirection(position);
|
|
5181
5247
|
}, function (_a) {
|
|
@@ -5185,7 +5251,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __ma
|
|
|
5185
5251
|
var disableHover = _a.disableHover;
|
|
5186
5252
|
return (disableHover ? 0 : 1);
|
|
5187
5253
|
});
|
|
5188
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5254
|
+
var TooltipContainer = newStyled.div(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5189
5255
|
var position = _a.position;
|
|
5190
5256
|
return getContainerFlexDirection(position);
|
|
5191
5257
|
}, function (_a) {
|
|
@@ -5234,7 +5300,7 @@ var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g =
|
|
|
5234
5300
|
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5235
5301
|
return right;
|
|
5236
5302
|
});
|
|
5237
|
-
var templateObject_1$
|
|
5303
|
+
var templateObject_1$1K, templateObject_2$1a, templateObject_3$W, templateObject_4$I, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$g;
|
|
5238
5304
|
|
|
5239
5305
|
var useOnClickOutside = function (ref, handler) {
|
|
5240
5306
|
React$2.useEffect(function () {
|
|
@@ -5308,6 +5374,29 @@ var useWindowDimensions = function (breakpoints, _a) {
|
|
|
5308
5374
|
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
5309
5375
|
};
|
|
5310
5376
|
|
|
5377
|
+
var useDeviceType = function () {
|
|
5378
|
+
var mobileBreakpoint = 768;
|
|
5379
|
+
var tabletBreakpoint = 1024;
|
|
5380
|
+
var _a = React$2.useState('desktop'), deviceType = _a[0], setDeviceType = _a[1];
|
|
5381
|
+
var handleResize = function () {
|
|
5382
|
+
if (window.innerWidth < mobileBreakpoint) {
|
|
5383
|
+
setDeviceType('mobile');
|
|
5384
|
+
}
|
|
5385
|
+
else if (window.innerWidth < tabletBreakpoint) {
|
|
5386
|
+
setDeviceType('tablet');
|
|
5387
|
+
}
|
|
5388
|
+
else {
|
|
5389
|
+
setDeviceType('desktop');
|
|
5390
|
+
}
|
|
5391
|
+
};
|
|
5392
|
+
React$2.useLayoutEffect(function () {
|
|
5393
|
+
window.addEventListener('resize', handleResize);
|
|
5394
|
+
handleResize();
|
|
5395
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
5396
|
+
}, []);
|
|
5397
|
+
return deviceType;
|
|
5398
|
+
};
|
|
5399
|
+
|
|
5311
5400
|
var Tooltip = function (_a) {
|
|
5312
5401
|
var _b;
|
|
5313
5402
|
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, showCloseIcon = _a.showCloseIcon, _c = _a.align, align = _c === void 0 ? 'center' : _c, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.closeBtnSize, closeBtnSize = _e === void 0 ? 0.5 : _e;
|
|
@@ -5377,7 +5466,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5377
5466
|
};
|
|
5378
5467
|
}
|
|
5379
5468
|
};
|
|
5380
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
5469
|
+
var Container$15 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __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) {
|
|
5381
5470
|
var backgroundColor = _a.backgroundColor;
|
|
5382
5471
|
return backgroundColor;
|
|
5383
5472
|
}, function (_a) {
|
|
@@ -5399,7 +5488,7 @@ var Container$15 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = _
|
|
|
5399
5488
|
var size = _a.size;
|
|
5400
5489
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5401
5490
|
});
|
|
5402
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5491
|
+
var H3$3 = newStyled.h3(templateObject_2$19 || (templateObject_2$19 = __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) {
|
|
5403
5492
|
var textColor = _a.textColor;
|
|
5404
5493
|
return textColor;
|
|
5405
5494
|
}, function (_a) {
|
|
@@ -5416,7 +5505,7 @@ var ClubOfferTag = function (_a) {
|
|
|
5416
5505
|
var theme = useTheme();
|
|
5417
5506
|
return (jsxRuntime.jsx(Container$15, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5418
5507
|
};
|
|
5419
|
-
var templateObject_1$
|
|
5508
|
+
var templateObject_1$1J, templateObject_2$19;
|
|
5420
5509
|
|
|
5421
5510
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5422
5511
|
var _a, _b, _c;
|
|
@@ -5447,7 +5536,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5447
5536
|
};
|
|
5448
5537
|
}
|
|
5449
5538
|
};
|
|
5450
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
5539
|
+
var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5451
5540
|
var backgroundColor = _a.backgroundColor;
|
|
5452
5541
|
return backgroundColor;
|
|
5453
5542
|
}, function (_a) {
|
|
@@ -5469,7 +5558,7 @@ var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5469
5558
|
var size = _a.size;
|
|
5470
5559
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5471
5560
|
});
|
|
5472
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5561
|
+
var H3$2 = newStyled.h3(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5473
5562
|
var textColor = _a.textColor;
|
|
5474
5563
|
return textColor;
|
|
5475
5564
|
}, function (_a) {
|
|
@@ -5486,7 +5575,7 @@ var DiscountTag$1 = function (_a) {
|
|
|
5486
5575
|
var theme = useTheme();
|
|
5487
5576
|
return (jsxRuntime.jsx(Container$14, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxRuntime.jsxs(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5488
5577
|
};
|
|
5489
|
-
var templateObject_1$
|
|
5578
|
+
var templateObject_1$1I, templateObject_2$18;
|
|
5490
5579
|
|
|
5491
5580
|
var getStylesBySize$b = function (size, theme) {
|
|
5492
5581
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5528,8 +5617,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5528
5617
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5529
5618
|
}
|
|
5530
5619
|
};
|
|
5531
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
5532
|
-
var Price = newStyled.p(templateObject_2$
|
|
5620
|
+
var Container$13 = 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"])));
|
|
5621
|
+
var Price = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __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) {
|
|
5533
5622
|
var weight = _a.weight;
|
|
5534
5623
|
return (weight ? weight : '400');
|
|
5535
5624
|
}, function (_a) {
|
|
@@ -5586,9 +5675,9 @@ var PriceLabel = function (_a) {
|
|
|
5586
5675
|
};
|
|
5587
5676
|
return (jsxRuntime.jsxs(Container$13, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5588
5677
|
};
|
|
5589
|
-
var templateObject_1$
|
|
5678
|
+
var templateObject_1$1H, templateObject_2$17, templateObject_3$V;
|
|
5590
5679
|
|
|
5591
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5680
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5592
5681
|
var PriceLabelV2 = function (_a) {
|
|
5593
5682
|
var _b;
|
|
5594
5683
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -5659,10 +5748,10 @@ var PriceLabelV2 = function (_a) {
|
|
|
5659
5748
|
lineHeight: '22px',
|
|
5660
5749
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5661
5750
|
};
|
|
5662
|
-
var templateObject_1$
|
|
5751
|
+
var templateObject_1$1G;
|
|
5663
5752
|
|
|
5664
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5665
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5753
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5754
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5666
5755
|
var DiscountEachOneContainer = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5667
5756
|
var PriceLabelV3 = function (_a) {
|
|
5668
5757
|
var _b;
|
|
@@ -5734,10 +5823,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5734
5823
|
lineHeight: '22px',
|
|
5735
5824
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5736
5825
|
};
|
|
5737
|
-
var templateObject_1$
|
|
5826
|
+
var templateObject_1$1F, templateObject_2$16, templateObject_3$U;
|
|
5738
5827
|
|
|
5739
|
-
var FlexContainer$1 = newStyled.div(templateObject_1$
|
|
5740
|
-
var ContainerBase$1 = newStyled.div(templateObject_2$
|
|
5828
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5829
|
+
var ContainerBase$1 = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5741
5830
|
var selected = _a.selected, theme = _a.theme;
|
|
5742
5831
|
return selected
|
|
5743
5832
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5774,7 +5863,7 @@ var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObje
|
|
|
5774
5863
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5775
5864
|
});
|
|
5776
5865
|
var Container$12 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5777
|
-
var templateObject_1$
|
|
5866
|
+
var templateObject_1$1E, templateObject_2$15, templateObject_3$T, templateObject_4$H, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$f, templateObject_9$8, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
|
|
5778
5867
|
|
|
5779
5868
|
var radioIds$1 = {
|
|
5780
5869
|
oneTime: {
|
|
@@ -5829,12 +5918,12 @@ var Autoship = function (_a) {
|
|
|
5829
5918
|
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$1, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$1, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5830
5919
|
};
|
|
5831
5920
|
|
|
5832
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5921
|
+
var FlexContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n\n ", "\n"], ["\n display: flex;\n\n ", "\n"])), function (_a) {
|
|
5833
5922
|
var theme = _a.theme;
|
|
5834
5923
|
return theme.name === 'TheSpaDr' &&
|
|
5835
5924
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
5836
5925
|
});
|
|
5837
|
-
var DiscountTag = newStyled.div(templateObject_2$
|
|
5926
|
+
var DiscountTag = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
5838
5927
|
var theme = _a.theme, isSelected = _a.isSelected;
|
|
5839
5928
|
return isSelected
|
|
5840
5929
|
? theme.component.autoship.discountTag.backgroundColor
|
|
@@ -5883,7 +5972,7 @@ var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject
|
|
|
5883
5972
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5884
5973
|
});
|
|
5885
5974
|
var Container$11 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5886
|
-
var templateObject_1$
|
|
5975
|
+
var templateObject_1$1D, templateObject_2$14, templateObject_3$S, templateObject_4$G, templateObject_5$t, templateObject_6$o, templateObject_7$g, templateObject_8$e, templateObject_9$7, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
5887
5976
|
|
|
5888
5977
|
var radioIds = {
|
|
5889
5978
|
oneTime: {
|
|
@@ -5961,13 +6050,13 @@ var componentSizeMapper = (_a$2 = {},
|
|
|
5961
6050
|
_a$2[exports.ComponentSize.Large] = exports.ComponentSize.Medium,
|
|
5962
6051
|
_a$2);
|
|
5963
6052
|
|
|
5964
|
-
var CustomerDetails = newStyled.div(templateObject_1$
|
|
5965
|
-
var CustomerInfo = newStyled.div(templateObject_2$
|
|
6053
|
+
var CustomerDetails = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject([""], [""])));
|
|
6054
|
+
var CustomerInfo = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __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"])));
|
|
5966
6055
|
var Name = newStyled.h4(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"], ["\n font-size: 22px;\n line-height: 20px;\n font-weight: 400;\n margin: 0;\n"])));
|
|
5967
6056
|
var StarIconContainer = newStyled.div(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n"])));
|
|
5968
6057
|
var Description$2 = newStyled.p(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"], ["\n font-size: 16px;\n font-weight: 300;\n line-height: normal;\n"])));
|
|
5969
6058
|
var ReviewDays = newStyled.span(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"], ["\n display: block;\n font-size: 14px;\n font-style: italic;\n font-weight: 300;\n"])));
|
|
5970
|
-
var templateObject_1$
|
|
6059
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$R, templateObject_4$F, templateObject_5$s, templateObject_6$n;
|
|
5971
6060
|
|
|
5972
6061
|
var NameWithStars = function (_a) {
|
|
5973
6062
|
var name = _a.name, size = _a.size;
|
|
@@ -5985,8 +6074,8 @@ var ResultFeedback = function (_a) {
|
|
|
5985
6074
|
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));
|
|
5986
6075
|
};
|
|
5987
6076
|
|
|
5988
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
5989
|
-
var ImageContainer$5 = newStyled.div(templateObject_2$
|
|
6077
|
+
var Container$10 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
6078
|
+
var ImageContainer$5 = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
5990
6079
|
var ImageCard = newStyled.div(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
5991
6080
|
var UserInfoText = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (_a) {
|
|
5992
6081
|
var theme = _a.theme;
|
|
@@ -5998,7 +6087,7 @@ var UserInfoText = newStyled.div(templateObject_4$E || (templateObject_4$E = __m
|
|
|
5998
6087
|
var theme = _a.theme, size = _a.size;
|
|
5999
6088
|
return theme.component.beforeAfter.size[componentSizeMapper[size]].userInfoText.mobile.fontSize;
|
|
6000
6089
|
});
|
|
6001
|
-
var templateObject_1$
|
|
6090
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$Q, templateObject_4$E;
|
|
6002
6091
|
|
|
6003
6092
|
/* base styles & size variants */
|
|
6004
6093
|
var getStylesBySize$a = function (size, theme) {
|
|
@@ -6076,7 +6165,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
6076
6165
|
return (jsxRuntime.jsxs(Container$10, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
6077
6166
|
};
|
|
6078
6167
|
|
|
6079
|
-
var Section = newStyled.div(templateObject_1$
|
|
6168
|
+
var Section = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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) {
|
|
6080
6169
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
6081
6170
|
});
|
|
6082
6171
|
var CardHeader = function (_a) {
|
|
@@ -6087,16 +6176,16 @@ var CardFooter = function (_a) {
|
|
|
6087
6176
|
var children = _a.children;
|
|
6088
6177
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
6089
6178
|
};
|
|
6090
|
-
var templateObject_1$
|
|
6179
|
+
var templateObject_1$1A;
|
|
6091
6180
|
|
|
6092
|
-
var Body = newStyled.div(templateObject_1$
|
|
6181
|
+
var Body = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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"])));
|
|
6093
6182
|
var CardBody = function (_a) {
|
|
6094
6183
|
var children = _a.children;
|
|
6095
6184
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
6096
6185
|
};
|
|
6097
|
-
var templateObject_1$
|
|
6186
|
+
var templateObject_1$1z;
|
|
6098
6187
|
|
|
6099
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
6188
|
+
var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
6100
6189
|
var flex = _a.flex;
|
|
6101
6190
|
return flex &&
|
|
6102
6191
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -6118,16 +6207,16 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
6118
6207
|
Footer: CardFooter,
|
|
6119
6208
|
Body: CardBody,
|
|
6120
6209
|
});
|
|
6121
|
-
var templateObject_1$
|
|
6210
|
+
var templateObject_1$1y;
|
|
6122
6211
|
|
|
6123
|
-
var StyledWrapper = newStyled.div(templateObject_1$
|
|
6124
|
-
var StyledContainer = newStyled.div(templateObject_2$
|
|
6212
|
+
var StyledWrapper = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
6213
|
+
var StyledContainer = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
6125
6214
|
var TextLabel = newStyled(Text$7)(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"], ["\n margin: 0.1rem 0;\n min-width: 4.5rem;\n color: ", ";\n"])), function (_a) {
|
|
6126
6215
|
var color = _a.color;
|
|
6127
6216
|
return color;
|
|
6128
6217
|
});
|
|
6129
6218
|
var YouAreSaving = newStyled(Text$7)(templateObject_4$D || (templateObject_4$D = __makeTemplateObject(["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"], ["\n text-align: right;\n margin: 0 0 0 0.5rem;\n"])));
|
|
6130
|
-
var templateObject_1$
|
|
6219
|
+
var templateObject_1$1x, templateObject_2$11, templateObject_3$P, templateObject_4$D;
|
|
6131
6220
|
|
|
6132
6221
|
var Minimalistic = function (_a) {
|
|
6133
6222
|
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;
|
|
@@ -6135,8 +6224,8 @@ var Minimalistic = function (_a) {
|
|
|
6135
6224
|
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));
|
|
6136
6225
|
};
|
|
6137
6226
|
|
|
6138
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
6139
|
-
var Title$6 = newStyled.h1(templateObject_2
|
|
6227
|
+
var Container$_ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
6228
|
+
var Title$6 = newStyled.h1(templateObject_2$10 || (templateObject_2$10 = __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; });
|
|
6140
6229
|
var Details$1 = newStyled.span(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6141
6230
|
var PriceContainer$2 = newStyled.span(templateObject_4$C || (templateObject_4$C = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
6142
6231
|
var Simple = function (_a) {
|
|
@@ -6144,18 +6233,18 @@ var Simple = function (_a) {
|
|
|
6144
6233
|
var theme = useTheme();
|
|
6145
6234
|
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$_, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
6146
6235
|
};
|
|
6147
|
-
var templateObject_1$
|
|
6236
|
+
var templateObject_1$1w, templateObject_2$10, templateObject_3$O, templateObject_4$C;
|
|
6148
6237
|
|
|
6149
6238
|
var Bundle = {
|
|
6150
6239
|
Minimalistic: Minimalistic,
|
|
6151
6240
|
Simple: Simple,
|
|
6152
6241
|
};
|
|
6153
6242
|
|
|
6154
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
6243
|
+
var Container$Z = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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) {
|
|
6155
6244
|
var displayBNPL = _a.displayBNPL;
|
|
6156
6245
|
return (displayBNPL ? 'flex' : 'none');
|
|
6157
6246
|
});
|
|
6158
|
-
var TextContainer$1 = newStyled.div(templateObject_2
|
|
6247
|
+
var TextContainer$1 = newStyled.div(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
6159
6248
|
var IconWrapper$1 = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n\n svg {\n vertical-align: -webkit-baseline-middle;\n }\n"])));
|
|
6160
6249
|
var BuyNowPayLater = function (_a) {
|
|
6161
6250
|
var _b;
|
|
@@ -6168,41 +6257,41 @@ var BuyNowPayLater = function (_a) {
|
|
|
6168
6257
|
}
|
|
6169
6258
|
return (jsxRuntime.jsx(Container$Z, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
6170
6259
|
};
|
|
6171
|
-
var templateObject_1$
|
|
6260
|
+
var templateObject_1$1v, templateObject_2$$, templateObject_3$N;
|
|
6172
6261
|
|
|
6173
|
-
var Text$6 = newStyled.span(templateObject_1$
|
|
6262
|
+
var Text$6 = newStyled.span(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
6174
6263
|
var Title$5 = function (_a) {
|
|
6175
6264
|
var title = _a.title;
|
|
6176
6265
|
var theme = useTheme();
|
|
6177
6266
|
return jsxRuntime.jsx(Text$6, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
6178
6267
|
};
|
|
6179
|
-
var templateObject_1$
|
|
6268
|
+
var templateObject_1$1u;
|
|
6180
6269
|
|
|
6181
|
-
var P$3 = newStyled.p(templateObject_1$
|
|
6270
|
+
var P$3 = newStyled.p(templateObject_1$1t || (templateObject_1$1t = __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; });
|
|
6182
6271
|
var Promo = function (_a) {
|
|
6183
6272
|
var text = _a.text;
|
|
6184
6273
|
var theme = useTheme();
|
|
6185
6274
|
return (jsxRuntime.jsx(P$3, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
6186
6275
|
};
|
|
6187
|
-
var templateObject_1$
|
|
6276
|
+
var templateObject_1$1t;
|
|
6188
6277
|
|
|
6189
|
-
var Text$5 = newStyled.span(templateObject_1$
|
|
6278
|
+
var Text$5 = newStyled.span(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
6190
6279
|
var Description$1 = function (_a) {
|
|
6191
6280
|
var text = _a.text;
|
|
6192
6281
|
var theme = useTheme();
|
|
6193
6282
|
return jsxRuntime.jsx(Text$5, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
6194
6283
|
};
|
|
6195
|
-
var templateObject_1$
|
|
6284
|
+
var templateObject_1$1s;
|
|
6196
6285
|
|
|
6197
|
-
var Container$Y = newStyled.div(templateObject_1$
|
|
6286
|
+
var Container$Y = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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"); });
|
|
6198
6287
|
var CloseButton$1 = function (_a) {
|
|
6199
6288
|
var onClick = _a.onClick, size = _a.size;
|
|
6200
6289
|
var theme = useTheme();
|
|
6201
6290
|
return (jsxRuntime.jsx(Container$Y, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
6202
6291
|
};
|
|
6203
|
-
var templateObject_1$
|
|
6292
|
+
var templateObject_1$1r;
|
|
6204
6293
|
|
|
6205
|
-
var Text$4 = newStyled.h3(templateObject_1$
|
|
6294
|
+
var Text$4 = newStyled.h3(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
6206
6295
|
var backgroundColor = _a.backgroundColor;
|
|
6207
6296
|
return backgroundColor;
|
|
6208
6297
|
}, function (_a) {
|
|
@@ -6217,7 +6306,7 @@ var OfferBanner = function (_a) {
|
|
|
6217
6306
|
var theme = useTheme();
|
|
6218
6307
|
return (jsxRuntime.jsx(Text$4, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, borderRadius: theme.component.text.offerBanner.borderRadius, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
6219
6308
|
};
|
|
6220
|
-
var templateObject_1$
|
|
6309
|
+
var templateObject_1$1q;
|
|
6221
6310
|
|
|
6222
6311
|
var CartProductItem = {
|
|
6223
6312
|
Title: Title$5,
|
|
@@ -6227,8 +6316,8 @@ var CartProductItem = {
|
|
|
6227
6316
|
CloseButton: CloseButton$1,
|
|
6228
6317
|
};
|
|
6229
6318
|
|
|
6230
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
6231
|
-
var MobileContainer = newStyled(Container$X)(templateObject_2$
|
|
6319
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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"])));
|
|
6320
|
+
var MobileContainer = newStyled(Container$X)(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6232
6321
|
var DollarPart = newStyled.span(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6233
6322
|
var ClubMembersText = newStyled.span(templateObject_4$B || (templateObject_4$B = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
6234
6323
|
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
@@ -6240,7 +6329,7 @@ var ClubPriceLabel = function (_a) {
|
|
|
6240
6329
|
var isMobile = useWindowDimensions().isMobile;
|
|
6241
6330
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isMobile ? (jsxRuntime.jsxs(MobileContainer, { children: [jsxRuntime.jsx(MobileDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(Container$X, { children: [jsxRuntime.jsx(DesktopDollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6242
6331
|
};
|
|
6243
|
-
var templateObject_1$
|
|
6332
|
+
var templateObject_1$1p, templateObject_2$_, templateObject_3$M, templateObject_4$B, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$d;
|
|
6244
6333
|
|
|
6245
6334
|
var Spacing = function (_a) {
|
|
6246
6335
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6248,8 +6337,8 @@ var Spacing = function (_a) {
|
|
|
6248
6337
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6249
6338
|
};
|
|
6250
6339
|
|
|
6251
|
-
var Container$W = newStyled('div')(templateObject_1$
|
|
6252
|
-
var Content$2 = newStyled('div')(templateObject_2$
|
|
6340
|
+
var Container$W = newStyled('div')(templateObject_1$1o || (templateObject_1$1o = __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"])));
|
|
6341
|
+
var Content$2 = newStyled('div')(templateObject_2$Z || (templateObject_2$Z = __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"])));
|
|
6253
6342
|
var BarContainer$1 = newStyled('div')(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"], ["\n gap: 2px;\n display: flex;\n align-items: flex-end;\n width: fit-content;\n"])));
|
|
6254
6343
|
var Bar$2 = newStyled('div')(templateObject_4$A || (templateObject_4$A = __makeTemplateObject(["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"], ["\n width: 2px;\n border-radius: 2px;\n height: ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
6255
6344
|
var index = _a.index;
|
|
@@ -6262,10 +6351,10 @@ var StrengthBars = function (_a) {
|
|
|
6262
6351
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6263
6352
|
return (jsxRuntime.jsxs(Container$W, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6264
6353
|
};
|
|
6265
|
-
var templateObject_1$
|
|
6354
|
+
var templateObject_1$1o, templateObject_2$Z, templateObject_3$L, templateObject_4$A;
|
|
6266
6355
|
|
|
6267
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$
|
|
6268
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$
|
|
6356
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1n || (templateObject_1$1n = __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"])));
|
|
6357
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
6269
6358
|
var PriceContainer$1 = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6270
6359
|
var PriceContainerV2 = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6271
6360
|
var PriceWithTagContainer = newStyled.span(templateObject_5$q || (templateObject_5$q = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
@@ -6321,12 +6410,12 @@ var PriceLabelV4 = function (_a) {
|
|
|
6321
6410
|
? finalPriceArray[0]
|
|
6322
6411
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6323
6412
|
};
|
|
6324
|
-
var templateObject_1$
|
|
6413
|
+
var templateObject_1$1n, templateObject_2$Y, templateObject_3$K, templateObject_4$z, templateObject_5$q;
|
|
6325
6414
|
|
|
6326
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
6327
|
-
var templateObject_1$
|
|
6415
|
+
var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6416
|
+
var templateObject_1$1m;
|
|
6328
6417
|
|
|
6329
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6418
|
+
var StarContainer = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6330
6419
|
var marginRight = _a.marginRight;
|
|
6331
6420
|
return marginRight;
|
|
6332
6421
|
});
|
|
@@ -6342,7 +6431,7 @@ var StarList = function (_a) {
|
|
|
6342
6431
|
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)));
|
|
6343
6432
|
}) }, void 0));
|
|
6344
6433
|
};
|
|
6345
|
-
var templateObject_1$
|
|
6434
|
+
var templateObject_1$1l;
|
|
6346
6435
|
|
|
6347
6436
|
/* base styles & size variants */
|
|
6348
6437
|
var LabelStyles = {
|
|
@@ -6383,8 +6472,8 @@ var LabelStyles = {
|
|
|
6383
6472
|
});
|
|
6384
6473
|
},
|
|
6385
6474
|
};
|
|
6386
|
-
var Container$U = newStyled.a(templateObject_1$
|
|
6387
|
-
var templateObject_1$
|
|
6475
|
+
var Container$U = newStyled.a(templateObject_1$1k || (templateObject_1$1k = __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"])));
|
|
6476
|
+
var templateObject_1$1k;
|
|
6388
6477
|
|
|
6389
6478
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6390
6479
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6404,7 +6493,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6404
6493
|
}),
|
|
6405
6494
|
];
|
|
6406
6495
|
});
|
|
6407
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6496
|
+
var RatingLabel = newStyled.span(templateObject_1$1j || (templateObject_1$1j = __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; });
|
|
6408
6497
|
var starsNumber = 5;
|
|
6409
6498
|
var Rating = function (_a) {
|
|
6410
6499
|
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;
|
|
@@ -6427,7 +6516,7 @@ var Rating = function (_a) {
|
|
|
6427
6516
|
: {};
|
|
6428
6517
|
return (jsxRuntime.jsxs(Container$U, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6429
6518
|
};
|
|
6430
|
-
var templateObject_1$
|
|
6519
|
+
var templateObject_1$1j;
|
|
6431
6520
|
|
|
6432
6521
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6433
6522
|
var width = _a.width, height = _a.height;
|
|
@@ -6437,8 +6526,8 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6437
6526
|
height: height,
|
|
6438
6527
|
});
|
|
6439
6528
|
});
|
|
6440
|
-
var ImageHoverContainer$1 = newStyled.img(templateObject_1$
|
|
6441
|
-
var Container$T = newStyled.a(templateObject_2$
|
|
6529
|
+
var ImageHoverContainer$1 = newStyled.img(templateObject_1$1i || (templateObject_1$1i = __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"])));
|
|
6530
|
+
var Container$T = newStyled.a(templateObject_2$X || (templateObject_2$X = __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"])));
|
|
6442
6531
|
var ProdCardContainer$1 = newStyled.div(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6443
6532
|
var Title$4 = newStyled.p(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6444
6533
|
var getStylesBySize$9 = function (size) {
|
|
@@ -6533,7 +6622,7 @@ var ProductItemMobile = function (_a) {
|
|
|
6533
6622
|
};
|
|
6534
6623
|
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$T, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$4, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$6, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer$1, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$T, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$4, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer$1, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay() }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [PriceLabelDisplay(), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
6535
6624
|
};
|
|
6536
|
-
var templateObject_1$
|
|
6625
|
+
var templateObject_1$1i, templateObject_2$X, templateObject_3$J, templateObject_4$y, templateObject_5$p, templateObject_6$l, templateObject_7$e;
|
|
6537
6626
|
|
|
6538
6627
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6539
6628
|
var width = _a.width, height = _a.height;
|
|
@@ -6543,8 +6632,8 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6543
6632
|
height: height,
|
|
6544
6633
|
});
|
|
6545
6634
|
});
|
|
6546
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
6547
|
-
var Container$S = newStyled.a(templateObject_2$
|
|
6635
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$1h || (templateObject_1$1h = __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; });
|
|
6636
|
+
var Container$S = newStyled.a(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6548
6637
|
var ProdCardContainer = newStyled.div(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
6549
6638
|
var Title$3 = newStyled.p(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6550
6639
|
var getStylesBySize$8 = function (size) {
|
|
@@ -6632,9 +6721,9 @@ var ProductItemTK = function (_a) {
|
|
|
6632
6721
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6633
6722
|
} }, { 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));
|
|
6634
6723
|
};
|
|
6635
|
-
var templateObject_1$
|
|
6724
|
+
var templateObject_1$1h, templateObject_2$W, templateObject_3$I, templateObject_4$x, templateObject_5$o, templateObject_6$k, templateObject_7$d, templateObject_8$c;
|
|
6636
6725
|
|
|
6637
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
6726
|
+
var Container$R = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
6638
6727
|
function withProductGrid(ProductItemComponent, data) {
|
|
6639
6728
|
function WithProductGrid(props) {
|
|
6640
6729
|
return (jsxRuntime.jsx(Container$R, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -6644,7 +6733,7 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
6644
6733
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
6645
6734
|
return WithProductGrid;
|
|
6646
6735
|
}
|
|
6647
|
-
var templateObject_1$
|
|
6736
|
+
var templateObject_1$1g;
|
|
6648
6737
|
|
|
6649
6738
|
var Collection = {
|
|
6650
6739
|
ProductItemMobile: ProductItemMobile,
|
|
@@ -6691,8 +6780,8 @@ var OutOfStock = function (_a) {
|
|
|
6691
6780
|
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));
|
|
6692
6781
|
};
|
|
6693
6782
|
|
|
6694
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
6695
|
-
newStyled(lt.Label)(templateObject_2$
|
|
6783
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6784
|
+
newStyled(lt.Label)(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6696
6785
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6697
6786
|
var Span = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6698
6787
|
var OptionsContainer = newStyled.div(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
@@ -6713,23 +6802,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6713
6802
|
Option: Option,
|
|
6714
6803
|
OptionsContainer: OptionsContainer,
|
|
6715
6804
|
});
|
|
6716
|
-
var templateObject_1$
|
|
6805
|
+
var templateObject_1$1f, templateObject_2$V, templateObject_3$H, templateObject_4$w, templateObject_5$n;
|
|
6717
6806
|
|
|
6718
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
6807
|
+
var Container$Q = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
6719
6808
|
var borderColor = _a.borderColor;
|
|
6720
6809
|
return borderColor;
|
|
6721
6810
|
}, function (_a) {
|
|
6722
6811
|
var noStock = _a.noStock;
|
|
6723
6812
|
return (noStock ? '0.4' : '1');
|
|
6724
6813
|
});
|
|
6725
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6814
|
+
var Image$2 = newStyled.img(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6726
6815
|
var PatternSelector = function (_a) {
|
|
6727
6816
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6728
6817
|
var theme = useTheme();
|
|
6729
6818
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6730
6819
|
return (jsxRuntime.jsx(Container$Q, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6731
6820
|
};
|
|
6732
|
-
var templateObject_1$
|
|
6821
|
+
var templateObject_1$1e, templateObject_2$U;
|
|
6733
6822
|
|
|
6734
6823
|
var renderOptions$1 = function (selectedColor, options) {
|
|
6735
6824
|
if (options == null || options.length === 0) {
|
|
@@ -6788,8 +6877,8 @@ var SingleColorPicker = function (_a) {
|
|
|
6788
6877
|
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));
|
|
6789
6878
|
};
|
|
6790
6879
|
|
|
6791
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6792
|
-
var Col$1 = newStyled.div(templateObject_2$
|
|
6880
|
+
var Wrapper$5 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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'); });
|
|
6881
|
+
var Col$1 = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6793
6882
|
var Row$2 = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
6794
6883
|
return props.rightToLeft &&
|
|
6795
6884
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
@@ -6802,7 +6891,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
6802
6891
|
var theme = useTheme();
|
|
6803
6892
|
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));
|
|
6804
6893
|
};
|
|
6805
|
-
var templateObject_1$
|
|
6894
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$G, templateObject_4$v, templateObject_5$m, templateObject_6$j;
|
|
6806
6895
|
|
|
6807
6896
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6808
6897
|
__proto__: null,
|
|
@@ -6830,7 +6919,7 @@ var sizeMapper = (_a = {},
|
|
|
6830
6919
|
_a[exports.ComponentSize.Large] = 'large',
|
|
6831
6920
|
_a[exports.ComponentSize.XSmall] = 'small',
|
|
6832
6921
|
_a);
|
|
6833
|
-
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$
|
|
6922
|
+
var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
6834
6923
|
var wide = _a.wide;
|
|
6835
6924
|
return (wide ? '100%' : 'fit-content');
|
|
6836
6925
|
}, function (_a) {
|
|
@@ -6852,13 +6941,36 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$1b || (templateObj
|
|
|
6852
6941
|
var theme = _a.theme;
|
|
6853
6942
|
return theme.colors.text.disabled;
|
|
6854
6943
|
});
|
|
6855
|
-
var StyledIcon = newStyled(Icon$1)(templateObject_2$
|
|
6856
|
-
var
|
|
6944
|
+
var StyledIcon = newStyled(Icon$1)(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
6945
|
+
var marginLeft = _a.marginLeft, marginRight = _a.marginRight;
|
|
6946
|
+
return "\n margin-left: ".concat(marginLeft !== null && marginLeft !== void 0 ? marginLeft : '10px', ";\n margin-right: ").concat(marginRight !== null && marginRight !== void 0 ? marginRight : '10px', ";\n ");
|
|
6947
|
+
});
|
|
6948
|
+
var templateObject_1$1c, templateObject_2$S;
|
|
6857
6949
|
|
|
6858
6950
|
var BaseCTA = function (_a) {
|
|
6859
|
-
var
|
|
6951
|
+
var _b, _c, _d;
|
|
6952
|
+
var text = _a.text, _e = _a.wide, wide = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? exports.ComponentSize.Medium : _f, iconName = _a.iconName, icon = _a.icon, props = __rest(_a, ["text", "wide", "size", "iconName", "icon"]);
|
|
6860
6953
|
var theme = useTheme();
|
|
6861
|
-
|
|
6954
|
+
var currentIconName, iconPos = 'right', iconMargin = '10px', iconSize = '24px';
|
|
6955
|
+
if (icon) {
|
|
6956
|
+
if (!icon.name) {
|
|
6957
|
+
throw new Error('name must be provided when using the icon prop');
|
|
6958
|
+
}
|
|
6959
|
+
currentIconName = icon.name;
|
|
6960
|
+
iconPos = (_b = icon.position) !== null && _b !== void 0 ? _b : iconPos;
|
|
6961
|
+
iconMargin = (_c = icon.margin) !== null && _c !== void 0 ? _c : iconMargin;
|
|
6962
|
+
iconSize = (_d = icon.size) !== null && _d !== void 0 ? _d : iconSize;
|
|
6963
|
+
}
|
|
6964
|
+
else {
|
|
6965
|
+
currentIconName = iconName;
|
|
6966
|
+
}
|
|
6967
|
+
var commonIconProps = {
|
|
6968
|
+
fill: theme.colors.shades.white.color,
|
|
6969
|
+
name: currentIconName,
|
|
6970
|
+
width: iconSize,
|
|
6971
|
+
height: iconSize,
|
|
6972
|
+
};
|
|
6973
|
+
return (jsxRuntime.jsxs(StyledBaseButton, __assign$1({}, props, { wide: wide, size: size }, { children: [currentIconName && iconPos === 'left' && (jsxRuntime.jsx(StyledIcon, __assign$1({}, commonIconProps, { marginRight: iconMargin }), void 0)), text, currentIconName && iconPos === 'right' && (jsxRuntime.jsx(StyledIcon, __assign$1({}, commonIconProps, { marginLeft: iconMargin }), void 0))] }), void 0));
|
|
6862
6974
|
};
|
|
6863
6975
|
|
|
6864
6976
|
var ButtonPrimary = function (_a) {
|
|
@@ -6920,8 +7032,8 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6920
7032
|
} }), void 0));
|
|
6921
7033
|
};
|
|
6922
7034
|
|
|
6923
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
6924
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
7035
|
+
var Container$P = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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; });
|
|
7036
|
+
var IconContainer$4 = newStyled.div(templateObject_2$R || (templateObject_2$R = __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"])));
|
|
6925
7037
|
var Text$3 = newStyled.p(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6926
7038
|
var Details = newStyled.span(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
6927
7039
|
var Note = function (_a) {
|
|
@@ -6929,13 +7041,13 @@ var Note = function (_a) {
|
|
|
6929
7041
|
var theme = useTheme();
|
|
6930
7042
|
return (jsxRuntime.jsxs(Container$P, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6931
7043
|
};
|
|
6932
|
-
var templateObject_1$
|
|
7044
|
+
var templateObject_1$1b, templateObject_2$R, templateObject_3$F, templateObject_4$u;
|
|
6933
7045
|
|
|
6934
|
-
var Title$2 = newStyled.h1(templateObject_1$
|
|
7046
|
+
var Title$2 = newStyled.h1(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
6935
7047
|
var theme = _a.theme;
|
|
6936
7048
|
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 ");
|
|
6937
7049
|
});
|
|
6938
|
-
var Line = newStyled.div(templateObject_2$
|
|
7050
|
+
var Line = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __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; });
|
|
6939
7051
|
var Row$1 = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
6940
7052
|
flexDirection: ['column', 'row'],
|
|
6941
7053
|
}));
|
|
@@ -6974,16 +7086,16 @@ var DeliveryDetails = function (_a) {
|
|
|
6974
7086
|
var theme = useTheme();
|
|
6975
7087
|
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));
|
|
6976
7088
|
};
|
|
6977
|
-
var templateObject_1$
|
|
7089
|
+
var templateObject_1$1a, templateObject_2$Q, templateObject_3$E, templateObject_4$t, templateObject_5$l, templateObject_6$i, templateObject_7$c, templateObject_8$b;
|
|
6978
7090
|
|
|
6979
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
7091
|
+
var Backdrop = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
6980
7092
|
var top = _a.top;
|
|
6981
7093
|
return top;
|
|
6982
7094
|
}, function (_a) {
|
|
6983
7095
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
6984
7096
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
6985
7097
|
});
|
|
6986
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
7098
|
+
var Sidebar = newStyled.div(templateObject_2$P || (templateObject_2$P = __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) {
|
|
6987
7099
|
var height = _a.height;
|
|
6988
7100
|
return height;
|
|
6989
7101
|
}, function (_a) {
|
|
@@ -7030,20 +7142,20 @@ var Drawer = function (_a) {
|
|
|
7030
7142
|
}, [isOpen, onClose, onOpen]);
|
|
7031
7143
|
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;
|
|
7032
7144
|
};
|
|
7033
|
-
var templateObject_1$
|
|
7145
|
+
var templateObject_1$19, templateObject_2$P;
|
|
7034
7146
|
|
|
7035
7147
|
var TooltipArrow = function (_a) {
|
|
7036
7148
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
7037
7149
|
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));
|
|
7038
7150
|
};
|
|
7039
7151
|
|
|
7040
|
-
var List = newStyled.ul(templateObject_1$
|
|
7041
|
-
var Item$2 = newStyled.li(templateObject_2$
|
|
7152
|
+
var List = newStyled.ul(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
7153
|
+
var Item$2 = newStyled.li(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
7042
7154
|
var DropdownWrapper = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
7043
7155
|
var ArrowContainer$1 = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
7044
7156
|
var StyledDropdown = newStyled.ul(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
7045
7157
|
var DropdownItem = newStyled.li(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
7046
|
-
var templateObject_1$
|
|
7158
|
+
var templateObject_1$18, templateObject_2$O, templateObject_3$D, templateObject_4$s, templateObject_5$k, templateObject_6$h;
|
|
7047
7159
|
|
|
7048
7160
|
var DropdownListIcons = function (_a) {
|
|
7049
7161
|
var items = _a.items;
|
|
@@ -7056,13 +7168,13 @@ var Dropdown = function (_a) {
|
|
|
7056
7168
|
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));
|
|
7057
7169
|
};
|
|
7058
7170
|
|
|
7059
|
-
var DropdownContainer = newStyled.div(templateObject_1$
|
|
7060
|
-
var DropdownLabel = newStyled.div(templateObject_2$
|
|
7171
|
+
var DropdownContainer = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
7172
|
+
var DropdownLabel = newStyled.div(templateObject_2$N || (templateObject_2$N = __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"])));
|
|
7061
7173
|
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
7062
7174
|
var DetailLabel = newStyled.span(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
7063
7175
|
var DropdownOptions = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
7064
7176
|
var DropdownOption = newStyled.div(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
7065
|
-
var templateObject_1$
|
|
7177
|
+
var templateObject_1$17, templateObject_2$N, templateObject_3$C, templateObject_4$r, templateObject_5$j, templateObject_6$g;
|
|
7066
7178
|
|
|
7067
7179
|
var SizeDropdown = function (_a) {
|
|
7068
7180
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -7085,8 +7197,8 @@ var SizeDropdown = function (_a) {
|
|
|
7085
7197
|
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));
|
|
7086
7198
|
};
|
|
7087
7199
|
|
|
7088
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
7089
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
7200
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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; });
|
|
7201
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$M || (templateObject_2$M = __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; });
|
|
7090
7202
|
var DialogDropdownListItem = newStyled.li(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
7091
7203
|
var DialogDropdownLink = newStyled.a(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
7092
7204
|
var DropdownDialog = function (_a) {
|
|
@@ -7097,7 +7209,7 @@ var DropdownDialog = function (_a) {
|
|
|
7097
7209
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
7098
7210
|
}) }), void 0) }), void 0));
|
|
7099
7211
|
};
|
|
7100
|
-
var templateObject_1$
|
|
7212
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$B, templateObject_4$q;
|
|
7101
7213
|
|
|
7102
7214
|
function FilteringDropdown(_a) {
|
|
7103
7215
|
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;
|
|
@@ -7130,8 +7242,8 @@ function FilteringDropdown(_a) {
|
|
|
7130
7242
|
}) }, void 0)] }), void 0));
|
|
7131
7243
|
}
|
|
7132
7244
|
|
|
7133
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
7134
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
7245
|
+
var Title$1 = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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; });
|
|
7246
|
+
var H3 = newStyled.h3(templateObject_2$L || (templateObject_2$L = __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; });
|
|
7135
7247
|
var ArrowContainer = newStyled.div(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
7136
7248
|
var Container$O = newStyled.div(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
7137
7249
|
var Accordion = function (_a) {
|
|
@@ -7140,10 +7252,10 @@ var Accordion = function (_a) {
|
|
|
7140
7252
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
7141
7253
|
return (jsxRuntime.jsxs(Container$O, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
7142
7254
|
};
|
|
7143
|
-
var templateObject_1$
|
|
7255
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$A, templateObject_4$p;
|
|
7144
7256
|
|
|
7145
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
7146
|
-
var Header$1 = newStyled.div(templateObject_2$
|
|
7257
|
+
var SectionContent = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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; });
|
|
7258
|
+
var Header$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __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"])));
|
|
7147
7259
|
var MobileHeader = newStyled.div(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
7148
7260
|
var MobileIconsContainer = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
7149
7261
|
var H4 = newStyled.h4(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
@@ -7152,7 +7264,7 @@ var OptionContainer = newStyled.div(templateObject_7$b || (templateObject_7$b =
|
|
|
7152
7264
|
var ClearAll = newStyled.span(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
7153
7265
|
var MobileFooter = newStyled.div(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7154
7266
|
var MobileClearContainer = newStyled.div(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
7155
|
-
var templateObject_1$
|
|
7267
|
+
var templateObject_1$14, templateObject_2$K, templateObject_3$z, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$b, templateObject_8$a, templateObject_9$6, templateObject_10$4;
|
|
7156
7268
|
|
|
7157
7269
|
var getStylesBySize$7 = function (size, theme) {
|
|
7158
7270
|
switch (size) {
|
|
@@ -7217,8 +7329,8 @@ var SelectorSecondary = function (_a) {
|
|
|
7217
7329
|
} }), id: id }, void 0));
|
|
7218
7330
|
};
|
|
7219
7331
|
|
|
7220
|
-
var UL = newStyled.ul(templateObject_1$
|
|
7221
|
-
var LI = newStyled.li(templateObject_2$
|
|
7332
|
+
var UL = newStyled.ul(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
7333
|
+
var LI = newStyled.li(templateObject_2$J || (templateObject_2$J = __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; });
|
|
7222
7334
|
var CloseIconContainer = newStyled.div(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
7223
7335
|
var Tags = function (_a) {
|
|
7224
7336
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
@@ -7227,7 +7339,7 @@ var Tags = function (_a) {
|
|
|
7227
7339
|
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));
|
|
7228
7340
|
}) }), void 0));
|
|
7229
7341
|
};
|
|
7230
|
-
var templateObject_1$
|
|
7342
|
+
var templateObject_1$13, templateObject_2$J, templateObject_3$y;
|
|
7231
7343
|
|
|
7232
7344
|
var Filters = function (_a) {
|
|
7233
7345
|
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;
|
|
@@ -7363,8 +7475,8 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7363
7475
|
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));
|
|
7364
7476
|
};
|
|
7365
7477
|
|
|
7366
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7367
|
-
var Container$N = newStyled.div(templateObject_2$
|
|
7478
|
+
var Wrapper$4 = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
7479
|
+
var Container$N = newStyled.div(templateObject_2$I || (templateObject_2$I = __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"])));
|
|
7368
7480
|
var FitGuarantee = function (_a) {
|
|
7369
7481
|
var _b;
|
|
7370
7482
|
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;
|
|
@@ -7382,10 +7494,10 @@ var FitGuarantee = function (_a) {
|
|
|
7382
7494
|
fontWeight: theme.component.text.fitGuarantee.titleFontWeight,
|
|
7383
7495
|
} }, { children: title }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { fontWeight: theme.component.text.fitGuarantee.fontWeight } }, { children: description }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7384
7496
|
};
|
|
7385
|
-
var templateObject_1$
|
|
7497
|
+
var templateObject_1$12, templateObject_2$I;
|
|
7386
7498
|
|
|
7387
|
-
var Container$M = newStyled.div(templateObject_1$
|
|
7388
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
7499
|
+
var Container$M = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
7500
|
+
var P$2 = newStyled.p(templateObject_2$H || (templateObject_2$H = __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; });
|
|
7389
7501
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7390
7502
|
border: 'none',
|
|
7391
7503
|
background: 'transparent',
|
|
@@ -7400,7 +7512,7 @@ var FitPredictor = function (_a) {
|
|
|
7400
7512
|
var theme = useTheme();
|
|
7401
7513
|
return (jsxs(Container$M, __assign$1({ theme: theme }, { children: [jsx(Container$M, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles$1(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
7402
7514
|
};
|
|
7403
|
-
var templateObject_1$
|
|
7515
|
+
var templateObject_1$11, templateObject_2$H;
|
|
7404
7516
|
|
|
7405
7517
|
var Button$7 = newStyled.button(function () { return ({
|
|
7406
7518
|
background: 'transparent',
|
|
@@ -11644,14 +11756,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
11644
11756
|
return Slider;
|
|
11645
11757
|
}(React__default["default"].Component);
|
|
11646
11758
|
|
|
11647
|
-
var StyledSlider = newStyled(Slider)(templateObject_1
|
|
11759
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
11648
11760
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11649
11761
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11650
11762
|
}, function (_a) {
|
|
11651
11763
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
11652
11764
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
11653
11765
|
});
|
|
11654
|
-
var templateObject_1
|
|
11766
|
+
var templateObject_1$10;
|
|
11655
11767
|
|
|
11656
11768
|
var getStylesBySize$6 = function (size) {
|
|
11657
11769
|
// rem units
|
|
@@ -11710,7 +11822,7 @@ var SliderNavigation = function (_a) {
|
|
|
11710
11822
|
} }, { 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));
|
|
11711
11823
|
};
|
|
11712
11824
|
|
|
11713
|
-
var Image$1 = newStyled.img(templateObject_1
|
|
11825
|
+
var Image$1 = newStyled.img(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n object-fit: cover;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
11714
11826
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11715
11827
|
return borderRadiusVariant &&
|
|
11716
11828
|
"\nborder-radius: 20px;\n";
|
|
@@ -11725,10 +11837,10 @@ var ImageSmallPreview = function (_a) {
|
|
|
11725
11837
|
var theme = useTheme();
|
|
11726
11838
|
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));
|
|
11727
11839
|
};
|
|
11728
|
-
var templateObject_1
|
|
11840
|
+
var templateObject_1$$;
|
|
11729
11841
|
|
|
11730
|
-
var horizontalStyles = css(templateObject_1$
|
|
11731
|
-
var verticalStyles = css(templateObject_2$
|
|
11842
|
+
var horizontalStyles = css(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
11843
|
+
var verticalStyles = css(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
11732
11844
|
var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n\n ", "\n"])), function (_a) {
|
|
11733
11845
|
var position = _a.position;
|
|
11734
11846
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
@@ -11758,7 +11870,7 @@ var ImagePreviewList = function (_a) {
|
|
|
11758
11870
|
arrowPadding: 1.625,
|
|
11759
11871
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11760
11872
|
};
|
|
11761
|
-
var templateObject_1$
|
|
11873
|
+
var templateObject_1$_, templateObject_2$G, templateObject_3$x, templateObject_4$n, templateObject_5$h, templateObject_6$e, templateObject_7$a, templateObject_8$9;
|
|
11762
11874
|
|
|
11763
11875
|
var propTypes = {exports: {}};
|
|
11764
11876
|
|
|
@@ -13351,21 +13463,21 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
13351
13463
|
afterZoomOut: PropTypes.func
|
|
13352
13464
|
} : {};
|
|
13353
13465
|
|
|
13354
|
-
var ProgressContainer = newStyled.div(templateObject_1$
|
|
13355
|
-
var ProgressFiller = newStyled.div(templateObject_2$
|
|
13356
|
-
var templateObject_1$
|
|
13466
|
+
var ProgressContainer = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"], ["\n top: 20px;\n left: 10px;\n border-radius: 10px;\n position: absolute;\n height: 5px;\n width: 95%;\n background: rgba(0, 0, 0, 0.3);\n transition: opacity 0.3s ease-in-out;\n opacity: ", ";\n"])), function (props) { return (props.hide ? 0 : 1); });
|
|
13467
|
+
var ProgressFiller = newStyled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"], ["\n height: 100%;\n width: ", "%;\n background-color: white;\n border-radius: 10px;\n transition: width 0.3s ease-in-out;\n"])), function (props) { return props.progress * 100; });
|
|
13468
|
+
var templateObject_1$Z, templateObject_2$F;
|
|
13357
13469
|
|
|
13358
13470
|
var ProgressBar$1 = function (_a) {
|
|
13359
13471
|
var progress = _a.progress, hide = _a.hide;
|
|
13360
13472
|
return (jsxRuntime.jsx(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsxRuntime.jsx(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13361
13473
|
};
|
|
13362
13474
|
|
|
13363
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
13364
|
-
var HTMLVideo = newStyled.video(templateObject_2$
|
|
13475
|
+
var Container$K = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n max-width: 530px;\n position: relative;\n"], ["\n max-width: 530px;\n position: relative;\n"])));
|
|
13476
|
+
var HTMLVideo = newStyled.video(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"], ["\n width: 100%;\n max-width: 530px;\n height: ", ";\n"])), function (props) { return props.height; });
|
|
13365
13477
|
var PlayIcon = newStyled(Icon.PDP.PlayVideo)(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"], ["\n width: 120px;\n height: 120px;\n\n @media (max-width: 768px) {\n width: 80px;\n height: 80px;\n }\n"])));
|
|
13366
13478
|
var PlayContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13367
13479
|
var PauseContainer = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 100%;\n position: absolute;\n"])));
|
|
13368
|
-
var templateObject_1$
|
|
13480
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$w, templateObject_4$m, templateObject_5$g;
|
|
13369
13481
|
|
|
13370
13482
|
var Video$1 = function (_a) {
|
|
13371
13483
|
var _b, _c, _d, _e;
|
|
@@ -13407,12 +13519,12 @@ var Video$1 = function (_a) {
|
|
|
13407
13519
|
return (jsxRuntime.jsxs(Container$K, __assign$1({ className: className }, { children: [!isLoading && jsxRuntime.jsx(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsxRuntime.jsx(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsxRuntime.jsx(PlayIcon, {}, void 0) }), void 0)) : (jsxRuntime.jsx(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxRuntime.jsxs(HTMLVideo, __assign$1({}, rest, { "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); }, height: height || 'auto' }, { children: [jsxRuntime.jsx("track", { kind: "captions" }, void 0), jsxRuntime.jsx("source", { src: source }, void 0)] }), void 0)] }), void 0));
|
|
13408
13520
|
};
|
|
13409
13521
|
|
|
13410
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
13522
|
+
var Container$J = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n z-index: 0;\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
13411
13523
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13412
13524
|
return borderRadiusVariant &&
|
|
13413
13525
|
"\n border-radius: 40px;\n ";
|
|
13414
13526
|
});
|
|
13415
|
-
var TopTagContainer$4 = newStyled.div(templateObject_2$
|
|
13527
|
+
var TopTagContainer$4 = newStyled.div(templateObject_2$D || (templateObject_2$D = __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'); });
|
|
13416
13528
|
var BottomTagContainer$4 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13417
13529
|
var TopRightTagContainer$1 = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n white-space: pre-wrap;\n"])));
|
|
13418
13530
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
@@ -13426,9 +13538,9 @@ var ImageProductSlide$1 = function (_a) {
|
|
|
13426
13538
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13427
13539
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0)) : (jsxRuntime.jsx(Image$3, { width: position == 'horizontal' ? '360px' : '530px', height: position == 'horizontal' ? '480px' : '720px', src: source, alt: content.alt }, void 0)), jsxRuntime.jsx(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$4, { children: bottomTag }, void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer$1, { children: topRightTag }, void 0)] }, void 0)), isVideo && jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13428
13540
|
};
|
|
13429
|
-
var templateObject_1$
|
|
13541
|
+
var templateObject_1$X, templateObject_2$D, templateObject_3$v, templateObject_4$l, templateObject_5$f;
|
|
13430
13542
|
|
|
13431
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
13543
|
+
var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: minmax(6rem, max-content) 1fr;\n grid-column-gap: 20px;\n max-height: 50rem;\n width: fit-content;\n"])));
|
|
13432
13544
|
var ProductGallery = function (_a) {
|
|
13433
13545
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e;
|
|
13434
13546
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13440,7 +13552,7 @@ var ProductGallery = function (_a) {
|
|
|
13440
13552
|
setSelectedImage(value);
|
|
13441
13553
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
|
|
13442
13554
|
};
|
|
13443
|
-
var templateObject_1$
|
|
13555
|
+
var templateObject_1$W;
|
|
13444
13556
|
|
|
13445
13557
|
var getStylesBySize$5 = function (size) {
|
|
13446
13558
|
switch (size) {
|
|
@@ -13461,7 +13573,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13461
13573
|
};
|
|
13462
13574
|
}
|
|
13463
13575
|
};
|
|
13464
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
13576
|
+
var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
13465
13577
|
var backgroundColor = _a.backgroundColor;
|
|
13466
13578
|
return backgroundColor;
|
|
13467
13579
|
}, function (_a) {
|
|
@@ -13491,18 +13603,18 @@ var IconButton = function (_a) {
|
|
|
13491
13603
|
var theme = useTheme();
|
|
13492
13604
|
return (jsxRuntime.jsx(Container$H, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
13493
13605
|
};
|
|
13494
|
-
var templateObject_1$
|
|
13606
|
+
var templateObject_1$V;
|
|
13495
13607
|
|
|
13496
|
-
var StyledButton$
|
|
13608
|
+
var StyledButton$2 = newStyled(BaseButton)(templateObject_1$U || (templateObject_1$U = __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; });
|
|
13497
13609
|
var AmazonButton = function (_a) {
|
|
13498
13610
|
var onClick = _a.onClick;
|
|
13499
|
-
return (jsxRuntime.jsx(StyledButton$
|
|
13611
|
+
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
13500
13612
|
};
|
|
13501
13613
|
var PaypalButton = function (_a) {
|
|
13502
13614
|
var onClick = _a.onClick;
|
|
13503
|
-
return (jsxRuntime.jsx(StyledButton$
|
|
13615
|
+
return (jsxRuntime.jsx(StyledButton$2, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13504
13616
|
};
|
|
13505
|
-
var templateObject_1$
|
|
13617
|
+
var templateObject_1$U;
|
|
13506
13618
|
|
|
13507
13619
|
var Container$G = newStyled.div(function (props) { return ({
|
|
13508
13620
|
height: 'auto',
|
|
@@ -13557,8 +13669,8 @@ var IconsWithTitle = function (_a) {
|
|
|
13557
13669
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$G, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsxRuntime.jsx(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13558
13670
|
};
|
|
13559
13671
|
|
|
13560
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
13561
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
13672
|
+
var Container$F = newStyled.div(templateObject_1$T || (templateObject_1$T = __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'); });
|
|
13673
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$C || (templateObject_2$C = __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'); });
|
|
13562
13674
|
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13563
13675
|
var titlePosition = _a.titlePosition;
|
|
13564
13676
|
return titlePosition == 'center' &&
|
|
@@ -13569,13 +13681,13 @@ var ImageCardWithDescription = function (_a) {
|
|
|
13569
13681
|
var isMobile = useWindowDimensions().isMobile;
|
|
13570
13682
|
return (jsxRuntime.jsxs(Container$F, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13571
13683
|
};
|
|
13572
|
-
var templateObject_1$
|
|
13684
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$u;
|
|
13573
13685
|
|
|
13574
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
13686
|
+
var Label$2 = newStyled.span(templateObject_1$S || (templateObject_1$S = __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) {
|
|
13575
13687
|
var color = _a.color;
|
|
13576
13688
|
return color;
|
|
13577
13689
|
});
|
|
13578
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
13690
|
+
var MandatoryIcon = newStyled.span(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
13579
13691
|
var color = _a.color;
|
|
13580
13692
|
return color;
|
|
13581
13693
|
});
|
|
@@ -13584,7 +13696,7 @@ var InputLabel = function (_a) {
|
|
|
13584
13696
|
var theme = useTheme();
|
|
13585
13697
|
return (jsxRuntime.jsxs(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13586
13698
|
};
|
|
13587
|
-
var templateObject_1$
|
|
13699
|
+
var templateObject_1$S, templateObject_2$B;
|
|
13588
13700
|
|
|
13589
13701
|
var containerByStatus = function (theme, status) {
|
|
13590
13702
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -13593,11 +13705,11 @@ var containerByStatus = function (theme, status) {
|
|
|
13593
13705
|
return theme.colors.semantic.urgent.color;
|
|
13594
13706
|
return '';
|
|
13595
13707
|
};
|
|
13596
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
13708
|
+
var Container$E = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
13597
13709
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13598
13710
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13599
13711
|
});
|
|
13600
|
-
var StyledLabel$2 = newStyled.label(templateObject_2$
|
|
13712
|
+
var StyledLabel$2 = newStyled.label(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
13601
13713
|
var StyledInput = newStyled.input(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
13602
13714
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
13603
13715
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
@@ -13671,7 +13783,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$e || (templateObject_5
|
|
|
13671
13783
|
return theme.component.input.lineHeight;
|
|
13672
13784
|
});
|
|
13673
13785
|
var ClearInput = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
13674
|
-
var templateObject_1$
|
|
13786
|
+
var templateObject_1$R, templateObject_2$A, templateObject_3$t, templateObject_4$k, templateObject_5$e, templateObject_6$d;
|
|
13675
13787
|
|
|
13676
13788
|
var BaseInput = function (_a) {
|
|
13677
13789
|
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"]);
|
|
@@ -13715,11 +13827,11 @@ var Button$5 = function (_a) {
|
|
|
13715
13827
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13716
13828
|
};
|
|
13717
13829
|
|
|
13718
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
13830
|
+
var Container$D = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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) {
|
|
13719
13831
|
var theme = _a.theme;
|
|
13720
13832
|
return theme.component.inputCustom.input.borderRadius;
|
|
13721
13833
|
});
|
|
13722
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
13834
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$z || (templateObject_2$z = __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) {
|
|
13723
13835
|
var theme = _a.theme, defaultRounded = _a.defaultRounded;
|
|
13724
13836
|
return defaultRounded
|
|
13725
13837
|
? theme.component.inputCustom.button.borderRadius
|
|
@@ -13736,21 +13848,21 @@ var Custom = function (_a) {
|
|
|
13736
13848
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13737
13849
|
return (jsxRuntime.jsx(Container$D, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsxRuntime.jsx(Button$5, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13738
13850
|
};
|
|
13739
|
-
var templateObject_1$
|
|
13851
|
+
var templateObject_1$Q, templateObject_2$z;
|
|
13740
13852
|
|
|
13741
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
13853
|
+
var SuccessContainer = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
13742
13854
|
var size = _a.size;
|
|
13743
13855
|
return (size === 'small' ? '36px' : '');
|
|
13744
13856
|
});
|
|
13745
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
13857
|
+
var SuccessMessage = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
13746
13858
|
var SuccessText = newStyled.span(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
13747
13859
|
var Success = function (_a) {
|
|
13748
13860
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
13749
13861
|
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));
|
|
13750
13862
|
};
|
|
13751
|
-
var templateObject_1$
|
|
13863
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$s;
|
|
13752
13864
|
|
|
13753
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
13865
|
+
var ButtonContainer = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
13754
13866
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
13755
13867
|
return status === exports.InputValidationType.Empty &&
|
|
13756
13868
|
type === 'primary' &&
|
|
@@ -13767,16 +13879,16 @@ var BasePlusButton = function (_a) {
|
|
|
13767
13879
|
}
|
|
13768
13880
|
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));
|
|
13769
13881
|
};
|
|
13770
|
-
var templateObject_1$
|
|
13882
|
+
var templateObject_1$O;
|
|
13771
13883
|
|
|
13772
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
13773
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
13884
|
+
var Container$C = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
13885
|
+
var IconContainer$2 = newStyled.div(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
13774
13886
|
var BasePlusIcon = function (_a) {
|
|
13775
13887
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13776
13888
|
var theme = useTheme();
|
|
13777
13889
|
return (jsxRuntime.jsx(Container$C, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13778
13890
|
};
|
|
13779
|
-
var templateObject_1$
|
|
13891
|
+
var templateObject_1$N, templateObject_2$x;
|
|
13780
13892
|
|
|
13781
13893
|
var Input$3 = {
|
|
13782
13894
|
Simple: BaseInput,
|
|
@@ -13821,7 +13933,7 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13821
13933
|
}, [preventTouch, ref, touchStart]);
|
|
13822
13934
|
}
|
|
13823
13935
|
|
|
13824
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
13936
|
+
var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
13825
13937
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13826
13938
|
return borderRadiusVariant &&
|
|
13827
13939
|
"\n border-radius: 40px;\n ";
|
|
@@ -13830,7 +13942,7 @@ var Container$B = newStyled.div(templateObject_1$L || (templateObject_1$L = __ma
|
|
|
13830
13942
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
13831
13943
|
});
|
|
13832
13944
|
// max-height: 31.875rem;
|
|
13833
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
13945
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$w || (templateObject_2$w = __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'); });
|
|
13834
13946
|
var TopRightTagContainer = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n"])));
|
|
13835
13947
|
var BottomTagContainer$3 = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13836
13948
|
var NavButtonContainer$2 = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
@@ -13892,14 +14004,14 @@ var ImageProductSlide = function (_a) {
|
|
|
13892
14004
|
return (jsxRuntime.jsx("div", { children: !isVideo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: { alt: content.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0), !!topRightTag && jsxRuntime.jsx(TopRightTagContainer, { children: topRightTag }, void 0)] }, void 0)) : (jsxRuntime.jsx(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0)) }, content.key));
|
|
13893
14005
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13894
14006
|
};
|
|
13895
|
-
var templateObject_1$
|
|
14007
|
+
var templateObject_1$M, templateObject_2$w, templateObject_3$r, templateObject_4$j, templateObject_5$d, templateObject_6$c;
|
|
13896
14008
|
|
|
13897
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
14009
|
+
var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
13898
14010
|
var ProductGalleryMobile = function (_a) {
|
|
13899
14011
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13900
14012
|
return (jsxRuntime.jsx(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13901
14013
|
};
|
|
13902
|
-
var templateObject_1$
|
|
14014
|
+
var templateObject_1$L;
|
|
13903
14015
|
|
|
13904
14016
|
function _extends() {
|
|
13905
14017
|
_extends = Object.assign || function (target) {
|
|
@@ -14166,14 +14278,14 @@ function useSwipeable(options) {
|
|
|
14166
14278
|
return handlers;
|
|
14167
14279
|
}
|
|
14168
14280
|
|
|
14169
|
-
var Button$3 = newStyled.button(templateObject_1$
|
|
14281
|
+
var Button$3 = newStyled.button(templateObject_1$K || (templateObject_1$K = __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"])));
|
|
14170
14282
|
var ArrowButton = function (_a) {
|
|
14171
14283
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
14172
14284
|
return (jsxRuntime.jsx(Button$3, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
14173
14285
|
};
|
|
14174
|
-
var templateObject_1$
|
|
14286
|
+
var templateObject_1$K;
|
|
14175
14287
|
|
|
14176
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
14288
|
+
var Container$z = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
14177
14289
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
14178
14290
|
var SlideDots = function (_a) {
|
|
14179
14291
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -14182,10 +14294,10 @@ var SlideDots = function (_a) {
|
|
|
14182
14294
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
14183
14295
|
: 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));
|
|
14184
14296
|
};
|
|
14185
|
-
var templateObject_1$
|
|
14297
|
+
var templateObject_1$J;
|
|
14186
14298
|
|
|
14187
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
14188
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
14299
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
14300
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
14189
14301
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
14190
14302
|
var SlideNavigation = function (_a) {
|
|
14191
14303
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
@@ -14198,23 +14310,23 @@ var SlideNavigation = function (_a) {
|
|
|
14198
14310
|
onNavigate(selectedIndex + 1);
|
|
14199
14311
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
14200
14312
|
};
|
|
14201
|
-
var templateObject_1$
|
|
14313
|
+
var templateObject_1$I, templateObject_2$v, templateObject_3$q;
|
|
14202
14314
|
|
|
14203
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
14315
|
+
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
14204
14316
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14205
14317
|
return borderRadiusVariant &&
|
|
14206
14318
|
"\n border-radius: 40px;\n ";
|
|
14207
14319
|
});
|
|
14208
|
-
var TopTagContainer$2 = newStyled.div(templateObject_2$
|
|
14320
|
+
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'); });
|
|
14209
14321
|
var BottomTagContainer$2 = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14210
14322
|
var ImageProductSlideV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14211
14323
|
var _b, _c;
|
|
14212
14324
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14213
14325
|
return (jsxRuntime.jsxs(Container$y, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxRuntime.jsx("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14214
14326
|
});
|
|
14215
|
-
var templateObject_1$
|
|
14327
|
+
var templateObject_1$H, templateObject_2$u, templateObject_3$p;
|
|
14216
14328
|
|
|
14217
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
14329
|
+
var Container$x = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
14218
14330
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14219
14331
|
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;
|
|
14220
14332
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14238,9 +14350,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14238
14350
|
}, [index, images]);
|
|
14239
14351
|
return (jsxRuntime.jsxs(Container$x, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsxRuntime.jsx(ImageProductSlideV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14240
14352
|
};
|
|
14241
|
-
var templateObject_1$
|
|
14353
|
+
var templateObject_1$G;
|
|
14242
14354
|
|
|
14243
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
14355
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
14244
14356
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14245
14357
|
return borderRadiusVariant &&
|
|
14246
14358
|
"\n border-radius: 40px;\n ";
|
|
@@ -14249,7 +14361,7 @@ var Container$w = newStyled.div(templateObject_1$E || (templateObject_1$E = __ma
|
|
|
14249
14361
|
return theme.component.slideNavigation.slideDots.selectedDotColor;
|
|
14250
14362
|
});
|
|
14251
14363
|
// max-height: 31.875rem;
|
|
14252
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
14364
|
+
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'); });
|
|
14253
14365
|
var BottomTagContainer$1 = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
14254
14366
|
var VideoOverlay$1 = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14255
14367
|
var Video = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
@@ -14314,14 +14426,14 @@ var ImageProductSlideV3 = function (_a) {
|
|
|
14314
14426
|
} }, 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));
|
|
14315
14427
|
}) }), void 0) }), void 0)] }, void 0));
|
|
14316
14428
|
};
|
|
14317
|
-
var templateObject_1$
|
|
14429
|
+
var templateObject_1$F, templateObject_2$t, templateObject_3$o, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$9, templateObject_8$8, templateObject_9$5;
|
|
14318
14430
|
|
|
14319
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
14431
|
+
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"])));
|
|
14320
14432
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14321
14433
|
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;
|
|
14322
14434
|
return (jsxRuntime.jsx(Container$v, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsxRuntime.jsx(ImageProductSlideV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14323
14435
|
};
|
|
14324
|
-
var templateObject_1$
|
|
14436
|
+
var templateObject_1$E;
|
|
14325
14437
|
|
|
14326
14438
|
var __defProp$1 = Object.defineProperty;
|
|
14327
14439
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14454,7 +14566,7 @@ var Portal = function (_a) {
|
|
|
14454
14566
|
var visibleStyle = function (_a) {
|
|
14455
14567
|
var opened = _a.opened;
|
|
14456
14568
|
return opened
|
|
14457
|
-
? css(templateObject_1$
|
|
14569
|
+
? css(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14458
14570
|
};
|
|
14459
14571
|
var transformStyle = function (_a) {
|
|
14460
14572
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
@@ -14502,9 +14614,9 @@ var useModal = function (id) {
|
|
|
14502
14614
|
close: close,
|
|
14503
14615
|
}); }, [close, open, opened]);
|
|
14504
14616
|
};
|
|
14505
|
-
var templateObject_1$
|
|
14617
|
+
var templateObject_1$D, templateObject_2$s, templateObject_3$n, templateObject_4$h, templateObject_5$b, templateObject_6$a;
|
|
14506
14618
|
|
|
14507
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
14619
|
+
var Bar$1 = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
14508
14620
|
var height = _a.height;
|
|
14509
14621
|
return height || '0.5rem';
|
|
14510
14622
|
}, function (_a) {
|
|
@@ -14576,19 +14688,19 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14576
14688
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
14577
14689
|
return (jsxRuntime.jsxs(Container$t, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
14578
14690
|
};
|
|
14579
|
-
var templateObject_1$
|
|
14691
|
+
var templateObject_1$C;
|
|
14580
14692
|
|
|
14581
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
14693
|
+
var Container$s = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
14582
14694
|
var theme = _a.theme;
|
|
14583
14695
|
return theme.component.orderBar.backgroundColor;
|
|
14584
14696
|
});
|
|
14585
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
14697
|
+
var H1 = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
14586
14698
|
var OrderBar = function (_a) {
|
|
14587
14699
|
var message = _a.message, color = _a.color;
|
|
14588
14700
|
var theme = useTheme();
|
|
14589
14701
|
return (jsxRuntime.jsxs(Container$s, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
14590
14702
|
};
|
|
14591
|
-
var templateObject_1$
|
|
14703
|
+
var templateObject_1$B, templateObject_2$r;
|
|
14592
14704
|
|
|
14593
14705
|
var htmlReactParser = {exports: {}};
|
|
14594
14706
|
|
|
@@ -18369,8 +18481,8 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18369
18481
|
HTMLReactParser$1.attributesToProps;
|
|
18370
18482
|
HTMLReactParser$1.Element;
|
|
18371
18483
|
|
|
18372
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
18373
|
-
var Card = newStyled.div(templateObject_2$
|
|
18484
|
+
var Container$r = newStyled.div(templateObject_1$A || (templateObject_1$A = __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"])));
|
|
18485
|
+
var Card = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
18374
18486
|
var Tag$1 = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
18375
18487
|
var Label$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
18376
18488
|
var Check = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
@@ -18406,10 +18518,10 @@ var PackCard = function (_a) {
|
|
|
18406
18518
|
currency: currencyCode || 'USD',
|
|
18407
18519
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18408
18520
|
};
|
|
18409
|
-
var templateObject_1$
|
|
18521
|
+
var templateObject_1$A, templateObject_2$q, templateObject_3$m, templateObject_4$g, templateObject_5$a, templateObject_6$9, templateObject_7$8, templateObject_8$7;
|
|
18410
18522
|
|
|
18411
|
-
var Container$q = newStyled.div(templateObject_1$
|
|
18412
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
18523
|
+
var Container$q = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
18524
|
+
var IconContainer = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18413
18525
|
var PageNumbersContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
18414
18526
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
18415
18527
|
}));
|
|
@@ -18430,7 +18542,7 @@ var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __ma
|
|
|
18430
18542
|
var background = _a.background;
|
|
18431
18543
|
return background || 'unset';
|
|
18432
18544
|
});
|
|
18433
|
-
var templateObject_1$
|
|
18545
|
+
var templateObject_1$z, templateObject_2$p, templateObject_3$l, templateObject_4$f;
|
|
18434
18546
|
|
|
18435
18547
|
var Pagination = function (_a) {
|
|
18436
18548
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -18495,7 +18607,7 @@ var PaginatorBlog = function (_a) {
|
|
|
18495
18607
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
18496
18608
|
};
|
|
18497
18609
|
|
|
18498
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
18610
|
+
var Container$p = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
18499
18611
|
var width = _a.width;
|
|
18500
18612
|
return width;
|
|
18501
18613
|
}, function (_a) {
|
|
@@ -18513,11 +18625,11 @@ var PaymentMethod = function (_a) {
|
|
|
18513
18625
|
var theme = useTheme();
|
|
18514
18626
|
return (jsxRuntime.jsx(Container$p, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
18515
18627
|
};
|
|
18516
|
-
var templateObject_1$
|
|
18628
|
+
var templateObject_1$y;
|
|
18517
18629
|
|
|
18518
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
18630
|
+
var Container$o = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
18519
18631
|
var IMAGE_WIDTH = '63px';
|
|
18520
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18632
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
18521
18633
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
18522
18634
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
18523
18635
|
}), IMAGE_WIDTH);
|
|
@@ -18557,7 +18669,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
18557
18669
|
var theme = useTheme();
|
|
18558
18670
|
return (jsxRuntime.jsxs(Container$o, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
18559
18671
|
};
|
|
18560
|
-
var templateObject_1$
|
|
18672
|
+
var templateObject_1$x, templateObject_2$o, templateObject_3$k, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
18561
18673
|
|
|
18562
18674
|
var P$1 = newStyled.p(function (_a) {
|
|
18563
18675
|
var color = _a.color;
|
|
@@ -18571,7 +18683,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
18571
18683
|
margin: '0.938rem 4.188rem',
|
|
18572
18684
|
});
|
|
18573
18685
|
});
|
|
18574
|
-
var Bar = newStyled.div(templateObject_1$
|
|
18686
|
+
var Bar = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
18575
18687
|
var height = _a.height;
|
|
18576
18688
|
return height || '0.5rem';
|
|
18577
18689
|
}, function (_a) {
|
|
@@ -18616,10 +18728,10 @@ var ProgressBar = function (_a) {
|
|
|
18616
18728
|
var theme = useTheme();
|
|
18617
18729
|
return (jsxRuntime.jsxs(Container$n, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
18618
18730
|
};
|
|
18619
|
-
var templateObject_1$
|
|
18731
|
+
var templateObject_1$w;
|
|
18620
18732
|
|
|
18621
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
18622
|
-
var Item$1 = newStyled.span(templateObject_2$
|
|
18733
|
+
var Container$m = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderRadius; }, function (props) { return props.color; });
|
|
18734
|
+
var Item$1 = newStyled.span(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
18623
18735
|
var Number$1 = newStyled(Item$1)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
18624
18736
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
18625
18737
|
var QuantityPicker = function (_a) {
|
|
@@ -18646,7 +18758,7 @@ var QuantityPicker = function (_a) {
|
|
|
18646
18758
|
}, [value, clamp]);
|
|
18647
18759
|
return (jsxRuntime.jsxs(Container$m, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
18648
18760
|
};
|
|
18649
|
-
var templateObject_1$
|
|
18761
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$j, templateObject_4$d;
|
|
18650
18762
|
|
|
18651
18763
|
/* base styles & size variants */
|
|
18652
18764
|
var CustomRadioStyles$1 = {
|
|
@@ -18715,9 +18827,9 @@ var ContainerStyles$1 = {
|
|
|
18715
18827
|
},
|
|
18716
18828
|
};
|
|
18717
18829
|
|
|
18718
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
18830
|
+
var Wrapper$3 = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
18719
18831
|
var Container$l = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
18720
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
18832
|
+
var Input$2 = newStyled.input(templateObject_2$m || (templateObject_2$m = __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) {
|
|
18721
18833
|
var disabled = _a.disabled;
|
|
18722
18834
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18723
18835
|
});
|
|
@@ -18735,7 +18847,7 @@ var RadioPrimary = function (_a) {
|
|
|
18735
18847
|
};
|
|
18736
18848
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$l, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
18737
18849
|
};
|
|
18738
|
-
var templateObject_1$
|
|
18850
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$i;
|
|
18739
18851
|
|
|
18740
18852
|
var RadioGroupInput = function (_a) {
|
|
18741
18853
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18814,9 +18926,9 @@ var ContainerStyles = {
|
|
|
18814
18926
|
},
|
|
18815
18927
|
};
|
|
18816
18928
|
|
|
18817
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
18929
|
+
var Wrapper$2 = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
18818
18930
|
var Container$k = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
18819
|
-
var Input$1 = newStyled.input(templateObject_2$
|
|
18931
|
+
var Input$1 = newStyled.input(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
18820
18932
|
var disabled = _a.disabled;
|
|
18821
18933
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
18822
18934
|
});
|
|
@@ -18840,7 +18952,7 @@ var ClubRadioInput = function (_a) {
|
|
|
18840
18952
|
};
|
|
18841
18953
|
return (jsxRuntime.jsxs(Wrapper$2, { children: [jsxRuntime.jsxs(Container$k, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
18842
18954
|
};
|
|
18843
|
-
var templateObject_1$
|
|
18955
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$h;
|
|
18844
18956
|
|
|
18845
18957
|
var ClubRadioGroupInput = function (_a) {
|
|
18846
18958
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -18868,8 +18980,8 @@ function formatDate(date, format) {
|
|
|
18868
18980
|
}
|
|
18869
18981
|
}
|
|
18870
18982
|
|
|
18871
|
-
var Container$j = newStyled.div(templateObject_1$
|
|
18872
|
-
var Content$1 = newStyled.div(templateObject_2$
|
|
18983
|
+
var Container$j = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
18984
|
+
var Content$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
18873
18985
|
var StarsContent = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18874
18986
|
var ReviewContainer$1 = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
18875
18987
|
var DateText$1 = newStyled.span(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
@@ -18909,12 +19021,12 @@ var Review$1 = function (_a) {
|
|
|
18909
19021
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$j, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18910
19022
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [opened && (jsxRuntime.jsxs(ReviewerName$1, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18911
19023
|
};
|
|
18912
|
-
var templateObject_1$
|
|
19024
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$g, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$7, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18913
19025
|
|
|
18914
19026
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
18915
19027
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
18916
|
-
var Container$i = newStyled.div(templateObject_1$
|
|
18917
|
-
var Heading = newStyled.div(templateObject_2$
|
|
19028
|
+
var Container$i = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
19029
|
+
var Heading = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
18918
19030
|
var Content = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18919
19031
|
var ReviewContainer = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18920
19032
|
var DateText = newStyled.span(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -18965,10 +19077,10 @@ var Review = function (_a) {
|
|
|
18965
19077
|
: description,
|
|
18966
19078
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
18967
19079
|
};
|
|
18968
|
-
var templateObject_1$
|
|
19080
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$f, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$5, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
18969
19081
|
|
|
18970
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
18971
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
19082
|
+
var Container$h = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
19083
|
+
var ReviewsContainer = newStyled.div(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
18972
19084
|
var ReviewsCount = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
18973
19085
|
var ReviewsStars = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
18974
19086
|
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
@@ -18983,17 +19095,17 @@ var ReviewsHeader = function (_a) {
|
|
|
18983
19095
|
var theme = useTheme();
|
|
18984
19096
|
return (jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18985
19097
|
};
|
|
18986
|
-
var templateObject_1$
|
|
19098
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5;
|
|
18987
19099
|
|
|
18988
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
18989
|
-
var Text = newStyled.p(templateObject_2$
|
|
19100
|
+
var Container$g = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
19101
|
+
var Text = newStyled.p(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
18990
19102
|
var ScrollToTop = function (_a) {
|
|
18991
19103
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
18992
19104
|
var theme = useTheme();
|
|
18993
19105
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
18994
19106
|
return (jsxRuntime.jsxs(Container$g, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
18995
19107
|
};
|
|
18996
|
-
var templateObject_1$
|
|
19108
|
+
var templateObject_1$p, templateObject_2$h;
|
|
18997
19109
|
|
|
18998
19110
|
var Input = newStyled.input(function (props) { return ({
|
|
18999
19111
|
padding: props.theme.component.input.padding,
|
|
@@ -19024,7 +19136,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
19024
19136
|
},
|
|
19025
19137
|
}); });
|
|
19026
19138
|
|
|
19027
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
19139
|
+
var Container$f = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
19028
19140
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
19029
19141
|
}));
|
|
19030
19142
|
var Description = newStyled.div({
|
|
@@ -19043,7 +19155,7 @@ var ProductItem = function (_a) {
|
|
|
19043
19155
|
var theme = useTheme();
|
|
19044
19156
|
return (jsxRuntime.jsxs(Container$f, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
19045
19157
|
};
|
|
19046
|
-
var templateObject_1$
|
|
19158
|
+
var templateObject_1$o;
|
|
19047
19159
|
|
|
19048
19160
|
var Container$e = newStyled.div({
|
|
19049
19161
|
display: 'flex',
|
|
@@ -19059,7 +19171,7 @@ var Ul = newStyled.ul({
|
|
|
19059
19171
|
margin: '0px',
|
|
19060
19172
|
padding: '0px',
|
|
19061
19173
|
});
|
|
19062
|
-
var Li = newStyled.li(templateObject_1$
|
|
19174
|
+
var Li = newStyled.li(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
19063
19175
|
padding: [0, '0rem 1rem'],
|
|
19064
19176
|
borderRadius: [0, '0.5rem'],
|
|
19065
19177
|
}));
|
|
@@ -19071,7 +19183,7 @@ var Anchor = newStyled.a({
|
|
|
19071
19183
|
padding: 0,
|
|
19072
19184
|
textDecoration: 'none',
|
|
19073
19185
|
});
|
|
19074
|
-
var Container$d = newStyled.div(templateObject_2$
|
|
19186
|
+
var Container$d = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
19075
19187
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
19076
19188
|
marginTop: ['1.25rem', '0.125rem'],
|
|
19077
19189
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -19084,9 +19196,9 @@ var ResultsPanel = function (_a) {
|
|
|
19084
19196
|
var theme = useTheme();
|
|
19085
19197
|
return (jsxRuntime.jsxs(Container$d, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
19086
19198
|
};
|
|
19087
|
-
var templateObject_1$
|
|
19199
|
+
var templateObject_1$n, templateObject_2$g, templateObject_3$d;
|
|
19088
19200
|
|
|
19089
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
19201
|
+
var Button$1 = newStyled.button(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
19090
19202
|
right: ['1rem', '7.75rem'],
|
|
19091
19203
|
top: ['0.75rem', '0.75rem'],
|
|
19092
19204
|
}));
|
|
@@ -19095,7 +19207,7 @@ var ClearButton = function (_a) {
|
|
|
19095
19207
|
var theme = useTheme();
|
|
19096
19208
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
19097
19209
|
};
|
|
19098
|
-
var templateObject_1$
|
|
19210
|
+
var templateObject_1$m;
|
|
19099
19211
|
|
|
19100
19212
|
var SearchIconContainer = newStyled.div({
|
|
19101
19213
|
display: 'flex',
|
|
@@ -19105,7 +19217,7 @@ var SearchIconContainer = newStyled.div({
|
|
|
19105
19217
|
background: 'white',
|
|
19106
19218
|
alignSelf: 'center',
|
|
19107
19219
|
});
|
|
19108
|
-
var StyledButton = newStyled(ButtonSecondary)(templateObject_1$
|
|
19220
|
+
var StyledButton$1 = newStyled(ButtonSecondary)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"], ["\n position: absolute;\n right: 0;\n height: 100%;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n padding: 0.875rem 1.5rem;\n"])));
|
|
19109
19221
|
var SearchControl = function (_a) {
|
|
19110
19222
|
var open = _a.open, onSearch = _a.onSearch, onClose = _a.onClose, _b = _a.showSearchIcon, showSearchIcon = _b === void 0 ? false : _b;
|
|
19111
19223
|
var theme = useTheme();
|
|
@@ -19119,9 +19231,9 @@ var SearchControl = function (_a) {
|
|
|
19119
19231
|
}
|
|
19120
19232
|
return (jsxRuntime.jsx(SearchIconContainer, { children: jsxRuntime.jsx(Icon.Navigation.Search, { title: "Search icon", height: 1.25, width: 1.25 }, void 0) }, void 0));
|
|
19121
19233
|
}
|
|
19122
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19234
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledButton$1, { text: "SEARCH", onClick: onSearch }, void 0), open && jsxRuntime.jsx(ClearButton, { onClick: onClose }, void 0)] }, void 0));
|
|
19123
19235
|
};
|
|
19124
|
-
var templateObject_1$
|
|
19236
|
+
var templateObject_1$l;
|
|
19125
19237
|
|
|
19126
19238
|
var initialState = { selectedOption: undefined, open: false, term: '' };
|
|
19127
19239
|
var reducer = function (state, action) {
|
|
@@ -19188,8 +19300,8 @@ var SearchBar = function (_a) {
|
|
|
19188
19300
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
19189
19301
|
};
|
|
19190
19302
|
|
|
19191
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
19192
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
19303
|
+
var Container$b = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
19304
|
+
var BackArrow = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
19193
19305
|
var BoldSpan = newStyled.span(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
19194
19306
|
var NormalSpan = newStyled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
19195
19307
|
var SearchNavigationParents = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
@@ -19199,9 +19311,9 @@ var SearchNavigation = function (_a) {
|
|
|
19199
19311
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
19200
19312
|
}) }, void 0)] }, void 0));
|
|
19201
19313
|
};
|
|
19202
|
-
var templateObject_1$
|
|
19314
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$c, templateObject_4$9, templateObject_5$5;
|
|
19203
19315
|
|
|
19204
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
19316
|
+
var Container$a = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
19205
19317
|
var alignCenter = _a.alignCenter;
|
|
19206
19318
|
return alignCenter &&
|
|
19207
19319
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -19211,17 +19323,17 @@ var Container$a = newStyled.div(templateObject_1$i || (templateObject_1$i = __ma
|
|
|
19211
19323
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
19212
19324
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
19213
19325
|
});
|
|
19214
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
19326
|
+
var TitleText = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
19215
19327
|
var BannerText = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
19216
19328
|
var ShortBanner = function (_a) {
|
|
19217
19329
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
19218
19330
|
var theme = useTheme();
|
|
19219
19331
|
return (jsxRuntime.jsxs(Container$a, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
19220
19332
|
};
|
|
19221
|
-
var templateObject_1$
|
|
19333
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$b;
|
|
19222
19334
|
|
|
19223
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
19224
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
19335
|
+
var TableElement$1 = newStyled.table(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n position: relative;\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19336
|
+
var TableCell$1 = newStyled.td(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19225
19337
|
var TableHead$1 = newStyled.th(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19226
19338
|
var Label = newStyled('div')(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"], ["\n gap: 15px;\n width: 100%;\n display: flex;\n font-size: 14px;\n font-weight: 600;\n align-items: center;\n justify-content: center;\n"])));
|
|
19227
19339
|
var TopLabel = newStyled(Label)(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
@@ -19230,7 +19342,7 @@ var Container$9 = newStyled('div')(templateObject_7$4 || (templateObject_7$4 = _
|
|
|
19230
19342
|
var LabelText = newStyled('span')(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"], ["\n display: flex;\n min-width: 70px;\n justify-content: center;\n"])));
|
|
19231
19343
|
var Column = newStyled('div')(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"], ["\n display: flex;\n min-width: 675px;\n align-items: center;\n flex-direction: column;\n\n @media (max-width: 768px) {\n min-width: 100%;\n }\n"])));
|
|
19232
19344
|
var TableRow$1 = newStyled.tr(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19233
|
-
var templateObject_1$
|
|
19345
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$a, templateObject_4$8, templateObject_5$4, templateObject_6$4, templateObject_7$4, templateObject_8$4, templateObject_9$2, templateObject_10$1;
|
|
19234
19346
|
|
|
19235
19347
|
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
19236
19348
|
var getCellColor = function (index, cell) {
|
|
@@ -19271,8 +19383,8 @@ var SizeChartTable = function (_a) {
|
|
|
19271
19383
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: getIsOdd(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
19272
19384
|
};
|
|
19273
19385
|
|
|
19274
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
19275
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
19386
|
+
var TableElement = newStyled.table(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
19387
|
+
var TableCell = newStyled.td(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19276
19388
|
var TableHead = newStyled.th(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
19277
19389
|
var TableRow = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
19278
19390
|
var SizeTable = function (_a) {
|
|
@@ -19280,7 +19392,7 @@ var SizeTable = function (_a) {
|
|
|
19280
19392
|
var theme = useTheme();
|
|
19281
19393
|
return (jsxRuntime.jsxs(TableElement, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
19282
19394
|
};
|
|
19283
|
-
var templateObject_1$
|
|
19395
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$9, templateObject_4$7;
|
|
19284
19396
|
|
|
19285
19397
|
var getStylesBySize$4 = function (size) {
|
|
19286
19398
|
switch (size) {
|
|
@@ -19307,7 +19419,7 @@ var textButtonStyles = function (theme, size) {
|
|
|
19307
19419
|
} });
|
|
19308
19420
|
};
|
|
19309
19421
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
19310
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
19422
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
19311
19423
|
};
|
|
19312
19424
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
19313
19425
|
if (disabled)
|
|
@@ -19323,23 +19435,23 @@ var TextButton = function (_a) {
|
|
|
19323
19435
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
19324
19436
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
19325
19437
|
};
|
|
19326
|
-
var templateObject_1$
|
|
19438
|
+
var templateObject_1$g;
|
|
19327
19439
|
|
|
19328
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
19329
|
-
var P = newStyled.p(templateObject_2$
|
|
19440
|
+
var Container$8 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
19441
|
+
var P = newStyled.p(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
19330
19442
|
var PercentageSpan = newStyled.span(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
19331
19443
|
var SizeFitGuide = function (_a) {
|
|
19332
19444
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage, _b = _a.hideIcon, hideIcon = _b === void 0 ? false : _b;
|
|
19333
19445
|
return (jsxRuntime.jsxs(Container$8, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: hideIcon ? undefined : Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
19334
19446
|
};
|
|
19335
|
-
var templateObject_1$
|
|
19447
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$8;
|
|
19336
19448
|
|
|
19337
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
19449
|
+
var ButtonsContainer = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
19338
19450
|
var inline = _a.inline;
|
|
19339
19451
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
19340
19452
|
});
|
|
19341
|
-
var Row = newStyled.div(templateObject_2$
|
|
19342
|
-
var templateObject_1$
|
|
19453
|
+
var Row = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"], ["\n gap: 5px;\n display: flex;\n margin: 5px 0 3px;\n flex-wrap: wrap;\n\n & button {\n font-weight: 600;\n }\n"])));
|
|
19454
|
+
var templateObject_1$e, templateObject_2$a;
|
|
19343
19455
|
|
|
19344
19456
|
var SizeSelector = function (_a) {
|
|
19345
19457
|
var _b;
|
|
@@ -19359,7 +19471,7 @@ var SizeSelector = function (_a) {
|
|
|
19359
19471
|
}) }), void 0)] }), void 0));
|
|
19360
19472
|
};
|
|
19361
19473
|
|
|
19362
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
19474
|
+
var TabContainer = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
19363
19475
|
var titleSize = _a.titleSize;
|
|
19364
19476
|
return titleSize;
|
|
19365
19477
|
}, function (_a) {
|
|
@@ -19376,10 +19488,10 @@ var Tab = function (_a) {
|
|
|
19376
19488
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
19377
19489
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
19378
19490
|
};
|
|
19379
|
-
var templateObject_1$
|
|
19491
|
+
var templateObject_1$d;
|
|
19380
19492
|
|
|
19381
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
19382
|
-
var TabList = newStyled.div(templateObject_2$
|
|
19493
|
+
var Container$7 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
19494
|
+
var TabList = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n ", ";\n"])), function (_a) {
|
|
19383
19495
|
var backgroundColor = _a.backgroundColor;
|
|
19384
19496
|
return backgroundColor;
|
|
19385
19497
|
}, function (_a) {
|
|
@@ -19398,14 +19510,14 @@ var Tabs = function (_a) {
|
|
|
19398
19510
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
19399
19511
|
return (jsxRuntime.jsxs(Container$7, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor, borderColor: fixedBorderColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(React__default["default"].Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth, color: selectedBorderColor }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, tab.title)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
19400
19512
|
};
|
|
19401
|
-
var templateObject_1$
|
|
19513
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$7, templateObject_4$6;
|
|
19402
19514
|
|
|
19403
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
19515
|
+
var Container$6 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
19404
19516
|
var Tag = function (_a) {
|
|
19405
19517
|
var text = _a.text, className = _a.className;
|
|
19406
19518
|
return jsxRuntime.jsx(Container$6, __assign$1({ className: className }, { children: text }), void 0);
|
|
19407
19519
|
};
|
|
19408
|
-
var templateObject_1$
|
|
19520
|
+
var templateObject_1$b;
|
|
19409
19521
|
|
|
19410
19522
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
19411
19523
|
switch (size) {
|
|
@@ -19516,8 +19628,8 @@ var SeasonOfferRoundedTag = function (_a) {
|
|
|
19516
19628
|
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF', textAlign: 'center', borderRadius: '50%' }, stylesBySize), text: text, className: className }, void 0));
|
|
19517
19629
|
};
|
|
19518
19630
|
|
|
19519
|
-
var ImageWrapper = newStyled.div(templateObject_1$
|
|
19520
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
19631
|
+
var ImageWrapper = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
19632
|
+
var VideoOverlay = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
19521
19633
|
var FullscreenVideo = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
19522
19634
|
var ImageVideo = function (_a) {
|
|
19523
19635
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
@@ -19538,10 +19650,10 @@ var ImageVideo = function (_a) {
|
|
|
19538
19650
|
height: '100%',
|
|
19539
19651
|
} }, void 0)] }, void 0))] }, void 0));
|
|
19540
19652
|
};
|
|
19541
|
-
var templateObject_1$
|
|
19653
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$6;
|
|
19542
19654
|
|
|
19543
|
-
var ContainerDesktop = css(templateObject_1$
|
|
19544
|
-
var ContainerMobile = css(templateObject_2$
|
|
19655
|
+
var ContainerDesktop = css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
19656
|
+
var ContainerMobile = css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
19545
19657
|
var Container$5 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
19546
19658
|
var TextContainer = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
19547
19659
|
var TextWithImage = function (_a) {
|
|
@@ -19563,7 +19675,7 @@ var TextWithImage = function (_a) {
|
|
|
19563
19675
|
// @ts-ignore
|
|
19564
19676
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
19565
19677
|
};
|
|
19566
|
-
return (jsxs(Container$5, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile
|
|
19678
|
+
return (jsxs(Container$5, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile, onClick: buttonAction, testId: buttomText, css: {
|
|
19567
19679
|
backgroundColor: props.btnBGColor,
|
|
19568
19680
|
color: '#ffffff',
|
|
19569
19681
|
border: props.btnBGColor,
|
|
@@ -19573,9 +19685,9 @@ var TextWithImage = function (_a) {
|
|
|
19573
19685
|
},
|
|
19574
19686
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
19575
19687
|
};
|
|
19576
|
-
var templateObject_1$
|
|
19688
|
+
var templateObject_1$9, templateObject_2$7, templateObject_3$5, templateObject_4$5;
|
|
19577
19689
|
|
|
19578
|
-
var TimerContainer$1 = newStyled.div(templateObject_1$
|
|
19690
|
+
var TimerContainer$1 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19579
19691
|
var timerColor = _a.timerColor;
|
|
19580
19692
|
return timerColor || '';
|
|
19581
19693
|
});
|
|
@@ -19611,10 +19723,10 @@ var Timer = function (_a) {
|
|
|
19611
19723
|
var _g = secondsToTime(secs), hours = _g.hours, minutes = _g.minutes, seconds = _g.seconds;
|
|
19612
19724
|
return (jsxRuntime.jsxs(TimerContainer$1, __assign$1({ "data-testid": "Time", timerColor: timerColor }, { children: [showHours && (hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), showSeconds && "".concat(seconds, "s")] }), void 0));
|
|
19613
19725
|
};
|
|
19614
|
-
var templateObject_1$
|
|
19726
|
+
var templateObject_1$8;
|
|
19615
19727
|
|
|
19616
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
19617
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
19728
|
+
var Wrapper$1 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
19729
|
+
var GrandTotal = newStyled.h1(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
19618
19730
|
var Currency = newStyled.span(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
19619
19731
|
var theme = _a.theme;
|
|
19620
19732
|
return theme.component.total.basicTotal.currency.color;
|
|
@@ -19642,7 +19754,7 @@ var DiscountAmount = newStyled.h3(templateObject_7$3 || (templateObject_7$3 = __
|
|
|
19642
19754
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
19643
19755
|
});
|
|
19644
19756
|
var TotalLabel = newStyled(Text$7)(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n font-size: 20px;\n"], ["\n font-size: 20px;\n"])));
|
|
19645
|
-
var templateObject_1$
|
|
19757
|
+
var templateObject_1$7, templateObject_2$6, templateObject_3$4, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3;
|
|
19646
19758
|
|
|
19647
19759
|
var Total = function (_a) {
|
|
19648
19760
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b, _c = _a.showTotalLabel, showTotalLabel = _c === void 0 ? false : _c;
|
|
@@ -19650,11 +19762,11 @@ var Total = function (_a) {
|
|
|
19650
19762
|
return (jsxRuntime.jsxs(Wrapper$1, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(TotalContainer, __assign$1({ showTotalLabel: showTotalLabel }, { children: [showTotalLabel && (jsxRuntime.jsx(TotalLabel, __assign$1({ variant: "heading6", size: "regular", weight: "bold" }, { children: "Total" }), void 0)), jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0)] }), void 0), saving && (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
19651
19763
|
};
|
|
19652
19764
|
|
|
19653
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
19765
|
+
var Wrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
19654
19766
|
var color = _a.color;
|
|
19655
19767
|
return color;
|
|
19656
19768
|
});
|
|
19657
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
19769
|
+
var ItemContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
19658
19770
|
var Item = newStyled.h4(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
19659
19771
|
var theme = _a.theme;
|
|
19660
19772
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
@@ -19675,15 +19787,15 @@ var Subtotal = function (_a) {
|
|
|
19675
19787
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
19676
19788
|
})] }), void 0));
|
|
19677
19789
|
};
|
|
19678
|
-
var templateObject_1$
|
|
19790
|
+
var templateObject_1$6, templateObject_2$5, templateObject_3$3, templateObject_4$3;
|
|
19679
19791
|
|
|
19680
19792
|
var Totals = {
|
|
19681
19793
|
Total: Total,
|
|
19682
19794
|
Subtotal: Subtotal,
|
|
19683
19795
|
};
|
|
19684
19796
|
|
|
19685
|
-
var Container$3 = newStyled.div(templateObject_1$
|
|
19686
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
19797
|
+
var Container$3 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19798
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19687
19799
|
var CheckpointDate$1 = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19688
19800
|
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19689
19801
|
var CheckpointDateAndDayLabel = newStyled.span(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"], ["\n font-size: 14px;\n weight: 400;\n color: #949494;\n text-align: start;\n margin-bottom: 42px;\n"])));
|
|
@@ -19734,10 +19846,10 @@ var TrackingProgressV2 = function (_a) {
|
|
|
19734
19846
|
return (jsxRuntime.jsxs(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate$1, __assign$1({ currentSpace: "90px" }, { children: [jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack$1, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsxRuntime.jsx(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsxRuntime.jsx(ActiveCheckpointDot$1, { firstElement: false }, void 0) }), void 0)), jsxRuntime.jsx(CheckpointStatus$1, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
19735
19847
|
})] }), void 0));
|
|
19736
19848
|
};
|
|
19737
|
-
var templateObject_1$
|
|
19849
|
+
var templateObject_1$5, templateObject_2$4, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$2, templateObject_9$1, templateObject_10, templateObject_11;
|
|
19738
19850
|
|
|
19739
|
-
var Container$2 = newStyled.div(templateObject_1$
|
|
19740
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
19851
|
+
var Container$2 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
19852
|
+
var CheckpointContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19741
19853
|
var CheckpointDate = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
19742
19854
|
var CheckpointDateLabel = newStyled.p(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
19743
19855
|
var CheckpointStatus = newStyled.p(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
@@ -19774,7 +19886,77 @@ var TrackingProgress = function (_a) {
|
|
|
19774
19886
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
19775
19887
|
})] }), void 0));
|
|
19776
19888
|
};
|
|
19777
|
-
var templateObject_1$
|
|
19889
|
+
var templateObject_1$4, templateObject_2$3, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1;
|
|
19890
|
+
|
|
19891
|
+
var StyledButton = newStyled(Ye.Button)(function (props) { return ({
|
|
19892
|
+
background: props.bgColor,
|
|
19893
|
+
height: '100%',
|
|
19894
|
+
maxHeight: '48px',
|
|
19895
|
+
border: 'none',
|
|
19896
|
+
display: 'flex',
|
|
19897
|
+
cursor: props.disabled ? 'not-allowed' : 'pointer',
|
|
19898
|
+
justifyContent: 'space-between',
|
|
19899
|
+
alignItems: 'center',
|
|
19900
|
+
padding: '10px 24px',
|
|
19901
|
+
}); });
|
|
19902
|
+
var StyledPanel = newStyled(Ye.Panel)({
|
|
19903
|
+
width: '100%',
|
|
19904
|
+
background: 'transparent',
|
|
19905
|
+
border: 'none',
|
|
19906
|
+
display: 'flex',
|
|
19907
|
+
flexDirection: 'column',
|
|
19908
|
+
alignItems: 'center',
|
|
19909
|
+
justifyContent: 'center',
|
|
19910
|
+
gap: '10px',
|
|
19911
|
+
});
|
|
19912
|
+
var StyledContent = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"], ["\n appearance: none;\n padding: 0 0 15px 0;\n margin: auto;\n border: none;\n background: ", ";\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 display: flex;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: fit-content;\n"])), function (_a) {
|
|
19913
|
+
var bgColor = _a.bgColor;
|
|
19914
|
+
return bgColor !== null && bgColor !== void 0 ? bgColor : '';
|
|
19915
|
+
}, function (_a) {
|
|
19916
|
+
var _b = _a.width, width = _b === void 0 ? '100%' : _b;
|
|
19917
|
+
return width;
|
|
19918
|
+
});
|
|
19919
|
+
var StyledController = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"], ["\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n min-width: fit-content;\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 user-select: text;\n writing-mode: unset;\n font-family: inherit;\n cursor: pointer;\n gap: 5px;\n"])));
|
|
19920
|
+
var templateObject_1$3, templateObject_2$2;
|
|
19921
|
+
|
|
19922
|
+
var StyledDisclosure = newStyled(Ye)(function (_a) {
|
|
19923
|
+
var background = _a.background;
|
|
19924
|
+
return ({
|
|
19925
|
+
display: 'flex',
|
|
19926
|
+
flexDirection: 'column',
|
|
19927
|
+
justifyContent: 'center',
|
|
19928
|
+
gap: '10px',
|
|
19929
|
+
background: background !== null && background !== void 0 ? background : '',
|
|
19930
|
+
width: 'auto',
|
|
19931
|
+
borderRadius: '8px',
|
|
19932
|
+
border: '0.063rem solid',
|
|
19933
|
+
borderColor: '#e5e5e5',
|
|
19934
|
+
padding: 'unset',
|
|
19935
|
+
overflow: 'hidden',
|
|
19936
|
+
});
|
|
19937
|
+
});
|
|
19938
|
+
var ControlIconComponent = React$2.memo(function (_a) {
|
|
19939
|
+
var open = _a.open, openIcon = _a.openIcon, closeIcon = _a.closeIcon, fillControlsCollor = _a.fillControlsCollor;
|
|
19940
|
+
var Icon = open ? closeIcon : openIcon;
|
|
19941
|
+
return jsxRuntime.jsx(Icon, { title: open ? 'Close' : 'Open', fill: fillControlsCollor }, void 0);
|
|
19942
|
+
});
|
|
19943
|
+
ControlIconComponent.displayName = 'ControlIconComponent';
|
|
19944
|
+
var HeaderContentComponent = React$2.memo(function (_a) {
|
|
19945
|
+
var open = _a.open, header = _a.header, headerOnOpen = _a.headerOnOpen;
|
|
19946
|
+
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: open && headerOnOpen ? headerOnOpen : header }, void 0);
|
|
19947
|
+
});
|
|
19948
|
+
HeaderContentComponent.displayName = 'HeaderContentComponent';
|
|
19949
|
+
var AccordionContent = function (_a) {
|
|
19950
|
+
var open = _a.open, disabled = _a.disabled, bgColor = _a.bgColor, fillControlsCollor = _a.fillControlsCollor, header = _a.header, headerOnOpen = _a.headerOnOpen, children = _a.children, openIcon = _a.openIcon, closeIcon = _a.closeIcon, contentWidth = _a.contentWidth;
|
|
19951
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsxRuntime.jsx(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxRuntime.jsxs(StyledController, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsxRuntime.jsx("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsxRuntime.jsx(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsxRuntime.jsx(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
|
|
19952
|
+
};
|
|
19953
|
+
var BasicAccordion = function (_a) {
|
|
19954
|
+
var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.contentWidth, contentWidth = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
|
|
19955
|
+
return (jsxRuntime.jsx(StyledDisclosure, __assign$1({ as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick }, { children: function (_a) {
|
|
19956
|
+
var open = _a.open;
|
|
19957
|
+
return (jsxRuntime.jsx(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon, contentWidth: contentWidth }, { children: children }), void 0));
|
|
19958
|
+
} }), void 0));
|
|
19959
|
+
};
|
|
19778
19960
|
|
|
19779
19961
|
var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: ", ";\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: ", ";\n padding: 5px 2px;\n }\n"])), function (_a) {
|
|
19780
19962
|
var textPosition = _a.textPosition;
|
|
@@ -19942,12 +20124,14 @@ exports.AmazonButton = AmazonButton;
|
|
|
19942
20124
|
exports.AssetsProvider = AssetsProvider;
|
|
19943
20125
|
exports.Autoship = Autoship;
|
|
19944
20126
|
exports.AutoshipV2 = AutoshipV2;
|
|
20127
|
+
exports.BasicAccordion = BasicAccordion;
|
|
19945
20128
|
exports.BeforeAfterCard = BeforeAfterCard;
|
|
19946
20129
|
exports.Bundle = Bundle;
|
|
19947
20130
|
exports.ButtonPrimary = ButtonPrimary;
|
|
19948
20131
|
exports.ButtonSecondary = ButtonSecondary;
|
|
19949
20132
|
exports.ButtonSecondaryOutline = ButtonSecondaryOutline;
|
|
19950
20133
|
exports.BuyNowPayLater = BuyNowPayLater;
|
|
20134
|
+
exports.CancellationFlowAccordionContentPerPartner = CancellationFlowAccordionContentPerPartner;
|
|
19951
20135
|
exports.Card = Card$2;
|
|
19952
20136
|
exports.CartProductItem = CartProductItem;
|
|
19953
20137
|
exports.CategorySquareTag = CategorySquareTag;
|
|
@@ -19956,6 +20140,7 @@ exports.Checkbox = Checkbox;
|
|
|
19956
20140
|
exports.ClubOfferTag = ClubOfferTag;
|
|
19957
20141
|
exports.ClubRadioGroupInput = ClubRadioGroupInput;
|
|
19958
20142
|
exports.Collection = Collection;
|
|
20143
|
+
exports.Coupon = Coupon;
|
|
19959
20144
|
exports.CrossSell = index$1;
|
|
19960
20145
|
exports.DeliveryDetails = DeliveryDetails;
|
|
19961
20146
|
exports.DiscountTag = DiscountTag$1;
|
|
@@ -20055,6 +20240,7 @@ exports.seasonOfferRoundedTag = SeasonOfferRoundedTag;
|
|
|
20055
20240
|
exports.simulateMouseClick = simulateMouseClick;
|
|
20056
20241
|
exports.sliceString = sliceString;
|
|
20057
20242
|
exports.styled = newStyled;
|
|
20243
|
+
exports.useDeviceType = useDeviceType;
|
|
20058
20244
|
exports.useModal = useModal;
|
|
20059
20245
|
exports.useModalEvent = useModalEvent;
|
|
20060
20246
|
exports.useOnClickOutside = useOnClickOutside;
|