@trafilea/afrodita-components 6.8.15 → 6.8.18
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 +3 -2
- package/build/index.esm.js +314 -301
- package/build/index.esm.js.map +1 -1
- package/build/index.js +314 -301
- package/build/index.js.map +1 -1
- package/build/theme/thebodcon.theme.js +10 -10
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3125,7 +3125,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3125
3125
|
desktop: 1280,
|
|
3126
3126
|
};
|
|
3127
3127
|
|
|
3128
|
-
var Container$
|
|
3128
|
+
var Container$1d = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3129
3129
|
var height = _a.height;
|
|
3130
3130
|
return (height ? height : '1.5em');
|
|
3131
3131
|
}, function (_a) {
|
|
@@ -3150,7 +3150,7 @@ var Container$1c = newStyled.div(templateObject_1$1Y || (templateObject_1$1Y = _
|
|
|
3150
3150
|
var SkeletonBox = function (_a) {
|
|
3151
3151
|
var width = _a.width, height = _a.height;
|
|
3152
3152
|
var theme = useTheme();
|
|
3153
|
-
return jsx$1(Container$
|
|
3153
|
+
return jsx$1(Container$1d, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3154
3154
|
};
|
|
3155
3155
|
var templateObject_1$1Y;
|
|
3156
3156
|
|
|
@@ -4105,12 +4105,12 @@ var TAGS = {
|
|
|
4105
4105
|
hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
|
|
4106
4106
|
hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
|
|
4107
4107
|
display1: newStyled.h1(templateObject_4$I || (templateObject_4$I = __makeTemplateObject([""], [""]))),
|
|
4108
|
-
display2: newStyled.h2(templateObject_5$
|
|
4109
|
-
display3: newStyled.h3(templateObject_6$
|
|
4110
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4111
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4112
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4113
|
-
heading4: newStyled.h4(templateObject_10$
|
|
4108
|
+
display2: newStyled.h2(templateObject_5$u || (templateObject_5$u = __makeTemplateObject([""], [""]))),
|
|
4109
|
+
display3: newStyled.h3(templateObject_6$p || (templateObject_6$p = __makeTemplateObject([""], [""]))),
|
|
4110
|
+
heading1: newStyled.h1(templateObject_7$h || (templateObject_7$h = __makeTemplateObject([""], [""]))),
|
|
4111
|
+
heading2: newStyled.h2(templateObject_8$e || (templateObject_8$e = __makeTemplateObject([""], [""]))),
|
|
4112
|
+
heading3: newStyled.h3(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject([""], [""]))),
|
|
4113
|
+
heading4: newStyled.h4(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject([""], [""]))),
|
|
4114
4114
|
heading5: newStyled.h5(templateObject_11$4 || (templateObject_11$4 = __makeTemplateObject([""], [""]))),
|
|
4115
4115
|
heading6: newStyled.h6(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject([""], [""]))),
|
|
4116
4116
|
heading7: newStyled.h1(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4237,17 +4237,17 @@ var DEFAULTS = {
|
|
|
4237
4237
|
size: 'regular',
|
|
4238
4238
|
},
|
|
4239
4239
|
};
|
|
4240
|
-
var templateObject_1$1W, templateObject_2$1g, templateObject_3$Z, templateObject_4$I, templateObject_5$
|
|
4240
|
+
var templateObject_1$1W, templateObject_2$1g, templateObject_3$Z, templateObject_4$I, templateObject_5$u, templateObject_6$p, templateObject_7$h, templateObject_8$e, templateObject_9$7, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4241
4241
|
|
|
4242
|
-
var Container$
|
|
4242
|
+
var Container$1c = newStyled.div(templateObject_1$1V || (templateObject_1$1V = __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"])));
|
|
4243
4243
|
var Card$3 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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"])));
|
|
4244
4244
|
var Tag$2 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __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"])));
|
|
4245
|
-
var Label$
|
|
4246
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4247
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4245
|
+
var Label$5 = newStyled.div(templateObject_4$H || (templateObject_4$H = __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"])));
|
|
4246
|
+
var Check$1 = newStyled.div(templateObject_5$t || (templateObject_5$t = __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"])));
|
|
4247
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$o || (templateObject_6$o = __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"])));
|
|
4248
4248
|
var PackSelectorV2 = function (_a) {
|
|
4249
4249
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4250
|
-
return (jsx$1(Container$
|
|
4250
|
+
return (jsx$1(Container$1c, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4251
4251
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4252
4252
|
}) }), void 0));
|
|
4253
4253
|
};
|
|
@@ -4261,7 +4261,7 @@ var PackCard$1 = function (_a) {
|
|
|
4261
4261
|
.then(function (icon) { return setIcon(icon); })
|
|
4262
4262
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
4263
4263
|
}, [pack.meta.icon]);
|
|
4264
|
-
return (jsxs$1(Card$3, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$
|
|
4264
|
+
return (jsxs$1(Card$3, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$2, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$5, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold" }, { children: pack.label }), void 0), jsx$1(Check$1, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(DiscountContainer$1, { children: [jsx$1(Text$7, __assign$1({ variant: "label", style: { fontWeight: 600, lineHeight: '24px', marginRight: '4px' }, size: "small" }, { children: formatPrice(pack.meta.price, {
|
|
4265
4265
|
locale: 'en-US',
|
|
4266
4266
|
currency: currencyCode || 'USD',
|
|
4267
4267
|
}) }), void 0), pack.meta.quantity > 1 ? (jsxs$1(Text$7, __assign$1({ variant: "body", style: { fontWeight: 600 }, size: "small" }, { children: ['(', formatPrice(pack.meta.price / pack.meta.quantity, {
|
|
@@ -4269,25 +4269,25 @@ var PackCard$1 = function (_a) {
|
|
|
4269
4269
|
currency: currencyCode || 'USD',
|
|
4270
4270
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4271
4271
|
};
|
|
4272
|
-
var templateObject_1$1V, templateObject_2$1f, templateObject_3$Y, templateObject_4$H, templateObject_5$
|
|
4272
|
+
var templateObject_1$1V, templateObject_2$1f, templateObject_3$Y, templateObject_4$H, templateObject_5$t, templateObject_6$o;
|
|
4273
4273
|
|
|
4274
|
-
var Container$
|
|
4274
|
+
var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4275
4275
|
var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4276
4276
|
var DropList = function (_a) {
|
|
4277
4277
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4278
|
-
return (jsx$1(Container$
|
|
4278
|
+
return (jsx$1(Container$1b, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4279
4279
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4280
4280
|
}) }, void 0));
|
|
4281
4281
|
};
|
|
4282
4282
|
var templateObject_1$1U, templateObject_2$1e;
|
|
4283
4283
|
|
|
4284
4284
|
var DROPS_TOTAL = 5;
|
|
4285
|
-
var Container$
|
|
4285
|
+
var Container$1a = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4286
4286
|
var Title$8 = newStyled.p(templateObject_2$1d || (templateObject_2$1d = __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"])));
|
|
4287
4287
|
var Description$3 = newStyled.p(templateObject_3$X || (templateObject_3$X = __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"])));
|
|
4288
4288
|
var AbsorbencyLevel = function (_a) {
|
|
4289
4289
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4290
|
-
return (jsxs$1(Container$
|
|
4290
|
+
return (jsxs$1(Container$1a, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4291
4291
|
};
|
|
4292
4292
|
var templateObject_1$1T, templateObject_2$1d, templateObject_3$X;
|
|
4293
4293
|
|
|
@@ -4391,7 +4391,7 @@ var Accordion$1 = function (_a) {
|
|
|
4391
4391
|
};
|
|
4392
4392
|
var templateObject_1$1S;
|
|
4393
4393
|
|
|
4394
|
-
var Container$
|
|
4394
|
+
var Container$19 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4395
4395
|
var AccordionOptions = function (_a) {
|
|
4396
4396
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4397
4397
|
var _b = useState({
|
|
@@ -4404,7 +4404,7 @@ var AccordionOptions = function (_a) {
|
|
|
4404
4404
|
}
|
|
4405
4405
|
return false;
|
|
4406
4406
|
};
|
|
4407
|
-
return (jsx$1(Container$
|
|
4407
|
+
return (jsx$1(Container$19, { children: accordions.map(function (accordion, index) {
|
|
4408
4408
|
var forceOpenValue = getForceOpen(index);
|
|
4409
4409
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4410
4410
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4748,7 +4748,7 @@ var StyledLabel$4 = newStyled.label(baseStyles, function (props) { return [
|
|
|
4748
4748
|
Styles[props.variant](props.theme),
|
|
4749
4749
|
Styles[props.size](props.theme),
|
|
4750
4750
|
]; });
|
|
4751
|
-
var Label$
|
|
4751
|
+
var Label$4 = function (_a) {
|
|
4752
4752
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
4753
4753
|
var theme = useTheme();
|
|
4754
4754
|
return (jsx$1(StyledLabel$4, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
@@ -4837,7 +4837,7 @@ var CustomCheckboxStyles = {
|
|
|
4837
4837
|
},
|
|
4838
4838
|
};
|
|
4839
4839
|
|
|
4840
|
-
var Container$
|
|
4840
|
+
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"])));
|
|
4841
4841
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4842
4842
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4843
4843
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4862,7 +4862,7 @@ var Checkbox = function (_a) {
|
|
|
4862
4862
|
}
|
|
4863
4863
|
onChange(e.target.checked);
|
|
4864
4864
|
};
|
|
4865
|
-
return (jsxs$1(Container$
|
|
4865
|
+
return (jsxs$1(Container$18, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4866
4866
|
};
|
|
4867
4867
|
var templateObject_1$1N, templateObject_2$1b;
|
|
4868
4868
|
|
|
@@ -4913,7 +4913,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4913
4913
|
Option: BaseDropdownOption,
|
|
4914
4914
|
});
|
|
4915
4915
|
|
|
4916
|
-
var Container$
|
|
4916
|
+
var Container$17 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject([""], [""])));
|
|
4917
4917
|
var RequiredPlaceholder = newStyled.p(templateObject_2$1a || (templateObject_2$1a = __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"])));
|
|
4918
4918
|
function SimpleDropdown(_a) {
|
|
4919
4919
|
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;
|
|
@@ -4943,7 +4943,7 @@ function SimpleDropdown(_a) {
|
|
|
4943
4943
|
}
|
|
4944
4944
|
setSelectedValue(value);
|
|
4945
4945
|
}, [value, options, initialValue]);
|
|
4946
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4946
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$17 : Fragment$1;
|
|
4947
4947
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4948
4948
|
}
|
|
4949
4949
|
var templateObject_1$1M, templateObject_2$1a;
|
|
@@ -5012,7 +5012,7 @@ var ContainerStyles$2 = {
|
|
|
5012
5012
|
};
|
|
5013
5013
|
|
|
5014
5014
|
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"])));
|
|
5015
|
-
var Container$
|
|
5015
|
+
var Container$16 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5016
5016
|
var Input$4 = newStyled.input(templateObject_2$19 || (templateObject_2$19 = __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) {
|
|
5017
5017
|
var disabled = _a.disabled;
|
|
5018
5018
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -5021,7 +5021,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5021
5021
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5022
5022
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5023
5023
|
]; });
|
|
5024
|
-
var StyledLabel$3 = newStyled(Label$
|
|
5024
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5025
5025
|
var theme = _a.theme;
|
|
5026
5026
|
return theme.component.radio.textSize;
|
|
5027
5027
|
}, function (_a) {
|
|
@@ -5035,7 +5035,7 @@ var RadioInput = function (_a) {
|
|
|
5035
5035
|
var value = event.currentTarget.value;
|
|
5036
5036
|
onChange({ value: value, label: label });
|
|
5037
5037
|
};
|
|
5038
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5038
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$16, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
5039
5039
|
};
|
|
5040
5040
|
var templateObject_1$1L, templateObject_2$19, templateObject_3$W;
|
|
5041
5041
|
|
|
@@ -5137,14 +5137,14 @@ var TooltipText = newStyled.div(templateObject_4$G || (templateObject_4$G = __ma
|
|
|
5137
5137
|
var color = _a.color;
|
|
5138
5138
|
return color;
|
|
5139
5139
|
});
|
|
5140
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5141
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5140
|
+
var TopSection = newStyled.div(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5141
|
+
var Title$7 = newStyled.h1(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5142
5142
|
var color = _a.color;
|
|
5143
5143
|
return color;
|
|
5144
5144
|
});
|
|
5145
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5146
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5147
|
-
var templateObject_1$1K, templateObject_2$18, templateObject_3$V, templateObject_4$G, templateObject_5$
|
|
5145
|
+
var IconContainer$5 = newStyled.div(templateObject_7$g || (templateObject_7$g = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5146
|
+
var CloseToolTip = newStyled.button(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
|
|
5147
|
+
var templateObject_1$1K, templateObject_2$18, templateObject_3$V, templateObject_4$G, templateObject_5$s, templateObject_6$n, templateObject_7$g, templateObject_8$d;
|
|
5148
5148
|
|
|
5149
5149
|
var useOnClickOutside = function (ref, handler) {
|
|
5150
5150
|
useEffect(function () {
|
|
@@ -5286,7 +5286,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5286
5286
|
};
|
|
5287
5287
|
}
|
|
5288
5288
|
};
|
|
5289
|
-
var Container$
|
|
5289
|
+
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) {
|
|
5290
5290
|
var backgroundColor = _a.backgroundColor;
|
|
5291
5291
|
return backgroundColor;
|
|
5292
5292
|
}, function (_a) {
|
|
@@ -5323,7 +5323,7 @@ var H3$3 = newStyled.h3(templateObject_2$17 || (templateObject_2$17 = __makeTemp
|
|
|
5323
5323
|
var ClubOfferTag = function (_a) {
|
|
5324
5324
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5325
5325
|
var theme = useTheme();
|
|
5326
|
-
return (jsx$1(Container$
|
|
5326
|
+
return (jsx$1(Container$15, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5327
5327
|
};
|
|
5328
5328
|
var templateObject_1$1J, templateObject_2$17;
|
|
5329
5329
|
|
|
@@ -5356,7 +5356,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5356
5356
|
};
|
|
5357
5357
|
}
|
|
5358
5358
|
};
|
|
5359
|
-
var Container$
|
|
5359
|
+
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) {
|
|
5360
5360
|
var backgroundColor = _a.backgroundColor;
|
|
5361
5361
|
return backgroundColor;
|
|
5362
5362
|
}, function (_a) {
|
|
@@ -5393,7 +5393,7 @@ var H3$2 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5393
5393
|
var DiscountTag = function (_a) {
|
|
5394
5394
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5395
5395
|
var theme = useTheme();
|
|
5396
|
-
return (jsx$1(Container$
|
|
5396
|
+
return (jsx$1(Container$14, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5397
5397
|
};
|
|
5398
5398
|
var templateObject_1$1I, templateObject_2$16;
|
|
5399
5399
|
|
|
@@ -5437,7 +5437,7 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5437
5437
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5438
5438
|
}
|
|
5439
5439
|
};
|
|
5440
|
-
var Container$
|
|
5440
|
+
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"])));
|
|
5441
5441
|
var Price = newStyled.p(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5442
5442
|
var weight = _a.weight;
|
|
5443
5443
|
return (weight ? weight : '400');
|
|
@@ -5493,7 +5493,7 @@ var PriceLabel = function (_a) {
|
|
|
5493
5493
|
: ComponentSize.XSmall;
|
|
5494
5494
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5495
5495
|
};
|
|
5496
|
-
return (jsxs$1(Container$
|
|
5496
|
+
return (jsxs$1(Container$13, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5497
5497
|
};
|
|
5498
5498
|
var templateObject_1$1H, templateObject_2$15, templateObject_3$U;
|
|
5499
5499
|
|
|
@@ -5550,7 +5550,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5550
5550
|
var savetoString = saveto.toFixed(2);
|
|
5551
5551
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5552
5552
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5553
|
-
return (jsxs$1(Container$
|
|
5553
|
+
return (jsxs$1(Container$13, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5554
5554
|
marginTop: '-5px',
|
|
5555
5555
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5556
5556
|
? finalPriceArray[0]
|
|
@@ -5627,7 +5627,7 @@ var PriceLabelV3 = function (_a) {
|
|
|
5627
5627
|
return null;
|
|
5628
5628
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5629
5629
|
};
|
|
5630
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
5630
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$13, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$13, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5631
5631
|
marginTop: '-5px',
|
|
5632
5632
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5633
5633
|
marginTop: '-6px',
|
|
@@ -5665,25 +5665,25 @@ var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$S || (te
|
|
|
5665
5665
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5666
5666
|
});
|
|
5667
5667
|
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5668
|
-
var SubscriptionHeader = newStyled.div(templateObject_5$
|
|
5668
|
+
var SubscriptionHeader = newStyled.div(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5669
5669
|
var theme = _a.theme;
|
|
5670
5670
|
return theme.colors.shades[200].color;
|
|
5671
5671
|
}, function (_a) {
|
|
5672
5672
|
var theme = _a.theme;
|
|
5673
5673
|
return theme.colors.pallete.primary.color;
|
|
5674
5674
|
});
|
|
5675
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5676
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5677
|
-
var BenefitText = newStyled(Text$7)(templateObject_8$
|
|
5678
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5679
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5675
|
+
var BenefitsContainer = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5676
|
+
var Benefit = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
5677
|
+
var BenefitText = newStyled(Text$7)(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5678
|
+
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5679
|
+
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$5 || (templateObject_10$5 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
5680
5680
|
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
5681
5681
|
var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5682
5682
|
var selected = _a.selected, theme = _a.theme;
|
|
5683
5683
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5684
5684
|
});
|
|
5685
|
-
var Container$
|
|
5686
|
-
var templateObject_1$1E, templateObject_2$13, templateObject_3$S, templateObject_4$F, templateObject_5$
|
|
5685
|
+
var Container$12 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5686
|
+
var templateObject_1$1E, templateObject_2$13, templateObject_3$S, templateObject_4$F, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$c, templateObject_9$6, templateObject_10$5, templateObject_11$3, templateObject_12$2, templateObject_13$2;
|
|
5687
5687
|
|
|
5688
5688
|
var radioIds = {
|
|
5689
5689
|
oneTime: {
|
|
@@ -5733,7 +5733,7 @@ var Autoship = function (_a) {
|
|
|
5733
5733
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5734
5734
|
};
|
|
5735
5735
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5736
|
-
return (jsxs$1(Container$
|
|
5736
|
+
return (jsxs$1(Container$12, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5737
5737
|
? benefitsColor.selected
|
|
5738
5738
|
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5739
5739
|
};
|
|
@@ -5762,9 +5762,9 @@ var CustomerDetails = newStyled.div(templateObject_1$1C || (templateObject_1$1C
|
|
|
5762
5762
|
var CustomerInfo = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
5763
5763
|
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"])));
|
|
5764
5764
|
var StarIconContainer = newStyled.div(templateObject_4$E || (templateObject_4$E = __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"])));
|
|
5765
|
-
var Description$2 = newStyled.p(templateObject_5$
|
|
5766
|
-
var ReviewDays = newStyled.span(templateObject_6$
|
|
5767
|
-
var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$E, templateObject_5$
|
|
5765
|
+
var Description$2 = newStyled.p(templateObject_5$q || (templateObject_5$q = __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"])));
|
|
5766
|
+
var ReviewDays = newStyled.span(templateObject_6$l || (templateObject_6$l = __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"])));
|
|
5767
|
+
var templateObject_1$1C, templateObject_2$12, templateObject_3$R, templateObject_4$E, templateObject_5$q, templateObject_6$l;
|
|
5768
5768
|
|
|
5769
5769
|
var NameWithStars = function (_a) {
|
|
5770
5770
|
var name = _a.name, size = _a.size;
|
|
@@ -5782,7 +5782,7 @@ var ResultFeedback = function (_a) {
|
|
|
5782
5782
|
return (jsxs$1(CustomerDetails, { children: [jsx$1(NameWithStars, { name: name, size: size }, void 0), description && jsx$1(Description$2, { children: description }, void 0), reviewDays && jsx$1(ReviewDays, { children: reviewDays }, void 0)] }, void 0));
|
|
5783
5783
|
};
|
|
5784
5784
|
|
|
5785
|
-
var Container$
|
|
5785
|
+
var Container$11 = 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; });
|
|
5786
5786
|
var ImageContainer$5 = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n align-items: center;\n justify-content: center;\n"])));
|
|
5787
5787
|
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; });
|
|
5788
5788
|
var UserInfoText = newStyled.div(templateObject_4$D || (templateObject_4$D = __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) {
|
|
@@ -5870,7 +5870,7 @@ var BeforeAfterCard = function (_a) {
|
|
|
5870
5870
|
var stylesBySize = getStylesBySize$a(size, theme);
|
|
5871
5871
|
var infoText = buildInfoText(name, age, months);
|
|
5872
5872
|
var Component = componentByVariant[variant];
|
|
5873
|
-
return (jsxs$1(Container$
|
|
5873
|
+
return (jsxs$1(Container$11, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$5, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsx$1(Image$3, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(Component, __assign$1({ name: name, size: size, alignCenter: alignCenter, text: infoText }, rest), void 0)] }), void 0));
|
|
5874
5874
|
};
|
|
5875
5875
|
|
|
5876
5876
|
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) {
|
|
@@ -5893,7 +5893,7 @@ var CardBody = function (_a) {
|
|
|
5893
5893
|
};
|
|
5894
5894
|
var templateObject_1$1z;
|
|
5895
5895
|
|
|
5896
|
-
var Container
|
|
5896
|
+
var Container$10 = 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) {
|
|
5897
5897
|
var flex = _a.flex;
|
|
5898
5898
|
return flex &&
|
|
5899
5899
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -5908,7 +5908,7 @@ var Container$$ = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __
|
|
|
5908
5908
|
var Card$1 = function (_a) {
|
|
5909
5909
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
5910
5910
|
var theme = useTheme();
|
|
5911
|
-
return (jsx$1(Container
|
|
5911
|
+
return (jsx$1(Container$10, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
5912
5912
|
};
|
|
5913
5913
|
var Card$2 = Object.assign(Card$1, {
|
|
5914
5914
|
Header: CardHeader,
|
|
@@ -5932,14 +5932,14 @@ var Minimalistic = function (_a) {
|
|
|
5932
5932
|
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(StyledWrapper, { children: [jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(StyledContainer, { children: jsx$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: getMorePayLessText }), void 0) }, void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(StyledContainer, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(TextLabel, __assign$1({ variant: "body", weight: "demi", size: "small", color: "var(--colors-pallete-red-color)" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(YouAreSaving, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5933
5933
|
};
|
|
5934
5934
|
|
|
5935
|
-
var Container
|
|
5935
|
+
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"])));
|
|
5936
5936
|
var Title$6 = newStyled.h1(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
5937
5937
|
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; });
|
|
5938
5938
|
var PriceContainer$2 = newStyled.span(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
5939
5939
|
var Simple = function (_a) {
|
|
5940
5940
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
5941
5941
|
var theme = useTheme();
|
|
5942
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container
|
|
5942
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$$, { children: [jsx$1(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$2, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "var(--colors-pallete-red-color)", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
5943
5943
|
};
|
|
5944
5944
|
var templateObject_1$1w, templateObject_2$$, templateObject_3$O, templateObject_4$B;
|
|
5945
5945
|
|
|
@@ -5948,7 +5948,7 @@ var Bundle = {
|
|
|
5948
5948
|
Simple: Simple,
|
|
5949
5949
|
};
|
|
5950
5950
|
|
|
5951
|
-
var Container$
|
|
5951
|
+
var Container$_ = 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) {
|
|
5952
5952
|
var displayBNPL = _a.displayBNPL;
|
|
5953
5953
|
return (displayBNPL ? 'flex' : 'none');
|
|
5954
5954
|
});
|
|
@@ -5963,7 +5963,7 @@ var BuyNowPayLater = function (_a) {
|
|
|
5963
5963
|
console.error('Icon', iconName, 'not found');
|
|
5964
5964
|
return null;
|
|
5965
5965
|
}
|
|
5966
|
-
return (jsx$1(Container$
|
|
5966
|
+
return (jsx$1(Container$_, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$7, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsx$1(IconWrapper$1, { children: jsx$1(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
5967
5967
|
};
|
|
5968
5968
|
var templateObject_1$1v, templateObject_2$_, templateObject_3$N;
|
|
5969
5969
|
|
|
@@ -5991,11 +5991,11 @@ var Description$1 = function (_a) {
|
|
|
5991
5991
|
};
|
|
5992
5992
|
var templateObject_1$1s;
|
|
5993
5993
|
|
|
5994
|
-
var Container$
|
|
5994
|
+
var Container$Z = 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"); });
|
|
5995
5995
|
var CloseButton$1 = function (_a) {
|
|
5996
5996
|
var onClick = _a.onClick, size = _a.size;
|
|
5997
5997
|
var theme = useTheme();
|
|
5998
|
-
return (jsx$1(Container$
|
|
5998
|
+
return (jsx$1(Container$Z, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsx$1(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
5999
5999
|
};
|
|
6000
6000
|
var templateObject_1$1r;
|
|
6001
6001
|
|
|
@@ -6024,20 +6024,20 @@ var CartProductItem = {
|
|
|
6024
6024
|
CloseButton: CloseButton$1,
|
|
6025
6025
|
};
|
|
6026
6026
|
|
|
6027
|
-
var Container$
|
|
6028
|
-
var MobileContainer = newStyled(Container$
|
|
6027
|
+
var Container$Y = 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"])));
|
|
6028
|
+
var MobileContainer = newStyled(Container$Y)(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n padding: 2px 2px;\n gap: 3px;\n"], ["\n padding: 2px 2px;\n gap: 3px;\n"])));
|
|
6029
6029
|
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"])));
|
|
6030
6030
|
var ClubMembersText = newStyled.span(templateObject_4$A || (templateObject_4$A = __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"])));
|
|
6031
|
-
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$
|
|
6032
|
-
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$
|
|
6033
|
-
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$
|
|
6034
|
-
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$
|
|
6031
|
+
var MobileDollarPart = newStyled(DollarPart)(templateObject_5$p || (templateObject_5$p = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6032
|
+
var MobileClubMembersText = newStyled(ClubMembersText)(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n font-size: 10px;\n"], ["\n font-size: 10px;\n"])));
|
|
6033
|
+
var DesktopDollarPart = newStyled(DollarPart)(templateObject_7$e || (templateObject_7$e = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6034
|
+
var DesktopClubMembersText = newStyled(ClubMembersText)(templateObject_8$b || (templateObject_8$b = __makeTemplateObject(["\n font-size: 13px;\n"], ["\n font-size: 13px;\n"])));
|
|
6035
6035
|
var ClubPriceLabel = function (_a) {
|
|
6036
6036
|
var clubPrice = _a.clubPrice;
|
|
6037
6037
|
var isMobile = useWindowDimensions().isMobile;
|
|
6038
|
-
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$
|
|
6038
|
+
return (jsx$1(Fragment$2, { children: isMobile ? (jsxs$1(MobileContainer, { children: [jsx$1(MobileDollarPart, { children: clubPrice }, void 0), jsx$1(MobileClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) : (jsxs$1(Container$Y, { children: [jsx$1(DesktopDollarPart, { children: clubPrice }, void 0), jsx$1(DesktopClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0)) }, void 0));
|
|
6039
6039
|
};
|
|
6040
|
-
var templateObject_1$1p, templateObject_2$Z, templateObject_3$M, templateObject_4$A, templateObject_5$
|
|
6040
|
+
var templateObject_1$1p, templateObject_2$Z, templateObject_3$M, templateObject_4$A, templateObject_5$p, templateObject_6$k, templateObject_7$e, templateObject_8$b;
|
|
6041
6041
|
|
|
6042
6042
|
var Spacing = function (_a) {
|
|
6043
6043
|
var size = _a.size, _b = _a.type, type = _b === void 0 ? 'block' : _b, children = _a.children, styleProp = _a.style;
|
|
@@ -6045,7 +6045,7 @@ var Spacing = function (_a) {
|
|
|
6045
6045
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
6046
6046
|
};
|
|
6047
6047
|
|
|
6048
|
-
var Container$
|
|
6048
|
+
var Container$X = 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"])));
|
|
6049
6049
|
var Content$2 = newStyled('div')(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
6050
6050
|
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"])));
|
|
6051
6051
|
var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __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) {
|
|
@@ -6057,11 +6057,11 @@ var Bar$2 = newStyled('div')(templateObject_4$z || (templateObject_4$z = __makeT
|
|
|
6057
6057
|
});
|
|
6058
6058
|
var StrengthBars = function (_a) {
|
|
6059
6059
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
6060
|
-
return (jsxs$1(Container$
|
|
6060
|
+
return (jsxs$1(Container$X, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer$1, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar$2, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content$2, { children: supportText }, void 0)] }), void 0));
|
|
6061
6061
|
};
|
|
6062
6062
|
var templateObject_1$1o, templateObject_2$Y, templateObject_3$L, templateObject_4$z;
|
|
6063
6063
|
|
|
6064
|
-
var Container$
|
|
6064
|
+
var Container$W = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6065
6065
|
var templateObject_1$1n;
|
|
6066
6066
|
|
|
6067
6067
|
var StarContainer = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
@@ -6076,7 +6076,7 @@ var StarList = function (_a) {
|
|
|
6076
6076
|
width: theme.component.stars.element[size].width,
|
|
6077
6077
|
height: theme.component.stars.element[size].height,
|
|
6078
6078
|
};
|
|
6079
|
-
return (jsx$1(Container$
|
|
6079
|
+
return (jsx$1(Container$W, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6080
6080
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6081
6081
|
}) }, void 0));
|
|
6082
6082
|
};
|
|
@@ -6121,7 +6121,7 @@ var LabelStyles = {
|
|
|
6121
6121
|
});
|
|
6122
6122
|
},
|
|
6123
6123
|
};
|
|
6124
|
-
var Container$
|
|
6124
|
+
var Container$V = newStyled.a(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
6125
6125
|
var templateObject_1$1l;
|
|
6126
6126
|
|
|
6127
6127
|
var CustomLabel = newStyled.div(function (_a) {
|
|
@@ -6163,7 +6163,7 @@ var Rating = function (_a) {
|
|
|
6163
6163
|
href: reviewsContainerId,
|
|
6164
6164
|
}
|
|
6165
6165
|
: {};
|
|
6166
|
-
return (jsxs$1(Container$
|
|
6166
|
+
return (jsxs$1(Container$V, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6167
6167
|
};
|
|
6168
6168
|
var templateObject_1$1k;
|
|
6169
6169
|
|
|
@@ -6171,7 +6171,7 @@ var RegularPriceTagSpan = newStyled.span(templateObject_1$1j || (templateObject_
|
|
|
6171
6171
|
var ClubPriceTagSpan = newStyled.span(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6172
6172
|
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"])));
|
|
6173
6173
|
var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6174
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$
|
|
6174
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6175
6175
|
var RegularPriceTag = function () {
|
|
6176
6176
|
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6177
6177
|
};
|
|
@@ -6220,11 +6220,11 @@ var PriceLabelV4 = function (_a) {
|
|
|
6220
6220
|
: ComponentSize.XSmall;
|
|
6221
6221
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6222
6222
|
};
|
|
6223
|
-
return (jsxs$1(Container$
|
|
6223
|
+
return (jsxs$1(Container$13, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6224
6224
|
? finalPriceArray[0]
|
|
6225
6225
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6226
6226
|
};
|
|
6227
|
-
var templateObject_1$1j, templateObject_2$X, templateObject_3$K, templateObject_4$y, templateObject_5$
|
|
6227
|
+
var templateObject_1$1j, templateObject_2$X, templateObject_3$K, templateObject_4$y, templateObject_5$o;
|
|
6228
6228
|
|
|
6229
6229
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6230
6230
|
var width = _a.width, height = _a.height;
|
|
@@ -6235,7 +6235,7 @@ var ImageContainer$4 = newStyled.div(function (_a) {
|
|
|
6235
6235
|
});
|
|
6236
6236
|
});
|
|
6237
6237
|
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"])));
|
|
6238
|
-
var Container$
|
|
6238
|
+
var Container$U = 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"])));
|
|
6239
6239
|
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"])));
|
|
6240
6240
|
var Title$4 = 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; });
|
|
6241
6241
|
var getStylesBySize$9 = function (size) {
|
|
@@ -6263,15 +6263,15 @@ var getStylesBySize$9 = function (size) {
|
|
|
6263
6263
|
};
|
|
6264
6264
|
}
|
|
6265
6265
|
};
|
|
6266
|
-
var TopTagContainer$6 = newStyled.div(templateObject_5$
|
|
6266
|
+
var TopTagContainer$6 = newStyled.div(templateObject_5$n || (templateObject_5$n = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6267
6267
|
var style = _a.style;
|
|
6268
6268
|
return style.width;
|
|
6269
6269
|
});
|
|
6270
|
-
var BottomTagContainer$6 = newStyled.div(templateObject_6$
|
|
6270
|
+
var BottomTagContainer$6 = newStyled.div(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6271
6271
|
var style = _a.style;
|
|
6272
6272
|
return style.width;
|
|
6273
6273
|
});
|
|
6274
|
-
var MarginTopContainer$1 = newStyled.div(templateObject_7$
|
|
6274
|
+
var MarginTopContainer$1 = newStyled.div(templateObject_7$d || (templateObject_7$d = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6275
6275
|
var ProductItemMobile = function (_a) {
|
|
6276
6276
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
6277
6277
|
display: false,
|
|
@@ -6328,9 +6328,9 @@ var ProductItemMobile = function (_a) {
|
|
|
6328
6328
|
return jsx(Fragment, {}, void 0);
|
|
6329
6329
|
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
6330
6330
|
};
|
|
6331
|
-
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6331
|
+
return (jsxs(ProdCardContainer$1, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$U, __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$U, __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));
|
|
6332
6332
|
};
|
|
6333
|
-
var templateObject_1$1i, templateObject_2$W, templateObject_3$J, templateObject_4$x, templateObject_5$
|
|
6333
|
+
var templateObject_1$1i, templateObject_2$W, templateObject_3$J, templateObject_4$x, templateObject_5$n, templateObject_6$j, templateObject_7$d;
|
|
6334
6334
|
|
|
6335
6335
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
6336
6336
|
var width = _a.width, height = _a.height;
|
|
@@ -6341,7 +6341,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
6341
6341
|
});
|
|
6342
6342
|
});
|
|
6343
6343
|
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; });
|
|
6344
|
-
var Container$
|
|
6344
|
+
var Container$T = newStyled.a(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
6345
6345
|
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"])));
|
|
6346
6346
|
var Title$3 = newStyled.p(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
6347
6347
|
var getStylesBySize$8 = function (size) {
|
|
@@ -6369,15 +6369,15 @@ var getStylesBySize$8 = function (size) {
|
|
|
6369
6369
|
};
|
|
6370
6370
|
}
|
|
6371
6371
|
};
|
|
6372
|
-
var TopTagContainer$5 = newStyled.div(templateObject_5$
|
|
6372
|
+
var TopTagContainer$5 = newStyled.div(templateObject_5$m || (templateObject_5$m = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6373
6373
|
var style = _a.style;
|
|
6374
6374
|
return style.width;
|
|
6375
6375
|
});
|
|
6376
|
-
var BottomTagContainer$5 = newStyled.div(templateObject_6$
|
|
6376
|
+
var BottomTagContainer$5 = newStyled.div(templateObject_6$i || (templateObject_6$i = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
6377
6377
|
var style = _a.style;
|
|
6378
6378
|
return style.width;
|
|
6379
6379
|
});
|
|
6380
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
6380
|
+
var MarginTopContainer = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
6381
6381
|
var ProductItemTK = function (_a) {
|
|
6382
6382
|
var title = _a.title, titleStyle = _a.titleStyle, _b = _a.hasSpacing, hasSpacing = _b === void 0 ? true : _b, textContainerGap = _a.textContainerGap, customSizeRating = _a.customSizeRating, image = _a.image, ImageBorderRadius = _a.ImageBorderRadius, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _c = _a.alignName, alignName = _c === void 0 ? 'center' : _c, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _d = _a.priceDisplayType, priceDisplayType = _d === void 0 ? 'default' : _d, originalPriceStyled = _a.originalPriceStyled, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _e = _a.noFollow, noFollow = _e === void 0 ? false : _e, _f = _a.colorPicker, colorPicker = _f === void 0 ? {
|
|
6383
6383
|
display: false,
|
|
@@ -6421,19 +6421,19 @@ var ProductItemTK = function (_a) {
|
|
|
6421
6421
|
: undefined }, void 0));
|
|
6422
6422
|
};
|
|
6423
6423
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
6424
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
6424
|
+
return (jsxs(ProdCardContainer, __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$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$5, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, borderRadius: ImageBorderRadius, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$T, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center', gap: textContainerGap } }, { children: [hasSpacing && jsx(Spacing, { size: space }, void 0), titleStyle ? (
|
|
6425
6425
|
// @ts-ignore
|
|
6426
6426
|
jsx(Text$7, __assign$1({ variant: titleStyle.variant, weight: titleStyle.weight, size: titleStyle.size, style: {
|
|
6427
6427
|
textAlign: showClubPriceLabel ? 'left' : alignName,
|
|
6428
6428
|
marginTop: hasSpacing ? undefined : textContainerGap,
|
|
6429
6429
|
} }, { 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));
|
|
6430
6430
|
};
|
|
6431
|
-
var templateObject_1$1h, templateObject_2$V, templateObject_3$I, templateObject_4$w, templateObject_5$
|
|
6431
|
+
var templateObject_1$1h, templateObject_2$V, templateObject_3$I, templateObject_4$w, templateObject_5$m, templateObject_6$i, templateObject_7$c;
|
|
6432
6432
|
|
|
6433
|
-
var Container$
|
|
6433
|
+
var Container$S = 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"])));
|
|
6434
6434
|
function withProductGrid(ProductItemComponent, data) {
|
|
6435
6435
|
function WithProductGrid(props) {
|
|
6436
|
-
return (jsx$1(Container$
|
|
6436
|
+
return (jsx$1(Container$S, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
6437
6437
|
}
|
|
6438
6438
|
/* istanbul ignore next */
|
|
6439
6439
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
@@ -6491,8 +6491,8 @@ var CustomRadioGroup = newStyled(lt)(templateObject_1$1f || (templateObject_1$1f
|
|
|
6491
6491
|
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6492
6492
|
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"])));
|
|
6493
6493
|
var Span = newStyled.span(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6494
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6495
|
-
var Label$
|
|
6494
|
+
var OptionsContainer = newStyled.div(templateObject_5$l || (templateObject_5$l = __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"])));
|
|
6495
|
+
var Label$3 = function (_a) {
|
|
6496
6496
|
var label = _a.label, values = _a.values;
|
|
6497
6497
|
return (jsxs$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
6498
6498
|
};
|
|
@@ -6505,13 +6505,13 @@ var ColorRadioGroup = function (_a) {
|
|
|
6505
6505
|
return (jsx$1(CustomRadioGroup, __assign$1({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6506
6506
|
};
|
|
6507
6507
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6508
|
-
Label: Label$
|
|
6508
|
+
Label: Label$3,
|
|
6509
6509
|
Option: Option,
|
|
6510
6510
|
OptionsContainer: OptionsContainer,
|
|
6511
6511
|
});
|
|
6512
|
-
var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$v, templateObject_5$
|
|
6512
|
+
var templateObject_1$1f, templateObject_2$U, templateObject_3$H, templateObject_4$v, templateObject_5$l;
|
|
6513
6513
|
|
|
6514
|
-
var Container$
|
|
6514
|
+
var Container$R = 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) {
|
|
6515
6515
|
var borderColor = _a.borderColor;
|
|
6516
6516
|
return borderColor;
|
|
6517
6517
|
}, function (_a) {
|
|
@@ -6523,7 +6523,7 @@ var PatternSelector = function (_a) {
|
|
|
6523
6523
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
6524
6524
|
var theme = useTheme();
|
|
6525
6525
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6526
|
-
return (jsx$1(Container$
|
|
6526
|
+
return (jsx$1(Container$R, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6527
6527
|
};
|
|
6528
6528
|
var templateObject_1$1e, templateObject_2$T;
|
|
6529
6529
|
|
|
@@ -6591,14 +6591,14 @@ var Row$2 = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemp
|
|
|
6591
6591
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
6592
6592
|
});
|
|
6593
6593
|
var H5 = newStyled.h5(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6594
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
6595
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
6594
|
+
var H3$1 = newStyled.h3(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6595
|
+
var FreeShipping = newStyled.span(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
6596
6596
|
var CrossSellCheckbox = function (_a) {
|
|
6597
6597
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
6598
6598
|
var theme = useTheme();
|
|
6599
6599
|
return (jsxs$1(Wrapper$5, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row$2, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$3, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col$1, { children: [jsx$1(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
6600
6600
|
};
|
|
6601
|
-
var templateObject_1$1d, templateObject_2$S, templateObject_3$G, templateObject_4$u, templateObject_5$
|
|
6601
|
+
var templateObject_1$1d, templateObject_2$S, templateObject_3$G, templateObject_4$u, templateObject_5$k, templateObject_6$h;
|
|
6602
6602
|
|
|
6603
6603
|
var index$1 = /*#__PURE__*/Object.freeze({
|
|
6604
6604
|
__proto__: null,
|
|
@@ -6716,14 +6716,14 @@ var ButtonSecondaryOutline = function (props) {
|
|
|
6716
6716
|
} }), void 0));
|
|
6717
6717
|
};
|
|
6718
6718
|
|
|
6719
|
-
var Container$
|
|
6719
|
+
var Container$Q = 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; });
|
|
6720
6720
|
var IconContainer$4 = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
6721
6721
|
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; });
|
|
6722
6722
|
var Details = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
6723
6723
|
var Note = function (_a) {
|
|
6724
6724
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
6725
6725
|
var theme = useTheme();
|
|
6726
|
-
return (jsxs$1(Container$
|
|
6726
|
+
return (jsxs$1(Container$Q, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$4, { children: jsx$1(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$3, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
6727
6727
|
};
|
|
6728
6728
|
var templateObject_1$1b, templateObject_2$Q, templateObject_3$F, templateObject_4$t;
|
|
6729
6729
|
|
|
@@ -6742,18 +6742,18 @@ var Col = newStyled.div(templateObject_4$s || (templateObject_4$s = __makeTempla
|
|
|
6742
6742
|
textAlign: ['center', 'inherit'],
|
|
6743
6743
|
width: ['100%', 'inherit'],
|
|
6744
6744
|
}));
|
|
6745
|
-
var IconContainer$3 = newStyled.div(templateObject_5$
|
|
6745
|
+
var IconContainer$3 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
6746
6746
|
marginRight: ['0', '0.438rem'],
|
|
6747
6747
|
marginBottom: ['10px', '0'],
|
|
6748
6748
|
width: ['auto', '1.5rem'],
|
|
6749
6749
|
}));
|
|
6750
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
6750
|
+
var SectionTitle = newStyled.h1(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
6751
6751
|
display: ['block', 'flex'],
|
|
6752
6752
|
}), function (_a) {
|
|
6753
6753
|
var theme = _a.theme;
|
|
6754
6754
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
6755
6755
|
});
|
|
6756
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
6756
|
+
var SectionDetails = newStyled.p(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
6757
6757
|
var theme = _a.theme;
|
|
6758
6758
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
6759
6759
|
}, function (_a) {
|
|
@@ -6764,13 +6764,13 @@ var SectionDetails = newStyled.p(templateObject_7$a || (templateObject_7$a = __m
|
|
|
6764
6764
|
})
|
|
6765
6765
|
: '';
|
|
6766
6766
|
});
|
|
6767
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
6767
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
6768
6768
|
var DeliveryDetails = function (_a) {
|
|
6769
6769
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
6770
6770
|
var theme = useTheme();
|
|
6771
6771
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$3, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
6772
6772
|
};
|
|
6773
|
-
var templateObject_1$1a, templateObject_2$P, templateObject_3$E, templateObject_4$s, templateObject_5$
|
|
6773
|
+
var templateObject_1$1a, templateObject_2$P, templateObject_3$E, templateObject_4$s, templateObject_5$j, templateObject_6$g, templateObject_7$b, templateObject_8$a;
|
|
6774
6774
|
|
|
6775
6775
|
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) {
|
|
6776
6776
|
var top = _a.top;
|
|
@@ -6837,9 +6837,9 @@ var List = newStyled.ul(templateObject_1$18 || (templateObject_1$18 = __makeTemp
|
|
|
6837
6837
|
var Item$2 = newStyled.li(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
6838
6838
|
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"])));
|
|
6839
6839
|
var ArrowContainer$1 = newStyled.div(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
6840
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
6841
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
6842
|
-
var templateObject_1$18, templateObject_2$N, templateObject_3$D, templateObject_4$r, templateObject_5$
|
|
6840
|
+
var StyledDropdown = newStyled.ul(templateObject_5$i || (templateObject_5$i = __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; });
|
|
6841
|
+
var DropdownItem = newStyled.li(templateObject_6$f || (templateObject_6$f = __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; });
|
|
6842
|
+
var templateObject_1$18, templateObject_2$N, templateObject_3$D, templateObject_4$r, templateObject_5$i, templateObject_6$f;
|
|
6843
6843
|
|
|
6844
6844
|
var DropdownListIcons = function (_a) {
|
|
6845
6845
|
var items = _a.items;
|
|
@@ -6856,9 +6856,9 @@ var DropdownContainer = newStyled.div(templateObject_1$17 || (templateObject_1$1
|
|
|
6856
6856
|
var DropdownLabel = newStyled.div(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
6857
6857
|
var SizeLabel = newStyled.span(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
6858
6858
|
var DetailLabel = newStyled.span(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
6859
|
-
var DropdownOptions = newStyled.div(templateObject_5$
|
|
6860
|
-
var DropdownOption = newStyled.div(templateObject_6$
|
|
6861
|
-
var templateObject_1$17, templateObject_2$M, templateObject_3$C, templateObject_4$q, templateObject_5$
|
|
6859
|
+
var DropdownOptions = newStyled.div(templateObject_5$h || (templateObject_5$h = __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"])));
|
|
6860
|
+
var DropdownOption = newStyled.div(templateObject_6$e || (templateObject_6$e = __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"])));
|
|
6861
|
+
var templateObject_1$17, templateObject_2$M, templateObject_3$C, templateObject_4$q, templateObject_5$h, templateObject_6$e;
|
|
6862
6862
|
|
|
6863
6863
|
var SizeDropdown = function (_a) {
|
|
6864
6864
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -6929,12 +6929,12 @@ function FilteringDropdown(_a) {
|
|
|
6929
6929
|
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; });
|
|
6930
6930
|
var H3 = newStyled.h3(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
6931
6931
|
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"])));
|
|
6932
|
-
var Container$
|
|
6932
|
+
var Container$P = newStyled.div(templateObject_4$o || (templateObject_4$o = __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'); });
|
|
6933
6933
|
var Accordion = function (_a) {
|
|
6934
6934
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
6935
6935
|
var theme = useTheme();
|
|
6936
6936
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
6937
|
-
return (jsxs$1(Container$
|
|
6937
|
+
return (jsxs$1(Container$P, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxs$1(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsx$1(H3, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsx$1(ArrowContainer, { children: isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsx$1("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
6938
6938
|
};
|
|
6939
6939
|
var templateObject_1$15, templateObject_2$K, templateObject_3$A, templateObject_4$o;
|
|
6940
6940
|
|
|
@@ -6942,13 +6942,13 @@ var SectionContent = newStyled.div(templateObject_1$14 || (templateObject_1$14 =
|
|
|
6942
6942
|
var Header$1 = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
6943
6943
|
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"])));
|
|
6944
6944
|
var MobileIconsContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __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"])));
|
|
6945
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
6946
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
6947
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
6948
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
6949
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
6950
|
-
var MobileClearContainer = newStyled.div(templateObject_10$
|
|
6951
|
-
var templateObject_1$14, templateObject_2$J, templateObject_3$z, templateObject_4$n, templateObject_5$
|
|
6945
|
+
var H4 = newStyled.h4(templateObject_5$g || (templateObject_5$g = __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; });
|
|
6946
|
+
var FilterLink = newStyled.a(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6947
|
+
var OptionContainer = newStyled.div(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"], ["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\n display: ", ";\n }\n @media (min-width: 768px) and (max-width: 992px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); }, function (props) { return (props.showInTablet ? 'block' : 'none'); });
|
|
6948
|
+
var ClearAll = newStyled.span(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
6949
|
+
var MobileFooter = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
6950
|
+
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"])));
|
|
6951
|
+
var templateObject_1$14, templateObject_2$J, templateObject_3$z, templateObject_4$n, templateObject_5$g, templateObject_6$d, templateObject_7$a, templateObject_8$9, templateObject_9$5, templateObject_10$4;
|
|
6952
6952
|
|
|
6953
6953
|
var getStylesBySize$7 = function (size, theme) {
|
|
6954
6954
|
switch (size) {
|
|
@@ -7160,7 +7160,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
7160
7160
|
};
|
|
7161
7161
|
|
|
7162
7162
|
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"])));
|
|
7163
|
-
var Container$
|
|
7163
|
+
var Container$O = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n"])));
|
|
7164
7164
|
var FitGuarantee = function (_a) {
|
|
7165
7165
|
var _b;
|
|
7166
7166
|
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;
|
|
@@ -7171,7 +7171,7 @@ var FitGuarantee = function (_a) {
|
|
|
7171
7171
|
console.error('Icon', iconName, 'not found');
|
|
7172
7172
|
return null;
|
|
7173
7173
|
}
|
|
7174
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$
|
|
7174
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$4, { children: [jsx$1(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section"), style: { justifyContent: 'center' } }, { children: jsx$1(IconComponent, { width: iconWidth, height: iconHeight }, void 0) }), void 0), jsxs$1(Container$O, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", style: {
|
|
7175
7175
|
margin: '0.1rem 0',
|
|
7176
7176
|
width: '100%',
|
|
7177
7177
|
fontSize: theme.component.text.fitGuarantee.titleFontSize,
|
|
@@ -7180,7 +7180,7 @@ var FitGuarantee = function (_a) {
|
|
|
7180
7180
|
};
|
|
7181
7181
|
var templateObject_1$12, templateObject_2$H;
|
|
7182
7182
|
|
|
7183
|
-
var Container$
|
|
7183
|
+
var Container$N = 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"])));
|
|
7184
7184
|
var P$2 = newStyled.p(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
7185
7185
|
var textButtonStyles$1 = function (theme) { return ({
|
|
7186
7186
|
border: 'none',
|
|
@@ -7194,7 +7194,7 @@ var textButtonStyles$1 = function (theme) { return ({
|
|
|
7194
7194
|
var FitPredictor = function (_a) {
|
|
7195
7195
|
var onClick = _a.onClick;
|
|
7196
7196
|
var theme = useTheme();
|
|
7197
|
-
return (jsxs(Container$
|
|
7197
|
+
return (jsxs(Container$N, __assign$1({ theme: theme }, { children: [jsx(Container$N, { 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));
|
|
7198
7198
|
};
|
|
7199
7199
|
var templateObject_1$11, templateObject_2$G;
|
|
7200
7200
|
|
|
@@ -11525,7 +11525,7 @@ var templateObject_1$$;
|
|
|
11525
11525
|
|
|
11526
11526
|
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"])));
|
|
11527
11527
|
var verticalStyles = css(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"], ["\n grid-row-gap: 20px;\n overflow: auto;\n grid-area: 1/1;\n"])));
|
|
11528
|
-
var Container$
|
|
11528
|
+
var Container$M = 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) {
|
|
11529
11529
|
var position = _a.position;
|
|
11530
11530
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
11531
11531
|
}, function (_a) {
|
|
@@ -11534,10 +11534,10 @@ var Container$L = newStyled.div(templateObject_3$x || (templateObject_3$x = __ma
|
|
|
11534
11534
|
"\n scroll-behavior: smooth;\n &::-webkit-scrollbar {\n visibility: hidden;\n }\n ";
|
|
11535
11535
|
});
|
|
11536
11536
|
var Button$5 = newStyled.button(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
11537
|
-
var ArrowsContainer = newStyled.div(templateObject_5$
|
|
11538
|
-
var ArrowBaseStyles = newStyled.div(templateObject_6$
|
|
11539
|
-
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$
|
|
11540
|
-
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$
|
|
11537
|
+
var ArrowsContainer = newStyled.div(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"], ["\n display: flex;\n width: 65px;\n position: relative;\n left: 6px;\n"])));
|
|
11538
|
+
var ArrowBaseStyles = newStyled.div(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"], ["\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n color: #2a2a2a;\n border: 0;\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n background-color: #ececea;\n box-sizing: border-box;\n cursor: pointer;\n float: left;\n height: 20px;\n position: relative;\n width: 50%;\n background-position: 50%;\n background-repeat: no-repeat;\n background-size: 11px;\n display: block;\n"])));
|
|
11539
|
+
var ArrowPrev = newStyled(ArrowBaseStyles)(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"], ["\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/up-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 0 4px;\n"])));
|
|
11540
|
+
var ArrowNext = newStyled(ArrowBaseStyles)(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"], ["\n grid-column: 1;\n background-image: url(https://truekind.com/cdn/shop/t/340/assets/down-arrow.svg?v=48788596234827096911690908673);\n border-radius: 0 0 4px 0;\n border-left: 1px solid rgba(42, 42, 42, 0.1);\n"])));
|
|
11541
11541
|
var ImagePreviewList = function (_a) {
|
|
11542
11542
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor, hasOverflowArrows = _a.hasOverflowArrows;
|
|
11543
11543
|
var handleScrollVerticalPrev = function () {
|
|
@@ -11548,13 +11548,13 @@ var ImagePreviewList = function (_a) {
|
|
|
11548
11548
|
var element = document.querySelector(".imageListContainer");
|
|
11549
11549
|
element.scrollBy(0, 200);
|
|
11550
11550
|
};
|
|
11551
|
-
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$
|
|
11551
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(Container$M, __assign$1({ "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
11552
11552
|
arrowWidth: 0.75,
|
|
11553
11553
|
arrowHeight: 1.25,
|
|
11554
11554
|
arrowPadding: 1.625,
|
|
11555
11555
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$5, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxs$1(ArrowsContainer, { children: [jsx$1(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsx$1(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
|
|
11556
11556
|
};
|
|
11557
|
-
var templateObject_1$_, templateObject_2$F, templateObject_3$x, templateObject_4$m, templateObject_5$
|
|
11557
|
+
var templateObject_1$_, templateObject_2$F, templateObject_3$x, templateObject_4$m, templateObject_5$f, templateObject_6$c, templateObject_7$9, templateObject_8$8;
|
|
11558
11558
|
|
|
11559
11559
|
var propTypes = {exports: {}};
|
|
11560
11560
|
|
|
@@ -13156,12 +13156,12 @@ var ProgressBar$1 = function (_a) {
|
|
|
13156
13156
|
return (jsx$1(ProgressContainer, __assign$1({ "data-testid": "progress-bar", hide: hide }, { children: jsx$1(ProgressFiller, { progress: progress }, void 0) }), void 0));
|
|
13157
13157
|
};
|
|
13158
13158
|
|
|
13159
|
-
var Container$
|
|
13159
|
+
var Container$L = 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"])));
|
|
13160
13160
|
var HTMLVideo = newStyled.video(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n width: 100%;\n max-width: 530px;\n"], ["\n width: 100%;\n max-width: 530px;\n"])));
|
|
13161
13161
|
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"])));
|
|
13162
13162
|
var PlayContainer = newStyled.div(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n display: flex;\n position: absolute;\n align-items: center;\n justify-content: center;\n"])));
|
|
13163
|
-
var PauseContainer = newStyled.div(templateObject_5$
|
|
13164
|
-
var templateObject_1$Y, templateObject_2$D, templateObject_3$w, templateObject_4$l, templateObject_5$
|
|
13163
|
+
var PauseContainer = newStyled.div(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"], ["\n z-index: 1;\n width: 100%;\n height: 92%;\n position: absolute;\n"])));
|
|
13164
|
+
var templateObject_1$Y, templateObject_2$D, templateObject_3$w, templateObject_4$l, templateObject_5$e;
|
|
13165
13165
|
|
|
13166
13166
|
var Video$1 = function (_a) {
|
|
13167
13167
|
var _b, _c, _d, _e;
|
|
@@ -13200,10 +13200,10 @@ var Video$1 = function (_a) {
|
|
|
13200
13200
|
setVideoProgress(videoRef.current.currentTime);
|
|
13201
13201
|
}
|
|
13202
13202
|
};
|
|
13203
|
-
return (jsxs$1(Container$
|
|
13203
|
+
return (jsxs$1(Container$L, { children: [!isLoading && jsx$1(ProgressBar$1, { progress: progress, hide: hideProgressBar }, void 0), !isPlaying ? (jsx$1(PlayContainer, __assign$1({ "data-testid": "play", onClick: handlePlayClick }, { children: isStarted && jsx$1(PlayIcon, {}, void 0) }), void 0)) : (jsx$1(PauseContainer, { "data-testid": "pause", onClick: handlePauseClick }, void 0)), jsxs$1(HTMLVideo, __assign$1({ "data-testid": "video", poster: thumbnail, playsInline: true, ref: videoRef, onTimeUpdate: onTimeUpdate, onCanPlay: function () { return setIsLoading(false); }, onLoadedData: function () { return setIsLoading(false); }, onPause: function () { return setIsPlaying(false); }, onPlaying: function () { return setIsPlaying(true); } }, { children: [jsx$1("track", { kind: "captions" }, void 0), jsx$1("source", { src: source }, void 0)] }), void 0)] }, void 0));
|
|
13204
13204
|
};
|
|
13205
13205
|
|
|
13206
|
-
var Container$
|
|
13206
|
+
var Container$K = 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) {
|
|
13207
13207
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13208
13208
|
return borderRadiusVariant &&
|
|
13209
13209
|
"\n border-radius: 40px;\n ";
|
|
@@ -13216,14 +13216,14 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
13216
13216
|
var content = _a.content, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
13217
13217
|
var source = content === null || content === void 0 ? void 0 : content.url;
|
|
13218
13218
|
var isVideo = (_b = content === null || content === void 0 ? void 0 : content.isVideo) !== null && _b !== void 0 ? _b : false;
|
|
13219
|
-
return (jsxs$1(Container$
|
|
13219
|
+
return (jsxs$1(Container$K, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!isVideo && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: source, zoomSrc: source, zoomType: "hover", imgAttributes: {
|
|
13220
13220
|
alt: content.alt,
|
|
13221
13221
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
13222
13222
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$4, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$4, { children: bottomTag }, void 0)] }, void 0)), isVideo && jsx$1(Video$1, { source: source, thumbnail: content === null || content === void 0 ? void 0 : content.thumbnailUrl }, void 0), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
13223
13223
|
};
|
|
13224
13224
|
var templateObject_1$X, templateObject_2$C, templateObject_3$v, templateObject_4$k;
|
|
13225
13225
|
|
|
13226
|
-
var Container$
|
|
13226
|
+
var Container$J = 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"])));
|
|
13227
13227
|
var ProductGallery = function (_a) {
|
|
13228
13228
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d;
|
|
13229
13229
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -13231,7 +13231,7 @@ var ProductGallery = function (_a) {
|
|
|
13231
13231
|
useEffect(function () {
|
|
13232
13232
|
setSelectedImage(initialValue);
|
|
13233
13233
|
}, [initialValue]);
|
|
13234
|
-
return (jsxs$1(Container$
|
|
13234
|
+
return (jsxs$1(Container$J, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
13235
13235
|
setSelectedImage(value);
|
|
13236
13236
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsx$1(ImageProductWithTags$1, { content: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
13237
13237
|
};
|
|
@@ -13256,7 +13256,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
13256
13256
|
};
|
|
13257
13257
|
}
|
|
13258
13258
|
};
|
|
13259
|
-
var Container$
|
|
13259
|
+
var Container$I = 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) {
|
|
13260
13260
|
var backgroundColor = _a.backgroundColor;
|
|
13261
13261
|
return backgroundColor;
|
|
13262
13262
|
}, function (_a) {
|
|
@@ -13284,7 +13284,7 @@ var Container$H = newStyled.div(templateObject_1$V || (templateObject_1$V = __ma
|
|
|
13284
13284
|
var IconButton = function (_a) {
|
|
13285
13285
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
13286
13286
|
var theme = useTheme();
|
|
13287
|
-
return (jsx$1(Container$
|
|
13287
|
+
return (jsx$1(Container$I, __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));
|
|
13288
13288
|
};
|
|
13289
13289
|
var templateObject_1$V;
|
|
13290
13290
|
|
|
@@ -13299,7 +13299,7 @@ var PaypalButton = function (_a) {
|
|
|
13299
13299
|
};
|
|
13300
13300
|
var templateObject_1$U;
|
|
13301
13301
|
|
|
13302
|
-
var Container$
|
|
13302
|
+
var Container$H = newStyled.div(function (props) { return ({
|
|
13303
13303
|
height: 'auto',
|
|
13304
13304
|
textAlign: 'center',
|
|
13305
13305
|
justifyContent: 'center',
|
|
@@ -13349,10 +13349,10 @@ var IconsWithTitle = function (_a) {
|
|
|
13349
13349
|
textAlign: 'center',
|
|
13350
13350
|
lineHeight: '18px',
|
|
13351
13351
|
};
|
|
13352
|
-
return (jsx$1(Fragment$2, { children: jsxs$1(Container$
|
|
13352
|
+
return (jsx$1(Fragment$2, { children: jsxs$1(Container$H, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$7, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
13353
13353
|
};
|
|
13354
13354
|
|
|
13355
|
-
var Container$
|
|
13355
|
+
var Container$G = 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'); });
|
|
13356
13356
|
var ImageContainer$2 = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
13357
13357
|
var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
13358
13358
|
var titlePosition = _a.titlePosition;
|
|
@@ -13362,11 +13362,11 @@ var StyledTitle = newStyled.div(templateObject_3$u || (templateObject_3$u = __ma
|
|
|
13362
13362
|
var ImageCardWithDescription = function (_a) {
|
|
13363
13363
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
13364
13364
|
var isMobile = useWindowDimensions().isMobile;
|
|
13365
|
-
return (jsxs$1(Container$
|
|
13365
|
+
return (jsxs$1(Container$G, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image$3, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsx$1(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsx$1(Text$7, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$7, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
13366
13366
|
};
|
|
13367
13367
|
var templateObject_1$T, templateObject_2$B, templateObject_3$u;
|
|
13368
13368
|
|
|
13369
|
-
var Label$
|
|
13369
|
+
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) {
|
|
13370
13370
|
var color = _a.color;
|
|
13371
13371
|
return color;
|
|
13372
13372
|
});
|
|
@@ -13377,7 +13377,7 @@ var MandatoryIcon = newStyled.span(templateObject_2$A || (templateObject_2$A = _
|
|
|
13377
13377
|
var InputLabel = function (_a) {
|
|
13378
13378
|
var label = _a.label, isDisabled = _a.isDisabled, isRequired = _a.isRequired;
|
|
13379
13379
|
var theme = useTheme();
|
|
13380
|
-
return (jsxs$1(Label$
|
|
13380
|
+
return (jsxs$1(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
13381
13381
|
};
|
|
13382
13382
|
var templateObject_1$S, templateObject_2$A;
|
|
13383
13383
|
|
|
@@ -13388,7 +13388,7 @@ var containerByStatus = function (theme, status) {
|
|
|
13388
13388
|
return theme.colors.semantic.urgent.color;
|
|
13389
13389
|
return '';
|
|
13390
13390
|
};
|
|
13391
|
-
var Container$
|
|
13391
|
+
var Container$F = 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) {
|
|
13392
13392
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
13393
13393
|
return hasError ? '' : containerByStatus(theme, status);
|
|
13394
13394
|
});
|
|
@@ -13452,7 +13452,7 @@ var InputWrapper = newStyled.div(templateObject_4$j || (templateObject_4$j = __m
|
|
|
13452
13452
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
13453
13453
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
13454
13454
|
});
|
|
13455
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
13455
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
13456
13456
|
var theme = _a.theme;
|
|
13457
13457
|
return theme.component.input.placeholderColor;
|
|
13458
13458
|
}, function (_a) {
|
|
@@ -13465,8 +13465,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$c || (templateObject_5
|
|
|
13465
13465
|
var theme = _a.theme;
|
|
13466
13466
|
return theme.component.input.lineHeight;
|
|
13467
13467
|
});
|
|
13468
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
13469
|
-
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$
|
|
13468
|
+
var ClearInput = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
13469
|
+
var templateObject_1$R, templateObject_2$z, templateObject_3$t, templateObject_4$j, templateObject_5$d, templateObject_6$b;
|
|
13470
13470
|
|
|
13471
13471
|
var BaseInput = function (_a) {
|
|
13472
13472
|
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"]);
|
|
@@ -13489,7 +13489,7 @@ var BaseInput = function (_a) {
|
|
|
13489
13489
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13490
13490
|
}, [status]);
|
|
13491
13491
|
var hasValue = Boolean(value);
|
|
13492
|
-
return (jsxs$1(Container$
|
|
13492
|
+
return (jsxs$1(Container$F, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
13493
13493
|
onChange(event.target.value, event);
|
|
13494
13494
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel$2, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
13495
13495
|
onChange('', { target: { value: '' } });
|
|
@@ -13510,7 +13510,7 @@ var Button$4 = function (_a) {
|
|
|
13510
13510
|
throw new Error("Invalid button variant ".concat(variant));
|
|
13511
13511
|
};
|
|
13512
13512
|
|
|
13513
|
-
var Container$
|
|
13513
|
+
var Container$E = 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) {
|
|
13514
13514
|
var theme = _a.theme;
|
|
13515
13515
|
return theme.component.inputCustom.input.borderRadius;
|
|
13516
13516
|
});
|
|
@@ -13529,7 +13529,7 @@ var Custom = function (_a) {
|
|
|
13529
13529
|
text: text,
|
|
13530
13530
|
disabled: rest.disabled,
|
|
13531
13531
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
13532
|
-
return (jsx$1(Container$
|
|
13532
|
+
return (jsx$1(Container$E, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme, defaultRounded: defaultRounded }, { children: jsx$1(Button$4, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
13533
13533
|
};
|
|
13534
13534
|
var templateObject_1$Q, templateObject_2$y;
|
|
13535
13535
|
|
|
@@ -13564,12 +13564,12 @@ var BasePlusButton = function (_a) {
|
|
|
13564
13564
|
};
|
|
13565
13565
|
var templateObject_1$O;
|
|
13566
13566
|
|
|
13567
|
-
var Container$
|
|
13567
|
+
var Container$D = 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"])));
|
|
13568
13568
|
var IconContainer$2 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
13569
13569
|
var BasePlusIcon = function (_a) {
|
|
13570
13570
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
13571
13571
|
var theme = useTheme();
|
|
13572
|
-
return (jsx$1(Container$
|
|
13572
|
+
return (jsx$1(Container$D, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(IconContainer$2, { children: jsx$1(Icon, { testId: "IconWrapper", fill: theme.colors.shades['250'].color }, void 0) }, void 0) }), void 0) }, void 0));
|
|
13573
13573
|
};
|
|
13574
13574
|
var templateObject_1$N, templateObject_2$w;
|
|
13575
13575
|
|
|
@@ -13580,7 +13580,7 @@ var Input$3 = {
|
|
|
13580
13580
|
SimplePlusIcon: BasePlusIcon,
|
|
13581
13581
|
};
|
|
13582
13582
|
|
|
13583
|
-
var Container$
|
|
13583
|
+
var Container$C = 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) {
|
|
13584
13584
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13585
13585
|
return borderRadiusVariant &&
|
|
13586
13586
|
"\n border-radius: 40px;\n ";
|
|
@@ -13592,7 +13592,7 @@ var Container$B = newStyled.div(templateObject_1$M || (templateObject_1$M = __ma
|
|
|
13592
13592
|
var TopTagContainer$3 = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13593
13593
|
var BottomTagContainer$3 = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13594
13594
|
var NavButtonContainer$1 = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13595
|
-
var Button$3 = newStyled.button(templateObject_5$
|
|
13595
|
+
var Button$3 = newStyled.button(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
13596
13596
|
var settings$1 = {
|
|
13597
13597
|
dots: true,
|
|
13598
13598
|
infinite: false,
|
|
@@ -13637,7 +13637,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13637
13637
|
}
|
|
13638
13638
|
}
|
|
13639
13639
|
}, [contents, selectedValue]);
|
|
13640
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
13640
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$C, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
13641
13641
|
var _a;
|
|
13642
13642
|
var activeSlide = contents[e];
|
|
13643
13643
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -13685,12 +13685,12 @@ function usePreventVerticalScroll$2(ref, dragThreshold) {
|
|
|
13685
13685
|
};
|
|
13686
13686
|
}, [preventTouch, ref, touchStart]);
|
|
13687
13687
|
}
|
|
13688
|
-
var templateObject_1$M, templateObject_2$v, templateObject_3$r, templateObject_4$i, templateObject_5$
|
|
13688
|
+
var templateObject_1$M, templateObject_2$v, templateObject_3$r, templateObject_4$i, templateObject_5$c;
|
|
13689
13689
|
|
|
13690
|
-
var Container$
|
|
13690
|
+
var Container$B = 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"])));
|
|
13691
13691
|
var ProductGalleryMobile = function (_a) {
|
|
13692
13692
|
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;
|
|
13693
|
-
return (jsx$1(Container$
|
|
13693
|
+
return (jsx$1(Container$B, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsx$1(ImageProductWithTags, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
13694
13694
|
};
|
|
13695
13695
|
var templateObject_1$L;
|
|
13696
13696
|
|
|
@@ -13966,12 +13966,12 @@ var ArrowButton = function (_a) {
|
|
|
13966
13966
|
};
|
|
13967
13967
|
var templateObject_1$K;
|
|
13968
13968
|
|
|
13969
|
-
var Container$
|
|
13969
|
+
var Container$A = 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"])));
|
|
13970
13970
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
13971
13971
|
var SlideDots = function (_a) {
|
|
13972
13972
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
13973
13973
|
var theme = useTheme();
|
|
13974
|
-
return (jsx$1(Container$
|
|
13974
|
+
return (jsx$1(Container$A, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon$1, { name: "navigation/slide_dot".concat(index === selectedIndex ? '_solid' : ''), height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
13975
13975
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
13976
13976
|
: 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));
|
|
13977
13977
|
};
|
|
@@ -13993,7 +13993,7 @@ var SlideNavigation = function (_a) {
|
|
|
13993
13993
|
};
|
|
13994
13994
|
var templateObject_1$I, templateObject_2$u, templateObject_3$q;
|
|
13995
13995
|
|
|
13996
|
-
var Container$
|
|
13996
|
+
var Container$z = 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) {
|
|
13997
13997
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13998
13998
|
return borderRadiusVariant &&
|
|
13999
13999
|
"\n border-radius: 40px;\n ";
|
|
@@ -14003,11 +14003,11 @@ var BottomTagContainer$2 = newStyled.div(templateObject_3$p || (templateObject_3
|
|
|
14003
14003
|
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
14004
14004
|
var _b, _c;
|
|
14005
14005
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
14006
|
-
return (jsxs$1(Container$
|
|
14006
|
+
return (jsxs$1(Container$z, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
14007
14007
|
});
|
|
14008
14008
|
var templateObject_1$H, templateObject_2$t, templateObject_3$p;
|
|
14009
14009
|
|
|
14010
|
-
var Container$
|
|
14010
|
+
var Container$y = 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"])));
|
|
14011
14011
|
var ProductGalleryMobileV2 = function (_a) {
|
|
14012
14012
|
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;
|
|
14013
14013
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -14029,11 +14029,11 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
14029
14029
|
useEffect(function () {
|
|
14030
14030
|
setSelectedImage(images[index]);
|
|
14031
14031
|
}, [index, images]);
|
|
14032
|
-
return (jsxs$1(Container$
|
|
14032
|
+
return (jsxs$1(Container$y, __assign$1({ "data-testid": "product-gallery-mobile-v2" }, { children: [jsx$1(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }), void 0));
|
|
14033
14033
|
};
|
|
14034
14034
|
var templateObject_1$G;
|
|
14035
14035
|
|
|
14036
|
-
var Container$
|
|
14036
|
+
var Container$x = 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) {
|
|
14037
14037
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
14038
14038
|
return borderRadiusVariant &&
|
|
14039
14039
|
"\n border-radius: 40px;\n ";
|
|
@@ -14045,11 +14045,11 @@ var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
14045
14045
|
var TopTagContainer$1 = newStyled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
14046
14046
|
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"])));
|
|
14047
14047
|
var VideoOverlay$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
14048
|
-
var Video = newStyled.div(templateObject_5$
|
|
14049
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
14050
|
-
var Text$2 = newStyled.div(templateObject_7$
|
|
14051
|
-
var NavButtonContainer = newStyled.div(templateObject_8$
|
|
14052
|
-
var Button$1 = newStyled.button(templateObject_9$
|
|
14048
|
+
var Video = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
14049
|
+
var VideoTag = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
14050
|
+
var Text$2 = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
14051
|
+
var NavButtonContainer = newStyled.div(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
14052
|
+
var Button$1 = newStyled.button(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
14053
14053
|
var settings = {
|
|
14054
14054
|
dots: true,
|
|
14055
14055
|
infinite: false,
|
|
@@ -14094,7 +14094,7 @@ var ImageProductWithTagsMobileV3 = function (_a) {
|
|
|
14094
14094
|
}
|
|
14095
14095
|
}
|
|
14096
14096
|
}, [images, selectedValue]);
|
|
14097
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
14097
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$x, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
|
|
14098
14098
|
var _a;
|
|
14099
14099
|
var activeSlide = images[e];
|
|
14100
14100
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -14142,12 +14142,12 @@ function usePreventVerticalScroll$1(ref, dragThreshold) {
|
|
|
14142
14142
|
};
|
|
14143
14143
|
}, [preventTouch, ref, touchStart]);
|
|
14144
14144
|
}
|
|
14145
|
-
var templateObject_1$F, templateObject_2$s, templateObject_3$o, templateObject_4$h, templateObject_5$
|
|
14145
|
+
var templateObject_1$F, templateObject_2$s, templateObject_3$o, templateObject_4$h, templateObject_5$b, templateObject_6$a, templateObject_7$8, templateObject_8$7, templateObject_9$4;
|
|
14146
14146
|
|
|
14147
|
-
var Container$
|
|
14147
|
+
var Container$w = 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"])));
|
|
14148
14148
|
var ProductGalleryMobileV3 = function (_a) {
|
|
14149
14149
|
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;
|
|
14150
|
-
return (jsx$1(Container$
|
|
14150
|
+
return (jsx$1(Container$w, __assign$1({ "data-testid": "product-gallery-mobile-v3" }, { children: jsx$1(ImageProductWithTagsMobileV3, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
|
|
14151
14151
|
};
|
|
14152
14152
|
var templateObject_1$E;
|
|
14153
14153
|
|
|
@@ -14289,10 +14289,10 @@ var transformStyle = function (_a) {
|
|
|
14289
14289
|
return opened
|
|
14290
14290
|
? css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14291
14291
|
};
|
|
14292
|
-
var Container$
|
|
14292
|
+
var Container$v = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
14293
14293
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14294
14294
|
}), visibleStyle, transformStyle);
|
|
14295
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
14295
|
+
var Overlay = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
14296
14296
|
var Modal = function (_a) {
|
|
14297
14297
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding;
|
|
14298
14298
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14302,7 +14302,7 @@ var Modal = function (_a) {
|
|
|
14302
14302
|
}
|
|
14303
14303
|
close();
|
|
14304
14304
|
};
|
|
14305
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
14305
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$v, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
14306
14306
|
};
|
|
14307
14307
|
var modalEvent = function (id, detail) {
|
|
14308
14308
|
events$2.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -14330,7 +14330,7 @@ var useModal = function (id) {
|
|
|
14330
14330
|
close: close,
|
|
14331
14331
|
}); }, [close, open, opened]);
|
|
14332
14332
|
};
|
|
14333
|
-
var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4$g, templateObject_5$
|
|
14333
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$n, templateObject_4$g, templateObject_5$a, templateObject_6$9;
|
|
14334
14334
|
|
|
14335
14335
|
var TimerContainer$1 = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
14336
14336
|
var timerColor = _a.timerColor;
|
|
@@ -19578,7 +19578,7 @@ const SwiperSlide = /*#__PURE__*/forwardRef(function (_temp, externalRef) {
|
|
|
19578
19578
|
SwiperSlide.displayName = 'SwiperSlide';
|
|
19579
19579
|
|
|
19580
19580
|
Swiper$1.use([Pagination$1]);
|
|
19581
|
-
var Container$
|
|
19581
|
+
var Container$u = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n & .slick-dots li.slick-active button:before {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
19582
19582
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
19583
19583
|
return borderRadiusVariant &&
|
|
19584
19584
|
"\n border-radius: 40px;\n ";
|
|
@@ -19621,7 +19621,7 @@ var ImageProductWithTagsV4 = function (_a) {
|
|
|
19621
19621
|
}
|
|
19622
19622
|
}
|
|
19623
19623
|
}, [contents, selectedValue]);
|
|
19624
|
-
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$
|
|
19624
|
+
return (jsxs$1(Fragment$2, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: contents.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$u, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Swiper, __assign$1({ onSlideChange: function (swiper) {
|
|
19625
19625
|
var _a;
|
|
19626
19626
|
var activeSlide = contents[swiper.activeIndex];
|
|
19627
19627
|
// If autoplay is true and iframe is the active slide, play the video
|
|
@@ -19675,14 +19675,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
19675
19675
|
}
|
|
19676
19676
|
var templateObject_1$A, templateObject_2$q, templateObject_3$m;
|
|
19677
19677
|
|
|
19678
|
-
var Container$
|
|
19678
|
+
var Container$t = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
19679
19679
|
var ProductGalleryMobileV4 = function (_a) {
|
|
19680
19680
|
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, spaceBetween = _a.spaceBetween, slidesPerView = _a.slidesPerView;
|
|
19681
|
-
return (jsx$1(Container$
|
|
19681
|
+
return (jsx$1(Container$t, __assign$1({ "data-testid": "product-gallery-mobile-v4" }, { children: jsx$1(ImageProductWithTagsV4, { contents: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue, spaceBetween: spaceBetween, slidesPerView: slidesPerView }, void 0) }), void 0));
|
|
19682
19682
|
};
|
|
19683
19683
|
var templateObject_1$z;
|
|
19684
19684
|
|
|
19685
|
-
var Container$
|
|
19685
|
+
var Container$s = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"], ["\n width: ", ";\n height: ", ";\n svg {\n vertical-align: unset;\n }\n"])), function (_a) {
|
|
19686
19686
|
var size = _a.size;
|
|
19687
19687
|
return (size ? size : '100%');
|
|
19688
19688
|
}, function (_a) {
|
|
@@ -19713,7 +19713,7 @@ var templateObject_1$y, templateObject_2$p;
|
|
|
19713
19713
|
|
|
19714
19714
|
var Spinner = function (_a) {
|
|
19715
19715
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, borderSize = _a.borderSize, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
19716
|
-
return (jsx$1(Container$
|
|
19716
|
+
return (jsx$1(Container$s, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
19717
19717
|
};
|
|
19718
19718
|
|
|
19719
19719
|
var Bar$1 = newStyled.div(templateObject_1$x || (templateObject_1$x = __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) {
|
|
@@ -19755,7 +19755,7 @@ var BarContainer = newStyled.div({
|
|
|
19755
19755
|
padding: '0 16px',
|
|
19756
19756
|
position: 'relative',
|
|
19757
19757
|
});
|
|
19758
|
-
var Container$
|
|
19758
|
+
var Container$r = newStyled.div(function (_a) {
|
|
19759
19759
|
var backgroundColor = _a.backgroundColor;
|
|
19760
19760
|
return ({
|
|
19761
19761
|
width: '475px',
|
|
@@ -19786,11 +19786,11 @@ var MotivatorProgressBar = function (_a) {
|
|
|
19786
19786
|
var theme = useTheme();
|
|
19787
19787
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
19788
19788
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
19789
|
-
return (jsxs$1(Container$
|
|
19789
|
+
return (jsxs$1(Container$r, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
19790
19790
|
};
|
|
19791
19791
|
var templateObject_1$x;
|
|
19792
19792
|
|
|
19793
|
-
var Container$
|
|
19793
|
+
var Container$q = newStyled.div(templateObject_1$w || (templateObject_1$w = __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) {
|
|
19794
19794
|
var theme = _a.theme;
|
|
19795
19795
|
return theme.component.orderBar.backgroundColor;
|
|
19796
19796
|
});
|
|
@@ -19798,7 +19798,7 @@ var H1 = newStyled.h1(templateObject_2$o || (templateObject_2$o = __makeTemplate
|
|
|
19798
19798
|
var OrderBar = function (_a) {
|
|
19799
19799
|
var message = _a.message, color = _a.color;
|
|
19800
19800
|
var theme = useTheme();
|
|
19801
|
-
return (jsxs$1(Container$
|
|
19801
|
+
return (jsxs$1(Container$q, __assign$1({ color: color }, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
19802
19802
|
};
|
|
19803
19803
|
var templateObject_1$w, templateObject_2$o;
|
|
19804
19804
|
|
|
@@ -23581,17 +23581,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
23581
23581
|
HTMLReactParser$1.attributesToProps;
|
|
23582
23582
|
HTMLReactParser$1.Element;
|
|
23583
23583
|
|
|
23584
|
-
var Container$
|
|
23584
|
+
var Container$p = newStyled.div(templateObject_1$v || (templateObject_1$v = __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"])));
|
|
23585
23585
|
var Card = newStyled.div(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
23586
23586
|
var Tag$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __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"])));
|
|
23587
|
-
var Label = newStyled.div(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
23588
|
-
var Check = newStyled.div(templateObject_5$
|
|
23589
|
-
var IconContainer$1 = newStyled.div(templateObject_6$
|
|
23590
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
23591
|
-
var DiscountContainer = newStyled.div(templateObject_8$
|
|
23587
|
+
var Label$1 = newStyled.div(templateObject_4$f || (templateObject_4$f = __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"])));
|
|
23588
|
+
var Check = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __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"])));
|
|
23589
|
+
var IconContainer$1 = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
23590
|
+
var IconPlaceholder = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"], ["\n height: 100%;\n width: 100%;\n background-color: var(--colors-shades-100-color);\n"])));
|
|
23591
|
+
var DiscountContainer = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n"])));
|
|
23592
23592
|
var PackSelector = function (_a) {
|
|
23593
23593
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
23594
|
-
return (jsx$1(Container$
|
|
23594
|
+
return (jsx$1(Container$p, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
23595
23595
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
23596
23596
|
}) }), void 0));
|
|
23597
23597
|
};
|
|
@@ -23605,7 +23605,7 @@ var PackCard = function (_a) {
|
|
|
23605
23605
|
.then(function (icon) { return setIcon(icon); })
|
|
23606
23606
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
23607
23607
|
}, [pack.meta.icon]);
|
|
23608
|
-
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
23608
|
+
return (jsxs$1(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsx$1(Tag$1, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$7, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label$1, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.6, fill: colors.background.color }, void 0) }), void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
23609
23609
|
color: 'var(--colors-semantic-urgent-color)',
|
|
23610
23610
|
} }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer$1, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(DiscountContainer, { children: [jsx$1(Text$7, __assign$1({ variant: "label", size: "small", style: { textDecoration: 'line-through' } }, { children: formatPrice(pack.meta.originalPrice, {
|
|
23611
23611
|
locale: 'en-US',
|
|
@@ -23618,9 +23618,9 @@ var PackCard = function (_a) {
|
|
|
23618
23618
|
currency: currencyCode || 'USD',
|
|
23619
23619
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
23620
23620
|
};
|
|
23621
|
-
var templateObject_1$v, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$
|
|
23621
|
+
var templateObject_1$v, templateObject_2$n, templateObject_3$l, templateObject_4$f, templateObject_5$9, templateObject_6$8, templateObject_7$7, templateObject_8$6;
|
|
23622
23622
|
|
|
23623
|
-
var Container$
|
|
23623
|
+
var Container$o = newStyled.div(templateObject_1$u || (templateObject_1$u = __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"])));
|
|
23624
23624
|
var IconContainer = newStyled.div(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
23625
23625
|
var PageNumbersContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
23626
23626
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -23688,7 +23688,7 @@ var Pagination = function (_a) {
|
|
|
23688
23688
|
}
|
|
23689
23689
|
return pages;
|
|
23690
23690
|
}, [from, page, showReducedPages, to]);
|
|
23691
|
-
return (jsxs$1(Container$
|
|
23691
|
+
return (jsxs$1(Container$o, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
23692
23692
|
};
|
|
23693
23693
|
|
|
23694
23694
|
var PaginatorBlog = function (_a) {
|
|
@@ -23702,12 +23702,12 @@ var PaginatorBlog = function (_a) {
|
|
|
23702
23702
|
setPage(page);
|
|
23703
23703
|
onChange(page);
|
|
23704
23704
|
};
|
|
23705
|
-
return (jsxs$1(Container$
|
|
23705
|
+
return (jsxs$1(Container$o, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
23706
23706
|
? theme.colors.shades['white'].color
|
|
23707
23707
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
23708
23708
|
};
|
|
23709
23709
|
|
|
23710
|
-
var Container$
|
|
23710
|
+
var Container$n = newStyled.div(templateObject_1$t || (templateObject_1$t = __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) {
|
|
23711
23711
|
var width = _a.width;
|
|
23712
23712
|
return width;
|
|
23713
23713
|
}, function (_a) {
|
|
@@ -23723,11 +23723,11 @@ var Container$m = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
|
|
|
23723
23723
|
var PaymentMethod = function (_a) {
|
|
23724
23724
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
23725
23725
|
var theme = useTheme();
|
|
23726
|
-
return (jsx$1(Container$
|
|
23726
|
+
return (jsx$1(Container$n, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement$1(Icon) }), void 0));
|
|
23727
23727
|
};
|
|
23728
23728
|
var templateObject_1$t;
|
|
23729
23729
|
|
|
23730
|
-
var Container$
|
|
23730
|
+
var Container$m = newStyled.div(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
23731
23731
|
var IMAGE_WIDTH = '63px';
|
|
23732
23732
|
var ImageContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __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);
|
|
23733
23733
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __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({
|
|
@@ -23762,14 +23762,14 @@ var PriceContainer = newStyled.div(templateObject_4$d || (templateObject_4$d = _
|
|
|
23762
23762
|
})
|
|
23763
23763
|
: 'justify-content: end';
|
|
23764
23764
|
});
|
|
23765
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
23766
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
23765
|
+
var Quantity = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
23766
|
+
var StyledSpan = newStyled.span(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
23767
23767
|
var SimpleOrderItem = function (_a) {
|
|
23768
23768
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
23769
23769
|
var theme = useTheme();
|
|
23770
|
-
return (jsxs$1(Container$
|
|
23770
|
+
return (jsxs$1(Container$m, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image$3, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsx$1(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsx$1(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
23771
23771
|
};
|
|
23772
|
-
var templateObject_1$s, templateObject_2$l, templateObject_3$j, templateObject_4$d, templateObject_5$
|
|
23772
|
+
var templateObject_1$s, templateObject_2$l, templateObject_3$j, templateObject_4$d, templateObject_5$8, templateObject_6$7;
|
|
23773
23773
|
|
|
23774
23774
|
var P$1 = newStyled.p(function (_a) {
|
|
23775
23775
|
var color = _a.color;
|
|
@@ -23812,7 +23812,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
23812
23812
|
position: 'absolute',
|
|
23813
23813
|
});
|
|
23814
23814
|
});
|
|
23815
|
-
var Container$
|
|
23815
|
+
var Container$l = newStyled.div(function (_a) {
|
|
23816
23816
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
23817
23817
|
return ({
|
|
23818
23818
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -23826,11 +23826,11 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
23826
23826
|
var ProgressBar = function (_a) {
|
|
23827
23827
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
23828
23828
|
var theme = useTheme();
|
|
23829
|
-
return (jsxs$1(Container$
|
|
23829
|
+
return (jsxs$1(Container$l, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
23830
23830
|
};
|
|
23831
23831
|
var templateObject_1$r;
|
|
23832
23832
|
|
|
23833
|
-
var Container$
|
|
23833
|
+
var Container$k = newStyled.div(templateObject_1$q || (templateObject_1$q = __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; });
|
|
23834
23834
|
var Item$1 = newStyled.span(templateObject_2$k || (templateObject_2$k = __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"])));
|
|
23835
23835
|
var Number$1 = newStyled(Item$1)(templateObject_3$i || (templateObject_3$i = __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"])));
|
|
23836
23836
|
var IncreaseDecrease = newStyled(Item$1)(templateObject_4$c || (templateObject_4$c = __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)'; });
|
|
@@ -23856,7 +23856,7 @@ var QuantityPicker = function (_a) {
|
|
|
23856
23856
|
return clamp(value);
|
|
23857
23857
|
});
|
|
23858
23858
|
}, [value, clamp]);
|
|
23859
|
-
return (jsxs$1(Container$
|
|
23859
|
+
return (jsxs$1(Container$k, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId, borderRadius: theme.component.qtyPicker.borderRadius }, { children: [jsx$1(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: internal }, void 0), jsx$1(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
23860
23860
|
};
|
|
23861
23861
|
var templateObject_1$q, templateObject_2$k, templateObject_3$i, templateObject_4$c;
|
|
23862
23862
|
|
|
@@ -23928,7 +23928,7 @@ var ContainerStyles$1 = {
|
|
|
23928
23928
|
};
|
|
23929
23929
|
|
|
23930
23930
|
var Wrapper$3 = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
23931
|
-
var Container$
|
|
23931
|
+
var Container$j = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
23932
23932
|
var Input$2 = newStyled.input(templateObject_2$j || (templateObject_2$j = __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) {
|
|
23933
23933
|
var disabled = _a.disabled;
|
|
23934
23934
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -23937,7 +23937,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
23937
23937
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
23938
23938
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
23939
23939
|
]; });
|
|
23940
|
-
var StyledLabel$1 = newStyled(Label$
|
|
23940
|
+
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
23941
23941
|
var RadioPrimary = function (_a) {
|
|
23942
23942
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
23943
23943
|
var theme = useTheme();
|
|
@@ -23945,7 +23945,7 @@ var RadioPrimary = function (_a) {
|
|
|
23945
23945
|
var value = event.currentTarget.value;
|
|
23946
23946
|
onChange({ value: value, label: label });
|
|
23947
23947
|
};
|
|
23948
|
-
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
23948
|
+
return (jsxs$1(Wrapper$3, { children: [jsxs$1(Container$j, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
23949
23949
|
};
|
|
23950
23950
|
var templateObject_1$p, templateObject_2$j, templateObject_3$h;
|
|
23951
23951
|
|
|
@@ -24027,7 +24027,7 @@ var ContainerStyles = {
|
|
|
24027
24027
|
};
|
|
24028
24028
|
|
|
24029
24029
|
var Wrapper$2 = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
24030
|
-
var Container$
|
|
24030
|
+
var Container$i = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
24031
24031
|
var Input$1 = newStyled.input(templateObject_2$i || (templateObject_2$i = __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) {
|
|
24032
24032
|
var disabled = _a.disabled;
|
|
24033
24033
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
@@ -24036,7 +24036,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
24036
24036
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
24037
24037
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
24038
24038
|
]; });
|
|
24039
|
-
var StyledLabel = newStyled(Label$
|
|
24039
|
+
var StyledLabel = newStyled(Label$4)(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
24040
24040
|
var theme = _a.theme;
|
|
24041
24041
|
return theme.component.radio.textSize;
|
|
24042
24042
|
}, function (_a) {
|
|
@@ -24050,7 +24050,7 @@ var ClubRadioInput = function (_a) {
|
|
|
24050
24050
|
var value = event.currentTarget.value;
|
|
24051
24051
|
onChange({ value: value, label: label });
|
|
24052
24052
|
};
|
|
24053
|
-
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$
|
|
24053
|
+
return (jsxs$1(Wrapper$2, { children: [jsxs$1(Container$i, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$1, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
24054
24054
|
};
|
|
24055
24055
|
var templateObject_1$o, templateObject_2$i, templateObject_3$g;
|
|
24056
24056
|
|
|
@@ -24080,16 +24080,16 @@ function formatDate(date, format) {
|
|
|
24080
24080
|
}
|
|
24081
24081
|
}
|
|
24082
24082
|
|
|
24083
|
-
var Container$
|
|
24083
|
+
var Container$h = newStyled.div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
24084
24084
|
var Content$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
24085
24085
|
var StarsContent = 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"])));
|
|
24086
24086
|
var ReviewContainer$1 = newStyled.div(templateObject_4$b || (templateObject_4$b = __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"])));
|
|
24087
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
24088
|
-
var ReviewerName$1 = newStyled.h1(templateObject_6$
|
|
24089
|
-
var VerifiedText = newStyled.h1(templateObject_7$
|
|
24090
|
-
var ReviewTitle$1 = newStyled.h2(templateObject_8$
|
|
24091
|
-
var ReviewDescription = newStyled.div(templateObject_9$
|
|
24092
|
-
var ImageContainer = newStyled.div(templateObject_10$
|
|
24087
|
+
var DateText$1 = newStyled.span(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
24088
|
+
var ReviewerName$1 = newStyled.h1(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
24089
|
+
var VerifiedText = newStyled.h1(templateObject_7$6 || (templateObject_7$6 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
24090
|
+
var ReviewTitle$1 = newStyled.h2(templateObject_8$5 || (templateObject_8$5 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
24091
|
+
var ReviewDescription = newStyled.div(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
24092
|
+
var ImageContainer = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
24093
24093
|
var ImageWrapper$2 = newStyled(Image$3)(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
24094
24094
|
var VideoWrapper = newStyled.video(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
24095
24095
|
var ProductContainer = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"], ["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"])));
|
|
@@ -24118,23 +24118,23 @@ var Review$1 = function (_a) {
|
|
|
24118
24118
|
}
|
|
24119
24119
|
}
|
|
24120
24120
|
}, [opened]);
|
|
24121
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
24121
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$h, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
24122
24122
|
(!isVideo ? (jsx$1(ImageWrapper$2, { src: image.src, alt: image.alt }, void 0)) : (jsx$1(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxs$1(DescriptionContainer, { children: [opened && (jsxs$1(ReviewerName$1, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content$1, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxs$1(StarsContent, { children: [jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxs$1(HelpfulContainer, { children: [jsxs$1(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxs$1(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsx$1(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsx$1(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxs$1(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsx$1(ProductImageWrapper, { children: jsx$1(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsx$1(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
24123
24123
|
};
|
|
24124
|
-
var templateObject_1$n, templateObject_2$h, templateObject_3$f, templateObject_4$b, templateObject_5$
|
|
24124
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$f, templateObject_4$b, templateObject_5$7, templateObject_6$6, templateObject_7$6, templateObject_8$5, templateObject_9$3, 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;
|
|
24125
24125
|
|
|
24126
24126
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
24127
24127
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
24128
|
-
var Container$
|
|
24128
|
+
var Container$g = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
24129
24129
|
var Heading = newStyled.div(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
24130
24130
|
var Content = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
24131
24131
|
var ReviewContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
24132
|
-
var DateText = newStyled.span(templateObject_5$
|
|
24133
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
24134
|
-
var ReviewerName = newStyled.h2(templateObject_7$
|
|
24135
|
-
var ReviewTitle = newStyled.h3(templateObject_8$
|
|
24136
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
24137
|
-
var ReviewDescriptionMobile = newStyled.div(templateObject_10$
|
|
24132
|
+
var DateText = newStyled.span(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
24133
|
+
var VariantText = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
24134
|
+
var ReviewerName = newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n line-height: 28px;\n }\n"])));
|
|
24135
|
+
var ReviewTitle = newStyled.h3(templateObject_8$4 || (templateObject_8$4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
24136
|
+
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
24137
|
+
var ReviewDescriptionMobile = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
24138
24138
|
var ImagesContainer = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
24139
24139
|
var Images = newStyled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
24140
24140
|
var ImageSpace = newStyled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
@@ -24167,7 +24167,7 @@ var Review = function (_a) {
|
|
|
24167
24167
|
});
|
|
24168
24168
|
};
|
|
24169
24169
|
}, [randomId]);
|
|
24170
|
-
return (jsxs$1(Container$
|
|
24170
|
+
return (jsxs$1(Container$g, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName, { children: reviewerName }, void 0), jsx$1(DateText, { children: formatDate(date, dateFormat) }, void 0)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
24171
24171
|
__html: showMoreMobile
|
|
24172
24172
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
24173
24173
|
: description,
|
|
@@ -24177,15 +24177,15 @@ var Review = function (_a) {
|
|
|
24177
24177
|
: description,
|
|
24178
24178
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }), void 0)] }, void 0), jsxs$1(ImagesContainer, { children: [jsxs$1(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsx$1(ImageWrapper$1, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image$3, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), (helpfulCount || (hasTextWhenHelpfulCount0 && helpfulCount === 0)) && (jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0))] }, void 0)] }, void 0));
|
|
24179
24179
|
};
|
|
24180
|
-
var templateObject_1$m, templateObject_2$g, templateObject_3$e, templateObject_4$a, templateObject_5$
|
|
24180
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$e, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$5, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
|
|
24181
24181
|
|
|
24182
|
-
var Container$
|
|
24182
|
+
var Container$f = newStyled.div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
24183
24183
|
var ReviewsContainer = newStyled.div(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
24184
24184
|
var ReviewsCount = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
24185
24185
|
var ReviewsStars = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
24186
|
-
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$
|
|
24187
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
24188
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
24186
|
+
var ReviewsTextCount = newStyled(Text$7)(templateObject_5$5 || (templateObject_5$5 = __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"])));
|
|
24187
|
+
var ReviewsImages = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
24188
|
+
var SummaryItem = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"], ["\n width: 84px;\n height: 68px;\n background: ", ";\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n cursor: zoom-in;\n"])), function (_a) {
|
|
24189
24189
|
var backgroundUrl = _a.backgroundUrl;
|
|
24190
24190
|
return "url(".concat(backgroundUrl, ")");
|
|
24191
24191
|
});
|
|
@@ -24193,17 +24193,17 @@ var ReviewsHeader = function (_a) {
|
|
|
24193
24193
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
24194
24194
|
var starsNumber = 5;
|
|
24195
24195
|
var theme = useTheme();
|
|
24196
|
-
return (jsxs$1(Container$
|
|
24196
|
+
return (jsxs$1(Container$f, { children: [jsx$1(Text$7, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxs$1(ReviewsContainer, { children: [jsxs$1(ReviewsCount, { children: [jsxs$1(ReviewsStars, { children: [jsx$1(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsx$1(StarList, { rating: rating, size: ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxs$1(Text$7, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsx$1(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsx$1(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
24197
24197
|
};
|
|
24198
|
-
var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$
|
|
24198
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$d, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$4;
|
|
24199
24199
|
|
|
24200
|
-
var Container$
|
|
24200
|
+
var Container$e = newStyled.div(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
24201
24201
|
var Text = newStyled.p(templateObject_2$e || (templateObject_2$e = __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; });
|
|
24202
24202
|
var ScrollToTop = function (_a) {
|
|
24203
24203
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill, _b = _a.Icon, Icon$1 = _b === void 0 ? Icon.Arrows.CircleChevronUp : _b;
|
|
24204
24204
|
var theme = useTheme();
|
|
24205
24205
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
24206
|
-
return (jsxs$1(Container$
|
|
24206
|
+
return (jsxs$1(Container$e, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon$1, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
24207
24207
|
};
|
|
24208
24208
|
var templateObject_1$k, templateObject_2$e;
|
|
24209
24209
|
|
|
@@ -24236,7 +24236,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
24236
24236
|
},
|
|
24237
24237
|
}); });
|
|
24238
24238
|
|
|
24239
|
-
var Container$
|
|
24239
|
+
var Container$d = newStyled.div(templateObject_1$j || (templateObject_1$j = __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({
|
|
24240
24240
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
24241
24241
|
}));
|
|
24242
24242
|
var Description = newStyled.div({
|
|
@@ -24253,18 +24253,18 @@ var Description = newStyled.div({
|
|
|
24253
24253
|
var ProductItem = function (_a) {
|
|
24254
24254
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
24255
24255
|
var theme = useTheme();
|
|
24256
|
-
return (jsxs$1(Container$
|
|
24256
|
+
return (jsxs$1(Container$d, __assign$1({ theme: theme }, { children: [jsx$1(Image$3, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
24257
24257
|
};
|
|
24258
24258
|
var templateObject_1$j;
|
|
24259
24259
|
|
|
24260
|
-
var Container$
|
|
24260
|
+
var Container$c = newStyled.div({
|
|
24261
24261
|
display: 'flex',
|
|
24262
24262
|
justifyContent: 'center',
|
|
24263
24263
|
padding: '1rem',
|
|
24264
24264
|
});
|
|
24265
24265
|
var Footer = function (_a) {
|
|
24266
24266
|
var text = _a.text, onClick = _a.onClick;
|
|
24267
|
-
return (jsx$1(Container$
|
|
24267
|
+
return (jsx$1(Container$c, { children: jsx$1(Text$7, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
24268
24268
|
};
|
|
24269
24269
|
|
|
24270
24270
|
var Ul = newStyled.ul({
|
|
@@ -24283,7 +24283,7 @@ var Anchor = newStyled.a({
|
|
|
24283
24283
|
padding: 0,
|
|
24284
24284
|
textDecoration: 'none',
|
|
24285
24285
|
});
|
|
24286
|
-
var Container$
|
|
24286
|
+
var Container$b = newStyled.div(templateObject_2$d || (templateObject_2$d = __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({
|
|
24287
24287
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
24288
24288
|
marginTop: ['1.25rem', '0.125rem'],
|
|
24289
24289
|
borderRadius: ['0', '0.5rem'],
|
|
@@ -24294,7 +24294,7 @@ var Header = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTem
|
|
|
24294
24294
|
var ResultsPanel = function (_a) {
|
|
24295
24295
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
24296
24296
|
var theme = useTheme();
|
|
24297
|
-
return (jsxs$1(Container$
|
|
24297
|
+
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$7, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Anchor, __assign$1({ href: item.optionUrl }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
24298
24298
|
};
|
|
24299
24299
|
var templateObject_1$i, templateObject_2$d, templateObject_3$c;
|
|
24300
24300
|
|
|
@@ -24349,7 +24349,7 @@ var reducer = function (state, action) {
|
|
|
24349
24349
|
}
|
|
24350
24350
|
}
|
|
24351
24351
|
};
|
|
24352
|
-
var Container$
|
|
24352
|
+
var Container$a = newStyled.div({
|
|
24353
24353
|
position: 'relative',
|
|
24354
24354
|
display: 'flex',
|
|
24355
24355
|
});
|
|
@@ -24389,7 +24389,7 @@ var SearchBar = function (_a) {
|
|
|
24389
24389
|
if (e.cancelable) {
|
|
24390
24390
|
e.preventDefault();
|
|
24391
24391
|
}
|
|
24392
|
-
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
24392
|
+
}, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$a, __assign$1({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
24393
24393
|
if (e.key === 'Enter') {
|
|
24394
24394
|
if (e.cancelable) {
|
|
24395
24395
|
e.preventDefault();
|
|
@@ -24400,20 +24400,20 @@ var SearchBar = function (_a) {
|
|
|
24400
24400
|
} }, void 0), jsx$1(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsx$1(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
24401
24401
|
};
|
|
24402
24402
|
|
|
24403
|
-
var Container$
|
|
24403
|
+
var Container$9 = newStyled.div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
24404
24404
|
var BackArrow = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
24405
24405
|
var BoldSpan = newStyled.span(templateObject_3$b || (templateObject_3$b = __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"])));
|
|
24406
24406
|
var NormalSpan = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
24407
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
24407
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
24408
24408
|
var SearchNavigation = function (_a) {
|
|
24409
24409
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
24410
|
-
return (jsxs$1(Container$
|
|
24410
|
+
return (jsxs$1(Container$9, { children: [jsxs$1(Text$7, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
24411
24411
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
24412
24412
|
}) }, void 0)] }, void 0));
|
|
24413
24413
|
};
|
|
24414
|
-
var templateObject_1$f, templateObject_2$c, templateObject_3$b, templateObject_4$8, templateObject_5$
|
|
24414
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$b, templateObject_4$8, templateObject_5$4;
|
|
24415
24415
|
|
|
24416
|
-
var Container$
|
|
24416
|
+
var Container$8 = newStyled.div(templateObject_1$e || (templateObject_1$e = __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) {
|
|
24417
24417
|
var alignCenter = _a.alignCenter;
|
|
24418
24418
|
return alignCenter &&
|
|
24419
24419
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -24428,47 +24428,60 @@ var BannerText = newStyled.div(templateObject_3$a || (templateObject_3$a = __mak
|
|
|
24428
24428
|
var ShortBanner = function (_a) {
|
|
24429
24429
|
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;
|
|
24430
24430
|
var theme = useTheme();
|
|
24431
|
-
return (jsxs$1(Container$
|
|
24431
|
+
return (jsxs$1(Container$8, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsx$1(TitleText, { children: title }, void 0), jsx$1(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
24432
24432
|
};
|
|
24433
24433
|
var templateObject_1$e, templateObject_2$b, templateObject_3$a;
|
|
24434
24434
|
|
|
24435
|
-
var TableElement$1 = newStyled.table(templateObject_1$d || (templateObject_1$d = __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; });
|
|
24435
|
+
var TableElement$1 = newStyled.table(templateObject_1$d || (templateObject_1$d = __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; });
|
|
24436
24436
|
var TableCell$1 = newStyled.td(templateObject_2$a || (templateObject_2$a = __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; });
|
|
24437
24437
|
var TableHead$1 = 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 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; });
|
|
24438
|
-
var
|
|
24438
|
+
var Label = newStyled('div')(templateObject_4$7 || (templateObject_4$7 = __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"])));
|
|
24439
|
+
var TopLabel = newStyled(Label)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
24440
|
+
var LeftLabel = newStyled(Label)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n width: 20px;\n transform: rotate(270deg);\n"], ["\n width: 20px;\n transform: rotate(270deg);\n"])));
|
|
24441
|
+
var Container$7 = newStyled('div')(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"], ["\n gap: 5px;\n display: flex;\n width: fit-content;\n align-items: center;\n"])));
|
|
24442
|
+
var LabelText = newStyled('span')(templateObject_8$3 || (templateObject_8$3 = __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"])));
|
|
24443
|
+
var Column = newStyled('div')(templateObject_9$1 || (templateObject_9$1 = __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"])));
|
|
24444
|
+
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; });
|
|
24445
|
+
var templateObject_1$d, templateObject_2$a, templateObject_3$9, templateObject_4$7, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$3, templateObject_9$1, templateObject_10$1;
|
|
24446
|
+
|
|
24447
|
+
var getIsOdd = function (number) { return number % 2 !== 0; };
|
|
24448
|
+
var getCellColor = function (index, cell) {
|
|
24449
|
+
if (index == 0) {
|
|
24450
|
+
return '#f6f0e7';
|
|
24451
|
+
}
|
|
24452
|
+
switch (cell) {
|
|
24453
|
+
case 'XS':
|
|
24454
|
+
return '#f5bab0';
|
|
24455
|
+
case 'S':
|
|
24456
|
+
return '#f7a08b';
|
|
24457
|
+
case 'M':
|
|
24458
|
+
return '#ffe1b8';
|
|
24459
|
+
case 'L':
|
|
24460
|
+
return '#f5bab0';
|
|
24461
|
+
case 'XL':
|
|
24462
|
+
return '#8bbeea';
|
|
24463
|
+
case '2XL':
|
|
24464
|
+
return '#b1d7c3';
|
|
24465
|
+
case '3XL':
|
|
24466
|
+
return '#e7a4f7';
|
|
24467
|
+
case '4XL':
|
|
24468
|
+
return '#e7c9b2';
|
|
24469
|
+
default:
|
|
24470
|
+
return '';
|
|
24471
|
+
}
|
|
24472
|
+
};
|
|
24473
|
+
|
|
24474
|
+
// TODO: Refactor the table properties
|
|
24439
24475
|
var SizeChartTable = function (_a) {
|
|
24440
|
-
var
|
|
24476
|
+
var _b, _c;
|
|
24477
|
+
var headers = _a.headers, tableContent = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
24441
24478
|
var theme = useTheme();
|
|
24442
|
-
var
|
|
24443
|
-
|
|
24444
|
-
|
|
24445
|
-
|
|
24446
|
-
|
|
24447
|
-
|
|
24448
|
-
return '#f5bab0';
|
|
24449
|
-
case 'S':
|
|
24450
|
-
return '#f7a08b';
|
|
24451
|
-
case 'M':
|
|
24452
|
-
return '#ffe1b8';
|
|
24453
|
-
case 'L':
|
|
24454
|
-
return '#f5bab0';
|
|
24455
|
-
case 'XL':
|
|
24456
|
-
return '#8bbeea';
|
|
24457
|
-
case '2XL':
|
|
24458
|
-
return '#b1d7c3';
|
|
24459
|
-
case '3XL':
|
|
24460
|
-
return '#e7a4f7';
|
|
24461
|
-
case '4XL':
|
|
24462
|
-
return '#e7c9b2';
|
|
24463
|
-
default:
|
|
24464
|
-
return '';
|
|
24465
|
-
}
|
|
24466
|
-
};
|
|
24467
|
-
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ style: {
|
|
24468
|
-
backgroundColor: getCellColor(index, cell),
|
|
24469
|
-
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
24470
|
-
};
|
|
24471
|
-
var templateObject_1$d, templateObject_2$a, templateObject_3$9, templateObject_4$7;
|
|
24479
|
+
var _d = (_c = (_b = headers === null || headers === void 0 ? void 0 : headers[0]) === null || _b === void 0 ? void 0 : _b.split('/')) !== null && _c !== void 0 ? _c : [], xLabel = _d[0], yLabel = _d[1];
|
|
24480
|
+
var isMultilabel = xLabel && yLabel;
|
|
24481
|
+
return (jsxs$1(Container$7, { children: [isMultilabel && (jsxs$1(LeftLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: xLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(Column, { children: [isMultilabel && (jsxs$1(TopLabel, { children: [jsx$1(Icon.Arrows.ChevronLeftVariant, {}, void 0), jsx$1(LabelText, { children: yLabel }, void 0), jsx$1(Icon.Arrows.ChevronRightVariant, {}, void 0)] }, void 0)), jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", __assign$1({ style: { backgroundColor: newSizeTableCss ? '#f6f0e7' : '' } }, { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers === null || headers === void 0 ? void 0 : headers.map(function (header, index) { return (jsx$1(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: !(index === 0 && isMultilabel) && header }), index)); }) }), void 0) }), void 0), newSizeTableCss ? (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1("tr", { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ style: {
|
|
24482
|
+
backgroundColor: getCellColor(index, cell),
|
|
24483
|
+
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsx$1("tbody", { children: tableContent === null || tableContent === void 0 ? void 0 : tableContent.map(function (row, index) { return (jsx$1(TableRow$1, __assign$1({ className: getIsOdd(index) ? 'background' : '', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsx$1(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0)] }, void 0)] }, void 0));
|
|
24484
|
+
};
|
|
24472
24485
|
|
|
24473
24486
|
var TableElement = newStyled.table(templateObject_1$c || (templateObject_1$c = __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; });
|
|
24474
24487
|
var TableCell = newStyled.td(templateObject_2$9 || (templateObject_2$9 = __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; });
|