@trafilea/afrodita-components 5.0.0-beta.229 → 5.0.0-beta.230
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 +7 -1
- package/build/index.esm.js +440 -424
- package/build/index.esm.js.map +1 -1
- package/build/index.js +440 -423
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4142,7 +4142,7 @@ var InputValidationType;
|
|
|
4142
4142
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4143
4143
|
})(InputValidationType || (InputValidationType = {}));
|
|
4144
4144
|
|
|
4145
|
-
var Section = newStyled.div(templateObject_1$
|
|
4145
|
+
var Section = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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) {
|
|
4146
4146
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4147
4147
|
});
|
|
4148
4148
|
var CardHeader = function (_a) {
|
|
@@ -4153,14 +4153,14 @@ var CardFooter = function (_a) {
|
|
|
4153
4153
|
var children = _a.children;
|
|
4154
4154
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
4155
4155
|
};
|
|
4156
|
-
var templateObject_1$
|
|
4156
|
+
var templateObject_1$1B;
|
|
4157
4157
|
|
|
4158
|
-
var Body = newStyled.div(templateObject_1$
|
|
4158
|
+
var Body = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
4159
4159
|
var CardBody = function (_a) {
|
|
4160
4160
|
var children = _a.children;
|
|
4161
4161
|
return jsx$1(Body, { children: children }, void 0);
|
|
4162
4162
|
};
|
|
4163
|
-
var templateObject_1$
|
|
4163
|
+
var templateObject_1$1A;
|
|
4164
4164
|
|
|
4165
4165
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4166
4166
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4305,7 +4305,7 @@ var AssetsProvider = function (_a) {
|
|
|
4305
4305
|
};
|
|
4306
4306
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4307
4307
|
|
|
4308
|
-
var Container$
|
|
4308
|
+
var Container$12 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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) {
|
|
4309
4309
|
var flex = _a.flex;
|
|
4310
4310
|
return flex &&
|
|
4311
4311
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4320,14 +4320,14 @@ var Container$11 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = _
|
|
|
4320
4320
|
var Card$2 = function (_a) {
|
|
4321
4321
|
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;
|
|
4322
4322
|
var theme = useTheme();
|
|
4323
|
-
return (jsx$1(Container$
|
|
4323
|
+
return (jsx$1(Container$12, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4324
4324
|
};
|
|
4325
4325
|
var Card$3 = Object.assign(Card$2, {
|
|
4326
4326
|
Header: CardHeader,
|
|
4327
4327
|
Footer: CardFooter,
|
|
4328
4328
|
Body: CardBody,
|
|
4329
4329
|
});
|
|
4330
|
-
var templateObject_1$
|
|
4330
|
+
var templateObject_1$1z;
|
|
4331
4331
|
|
|
4332
4332
|
var Fragment = Fragment$1;
|
|
4333
4333
|
function jsx(type, props, key) {
|
|
@@ -4473,7 +4473,7 @@ function BaseSelectOption(_a) {
|
|
|
4473
4473
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4474
4474
|
}
|
|
4475
4475
|
|
|
4476
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4476
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4477
4477
|
function BaseSelect(_a) {
|
|
4478
4478
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4479
4479
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4483,7 +4483,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4483
4483
|
Options: BaseSelectOptions,
|
|
4484
4484
|
Option: BaseSelectOption,
|
|
4485
4485
|
});
|
|
4486
|
-
var templateObject_1$
|
|
4486
|
+
var templateObject_1$1y;
|
|
4487
4487
|
|
|
4488
4488
|
var CustomButton = newStyled.button(function (_a) {
|
|
4489
4489
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4540,14 +4540,14 @@ var withLabel = function (Button, label) {
|
|
|
4540
4540
|
};
|
|
4541
4541
|
};
|
|
4542
4542
|
|
|
4543
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4544
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4543
|
+
var ErrorText = newStyled.h3(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
4544
|
+
var ErrorContainer = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
4545
4545
|
var Error$1 = function (_a) {
|
|
4546
4546
|
var error = _a.error;
|
|
4547
4547
|
var theme = useTheme();
|
|
4548
4548
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4549
4549
|
};
|
|
4550
|
-
var templateObject_1$
|
|
4550
|
+
var templateObject_1$1x, templateObject_2$11;
|
|
4551
4551
|
|
|
4552
4552
|
var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4553
4553
|
var theme = _a.theme;
|
|
@@ -4713,7 +4713,7 @@ var CustomCheckboxStyles = {
|
|
|
4713
4713
|
},
|
|
4714
4714
|
};
|
|
4715
4715
|
|
|
4716
|
-
var Container$
|
|
4716
|
+
var Container$11 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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"])));
|
|
4717
4717
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4718
4718
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4719
4719
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4724,7 +4724,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4724
4724
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4725
4725
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4726
4726
|
]; });
|
|
4727
|
-
var Input$4 = newStyled.input(templateObject_2
|
|
4727
|
+
var Input$4 = newStyled.input(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
4728
4728
|
var disabled = _a.disabled;
|
|
4729
4729
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4730
4730
|
});
|
|
@@ -4753,9 +4753,9 @@ var Checkbox = function (_a) {
|
|
|
4753
4753
|
useEffect(function () {
|
|
4754
4754
|
mounted.current = true;
|
|
4755
4755
|
}, []);
|
|
4756
|
-
return (jsxs$1(Container$
|
|
4756
|
+
return (jsxs$1(Container$11, { children: [jsx$1(Input$4, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4757
4757
|
};
|
|
4758
|
-
var templateObject_1$
|
|
4758
|
+
var templateObject_1$1w, templateObject_2$10;
|
|
4759
4759
|
|
|
4760
4760
|
var CustomOption = newStyled.li(function (_a) {
|
|
4761
4761
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4802,8 +4802,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4802
4802
|
Option: BaseDropdownOption,
|
|
4803
4803
|
});
|
|
4804
4804
|
|
|
4805
|
-
var Container
|
|
4806
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2
|
|
4805
|
+
var Container$10 = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject([""], [""])));
|
|
4806
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$$ || (templateObject_2$$ = __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"])));
|
|
4807
4807
|
function SimpleDropdown(_a) {
|
|
4808
4808
|
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;
|
|
4809
4809
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4833,14 +4833,14 @@ function SimpleDropdown(_a) {
|
|
|
4833
4833
|
setSelectedValue(value);
|
|
4834
4834
|
}, [value, options, initialValue]);
|
|
4835
4835
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4836
|
-
return (jsxs$1(Container
|
|
4836
|
+
return (jsxs$1(Container$10, __assign$1({ as: showRequiredPlaceholder ? 'div' : Fragment$2 }, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-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));
|
|
4837
4837
|
}
|
|
4838
|
-
var templateObject_1$
|
|
4838
|
+
var templateObject_1$1v, templateObject_2$$;
|
|
4839
4839
|
|
|
4840
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4841
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4842
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4843
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4840
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"], ["\n position: relative;\n display: none;\n ::before,\n ::after {\n content: '';\n position: absolute;\n border: 11px solid transparent;\n margin-left: -10px;\n border-bottom-color: #e9e9e9;\n top: calc(", " - 5px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n ::after {\n border-bottom-color: #fff;\n top: calc(", " - 4px);\n right: calc(", " + 21px);\n z-index: 50 !important;\n }\n"])), function (props) { return props.top; }, function (props) { return props.right; }, function (props) { return props.top; }, function (props) { return props.right; });
|
|
4841
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"])), function (props) { return props.top; }, function (props) { return props.right; });
|
|
4842
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$M || (templateObject_3$M = __makeTemplateObject(["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"], ["\n border-bottom: 1px solid #e9e9e9;\n margin: 0;\n padding: 0;\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n line-height: 17px;\n color: var(--colors-shades-550-color);\n vertical-align: inherit;\n"])));
|
|
4843
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
4844
4844
|
var DropdownDialog = function (_a) {
|
|
4845
4845
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4846
4846
|
return (jsx$1(DialogDropdownWrapper, __assign$1({ top: top, right: right, style: style, className: className }, { children: jsx$1(DialogDropdownListContainer, __assign$1({ "data-testid": "dialog-dropdown-list", top: top, right: right }, { children: options.map(function (_a, idx) {
|
|
@@ -4848,7 +4848,7 @@ var DropdownDialog = function (_a) {
|
|
|
4848
4848
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4849
4849
|
}) }), void 0) }), void 0));
|
|
4850
4850
|
};
|
|
4851
|
-
var templateObject_1$
|
|
4851
|
+
var templateObject_1$1u, templateObject_2$_, templateObject_3$M, templateObject_4$y;
|
|
4852
4852
|
|
|
4853
4853
|
var getStylesBySize$a = function (size, theme) {
|
|
4854
4854
|
switch (size) {
|
|
@@ -4916,10 +4916,10 @@ var SelectorSecondary = function (_a) {
|
|
|
4916
4916
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4917
4917
|
// `variants` styles that are consistent through all themes.
|
|
4918
4918
|
var TAGS = {
|
|
4919
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4920
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4921
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4922
|
-
display1: newStyled.h1(templateObject_4$
|
|
4919
|
+
hero1: newStyled.h1(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject([""], [""]))),
|
|
4920
|
+
hero2: newStyled.h2(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject([""], [""]))),
|
|
4921
|
+
hero3: newStyled.h3(templateObject_3$L || (templateObject_3$L = __makeTemplateObject([""], [""]))),
|
|
4922
|
+
display1: newStyled.h1(templateObject_4$x || (templateObject_4$x = __makeTemplateObject([""], [""]))),
|
|
4923
4923
|
display2: newStyled.h2(templateObject_5$j || (templateObject_5$j = __makeTemplateObject([""], [""]))),
|
|
4924
4924
|
heading1: newStyled.h1(templateObject_6$g || (templateObject_6$g = __makeTemplateObject([""], [""]))),
|
|
4925
4925
|
heading2: newStyled.h2(templateObject_7$a || (templateObject_7$a = __makeTemplateObject([""], [""]))),
|
|
@@ -5040,9 +5040,9 @@ var DEFAULTS = {
|
|
|
5040
5040
|
size: 'regular',
|
|
5041
5041
|
},
|
|
5042
5042
|
};
|
|
5043
|
-
var templateObject_1$
|
|
5043
|
+
var templateObject_1$1t, templateObject_2$Z, templateObject_3$L, templateObject_4$x, templateObject_5$j, templateObject_6$g, templateObject_7$a, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2;
|
|
5044
5044
|
|
|
5045
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5045
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
5046
5046
|
var inline = _a.inline;
|
|
5047
5047
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5048
5048
|
});
|
|
@@ -5061,7 +5061,7 @@ var SizeSelector = function (_a) {
|
|
|
5061
5061
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
5062
5062
|
}) }), void 0)] }), void 0));
|
|
5063
5063
|
};
|
|
5064
|
-
var templateObject_1$
|
|
5064
|
+
var templateObject_1$1s;
|
|
5065
5065
|
|
|
5066
5066
|
var getStylesBySize$9 = function (size) {
|
|
5067
5067
|
switch (size) {
|
|
@@ -5088,7 +5088,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5088
5088
|
} });
|
|
5089
5089
|
};
|
|
5090
5090
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5091
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5091
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
5092
5092
|
};
|
|
5093
5093
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5094
5094
|
if (disabled)
|
|
@@ -5104,16 +5104,16 @@ var TextButton = function (_a) {
|
|
|
5104
5104
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5105
5105
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
5106
5106
|
};
|
|
5107
|
-
var templateObject_1$
|
|
5107
|
+
var templateObject_1$1r;
|
|
5108
5108
|
|
|
5109
|
-
var Container
|
|
5110
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
5111
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5109
|
+
var Container$$ = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
5110
|
+
var P$3 = newStyled.p(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5111
|
+
var PercentageSpan = newStyled.span(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
5112
5112
|
var SizeFitGuide = function (_a) {
|
|
5113
5113
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5114
|
-
return (jsxs$1(Container
|
|
5114
|
+
return (jsxs$1(Container$$, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5115
5115
|
};
|
|
5116
|
-
var templateObject_1$
|
|
5116
|
+
var templateObject_1$1q, templateObject_2$Y, templateObject_3$K;
|
|
5117
5117
|
|
|
5118
5118
|
var getStylesBySize$8 = function (size) {
|
|
5119
5119
|
switch (size) {
|
|
@@ -5143,7 +5143,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5143
5143
|
};
|
|
5144
5144
|
}
|
|
5145
5145
|
};
|
|
5146
|
-
var Container$
|
|
5146
|
+
var Container$_ = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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) {
|
|
5147
5147
|
var backgroundColor = _a.backgroundColor;
|
|
5148
5148
|
return backgroundColor;
|
|
5149
5149
|
}, function (_a) {
|
|
@@ -5165,7 +5165,7 @@ var Container$Z = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __
|
|
|
5165
5165
|
var size = _a.size;
|
|
5166
5166
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5167
5167
|
});
|
|
5168
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5168
|
+
var H3$3 = newStyled.h3(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5169
5169
|
var textColor = _a.textColor;
|
|
5170
5170
|
return textColor;
|
|
5171
5171
|
}, function (_a) {
|
|
@@ -5180,9 +5180,9 @@ var H3$3 = newStyled.h3(templateObject_2$W || (templateObject_2$W = __makeTempla
|
|
|
5180
5180
|
var DiscountTag = function (_a) {
|
|
5181
5181
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _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;
|
|
5182
5182
|
var theme = useTheme();
|
|
5183
|
-
return (jsx$1(Container$
|
|
5183
|
+
return (jsx$1(Container$_, __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 }, { children: jsxs$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5184
5184
|
};
|
|
5185
|
-
var templateObject_1$
|
|
5185
|
+
var templateObject_1$1p, templateObject_2$X;
|
|
5186
5186
|
|
|
5187
5187
|
var getStylesBySize$7 = function (size) {
|
|
5188
5188
|
switch (size) {
|
|
@@ -5212,8 +5212,8 @@ var getStylesBySize$7 = function (size) {
|
|
|
5212
5212
|
};
|
|
5213
5213
|
}
|
|
5214
5214
|
};
|
|
5215
|
-
var Container$
|
|
5216
|
-
var Price = newStyled.p(templateObject_2$
|
|
5215
|
+
var Container$Z = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5216
|
+
var Price = newStyled.p(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
5217
5217
|
var weight = _a.weight;
|
|
5218
5218
|
return (weight ? weight : '400');
|
|
5219
5219
|
}, function (_a) {
|
|
@@ -5242,7 +5242,7 @@ var Price = newStyled.p(templateObject_2$V || (templateObject_2$V = __makeTempla
|
|
|
5242
5242
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5243
5243
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5244
5244
|
});
|
|
5245
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5245
|
+
var TagContainer = newStyled.p(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5246
5246
|
var _b;
|
|
5247
5247
|
var size = _a.size;
|
|
5248
5248
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5263,9 +5263,9 @@ var PriceLabel = function (_a) {
|
|
|
5263
5263
|
weight: 700,
|
|
5264
5264
|
};
|
|
5265
5265
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5266
|
-
return (jsxs$1(Container$
|
|
5266
|
+
return (jsxs$1(Container$Z, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, 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));
|
|
5267
5267
|
};
|
|
5268
|
-
var templateObject_1$
|
|
5268
|
+
var templateObject_1$1o, templateObject_2$W, templateObject_3$J;
|
|
5269
5269
|
|
|
5270
5270
|
var getStylesBySize$6 = function (size) {
|
|
5271
5271
|
switch (size) {
|
|
@@ -5295,7 +5295,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5295
5295
|
};
|
|
5296
5296
|
}
|
|
5297
5297
|
};
|
|
5298
|
-
var Container$
|
|
5298
|
+
var Container$Y = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
5299
5299
|
var backgroundColor = _a.backgroundColor;
|
|
5300
5300
|
return backgroundColor;
|
|
5301
5301
|
}, function (_a) {
|
|
@@ -5317,7 +5317,7 @@ var Container$X = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __
|
|
|
5317
5317
|
var size = _a.size;
|
|
5318
5318
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5319
5319
|
});
|
|
5320
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5320
|
+
var H3$2 = newStyled.h3(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5321
5321
|
var textColor = _a.textColor;
|
|
5322
5322
|
return textColor;
|
|
5323
5323
|
}, function (_a) {
|
|
@@ -5332,11 +5332,11 @@ var H3$2 = newStyled.h3(templateObject_2$U || (templateObject_2$U = __makeTempla
|
|
|
5332
5332
|
var ClubOfferTag = function (_a) {
|
|
5333
5333
|
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;
|
|
5334
5334
|
var theme = useTheme();
|
|
5335
|
-
return (jsx$1(Container$
|
|
5335
|
+
return (jsx$1(Container$Y, __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$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5336
5336
|
};
|
|
5337
|
-
var templateObject_1$
|
|
5337
|
+
var templateObject_1$1n, templateObject_2$V;
|
|
5338
5338
|
|
|
5339
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5339
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5340
5340
|
var PriceLabelV2 = function (_a) {
|
|
5341
5341
|
var _b;
|
|
5342
5342
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
@@ -5365,7 +5365,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5365
5365
|
weight: 700,
|
|
5366
5366
|
};
|
|
5367
5367
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5368
|
-
return (jsxs$1(Container$
|
|
5368
|
+
return (jsxs$1(Container$Z, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { 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: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
|
|
5369
5369
|
borderRadius: '6px',
|
|
5370
5370
|
width: '110px',
|
|
5371
5371
|
height: '32px',
|
|
@@ -5373,7 +5373,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5373
5373
|
padding: '6px 12px 4px',
|
|
5374
5374
|
} }), void 0)) }), void 0))] }, void 0));
|
|
5375
5375
|
};
|
|
5376
|
-
var templateObject_1$
|
|
5376
|
+
var templateObject_1$1m;
|
|
5377
5377
|
|
|
5378
5378
|
var OneColorSelector = function (_a) {
|
|
5379
5379
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5414,10 +5414,10 @@ var OutOfStock = function (_a) {
|
|
|
5414
5414
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5415
5415
|
};
|
|
5416
5416
|
|
|
5417
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5418
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5419
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5420
|
-
var Span = newStyled.span(templateObject_4$
|
|
5417
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5418
|
+
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5419
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
5420
|
+
var Span = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5421
5421
|
var OptionsContainer = newStyled.div(templateObject_5$i || (templateObject_5$i = __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"])));
|
|
5422
5422
|
var Label$3 = function (_a) {
|
|
5423
5423
|
var label = _a.label, values = _a.values;
|
|
@@ -5436,23 +5436,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5436
5436
|
Option: Option,
|
|
5437
5437
|
OptionsContainer: OptionsContainer,
|
|
5438
5438
|
});
|
|
5439
|
-
var templateObject_1$
|
|
5439
|
+
var templateObject_1$1l, templateObject_2$U, templateObject_3$I, templateObject_4$w, templateObject_5$i;
|
|
5440
5440
|
|
|
5441
|
-
var Container$
|
|
5441
|
+
var Container$X = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
5442
5442
|
var borderColor = _a.borderColor;
|
|
5443
5443
|
return borderColor;
|
|
5444
5444
|
}, function (_a) {
|
|
5445
5445
|
var noStock = _a.noStock;
|
|
5446
5446
|
return (noStock ? '0.4' : '1');
|
|
5447
5447
|
});
|
|
5448
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5448
|
+
var Image$3 = newStyled.img(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5449
5449
|
var PatternSelector = function (_a) {
|
|
5450
5450
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5451
5451
|
var theme = useTheme();
|
|
5452
5452
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5453
|
-
return (jsx$1(Container$
|
|
5453
|
+
return (jsx$1(Container$X, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5454
5454
|
};
|
|
5455
|
-
var templateObject_1$
|
|
5455
|
+
var templateObject_1$1k, templateObject_2$T;
|
|
5456
5456
|
|
|
5457
5457
|
var renderOptions$1 = function (options) {
|
|
5458
5458
|
if (options.length === 0) {
|
|
@@ -5657,7 +5657,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5657
5657
|
literal: true,
|
|
5658
5658
|
});
|
|
5659
5659
|
|
|
5660
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5660
|
+
var Image$2 = newStyled.img(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n ", "\n\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
5661
5661
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5662
5662
|
return borderRadiusVariant &&
|
|
5663
5663
|
"\nborder-radius: 20px;\n";
|
|
@@ -5672,7 +5672,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5672
5672
|
var theme = useTheme();
|
|
5673
5673
|
return (jsx$1(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5674
5674
|
};
|
|
5675
|
-
var templateObject_1$
|
|
5675
|
+
var templateObject_1$1j;
|
|
5676
5676
|
|
|
5677
5677
|
var Button$4 = newStyled.button(function () { return ({
|
|
5678
5678
|
background: 'transparent',
|
|
@@ -9916,14 +9916,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9916
9916
|
return Slider;
|
|
9917
9917
|
}(React__default.Component);
|
|
9918
9918
|
|
|
9919
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9919
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
9920
9920
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9921
9921
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9922
9922
|
}, function (_a) {
|
|
9923
9923
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9924
9924
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9925
9925
|
});
|
|
9926
|
-
var templateObject_1$
|
|
9926
|
+
var templateObject_1$1i;
|
|
9927
9927
|
|
|
9928
9928
|
var getStylesBySize$5 = function (size) {
|
|
9929
9929
|
// rem units
|
|
@@ -9982,22 +9982,22 @@ var SliderNavigation = function (_a) {
|
|
|
9982
9982
|
} }, { children: jsx(StyledSlider, __assign$1({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop && dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles && styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
9983
9983
|
};
|
|
9984
9984
|
|
|
9985
|
-
var horizontalStyles = css(templateObject_1$
|
|
9986
|
-
var verticalStyles = css(templateObject_2$
|
|
9987
|
-
var Container$
|
|
9985
|
+
var horizontalStyles = css(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
9986
|
+
var verticalStyles = css(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
9987
|
+
var Container$W = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"], ["\n display: grid;\n max-height: 45rem;\n height: min-content;\n align-items: flex-start;\n ", "\n"])), function (_a) {
|
|
9988
9988
|
var position = _a.position;
|
|
9989
9989
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9990
9990
|
});
|
|
9991
|
-
var Button$3 = newStyled.button(templateObject_4$
|
|
9991
|
+
var Button$3 = newStyled.button(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
9992
9992
|
var ImagePreviewList = function (_a) {
|
|
9993
9993
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9994
|
-
return (jsx$1(Container$
|
|
9994
|
+
return (jsx$1(Container$W, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9995
9995
|
arrowWidth: 0.75,
|
|
9996
9996
|
arrowHeight: 1.25,
|
|
9997
9997
|
arrowPadding: 1.625,
|
|
9998
9998
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9999
9999
|
};
|
|
10000
|
-
var templateObject_1$
|
|
10000
|
+
var templateObject_1$1h, templateObject_2$S, templateObject_3$H, templateObject_4$v;
|
|
10001
10001
|
|
|
10002
10002
|
var propTypes = {exports: {}};
|
|
10003
10003
|
|
|
@@ -11590,24 +11590,24 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11590
11590
|
afterZoomOut: PropTypes.func
|
|
11591
11591
|
} : {};
|
|
11592
11592
|
|
|
11593
|
-
var Container$
|
|
11593
|
+
var Container$V = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"], ["\n ", "\n position: relative;\n height: '45rem' &.styleforhorizontal {\n height: '30rem';\n }\n display: block;\n height: fit-content;\n overflow: hidden;\n white-space: nowrap;\n grid-area: 1/2;\n"])), function (_a) {
|
|
11594
11594
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11595
11595
|
return borderRadiusVariant &&
|
|
11596
11596
|
"\n border-radius: 40px;\n ";
|
|
11597
11597
|
});
|
|
11598
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11599
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11600
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$
|
|
11598
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
11599
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11600
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
11601
11601
|
var ImageProductWithTags$1 = function (_a) {
|
|
11602
11602
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
11603
|
-
return (jsxs$1(Container$
|
|
11603
|
+
return (jsxs$1(Container$V, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11604
11604
|
alt: image.alt,
|
|
11605
11605
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11606
11606
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, void 0), 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));
|
|
11607
11607
|
};
|
|
11608
|
-
var templateObject_1$
|
|
11608
|
+
var templateObject_1$1g, templateObject_2$R, templateObject_3$G, templateObject_4$u;
|
|
11609
11609
|
|
|
11610
|
-
var Container$
|
|
11610
|
+
var Container$U = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: max-content 1fr;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
11611
11611
|
var ProductGallery = function (_a) {
|
|
11612
11612
|
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;
|
|
11613
11613
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11615,11 +11615,11 @@ var ProductGallery = function (_a) {
|
|
|
11615
11615
|
useEffect(function () {
|
|
11616
11616
|
setSelectedImage(initialValue);
|
|
11617
11617
|
}, [initialValue]);
|
|
11618
|
-
return (jsxs$1(Container$
|
|
11618
|
+
return (jsxs$1(Container$U, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11619
11619
|
setSelectedImage(value);
|
|
11620
11620
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
11621
11621
|
};
|
|
11622
|
-
var templateObject_1$
|
|
11622
|
+
var templateObject_1$1f;
|
|
11623
11623
|
|
|
11624
11624
|
/* base styles & size variants */
|
|
11625
11625
|
var StarStyles = {
|
|
@@ -11665,8 +11665,8 @@ var StarStyles = {
|
|
|
11665
11665
|
});
|
|
11666
11666
|
},
|
|
11667
11667
|
};
|
|
11668
|
-
var Container$
|
|
11669
|
-
var templateObject_1$
|
|
11668
|
+
var Container$T = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11669
|
+
var templateObject_1$1e;
|
|
11670
11670
|
|
|
11671
11671
|
var StarContainer = newStyled.div(function (_a) {
|
|
11672
11672
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11684,7 +11684,7 @@ var sizes = {
|
|
|
11684
11684
|
var StarList = function (_a) {
|
|
11685
11685
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
11686
11686
|
var theme = useTheme();
|
|
11687
|
-
return (jsx$1(Container$
|
|
11687
|
+
return (jsx$1(Container$T, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11688
11688
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11689
11689
|
}) }, void 0));
|
|
11690
11690
|
};
|
|
@@ -11728,8 +11728,8 @@ var LabelStyles = {
|
|
|
11728
11728
|
});
|
|
11729
11729
|
},
|
|
11730
11730
|
};
|
|
11731
|
-
var Container$
|
|
11732
|
-
var templateObject_1$
|
|
11731
|
+
var Container$S = newStyled.a(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11732
|
+
var templateObject_1$1d;
|
|
11733
11733
|
|
|
11734
11734
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11735
11735
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11767,11 +11767,11 @@ var Rating = function (_a) {
|
|
|
11767
11767
|
href: reviewsContainerId,
|
|
11768
11768
|
}
|
|
11769
11769
|
: {};
|
|
11770
|
-
return (jsxs$1(Container$
|
|
11770
|
+
return (jsxs$1(Container$S, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [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, " ", reviewsText] }), void 0)] }), void 0));
|
|
11771
11771
|
};
|
|
11772
11772
|
|
|
11773
|
-
var Container$
|
|
11774
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11773
|
+
var Container$R = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
11774
|
+
var P$2 = newStyled.p(templateObject_2$Q || (templateObject_2$Q = __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; });
|
|
11775
11775
|
var textButtonStyles = function (theme) { return ({
|
|
11776
11776
|
border: 'none',
|
|
11777
11777
|
background: 'transparent',
|
|
@@ -11784,9 +11784,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11784
11784
|
var FitPredictor = function (_a) {
|
|
11785
11785
|
var onClick = _a.onClick;
|
|
11786
11786
|
var theme = useTheme();
|
|
11787
|
-
return (jsxs(Container$
|
|
11787
|
+
return (jsxs(Container$R, __assign$1({ theme: theme }, { children: [jsx(Container$R, { 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(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
11788
11788
|
};
|
|
11789
|
-
var templateObject_1$
|
|
11789
|
+
var templateObject_1$1c, templateObject_2$Q;
|
|
11790
11790
|
|
|
11791
11791
|
var P$1 = newStyled.p(function (_a) {
|
|
11792
11792
|
var color = _a.color;
|
|
@@ -11800,7 +11800,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
11800
11800
|
margin: '0.938rem 4.188rem',
|
|
11801
11801
|
});
|
|
11802
11802
|
});
|
|
11803
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11803
|
+
var Bar$1 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11804
11804
|
var height = _a.height;
|
|
11805
11805
|
return height || '0.5rem';
|
|
11806
11806
|
}, function (_a) {
|
|
@@ -11829,7 +11829,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11829
11829
|
position: 'absolute',
|
|
11830
11830
|
});
|
|
11831
11831
|
});
|
|
11832
|
-
var Container$
|
|
11832
|
+
var Container$Q = newStyled.div(function (_a) {
|
|
11833
11833
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
11834
11834
|
return ({
|
|
11835
11835
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11843,9 +11843,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11843
11843
|
var ProgressBar = function (_a) {
|
|
11844
11844
|
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;
|
|
11845
11845
|
var theme = useTheme();
|
|
11846
|
-
return (jsxs$1(Container$
|
|
11846
|
+
return (jsxs$1(Container$Q, __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$1, { "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));
|
|
11847
11847
|
};
|
|
11848
|
-
var templateObject_1$
|
|
11848
|
+
var templateObject_1$1b;
|
|
11849
11849
|
|
|
11850
11850
|
var getStylesBySize$4 = function (size) {
|
|
11851
11851
|
switch (size) {
|
|
@@ -11866,7 +11866,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11866
11866
|
};
|
|
11867
11867
|
}
|
|
11868
11868
|
};
|
|
11869
|
-
var Container$
|
|
11869
|
+
var Container$P = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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 svg {\n margin: ", ";\n }\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 svg {\n margin: ", ";\n }\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) {
|
|
11870
11870
|
var backgroundColor = _a.backgroundColor;
|
|
11871
11871
|
return backgroundColor;
|
|
11872
11872
|
}, function (_a) {
|
|
@@ -11894,9 +11894,9 @@ var Container$O = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __
|
|
|
11894
11894
|
var IconButton = function (_a) {
|
|
11895
11895
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11896
11896
|
var theme = useTheme();
|
|
11897
|
-
return (jsx$1(Container$
|
|
11897
|
+
return (jsx$1(Container$P, __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));
|
|
11898
11898
|
};
|
|
11899
|
-
var templateObject_1$
|
|
11899
|
+
var templateObject_1$1a;
|
|
11900
11900
|
|
|
11901
11901
|
var TooltipArrow = function (_a) {
|
|
11902
11902
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11976,7 +11976,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11976
11976
|
}
|
|
11977
11977
|
};
|
|
11978
11978
|
|
|
11979
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
11979
|
+
var Wrapper$6 = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"])), function (_a) {
|
|
11980
11980
|
var position = _a.position;
|
|
11981
11981
|
return getWrapperFlexDirection(position);
|
|
11982
11982
|
});
|
|
@@ -12001,14 +12001,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
12001
12001
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
12002
12002
|
return actual === expected ? margin : '0';
|
|
12003
12003
|
};
|
|
12004
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
12004
|
+
var ContentWrapper = newStyled.div(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"])), function (_a) {
|
|
12005
12005
|
var borderColor = _a.borderColor;
|
|
12006
12006
|
return borderColor;
|
|
12007
12007
|
}, function (_a) {
|
|
12008
12008
|
var backgroundColor = _a.backgroundColor;
|
|
12009
12009
|
return backgroundColor;
|
|
12010
12010
|
});
|
|
12011
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
12011
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
12012
12012
|
var position = _a.position;
|
|
12013
12013
|
return getArrowRotation(position);
|
|
12014
12014
|
}, function (_a) {
|
|
@@ -12018,7 +12018,7 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$E || (templateObject_
|
|
|
12018
12018
|
var position = _a.position;
|
|
12019
12019
|
return getArrowContainerMargin(position);
|
|
12020
12020
|
});
|
|
12021
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
12021
|
+
var TooltipText = newStyled.div(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
12022
12022
|
var color = _a.color;
|
|
12023
12023
|
return color;
|
|
12024
12024
|
});
|
|
@@ -12028,7 +12028,7 @@ var Title$7 = newStyled.h1(templateObject_6$f || (templateObject_6$f = __makeTem
|
|
|
12028
12028
|
return color;
|
|
12029
12029
|
});
|
|
12030
12030
|
var IconContainer$5 = newStyled.div(templateObject_7$9 || (templateObject_7$9 = __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"])));
|
|
12031
|
-
var templateObject_1$
|
|
12031
|
+
var templateObject_1$19, templateObject_2$P, templateObject_3$F, templateObject_4$t, templateObject_5$h, templateObject_6$f, templateObject_7$9;
|
|
12032
12032
|
|
|
12033
12033
|
var Tooltip = function (_a) {
|
|
12034
12034
|
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
|
|
@@ -12115,7 +12115,7 @@ var AccordionDetailsStyles = {
|
|
|
12115
12115
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
12116
12116
|
var StyledButton$1 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
12117
12117
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
12118
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
12118
|
+
var StyledContent = newStyled.button(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n"])));
|
|
12119
12119
|
var Accordion$1 = function (_a) {
|
|
12120
12120
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
12121
12121
|
var theme = useTheme();
|
|
@@ -12127,7 +12127,7 @@ var Accordion$1 = function (_a) {
|
|
|
12127
12127
|
return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsx$1(ControlIcon, { title: openWithForce ? 'close icon' : 'open icon', height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0)] }), void 0), showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
12128
12128
|
} }), void 0));
|
|
12129
12129
|
};
|
|
12130
|
-
var templateObject_1$
|
|
12130
|
+
var templateObject_1$18;
|
|
12131
12131
|
|
|
12132
12132
|
/* base styles & size variants */
|
|
12133
12133
|
var CustomRadioStyles$1 = {
|
|
@@ -12192,9 +12192,9 @@ var ContainerStyles$1 = {
|
|
|
12192
12192
|
},
|
|
12193
12193
|
};
|
|
12194
12194
|
|
|
12195
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
12196
|
-
var Container$
|
|
12197
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
12195
|
+
var Wrapper$5 = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12196
|
+
var Container$O = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
12197
|
+
var Input$3 = newStyled.input(templateObject_2$O || (templateObject_2$O = __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) {
|
|
12198
12198
|
var disabled = _a.disabled;
|
|
12199
12199
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12200
12200
|
});
|
|
@@ -12202,7 +12202,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
12202
12202
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled),
|
|
12203
12203
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
12204
12204
|
]; });
|
|
12205
|
-
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$
|
|
12205
|
+
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12206
12206
|
var theme = _a.theme;
|
|
12207
12207
|
return theme.component.radio.textSize;
|
|
12208
12208
|
}, function (_a) {
|
|
@@ -12216,9 +12216,9 @@ var RadioInput = function (_a) {
|
|
|
12216
12216
|
var value = event.currentTarget.value;
|
|
12217
12217
|
onChange({ value: value, label: label });
|
|
12218
12218
|
};
|
|
12219
|
-
return (jsxs$1(Wrapper$5, { children: [jsxs$1(Container$
|
|
12219
|
+
return (jsxs$1(Wrapper$5, { children: [jsxs$1(Container$O, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$3, { 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$2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12220
12220
|
};
|
|
12221
|
-
var templateObject_1$
|
|
12221
|
+
var templateObject_1$17, templateObject_2$O, templateObject_3$E;
|
|
12222
12222
|
|
|
12223
12223
|
var RadioGroupInput = function (_a) {
|
|
12224
12224
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12297,9 +12297,9 @@ var ContainerStyles = {
|
|
|
12297
12297
|
},
|
|
12298
12298
|
};
|
|
12299
12299
|
|
|
12300
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
12301
|
-
var Container$
|
|
12302
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
12300
|
+
var Wrapper$4 = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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"])));
|
|
12301
|
+
var Container$N = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
12302
|
+
var Input$2 = newStyled.input(templateObject_2$N || (templateObject_2$N = __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) {
|
|
12303
12303
|
var disabled = _a.disabled;
|
|
12304
12304
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12305
12305
|
});
|
|
@@ -12307,7 +12307,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
12307
12307
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12308
12308
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
12309
12309
|
]; });
|
|
12310
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
12310
|
+
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n &[aria-checked='true'] {\n color: var(--colors-pallete-wine-color);\n }\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n &[aria-checked='true'] {\n color: var(--colors-pallete-wine-color);\n }\n"])), function (_a) {
|
|
12311
12311
|
var theme = _a.theme;
|
|
12312
12312
|
return theme.component.radio.textSize;
|
|
12313
12313
|
}, function (_a) {
|
|
@@ -12321,9 +12321,9 @@ var ClubRadioInput = function (_a) {
|
|
|
12321
12321
|
var value = event.currentTarget.value;
|
|
12322
12322
|
onChange({ value: value, label: label });
|
|
12323
12323
|
};
|
|
12324
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
12324
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$N, __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, { 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, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
12325
12325
|
};
|
|
12326
|
-
var templateObject_1$
|
|
12326
|
+
var templateObject_1$16, templateObject_2$N, templateObject_3$D;
|
|
12327
12327
|
|
|
12328
12328
|
var ClubRadioGroupInput = function (_a) {
|
|
12329
12329
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12337,37 +12337,37 @@ var ClubRadioGroupInput = function (_a) {
|
|
|
12337
12337
|
}) }), void 0));
|
|
12338
12338
|
};
|
|
12339
12339
|
|
|
12340
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
12341
|
-
var Container$
|
|
12340
|
+
var Wrapper$3 = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
12341
|
+
var Container$M = newStyled.div(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
12342
12342
|
var Minimalistic = function (_a) {
|
|
12343
12343
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
12344
12344
|
var theme = useTheme();
|
|
12345
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
12345
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), 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(Container$M, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
12346
12346
|
};
|
|
12347
|
-
var templateObject_1$
|
|
12347
|
+
var templateObject_1$15, templateObject_2$M;
|
|
12348
12348
|
|
|
12349
|
-
var Container$
|
|
12350
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
12351
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
12352
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
12349
|
+
var Container$L = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
12350
|
+
var Title$6 = newStyled.h1(templateObject_2$L || (templateObject_2$L = __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; });
|
|
12351
|
+
var Details$1 = newStyled.span(templateObject_3$C || (templateObject_3$C = __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; });
|
|
12352
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
12353
12353
|
var Simple = function (_a) {
|
|
12354
12354
|
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;
|
|
12355
12355
|
var theme = useTheme();
|
|
12356
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
12356
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$L, { 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$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
12357
12357
|
};
|
|
12358
|
-
var templateObject_1$
|
|
12358
|
+
var templateObject_1$14, templateObject_2$L, templateObject_3$C, templateObject_4$s;
|
|
12359
12359
|
|
|
12360
12360
|
var Bundle = {
|
|
12361
12361
|
Minimalistic: Minimalistic,
|
|
12362
12362
|
Simple: Simple,
|
|
12363
12363
|
};
|
|
12364
12364
|
|
|
12365
|
-
var Container$
|
|
12365
|
+
var Container$K = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
12366
12366
|
var Tag$2 = function (_a) {
|
|
12367
12367
|
var text = _a.text, className = _a.className;
|
|
12368
|
-
return jsx$1(Container$
|
|
12368
|
+
return jsx$1(Container$K, __assign$1({ className: className }, { children: text }), void 0);
|
|
12369
12369
|
};
|
|
12370
|
-
var templateObject_1$
|
|
12370
|
+
var templateObject_1$13;
|
|
12371
12371
|
|
|
12372
12372
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
12373
12373
|
switch (size) {
|
|
@@ -12470,11 +12470,11 @@ var Timer = function (_a) {
|
|
|
12470
12470
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12471
12471
|
};
|
|
12472
12472
|
|
|
12473
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
12473
|
+
var Label$2 = newStyled.span(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
12474
12474
|
var color = _a.color;
|
|
12475
12475
|
return color;
|
|
12476
12476
|
});
|
|
12477
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12477
|
+
var MandatoryIcon = newStyled.span(templateObject_2$K || (templateObject_2$K = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
12478
12478
|
var color = _a.color;
|
|
12479
12479
|
return color;
|
|
12480
12480
|
});
|
|
@@ -12483,7 +12483,7 @@ var InputLabel = function (_a) {
|
|
|
12483
12483
|
var theme = useTheme();
|
|
12484
12484
|
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));
|
|
12485
12485
|
};
|
|
12486
|
-
var templateObject_1$
|
|
12486
|
+
var templateObject_1$12, templateObject_2$K;
|
|
12487
12487
|
|
|
12488
12488
|
var containerByStatus = function (theme, status) {
|
|
12489
12489
|
if (status === InputValidationType.Valid)
|
|
@@ -12492,12 +12492,12 @@ var containerByStatus = function (theme, status) {
|
|
|
12492
12492
|
return theme.colors.semantic.urgent.color;
|
|
12493
12493
|
return '';
|
|
12494
12494
|
};
|
|
12495
|
-
var Container$
|
|
12495
|
+
var Container$J = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12496
12496
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12497
12497
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12498
12498
|
});
|
|
12499
|
-
var StyledLabel = newStyled.label(templateObject_2$
|
|
12500
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
12499
|
+
var StyledLabel = newStyled.label(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
12500
|
+
var StyledInput = newStyled.input(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
12501
12501
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12502
12502
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12503
12503
|
}, function (_a) {
|
|
@@ -12552,13 +12552,13 @@ var StyledInput = newStyled.input(templateObject_3$A || (templateObject_3$A = __
|
|
|
12552
12552
|
return hasValue &&
|
|
12553
12553
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12554
12554
|
});
|
|
12555
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
12555
|
+
var InputWrapper = newStyled.div(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12556
12556
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12557
12557
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12558
12558
|
});
|
|
12559
12559
|
var AnimatedPlaceholder = newStyled.span(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
12560
12560
|
var ClearInput = newStyled.div(templateObject_6$e || (templateObject_6$e = __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"])));
|
|
12561
|
-
var templateObject_1$
|
|
12561
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$B, templateObject_4$r, templateObject_5$g, templateObject_6$e;
|
|
12562
12562
|
|
|
12563
12563
|
var BaseInput = function (_a) {
|
|
12564
12564
|
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"]);
|
|
@@ -12581,7 +12581,7 @@ var BaseInput = function (_a) {
|
|
|
12581
12581
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12582
12582
|
}, [status]);
|
|
12583
12583
|
var hasValue = Boolean(value);
|
|
12584
|
-
return (jsxs$1(Container$
|
|
12584
|
+
return (jsxs$1(Container$J, __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) {
|
|
12585
12585
|
onChange(event.target.value, event);
|
|
12586
12586
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel, __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 () {
|
|
12587
12587
|
onChange('', { target: { value: '' } });
|
|
@@ -12602,11 +12602,11 @@ var Button$2 = function (_a) {
|
|
|
12602
12602
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12603
12603
|
};
|
|
12604
12604
|
|
|
12605
|
-
var Container$
|
|
12605
|
+
var Container$I = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
12606
12606
|
var theme = _a.theme;
|
|
12607
12607
|
return theme.component.inputCustom.input.borderRadius;
|
|
12608
12608
|
});
|
|
12609
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12609
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"], ["\n max-width: 50%;\n margin-left: -6px;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
12610
12610
|
var theme = _a.theme;
|
|
12611
12611
|
return theme.component.inputCustom.button.borderRadius;
|
|
12612
12612
|
});
|
|
@@ -12619,23 +12619,23 @@ var Custom = function (_a) {
|
|
|
12619
12619
|
text: text,
|
|
12620
12620
|
disabled: rest.disabled,
|
|
12621
12621
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12622
|
-
return (jsx$1(Container$
|
|
12622
|
+
return (jsx$1(Container$I, __assign$1({ theme: theme }, { children: jsx$1(BaseInput, __assign$1({}, rest, { children: jsx$1(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12623
12623
|
};
|
|
12624
|
-
var templateObject_1
|
|
12624
|
+
var templateObject_1$10, templateObject_2$I;
|
|
12625
12625
|
|
|
12626
|
-
var SuccessContainer = newStyled.div(templateObject_1
|
|
12626
|
+
var SuccessContainer = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12627
12627
|
var size = _a.size;
|
|
12628
12628
|
return (size === 'small' ? '36px' : '');
|
|
12629
12629
|
});
|
|
12630
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12631
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12630
|
+
var SuccessMessage = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
12631
|
+
var SuccessText = newStyled.span(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
12632
12632
|
var Success = function (_a) {
|
|
12633
12633
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12634
12634
|
return (jsxs$1(SuccessContainer, __assign$1({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12635
12635
|
};
|
|
12636
|
-
var templateObject_1
|
|
12636
|
+
var templateObject_1$$, templateObject_2$H, templateObject_3$A;
|
|
12637
12637
|
|
|
12638
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12638
|
+
var ButtonContainer = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
12639
12639
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12640
12640
|
return status === InputValidationType.Empty &&
|
|
12641
12641
|
type === 'primary' &&
|
|
@@ -12652,21 +12652,21 @@ var BasePlusButton = function (_a) {
|
|
|
12652
12652
|
}
|
|
12653
12653
|
return (jsx$1(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsx$1(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12654
12654
|
};
|
|
12655
|
-
var templateObject_1$
|
|
12655
|
+
var templateObject_1$_;
|
|
12656
12656
|
|
|
12657
|
-
var Container$
|
|
12658
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12657
|
+
var Container$H = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12658
|
+
var IconContainer$4 = newStyled.div(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
12659
12659
|
var BasePlusIcon = function (_a) {
|
|
12660
12660
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12661
12661
|
var theme = useTheme();
|
|
12662
12662
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12663
|
-
return (jsx$1(Container$
|
|
12663
|
+
return (jsx$1(Container$H, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
12664
12664
|
? theme.colors.shades['700'].color
|
|
12665
12665
|
: status === InputValidationType.Error
|
|
12666
12666
|
? theme.colors.semantic.urgent.color
|
|
12667
12667
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12668
12668
|
};
|
|
12669
|
-
var templateObject_1$
|
|
12669
|
+
var templateObject_1$Z, templateObject_2$G;
|
|
12670
12670
|
|
|
12671
12671
|
var Input$1 = {
|
|
12672
12672
|
Simple: BaseInput,
|
|
@@ -12675,7 +12675,7 @@ var Input$1 = {
|
|
|
12675
12675
|
SimplePlusIcon: BasePlusIcon,
|
|
12676
12676
|
};
|
|
12677
12677
|
|
|
12678
|
-
var Container$
|
|
12678
|
+
var Container$G = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
12679
12679
|
var width = _a.width;
|
|
12680
12680
|
return width;
|
|
12681
12681
|
}, function (_a) {
|
|
@@ -12691,11 +12691,11 @@ var Container$F = newStyled.div(templateObject_1$X || (templateObject_1$X = __ma
|
|
|
12691
12691
|
var PaymentMethod = function (_a) {
|
|
12692
12692
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12693
12693
|
var theme = useTheme();
|
|
12694
|
-
return (jsx$1(Container$
|
|
12694
|
+
return (jsx$1(Container$G, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
12695
12695
|
};
|
|
12696
|
-
var templateObject_1$
|
|
12696
|
+
var templateObject_1$Y;
|
|
12697
12697
|
|
|
12698
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12698
|
+
var Text$5 = newStyled.h3(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
12699
12699
|
var backgroundColor = _a.backgroundColor;
|
|
12700
12700
|
return backgroundColor;
|
|
12701
12701
|
}, function (_a) {
|
|
@@ -12707,11 +12707,11 @@ var OfferBanner = function (_a) {
|
|
|
12707
12707
|
var theme = useTheme();
|
|
12708
12708
|
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12709
12709
|
};
|
|
12710
|
-
var templateObject_1$
|
|
12710
|
+
var templateObject_1$X;
|
|
12711
12711
|
|
|
12712
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12713
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12714
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12712
|
+
var Wrapper$2 = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
12713
|
+
var GrandTotal = newStyled.h1(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
12714
|
+
var Currency = newStyled.span(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
12715
12715
|
var theme = _a.theme;
|
|
12716
12716
|
return theme.component.total.basicTotal.currency.color;
|
|
12717
12717
|
}, function (_a) {
|
|
@@ -12724,7 +12724,7 @@ var Currency = newStyled.span(templateObject_3$y || (templateObject_3$y = __make
|
|
|
12724
12724
|
var theme = _a.theme;
|
|
12725
12725
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12726
12726
|
});
|
|
12727
|
-
var Container$
|
|
12727
|
+
var Container$F = newStyled.div(templateObject_4$q || (templateObject_4$q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
|
|
12728
12728
|
var DiscountText = newStyled.h3(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"])), function (_a) {
|
|
12729
12729
|
var theme = _a.theme;
|
|
12730
12730
|
return theme.component.total.basicTotal.savings.textFontSize;
|
|
@@ -12745,23 +12745,23 @@ var DiscountAmount = newStyled.h3(templateObject_6$d || (templateObject_6$d = __
|
|
|
12745
12745
|
var Total = function (_a) {
|
|
12746
12746
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12747
12747
|
var theme = useTheme();
|
|
12748
|
-
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
12748
|
+
return (jsxs$1(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$F, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsx$1(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12749
12749
|
};
|
|
12750
|
-
var templateObject_1$
|
|
12750
|
+
var templateObject_1$W, templateObject_2$F, templateObject_3$z, templateObject_4$q, templateObject_5$f, templateObject_6$d;
|
|
12751
12751
|
|
|
12752
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12752
|
+
var Wrapper$1 = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12753
12753
|
var color = _a.color;
|
|
12754
12754
|
return color;
|
|
12755
12755
|
});
|
|
12756
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12757
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12756
|
+
var ItemContainer = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
12757
|
+
var Item$2 = newStyled.h4(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12758
12758
|
var theme = _a.theme;
|
|
12759
12759
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12760
12760
|
}, function (_a) {
|
|
12761
12761
|
var theme = _a.theme;
|
|
12762
12762
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
12763
12763
|
});
|
|
12764
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12764
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12765
12765
|
var color = _a.color;
|
|
12766
12766
|
return color;
|
|
12767
12767
|
});
|
|
@@ -12774,30 +12774,30 @@ var Subtotal = function (_a) {
|
|
|
12774
12774
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12775
12775
|
})] }), void 0));
|
|
12776
12776
|
};
|
|
12777
|
-
var templateObject_1$
|
|
12777
|
+
var templateObject_1$V, templateObject_2$E, templateObject_3$y, templateObject_4$p;
|
|
12778
12778
|
|
|
12779
12779
|
var Totals = {
|
|
12780
12780
|
Total: Total,
|
|
12781
12781
|
Subtotal: Subtotal,
|
|
12782
12782
|
};
|
|
12783
12783
|
|
|
12784
|
-
var Container$
|
|
12785
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12786
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12787
|
-
var Details = newStyled.span(templateObject_4$
|
|
12784
|
+
var Container$E = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
|
|
12785
|
+
var IconContainer$3 = newStyled.div(templateObject_2$D || (templateObject_2$D = __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"])));
|
|
12786
|
+
var Text$4 = newStyled.p(templateObject_3$x || (templateObject_3$x = __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; });
|
|
12787
|
+
var Details = newStyled.span(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
12788
12788
|
var Note = function (_a) {
|
|
12789
12789
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12790
12790
|
var theme = useTheme();
|
|
12791
|
-
return (jsxs$1(Container$
|
|
12791
|
+
return (jsxs$1(Container$E, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __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));
|
|
12792
12792
|
};
|
|
12793
|
-
var templateObject_1$
|
|
12793
|
+
var templateObject_1$U, templateObject_2$D, templateObject_3$x, templateObject_4$o;
|
|
12794
12794
|
|
|
12795
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
12796
|
-
var Line = newStyled.div(templateObject_2$
|
|
12797
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12795
|
+
var Title$5 = newStyled.h1(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
12796
|
+
var Line = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
12797
|
+
var Row$1 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
12798
12798
|
flexDirection: ['column', 'row'],
|
|
12799
12799
|
}));
|
|
12800
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
12800
|
+
var Col$1 = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
12801
12801
|
margin: ['0', '0 1.25rem'],
|
|
12802
12802
|
marginBottom: ['1.875rem', '0'],
|
|
12803
12803
|
alignItems: ['center', 'flex-start'],
|
|
@@ -12829,46 +12829,46 @@ var DeliveryDetails = function (_a) {
|
|
|
12829
12829
|
var theme = useTheme();
|
|
12830
12830
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].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$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, 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$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, 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$1, __assign$1({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign$1({ theme: theme }, { children: [jsx$1(IconContainer$2, __assign$1({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, 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));
|
|
12831
12831
|
};
|
|
12832
|
-
var templateObject_1$
|
|
12832
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$w, templateObject_4$n, templateObject_5$e, templateObject_6$c, templateObject_7$8, templateObject_8$6;
|
|
12833
12833
|
|
|
12834
|
-
var Container$
|
|
12835
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12834
|
+
var Container$D = newStyled.div(templateObject_1$S || (templateObject_1$S = __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"])));
|
|
12835
|
+
var Text$3 = newStyled.p(templateObject_2$B || (templateObject_2$B = __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; });
|
|
12836
12836
|
var ScrollToTop = function (_a) {
|
|
12837
12837
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12838
12838
|
var theme = useTheme();
|
|
12839
12839
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12840
|
-
return (jsxs$1(Container$
|
|
12840
|
+
return (jsxs$1(Container$D, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12841
12841
|
};
|
|
12842
|
-
var templateObject_1$
|
|
12842
|
+
var templateObject_1$S, templateObject_2$B;
|
|
12843
12843
|
|
|
12844
12844
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12845
|
-
var Container$
|
|
12845
|
+
var Container$C = newStyled.div(templateObject_1$R || (templateObject_1$R = __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) {
|
|
12846
12846
|
var color = _a.color;
|
|
12847
12847
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12848
12848
|
});
|
|
12849
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12849
|
+
var H1 = newStyled.h1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
12850
12850
|
var OrderBar = function (_a) {
|
|
12851
12851
|
var message = _a.message, color = _a.color;
|
|
12852
12852
|
var theme = useTheme();
|
|
12853
|
-
return (jsxs$1(Container$
|
|
12853
|
+
return (jsxs$1(Container$C, __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.colors.shades['700'].color }, { children: message }), void 0)] }), void 0));
|
|
12854
12854
|
};
|
|
12855
|
-
var templateObject_1$
|
|
12855
|
+
var templateObject_1$R, templateObject_2$A;
|
|
12856
12856
|
|
|
12857
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
12858
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
12859
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
12860
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
12857
|
+
var TableElement$1 = newStyled.table(templateObject_1$Q || (templateObject_1$Q = __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; });
|
|
12858
|
+
var TableCell$1 = newStyled.td(templateObject_2$z || (templateObject_2$z = __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; });
|
|
12859
|
+
var TableHead$1 = newStyled.th(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12860
|
+
var TableRow$1 = newStyled.tr(templateObject_4$m || (templateObject_4$m = __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; });
|
|
12861
12861
|
var SizeTable = function (_a) {
|
|
12862
12862
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
12863
12863
|
var theme = useTheme();
|
|
12864
12864
|
return (jsxs$1(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsx$1("thead", { children: jsx$1(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: 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), jsx$1("tbody", { children: 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.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));
|
|
12865
12865
|
};
|
|
12866
|
-
var templateObject_1$
|
|
12866
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$v, templateObject_4$m;
|
|
12867
12867
|
|
|
12868
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12869
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
12870
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
12871
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
12868
|
+
var TableElement = newStyled.table(templateObject_1$P || (templateObject_1$P = __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; });
|
|
12869
|
+
var TableCell = newStyled.td(templateObject_2$y || (templateObject_2$y = __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; });
|
|
12870
|
+
var TableHead = newStyled.th(templateObject_3$u || (templateObject_3$u = __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; });
|
|
12871
|
+
var TableRow = newStyled.tr(templateObject_4$l || (templateObject_4$l = __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; });
|
|
12872
12872
|
var SizeChartTable = function (_a) {
|
|
12873
12873
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
12874
12874
|
var theme = useTheme();
|
|
@@ -12899,18 +12899,18 @@ var SizeChartTable = function (_a) {
|
|
|
12899
12899
|
backgroundColor: getCellColor(index, cell),
|
|
12900
12900
|
}, 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, __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, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
12901
12901
|
};
|
|
12902
|
-
var templateObject_1$
|
|
12902
|
+
var templateObject_1$P, templateObject_2$y, templateObject_3$u, templateObject_4$l;
|
|
12903
12903
|
|
|
12904
|
-
var Img = newStyled.img(templateObject_1$
|
|
12904
|
+
var Img = newStyled.img(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
12905
12905
|
var Image = function (_a) {
|
|
12906
12906
|
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
12907
12907
|
return (jsx$1(Img, { src: src, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12908
12908
|
};
|
|
12909
|
-
var templateObject_1$
|
|
12909
|
+
var templateObject_1$O;
|
|
12910
12910
|
|
|
12911
|
-
var Container$
|
|
12912
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
12913
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
12911
|
+
var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
12912
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12913
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
12914
12914
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
12915
12915
|
}));
|
|
12916
12916
|
var Title$4 = newStyled.h2(function (_a) {
|
|
@@ -12933,7 +12933,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
12933
12933
|
margin: '0.063rem 0',
|
|
12934
12934
|
});
|
|
12935
12935
|
});
|
|
12936
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
12936
|
+
var PriceContainer = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
12937
12937
|
var withTag = _a.withTag; _a.theme;
|
|
12938
12938
|
return withTag
|
|
12939
12939
|
? mediaQueries({
|
|
@@ -12946,9 +12946,9 @@ var Quantity = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeT
|
|
|
12946
12946
|
var SimpleOrderItem = function (_a) {
|
|
12947
12947
|
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;
|
|
12948
12948
|
var theme = useTheme();
|
|
12949
|
-
return (jsxs$1(Container$
|
|
12949
|
+
return (jsxs$1(Container$B, __assign$1({ className: className }, { children: [jsxs$1(ImageContainer$4, { children: [jsx$1(Image, { 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: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$4, __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));
|
|
12950
12950
|
};
|
|
12951
|
-
var templateObject_1$
|
|
12951
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$t, templateObject_4$k, templateObject_5$d;
|
|
12952
12952
|
|
|
12953
12953
|
function formatDate(date) {
|
|
12954
12954
|
var day = date.getDate();
|
|
@@ -12957,10 +12957,10 @@ function formatDate(date) {
|
|
|
12957
12957
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12958
12958
|
}
|
|
12959
12959
|
|
|
12960
|
-
var Container$
|
|
12961
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12962
|
-
var Content$
|
|
12963
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
12960
|
+
var Container$A = 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"])));
|
|
12961
|
+
var Heading = newStyled.div(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
12962
|
+
var Content$2 = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12963
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12964
12964
|
var DateText$1 = newStyled.span(templateObject_5$c || (templateObject_5$c = __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"])));
|
|
12965
12965
|
var VariantText = newStyled.div(templateObject_6$b || (templateObject_6$b = __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"])));
|
|
12966
12966
|
var ReviewerName$1 = newStyled.h2(templateObject_7$7 || (templateObject_7$7 = __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"])));
|
|
@@ -12978,17 +12978,17 @@ var ButtonSecondaryWrapper = newStyled(ButtonSecondary)(templateObject_18$1 || (
|
|
|
12978
12978
|
var Review$1 = function (_a) {
|
|
12979
12979
|
var reviewId = _a.reviewId, reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, images = _a.images, reviewVariant = _a.reviewVariant, onClickImage = _a.onClickImage, helpfulActionText = _a.helpfulActionText, helpfulAction = _a.helpfulAction, helpfulCount = _a.helpfulCount;
|
|
12980
12980
|
var theme = useTheme();
|
|
12981
|
-
return (jsxs$1(Container$
|
|
12981
|
+
return (jsxs$1(Container$A, { children: [jsxs$1(Heading, __assign$1({ theme: theme }, { children: [jsx$1(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content$2, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsx$1(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsx$1(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxs$1(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && 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$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsx$1(Image, { src: image.src, alt: image.alt, height: "10rem" }, 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 && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
12982
12982
|
};
|
|
12983
|
-
var templateObject_1$
|
|
12983
|
+
var templateObject_1$M, templateObject_2$w, templateObject_3$s, templateObject_4$j, templateObject_5$c, templateObject_6$b, templateObject_7$7, templateObject_8$5, templateObject_9$3, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
|
|
12984
12984
|
|
|
12985
|
-
var List = newStyled.ul(templateObject_1$
|
|
12986
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12987
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12988
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
12985
|
+
var List = newStyled.ul(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12986
|
+
var Item$1 = newStyled.li(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
12987
|
+
var DropdownWrapper = newStyled.div(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
12988
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$i || (templateObject_4$i = __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"])));
|
|
12989
12989
|
var StyledDropdown = newStyled.ul(templateObject_5$b || (templateObject_5$b = __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; });
|
|
12990
12990
|
var DropdownItem = newStyled.li(templateObject_6$a || (templateObject_6$a = __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; });
|
|
12991
|
-
var templateObject_1$
|
|
12991
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$r, templateObject_4$i, templateObject_5$b, templateObject_6$a;
|
|
12992
12992
|
|
|
12993
12993
|
var DropdownListIcons = function (_a) {
|
|
12994
12994
|
var items = _a.items;
|
|
@@ -13001,7 +13001,7 @@ var Dropdown = function (_a) {
|
|
|
13001
13001
|
return (jsxs$1(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer$1, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
13002
13002
|
};
|
|
13003
13003
|
|
|
13004
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
13004
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
13005
13005
|
var AmazonButton = function (_a) {
|
|
13006
13006
|
var onClick = _a.onClick;
|
|
13007
13007
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13010,15 +13010,15 @@ var PaypalButton = function (_a) {
|
|
|
13010
13010
|
var onClick = _a.onClick;
|
|
13011
13011
|
return (jsx$1(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13012
13012
|
};
|
|
13013
|
-
var templateObject_1$
|
|
13013
|
+
var templateObject_1$K;
|
|
13014
13014
|
|
|
13015
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
13016
|
-
var Col = newStyled.div(templateObject_2$
|
|
13017
|
-
var Row = newStyled.div(templateObject_3$
|
|
13015
|
+
var Wrapper = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
13016
|
+
var Col = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
13017
|
+
var Row = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
13018
13018
|
return props.rightToLeft &&
|
|
13019
13019
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
13020
13020
|
});
|
|
13021
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
13021
|
+
var H5 = newStyled.h5(templateObject_4$h || (templateObject_4$h = __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; });
|
|
13022
13022
|
var H3$1 = newStyled.h3(templateObject_5$a || (templateObject_5$a = __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; });
|
|
13023
13023
|
var FreeShipping = newStyled.span(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
13024
13024
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -13026,7 +13026,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
13026
13026
|
var theme = useTheme();
|
|
13027
13027
|
return (jsxs$1(Wrapper, __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, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { 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));
|
|
13028
13028
|
};
|
|
13029
|
-
var templateObject_1$
|
|
13029
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$q, templateObject_4$h, templateObject_5$a, templateObject_6$9;
|
|
13030
13030
|
|
|
13031
13031
|
var index = /*#__PURE__*/Object.freeze({
|
|
13032
13032
|
__proto__: null,
|
|
@@ -13039,7 +13039,7 @@ var Spacing = function (_a) {
|
|
|
13039
13039
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
13040
13040
|
};
|
|
13041
13041
|
|
|
13042
|
-
var Container$
|
|
13042
|
+
var Container$z = newStyled.div(templateObject_1$I || (templateObject_1$I = __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) {
|
|
13043
13043
|
var height = _a.height;
|
|
13044
13044
|
return (height ? height : '1.5em');
|
|
13045
13045
|
}, function (_a) {
|
|
@@ -13064,12 +13064,12 @@ var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __ma
|
|
|
13064
13064
|
var SkeletonBox = function (_a) {
|
|
13065
13065
|
var width = _a.width, height = _a.height;
|
|
13066
13066
|
var theme = useTheme();
|
|
13067
|
-
return jsx$1(Container$
|
|
13067
|
+
return jsx$1(Container$z, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
13068
13068
|
};
|
|
13069
|
-
var templateObject_1$
|
|
13069
|
+
var templateObject_1$I;
|
|
13070
13070
|
|
|
13071
|
-
var Container$
|
|
13072
|
-
var IconWrapper$1 = newStyled.div(templateObject_2$
|
|
13071
|
+
var Container$y = newStyled.div(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
13072
|
+
var IconWrapper$1 = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n"])));
|
|
13073
13073
|
var BuyNowPayLater = function (_a) {
|
|
13074
13074
|
var _b;
|
|
13075
13075
|
var installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -13079,9 +13079,9 @@ var BuyNowPayLater = function (_a) {
|
|
|
13079
13079
|
console.error('Icon', iconName, 'not found');
|
|
13080
13080
|
return null;
|
|
13081
13081
|
}
|
|
13082
|
-
return (jsx$1(Container$
|
|
13082
|
+
return (jsx$1(Container$y, { children: jsxs$1(Text$6, __assign$1({ variant: "body", style: { fontSize: fontSize }, testId: "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$6, __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));
|
|
13083
13083
|
};
|
|
13084
|
-
var templateObject_1$
|
|
13084
|
+
var templateObject_1$H, templateObject_2$t;
|
|
13085
13085
|
|
|
13086
13086
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
13087
13087
|
var width = _a.width, height = _a.height;
|
|
@@ -13091,10 +13091,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
13091
13091
|
height: height,
|
|
13092
13092
|
});
|
|
13093
13093
|
});
|
|
13094
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
13095
|
-
var Container$
|
|
13096
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
13097
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
13094
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
13095
|
+
var Container$x = newStyled.a(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
13096
|
+
var ProdCardContainer = newStyled.div(templateObject_3$p || (templateObject_3$p = __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"])));
|
|
13097
|
+
var Title$3 = newStyled.p(templateObject_4$g || (templateObject_4$g = __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; });
|
|
13098
13098
|
var getStylesBySize$1 = function (size) {
|
|
13099
13099
|
switch (size) {
|
|
13100
13100
|
case ComponentSize.Medium:
|
|
@@ -13157,32 +13157,32 @@ var ProductItemMobile = function (_a) {
|
|
|
13157
13157
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
13158
13158
|
};
|
|
13159
13159
|
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)); };
|
|
13160
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
13160
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$x, __assign$1({ as: url ? 'a' : 'div', href: url, 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, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { 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, { 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$x, __assign$1({ as: url ? 'a' : 'div', href: url, onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$3, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), 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), showBNPL && (jsx(BuyNowPayLater, { 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)), 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));
|
|
13161
13161
|
};
|
|
13162
|
-
var templateObject_1$
|
|
13162
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$g, templateObject_5$9, templateObject_6$8, templateObject_7$6;
|
|
13163
13163
|
|
|
13164
|
-
var Container$
|
|
13164
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
13165
13165
|
function withProductGrid(ProductItemComponent, data) {
|
|
13166
13166
|
function WithProductGrid(props) {
|
|
13167
|
-
return (jsx$1(Container$
|
|
13167
|
+
return (jsx$1(Container$w, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
13168
13168
|
}
|
|
13169
13169
|
/* istanbul ignore next */
|
|
13170
13170
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
13171
13171
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
13172
13172
|
return WithProductGrid;
|
|
13173
13173
|
}
|
|
13174
|
-
var templateObject_1$
|
|
13174
|
+
var templateObject_1$F;
|
|
13175
13175
|
|
|
13176
13176
|
var Collection = {
|
|
13177
13177
|
ProductItemMobile: ProductItemMobile,
|
|
13178
13178
|
withProductGrid: withProductGrid,
|
|
13179
13179
|
};
|
|
13180
13180
|
|
|
13181
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
13181
|
+
var Backdrop = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\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: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
13182
13182
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
13183
13183
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
13184
13184
|
});
|
|
13185
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
13185
|
+
var Sidebar = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
13186
13186
|
var width = _a.width;
|
|
13187
13187
|
return width;
|
|
13188
13188
|
}, function (_a) {
|
|
@@ -13223,28 +13223,28 @@ var Drawer = function (_a) {
|
|
|
13223
13223
|
}, [isOpen, onClose, onOpen]);
|
|
13224
13224
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
13225
13225
|
};
|
|
13226
|
-
var templateObject_1$
|
|
13226
|
+
var templateObject_1$E, templateObject_2$r;
|
|
13227
13227
|
|
|
13228
|
-
var Container$
|
|
13228
|
+
var Container$v = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
13229
13229
|
var size = _a.size;
|
|
13230
13230
|
return (size ? size : '100%');
|
|
13231
13231
|
}, function (_a) {
|
|
13232
13232
|
var size = _a.size;
|
|
13233
13233
|
return (size ? size : '100%');
|
|
13234
13234
|
});
|
|
13235
|
-
var Animation = newStyled.div(templateObject_2$
|
|
13235
|
+
var Animation = newStyled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"], ["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"])), function (_a) {
|
|
13236
13236
|
var animationDuration = _a.animationDuration;
|
|
13237
13237
|
return animationDuration;
|
|
13238
13238
|
});
|
|
13239
13239
|
var Spinner = function (_a) {
|
|
13240
13240
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
13241
|
-
return (jsx$1(Container$
|
|
13241
|
+
return (jsx$1(Container$v, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
13242
13242
|
};
|
|
13243
|
-
var templateObject_1$
|
|
13243
|
+
var templateObject_1$D, templateObject_2$q;
|
|
13244
13244
|
|
|
13245
|
-
var UL = newStyled.ul(templateObject_1$
|
|
13246
|
-
var LI = newStyled.li(templateObject_2$
|
|
13247
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
13245
|
+
var UL = newStyled.ul(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
13246
|
+
var LI = newStyled.li(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
13247
|
+
var CloseIconContainer = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
13248
13248
|
var Tags = function (_a) {
|
|
13249
13249
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
13250
13250
|
var theme = useTheme();
|
|
@@ -13252,7 +13252,7 @@ var Tags = function (_a) {
|
|
|
13252
13252
|
return (jsxs$1(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
13253
13253
|
}) }), void 0));
|
|
13254
13254
|
};
|
|
13255
|
-
var templateObject_1$
|
|
13255
|
+
var templateObject_1$C, templateObject_2$p, templateObject_3$o;
|
|
13256
13256
|
|
|
13257
13257
|
function FilteringDropdown(_a) {
|
|
13258
13258
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -13285,12 +13285,12 @@ function FilteringDropdown(_a) {
|
|
|
13285
13285
|
}) }, void 0)] }), void 0));
|
|
13286
13286
|
}
|
|
13287
13287
|
|
|
13288
|
-
var Container$
|
|
13289
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
13290
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
13288
|
+
var Container$u = newStyled.div(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
13289
|
+
var IconContainer$1 = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
13290
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
13291
13291
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
13292
13292
|
}));
|
|
13293
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
13293
|
+
var PageNumber = newStyled.span(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
13294
13294
|
var bold = _a.bold;
|
|
13295
13295
|
return (bold ? '700' : '500');
|
|
13296
13296
|
}, function (_a) {
|
|
@@ -13307,7 +13307,7 @@ var PageNumber = newStyled.span(templateObject_4$e || (templateObject_4$e = __ma
|
|
|
13307
13307
|
var background = _a.background;
|
|
13308
13308
|
return background || 'unset';
|
|
13309
13309
|
});
|
|
13310
|
-
var templateObject_1$
|
|
13310
|
+
var templateObject_1$B, templateObject_2$o, templateObject_3$n, templateObject_4$f;
|
|
13311
13311
|
|
|
13312
13312
|
var Pagination = function (_a) {
|
|
13313
13313
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -13353,7 +13353,7 @@ var Pagination = function (_a) {
|
|
|
13353
13353
|
}
|
|
13354
13354
|
return pages;
|
|
13355
13355
|
}, [from, page, showReducedPages, to]);
|
|
13356
|
-
return (jsxs$1(Container$
|
|
13356
|
+
return (jsxs$1(Container$u, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer$1, __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$1, __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));
|
|
13357
13357
|
};
|
|
13358
13358
|
|
|
13359
13359
|
var PaginatorBlog = function (_a) {
|
|
@@ -13367,12 +13367,12 @@ var PaginatorBlog = function (_a) {
|
|
|
13367
13367
|
setPage(page);
|
|
13368
13368
|
onChange(page);
|
|
13369
13369
|
};
|
|
13370
|
-
return (jsxs$1(Container$
|
|
13370
|
+
return (jsxs$1(Container$u, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsx$1(IconContainer$1, __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
|
|
13371
13371
|
? theme.colors.shades['white'].color
|
|
13372
13372
|
: 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$1, __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));
|
|
13373
13373
|
};
|
|
13374
13374
|
|
|
13375
|
-
var Container$
|
|
13375
|
+
var Container$t = newStyled.div(templateObject_1$A || (templateObject_1$A = __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({
|
|
13376
13376
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13377
13377
|
}));
|
|
13378
13378
|
var Description$2 = newStyled.div({
|
|
@@ -13389,25 +13389,25 @@ var Description$2 = newStyled.div({
|
|
|
13389
13389
|
var ProductItem = function (_a) {
|
|
13390
13390
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13391
13391
|
var theme = useTheme();
|
|
13392
|
-
return (jsxs$1(Container$
|
|
13392
|
+
return (jsxs$1(Container$t, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$2, { children: [jsx$1(Text$6, __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));
|
|
13393
13393
|
};
|
|
13394
|
-
var templateObject_1$
|
|
13394
|
+
var templateObject_1$A;
|
|
13395
13395
|
|
|
13396
|
-
var Container$
|
|
13396
|
+
var Container$s = newStyled.div({
|
|
13397
13397
|
display: 'flex',
|
|
13398
13398
|
justifyContent: 'center',
|
|
13399
13399
|
padding: '1rem',
|
|
13400
13400
|
});
|
|
13401
13401
|
var Footer = function (_a) {
|
|
13402
13402
|
var text = _a.text, onClick = _a.onClick;
|
|
13403
|
-
return (jsx$1(Container$
|
|
13403
|
+
return (jsx$1(Container$s, { children: jsx$1(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13404
13404
|
};
|
|
13405
13405
|
|
|
13406
13406
|
var Ul = newStyled.ul({
|
|
13407
13407
|
margin: '0px',
|
|
13408
13408
|
padding: '0px',
|
|
13409
13409
|
});
|
|
13410
|
-
var Li = newStyled.li(templateObject_1$
|
|
13410
|
+
var Li = newStyled.li(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
13411
13411
|
padding: [0, '0rem 1rem'],
|
|
13412
13412
|
borderRadius: [0, '0.5rem'],
|
|
13413
13413
|
}));
|
|
@@ -13419,20 +13419,20 @@ var Anchor = newStyled.a({
|
|
|
13419
13419
|
padding: 0,
|
|
13420
13420
|
textDecoration: 'none',
|
|
13421
13421
|
});
|
|
13422
|
-
var Container$
|
|
13422
|
+
var Container$r = newStyled.div(templateObject_2$n || (templateObject_2$n = __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({
|
|
13423
13423
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13424
13424
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13425
13425
|
borderRadius: ['0', '0.5rem'],
|
|
13426
13426
|
}));
|
|
13427
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13427
|
+
var Header$1 = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13428
13428
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13429
13429
|
}));
|
|
13430
13430
|
var ResultsPanel = function (_a) {
|
|
13431
13431
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13432
13432
|
var theme = useTheme();
|
|
13433
|
-
return (jsxs$1(Container$
|
|
13433
|
+
return (jsxs$1(Container$r, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$6, __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));
|
|
13434
13434
|
};
|
|
13435
|
-
var templateObject_1$
|
|
13435
|
+
var templateObject_1$z, templateObject_2$n, templateObject_3$m;
|
|
13436
13436
|
|
|
13437
13437
|
var Input = newStyled.input(function (props) { return ({
|
|
13438
13438
|
padding: props.theme.component.input.padding,
|
|
@@ -13463,7 +13463,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13463
13463
|
},
|
|
13464
13464
|
}); });
|
|
13465
13465
|
|
|
13466
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
13466
|
+
var Button$1 = newStyled.button(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
13467
13467
|
right: ['1rem', '7.75rem'],
|
|
13468
13468
|
top: ['0.75rem', '0.75rem'],
|
|
13469
13469
|
}));
|
|
@@ -13472,7 +13472,7 @@ var ClearButton = function (_a) {
|
|
|
13472
13472
|
var theme = useTheme();
|
|
13473
13473
|
return (jsx$1(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13474
13474
|
};
|
|
13475
|
-
var templateObject_1$
|
|
13475
|
+
var templateObject_1$y;
|
|
13476
13476
|
|
|
13477
13477
|
var useOnClickOutside = function (ref, handler) {
|
|
13478
13478
|
useEffect(function () {
|
|
@@ -13561,7 +13561,7 @@ var reducer = function (state, action) {
|
|
|
13561
13561
|
}
|
|
13562
13562
|
}
|
|
13563
13563
|
};
|
|
13564
|
-
var Container$
|
|
13564
|
+
var Container$q = newStyled.div({
|
|
13565
13565
|
position: 'relative',
|
|
13566
13566
|
display: 'flex',
|
|
13567
13567
|
});
|
|
@@ -13597,7 +13597,7 @@ var SearchBar = function (_a) {
|
|
|
13597
13597
|
onClose();
|
|
13598
13598
|
}
|
|
13599
13599
|
};
|
|
13600
|
-
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
13600
|
+
return (jsxs$1("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$q, __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) {
|
|
13601
13601
|
if (e.key === 'Enter') {
|
|
13602
13602
|
e.preventDefault();
|
|
13603
13603
|
e.stopPropagation();
|
|
@@ -13606,14 +13606,14 @@ var SearchBar = function (_a) {
|
|
|
13606
13606
|
} }, 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));
|
|
13607
13607
|
};
|
|
13608
13608
|
|
|
13609
|
-
var Container$
|
|
13609
|
+
var Container$p = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"])), function (_a) {
|
|
13610
13610
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13611
13611
|
return borderRadiusVariant &&
|
|
13612
13612
|
"\n border-radius: 40px;\n ";
|
|
13613
13613
|
});
|
|
13614
13614
|
// max-height: 31.875rem;
|
|
13615
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
13616
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
13615
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __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'); });
|
|
13616
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13617
13617
|
var settings = {
|
|
13618
13618
|
dots: true,
|
|
13619
13619
|
infinite: false,
|
|
@@ -13640,7 +13640,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13640
13640
|
}
|
|
13641
13641
|
}
|
|
13642
13642
|
}, [images, selectedValue]);
|
|
13643
|
-
return (jsxs$1(Fragment$1, { 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$
|
|
13643
|
+
return (jsxs$1(Fragment$1, { 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$p, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({}, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13644
13644
|
return (jsxs$1("div", { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, image.key));
|
|
13645
13645
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13646
13646
|
};
|
|
@@ -13677,14 +13677,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13677
13677
|
};
|
|
13678
13678
|
}, [preventTouch, ref, touchStart]);
|
|
13679
13679
|
}
|
|
13680
|
-
var templateObject_1$
|
|
13680
|
+
var templateObject_1$x, templateObject_2$m, templateObject_3$l;
|
|
13681
13681
|
|
|
13682
|
-
var Container$
|
|
13682
|
+
var Container$o = newStyled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
13683
13683
|
var ProductGalleryMobile = function (_a) {
|
|
13684
13684
|
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;
|
|
13685
|
-
return (jsx$1(Container$
|
|
13685
|
+
return (jsx$1(Container$o, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13686
13686
|
};
|
|
13687
|
-
var templateObject_1$
|
|
13687
|
+
var templateObject_1$w;
|
|
13688
13688
|
|
|
13689
13689
|
var Portal = function (_a) {
|
|
13690
13690
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13817,14 +13817,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13817
13817
|
var visibleStyle = function (_a) {
|
|
13818
13818
|
var opened = _a.opened;
|
|
13819
13819
|
return opened
|
|
13820
|
-
? css(templateObject_1$
|
|
13820
|
+
? css(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13821
13821
|
};
|
|
13822
13822
|
var transformStyle = function (_a) {
|
|
13823
13823
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13824
13824
|
return opened
|
|
13825
|
-
? css(templateObject_3$
|
|
13825
|
+
? css(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
13826
13826
|
};
|
|
13827
|
-
var Container$
|
|
13827
|
+
var Container$n = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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({
|
|
13828
13828
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13829
13829
|
}), visibleStyle, transformStyle);
|
|
13830
13830
|
var Overlay = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __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);
|
|
@@ -13837,7 +13837,7 @@ var Modal = function (_a) {
|
|
|
13837
13837
|
}
|
|
13838
13838
|
close();
|
|
13839
13839
|
};
|
|
13840
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13840
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$n, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13841
13841
|
};
|
|
13842
13842
|
var modalEvent = function (id, detail) {
|
|
13843
13843
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13865,39 +13865,39 @@ var useModal = function (id) {
|
|
|
13865
13865
|
close: close,
|
|
13866
13866
|
}); }, [close, open, opened]);
|
|
13867
13867
|
};
|
|
13868
|
-
var templateObject_1$
|
|
13868
|
+
var templateObject_1$v, templateObject_2$l, templateObject_3$k, templateObject_4$e, templateObject_5$8, templateObject_6$7;
|
|
13869
13869
|
|
|
13870
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13870
|
+
var Text$2 = newStyled.span(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13871
13871
|
var Title$2 = function (_a) {
|
|
13872
13872
|
var title = _a.title;
|
|
13873
13873
|
var theme = useTheme();
|
|
13874
13874
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13875
13875
|
};
|
|
13876
|
-
var templateObject_1$
|
|
13876
|
+
var templateObject_1$u;
|
|
13877
13877
|
|
|
13878
|
-
var P = newStyled.p(templateObject_1$
|
|
13878
|
+
var P = newStyled.p(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13879
13879
|
var Promo = function (_a) {
|
|
13880
13880
|
var text = _a.text;
|
|
13881
13881
|
var theme = useTheme();
|
|
13882
13882
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13883
13883
|
};
|
|
13884
|
-
var templateObject_1$
|
|
13884
|
+
var templateObject_1$t;
|
|
13885
13885
|
|
|
13886
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13886
|
+
var Text$1 = newStyled.span(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13887
13887
|
var Description$1 = function (_a) {
|
|
13888
13888
|
var text = _a.text;
|
|
13889
13889
|
var theme = useTheme();
|
|
13890
13890
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13891
13891
|
};
|
|
13892
|
-
var templateObject_1$
|
|
13892
|
+
var templateObject_1$s;
|
|
13893
13893
|
|
|
13894
|
-
var Container$
|
|
13894
|
+
var Container$m = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"); });
|
|
13895
13895
|
var CloseButton$1 = function (_a) {
|
|
13896
13896
|
var onClick = _a.onClick, size = _a.size;
|
|
13897
13897
|
var theme = useTheme();
|
|
13898
|
-
return (jsx$1(Container$
|
|
13898
|
+
return (jsx$1(Container$m, __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));
|
|
13899
13899
|
};
|
|
13900
|
-
var templateObject_1$
|
|
13900
|
+
var templateObject_1$r;
|
|
13901
13901
|
|
|
13902
13902
|
var CartProductItem = {
|
|
13903
13903
|
Title: Title$2,
|
|
@@ -13907,10 +13907,10 @@ var CartProductItem = {
|
|
|
13907
13907
|
CloseButton: CloseButton$1,
|
|
13908
13908
|
};
|
|
13909
13909
|
|
|
13910
|
-
var Container$
|
|
13911
|
-
var Item = newStyled.span(templateObject_2$
|
|
13912
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13913
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
13910
|
+
var Container$l = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\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: 0.5rem;\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.color; });
|
|
13911
|
+
var Item = 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"])));
|
|
13912
|
+
var Number$1 = newStyled(Item)(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
13913
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
13914
13914
|
var QuantityPicker = function (_a) {
|
|
13915
13915
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
13916
13916
|
var theme = useTheme();
|
|
@@ -13933,9 +13933,9 @@ var QuantityPicker = function (_a) {
|
|
|
13933
13933
|
return clamp(value);
|
|
13934
13934
|
});
|
|
13935
13935
|
}, [value, clamp]);
|
|
13936
|
-
return (jsxs$1(Container$
|
|
13936
|
+
return (jsxs$1(Container$l, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { 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));
|
|
13937
13937
|
};
|
|
13938
|
-
var templateObject_1$
|
|
13938
|
+
var templateObject_1$q, templateObject_2$k, templateObject_3$j, templateObject_4$d;
|
|
13939
13939
|
|
|
13940
13940
|
var htmlReactParser = {exports: {}};
|
|
13941
13941
|
|
|
@@ -17716,17 +17716,17 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17716
17716
|
HTMLReactParser$1.attributesToProps;
|
|
17717
17717
|
HTMLReactParser$1.Element;
|
|
17718
17718
|
|
|
17719
|
-
var Container$
|
|
17720
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
17721
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
17722
|
-
var Label$1 = newStyled.div(templateObject_4$
|
|
17719
|
+
var Container$k = newStyled.div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
17720
|
+
var Card$1 = newStyled.div(templateObject_2$j || (templateObject_2$j = __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 color: var(--color);\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 color: var(--color);\n }\n }\n"])));
|
|
17721
|
+
var Tag$1 = newStyled.div(templateObject_3$i || (templateObject_3$i = __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"])));
|
|
17722
|
+
var Label$1 = newStyled.div(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
17723
17723
|
var Check$1 = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
17724
17724
|
var IconContainer = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __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"])));
|
|
17725
17725
|
var IconPlaceholder = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __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"])));
|
|
17726
17726
|
var DiscountContainer$1 = newStyled.div(templateObject_8$4 || (templateObject_8$4 = __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"])));
|
|
17727
17727
|
var PackSelector = function (_a) {
|
|
17728
17728
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17729
|
-
return (jsx$1(Container$
|
|
17729
|
+
return (jsx$1(Container$k, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17730
17730
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17731
17731
|
}) }), void 0));
|
|
17732
17732
|
};
|
|
@@ -17752,17 +17752,17 @@ var PackCard$1 = function (_a) {
|
|
|
17752
17752
|
currency: currencyCode || 'USD',
|
|
17753
17753
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17754
17754
|
};
|
|
17755
|
-
var templateObject_1$
|
|
17755
|
+
var templateObject_1$p, templateObject_2$j, templateObject_3$i, templateObject_4$c, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4;
|
|
17756
17756
|
|
|
17757
|
-
var Container$
|
|
17758
|
-
var Card = newStyled.div(templateObject_2$
|
|
17759
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17760
|
-
var Label = newStyled.div(templateObject_4$
|
|
17757
|
+
var Container$j = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
17758
|
+
var Card = newStyled.div(templateObject_2$i || (templateObject_2$i = __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 color: var(--color);\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 color: var(--color);\n }\n }\n"])));
|
|
17759
|
+
var Tag = newStyled.div(templateObject_3$h || (templateObject_3$h = __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"])));
|
|
17760
|
+
var Label = newStyled.div(templateObject_4$b || (templateObject_4$b = __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"])));
|
|
17761
17761
|
var Check = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
17762
17762
|
var DiscountContainer = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __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"])));
|
|
17763
17763
|
var PackSelectorV2 = function (_a) {
|
|
17764
17764
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17765
|
-
return (jsx$1(Container$
|
|
17765
|
+
return (jsx$1(Container$j, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17766
17766
|
return (jsx$1(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17767
17767
|
}) }), void 0));
|
|
17768
17768
|
};
|
|
@@ -17783,31 +17783,31 @@ var PackCard = function (_a) {
|
|
|
17783
17783
|
currency: currencyCode || 'USD',
|
|
17784
17784
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
17785
17785
|
};
|
|
17786
|
-
var templateObject_1$
|
|
17786
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$h, templateObject_4$b, templateObject_5$6, templateObject_6$5;
|
|
17787
17787
|
|
|
17788
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
17789
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
17790
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17791
|
-
var Container$
|
|
17788
|
+
var Title$1 = newStyled.div(templateObject_1$n || (templateObject_1$n = __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; });
|
|
17789
|
+
var H3 = newStyled.h3(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
17790
|
+
var ArrowContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
17791
|
+
var Container$i = newStyled.div(templateObject_4$a || (templateObject_4$a = __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'); });
|
|
17792
17792
|
var Accordion = function (_a) {
|
|
17793
17793
|
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;
|
|
17794
17794
|
var theme = useTheme();
|
|
17795
17795
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17796
|
-
return (jsxs$1(Container$
|
|
17796
|
+
return (jsxs$1(Container$i, __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));
|
|
17797
17797
|
};
|
|
17798
|
-
var templateObject_1$
|
|
17798
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$g, templateObject_4$a;
|
|
17799
17799
|
|
|
17800
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17801
|
-
var Header = newStyled.div(templateObject_2$
|
|
17802
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17803
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
17800
|
+
var SectionContent = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
17801
|
+
var Header = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
17802
|
+
var MobileHeader = newStyled.div(templateObject_3$f || (templateObject_3$f = __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"])));
|
|
17803
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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"])));
|
|
17804
17804
|
var H4 = newStyled.h4(templateObject_5$5 || (templateObject_5$5 = __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; });
|
|
17805
17805
|
var FilterLink = newStyled.a(templateObject_6$4 || (templateObject_6$4 = __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; });
|
|
17806
17806
|
var OptionContainer = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n margin-bottom: 1.25rem;\n &:last-child {\n margin-bottom: 0;\n }\n @media (max-width: 768px) {\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"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
17807
17807
|
var ClearAll = newStyled.span(templateObject_8$3 || (templateObject_8$3 = __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; });
|
|
17808
17808
|
var MobileFooter = newStyled.div(templateObject_9$2 || (templateObject_9$2 = __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"])));
|
|
17809
17809
|
var MobileClearContainer = newStyled.div(templateObject_10$1 || (templateObject_10$1 = __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"])));
|
|
17810
|
-
var templateObject_1$
|
|
17810
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$f, templateObject_4$9, templateObject_5$5, templateObject_6$4, templateObject_7$4, templateObject_8$3, templateObject_9$2, templateObject_10$1;
|
|
17811
17811
|
|
|
17812
17812
|
var Filters = function (_a) {
|
|
17813
17813
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -17924,20 +17924,20 @@ var FilterCheckboxColor = function (_a) {
|
|
|
17924
17924
|
return (jsx$1(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
17925
17925
|
};
|
|
17926
17926
|
|
|
17927
|
-
var Container$
|
|
17928
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17929
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17930
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
17927
|
+
var Container$h = newStyled.div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
17928
|
+
var BackArrow = newStyled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
17929
|
+
var BoldSpan = newStyled.span(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
17930
|
+
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"])));
|
|
17931
17931
|
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"])));
|
|
17932
17932
|
var SearchNavigation = function (_a) {
|
|
17933
17933
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17934
|
-
return (jsxs$1(Container$
|
|
17934
|
+
return (jsxs$1(Container$h, { children: [jsxs$1(Text$6, __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) {
|
|
17935
17935
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17936
17936
|
}) }, void 0)] }, void 0));
|
|
17937
17937
|
};
|
|
17938
|
-
var templateObject_1$
|
|
17938
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$e, templateObject_4$8, templateObject_5$4;
|
|
17939
17939
|
|
|
17940
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17940
|
+
var TabContainer = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
17941
17941
|
var titleSize = _a.titleSize;
|
|
17942
17942
|
return titleSize;
|
|
17943
17943
|
}, function (_a) {
|
|
@@ -17954,15 +17954,15 @@ var Tab = function (_a) {
|
|
|
17954
17954
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
17955
17955
|
return (jsx$1(Fragment$1, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
17956
17956
|
};
|
|
17957
|
-
var templateObject_1$
|
|
17957
|
+
var templateObject_1$k;
|
|
17958
17958
|
|
|
17959
|
-
var Container$
|
|
17960
|
-
var TabList = newStyled.div(templateObject_2$
|
|
17959
|
+
var Container$g = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17960
|
+
var TabList = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
17961
17961
|
var backgroundColor = _a.backgroundColor;
|
|
17962
17962
|
return backgroundColor;
|
|
17963
17963
|
});
|
|
17964
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17965
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
17964
|
+
var TabContent = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17965
|
+
var TabSeparator = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
17966
17966
|
var Tabs = function (_a) {
|
|
17967
17967
|
var _b;
|
|
17968
17968
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -17971,11 +17971,11 @@ var Tabs = function (_a) {
|
|
|
17971
17971
|
return null;
|
|
17972
17972
|
}
|
|
17973
17973
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17974
|
-
return (jsxs$1(Container$
|
|
17974
|
+
return (jsxs$1(Container$g, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(Fragment$1, { children: [jsx$1(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsx$1(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17975
17975
|
};
|
|
17976
|
-
var templateObject_1$
|
|
17976
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$d, templateObject_4$7;
|
|
17977
17977
|
|
|
17978
|
-
var Container$
|
|
17978
|
+
var Container$f = newStyled.div(function (props) { return ({
|
|
17979
17979
|
height: 'auto',
|
|
17980
17980
|
textAlign: 'center',
|
|
17981
17981
|
justifyContent: 'center',
|
|
@@ -18025,12 +18025,12 @@ var IconsWithTitle = function (_a) {
|
|
|
18025
18025
|
textAlign: 'center',
|
|
18026
18026
|
lineHeight: '18px',
|
|
18027
18027
|
};
|
|
18028
|
-
return (jsx$1(Fragment$1, { children: jsxs$1(Container$
|
|
18028
|
+
return (jsx$1(Fragment$1, { children: jsxs$1(Container$f, __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$6, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
18029
18029
|
};
|
|
18030
18030
|
|
|
18031
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
18032
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
18033
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
18031
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
18032
|
+
var VideoOverlay = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
18033
|
+
var FullscreenVideo = newStyled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
18034
18034
|
var ImageVideo = function (_a) {
|
|
18035
18035
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
18036
18036
|
var video = useRef(null);
|
|
@@ -18050,12 +18050,12 @@ var ImageVideo = function (_a) {
|
|
|
18050
18050
|
height: '100%',
|
|
18051
18051
|
} }, void 0)] }, void 0))] }, void 0));
|
|
18052
18052
|
};
|
|
18053
|
-
var templateObject_1$
|
|
18053
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$c;
|
|
18054
18054
|
|
|
18055
|
-
var ContainerDesktop = css(templateObject_1$
|
|
18056
|
-
var ContainerMobile = css(templateObject_2$
|
|
18057
|
-
var Container$
|
|
18058
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
18055
|
+
var ContainerDesktop = css(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
18056
|
+
var ContainerMobile = css(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
18057
|
+
var Container$e = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
18058
|
+
var TextContainer = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
18059
18059
|
var TextWithImage = function (_a) {
|
|
18060
18060
|
var _b, _c, _d, _e;
|
|
18061
18061
|
var title = _a.title, text = _a.text, children = _a.children, buttomText = _a.buttomText, backgroundColor = _a.backgroundColor, imageLeftSide = _a.imageLeftSide, titleStyle = _a.titleStyle, textStyle = _a.textStyle, _f = _a.buttonWideOnMobile, buttonWideOnMobile = _f === void 0 ? false : _f, props = __rest(_a, ["title", "text", "children", "buttomText", "backgroundColor", "imageLeftSide", "titleStyle", "textStyle", "buttonWideOnMobile"]);
|
|
@@ -18075,7 +18075,7 @@ var TextWithImage = function (_a) {
|
|
|
18075
18075
|
// @ts-ignore
|
|
18076
18076
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
18077
18077
|
};
|
|
18078
|
-
return (jsxs(Container$
|
|
18078
|
+
return (jsxs(Container$e, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$6, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
18079
18079
|
backgroundColor: props.btnBGColor,
|
|
18080
18080
|
color: '#ffffff',
|
|
18081
18081
|
border: props.btnBGColor,
|
|
@@ -18085,9 +18085,9 @@ var TextWithImage = function (_a) {
|
|
|
18085
18085
|
},
|
|
18086
18086
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
18087
18087
|
};
|
|
18088
|
-
var templateObject_1$
|
|
18088
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$b, templateObject_4$6;
|
|
18089
18089
|
|
|
18090
|
-
var Container$
|
|
18090
|
+
var Container$d = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
18091
18091
|
var AccordionOptions = function (_a) {
|
|
18092
18092
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
18093
18093
|
var _b = useState({
|
|
@@ -18100,7 +18100,7 @@ var AccordionOptions = function (_a) {
|
|
|
18100
18100
|
}
|
|
18101
18101
|
return false;
|
|
18102
18102
|
};
|
|
18103
|
-
return (jsx$1(Container$
|
|
18103
|
+
return (jsx$1(Container$d, { children: accordions.map(function (accordion, index) {
|
|
18104
18104
|
var forceOpenValue = getForceOpen(index);
|
|
18105
18105
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
18106
18106
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -18111,9 +18111,9 @@ var AccordionOptions = function (_a) {
|
|
|
18111
18111
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
18112
18112
|
}) }, void 0));
|
|
18113
18113
|
};
|
|
18114
|
-
var templateObject_1$
|
|
18114
|
+
var templateObject_1$g;
|
|
18115
18115
|
|
|
18116
|
-
var Container$
|
|
18116
|
+
var Container$c = newStyled.div(templateObject_1$f || (templateObject_1$f = __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) {
|
|
18117
18117
|
var alignCenter = _a.alignCenter;
|
|
18118
18118
|
return alignCenter &&
|
|
18119
18119
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -18123,14 +18123,14 @@ var Container$b = newStyled.div(templateObject_1$e || (templateObject_1$e = __ma
|
|
|
18123
18123
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
18124
18124
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
18125
18125
|
});
|
|
18126
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
18127
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
18126
|
+
var TitleText = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
18127
|
+
var BannerText = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
18128
18128
|
var ShortBanner = function (_a) {
|
|
18129
18129
|
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;
|
|
18130
18130
|
var theme = useTheme();
|
|
18131
|
-
return (jsxs$1(Container$
|
|
18131
|
+
return (jsxs$1(Container$c, __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));
|
|
18132
18132
|
};
|
|
18133
|
-
var templateObject_1$
|
|
18133
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$a;
|
|
18134
18134
|
|
|
18135
18135
|
/* base styles & size variants */
|
|
18136
18136
|
var getStylesBySize = function (size, theme) {
|
|
@@ -18186,23 +18186,23 @@ var getStylesBySize = function (size, theme) {
|
|
|
18186
18186
|
}
|
|
18187
18187
|
};
|
|
18188
18188
|
|
|
18189
|
-
var Container$
|
|
18190
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
18191
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
18192
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
18189
|
+
var Container$b = newStyled.div(templateObject_1$e || (templateObject_1$e = __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; });
|
|
18190
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"])));
|
|
18191
|
+
var ImageCard = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __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; });
|
|
18192
|
+
var UserInfoText = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __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 (props) { return props.color; }, function (props) { return props.styles.userInfoTextFontSize; }, function (props) { return (props.alignCenter ? 'center' : 'left'); }, function (props) { return props.styles.userInfoTextMobileFontSize; });
|
|
18193
18193
|
var BeforeAfterCard = function (_a) {
|
|
18194
18194
|
var name = _a.name, age = _a.age, months = _a.months, beforeImage = _a.beforeImage, afterImage = _a.afterImage, _b = _a.alignCenter, alignCenter = _b === void 0 ? true : _b, _c = _a.imageBorderRadius, imageBorderRadius = _c === void 0 ? '' : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Small : _d;
|
|
18195
18195
|
var theme = useTheme();
|
|
18196
18196
|
var stylesBySize = getStylesBySize(size, theme);
|
|
18197
18197
|
var infoText = age ? "".concat(name, ", ").concat(age) : name;
|
|
18198
18198
|
infoText = months ? "".concat(infoText, " | ").concat(months, " months") : infoText;
|
|
18199
|
-
return (jsxs$1(Container$
|
|
18199
|
+
return (jsxs$1(Container$b, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxs$1(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsx$1(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsx$1(Image, { 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, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsx$1(UserInfoText, __assign$1({ "data-testid": "UserInfoText", alignCenter: alignCenter, color: theme.colors.pallete.secondary.color, styles: stylesBySize }, { children: infoText }), void 0)] }), void 0));
|
|
18200
18200
|
};
|
|
18201
|
-
var templateObject_1$
|
|
18201
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$9, templateObject_4$5;
|
|
18202
18202
|
|
|
18203
|
-
var Container$
|
|
18204
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18205
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
18203
|
+
var Container$a = newStyled.div(templateObject_1$d || (templateObject_1$d = __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'); });
|
|
18204
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __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'); });
|
|
18205
|
+
var StyledTitle = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
18206
18206
|
var titlePosition = _a.titlePosition;
|
|
18207
18207
|
return titlePosition == 'center' &&
|
|
18208
18208
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -18210,14 +18210,14 @@ var StyledTitle = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __ma
|
|
|
18210
18210
|
var ImageCardWithDescription = function (_a) {
|
|
18211
18211
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
18212
18212
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
18213
|
-
return (jsxs$1(Container$
|
|
18213
|
+
return (jsxs$1(Container$a, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsx$1(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsx$1(Image, { 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$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
18214
18214
|
};
|
|
18215
|
-
var templateObject_1$
|
|
18215
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$8;
|
|
18216
18216
|
|
|
18217
|
-
var Container$
|
|
18218
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
18219
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
18220
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
18217
|
+
var Container$9 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18218
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18219
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
18220
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
18221
18221
|
var CheckpointStatus$1 = newStyled.p(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
18222
18222
|
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
18223
18223
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
@@ -18243,7 +18243,7 @@ var TrackingProgress = function (_a) {
|
|
|
18243
18243
|
}
|
|
18244
18244
|
return '30px';
|
|
18245
18245
|
};
|
|
18246
|
-
return (jsxs$1(Container$
|
|
18246
|
+
return (jsxs$1(Container$9, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
18247
18247
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
18248
18248
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel$1, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack$1, __assign$1({ trackColor: fillSpaces
|
|
18249
18249
|
? theme.colors.semantic.informative.color
|
|
@@ -18252,12 +18252,12 @@ var TrackingProgress = function (_a) {
|
|
|
18252
18252
|
return (jsxs$1(CheckpointContainer$1, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate$1, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel$1, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack$1, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsx$1(CheckpointStatus$1, { finishedTrack: false }, void 0)] }), index));
|
|
18253
18253
|
})] }), void 0));
|
|
18254
18254
|
};
|
|
18255
|
-
var templateObject_1$
|
|
18255
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$7, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$3, templateObject_8$2;
|
|
18256
18256
|
|
|
18257
|
-
var Container$
|
|
18258
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
18259
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
18260
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
18257
|
+
var Container$8 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18258
|
+
var CheckpointContainer = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18259
|
+
var CheckpointDate = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
18260
|
+
var CheckpointDateLabel = newStyled.p(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
18261
18261
|
var CheckpointStatus = newStyled.p(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n display: flex;\n gap: 4px;\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) {
|
|
18262
18262
|
return props.finishedTrack
|
|
18263
18263
|
? props.finishedTrackColor
|
|
@@ -18293,7 +18293,7 @@ var TrackingProgressV2 = function (_a) {
|
|
|
18293
18293
|
}
|
|
18294
18294
|
return '30px';
|
|
18295
18295
|
};
|
|
18296
|
-
return (jsxs$1(Container$
|
|
18296
|
+
return (jsxs$1(Container$8, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
18297
18297
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
18298
18298
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsx$1(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
18299
18299
|
? theme.colors.semantic.informative.color
|
|
@@ -18302,12 +18302,12 @@ var TrackingProgressV2 = function (_a) {
|
|
|
18302
18302
|
return (jsxs$1(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxs$1(CheckpointDate, __assign$1({ currentSpace: "90px" }, { children: [jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsx$1(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsx$1(ActiveCheckpointTrack, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot, { firstElement: false }, void 0) }), void 0)), index + 1 === emptySpaces.length && (jsx$1(LastActiveCheckpointDot, __assign$1({ trackColor: theme.colors.shades['200'].color }, { children: jsx$1(ActiveCheckpointDot, { firstElement: false }, void 0) }), void 0)), jsx$1(CheckpointStatus, __assign$1({ finishedTrack: false }, { children: statusMessage }), void 0)] }), index));
|
|
18303
18303
|
})] }), void 0));
|
|
18304
18304
|
};
|
|
18305
|
-
var templateObject_1$
|
|
18305
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$1, templateObject_9$1;
|
|
18306
18306
|
|
|
18307
|
-
var Container$
|
|
18308
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18309
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18310
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18307
|
+
var Container$7 = newStyled.div(templateObject_1$a || (templateObject_1$a = __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"])));
|
|
18308
|
+
var ReviewsContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __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"])));
|
|
18309
|
+
var ReviewsCount = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
18310
|
+
var ReviewsStars = newStyled.div(templateObject_4$2 || (templateObject_4$2 = __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"])));
|
|
18311
18311
|
var ReviewsTextCount = newStyled(Text$6)(templateObject_5$1 || (templateObject_5$1 = __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"])));
|
|
18312
18312
|
var ReviewsImages = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __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"])));
|
|
18313
18313
|
var SummaryItem = newStyled.div(templateObject_7$1 || (templateObject_7$1 = __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) {
|
|
@@ -18318,14 +18318,14 @@ var ReviewsHeader = function (_a) {
|
|
|
18318
18318
|
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;
|
|
18319
18319
|
var starsNumber = 5;
|
|
18320
18320
|
var theme = useTheme();
|
|
18321
|
-
return (jsxs$1(Container$
|
|
18321
|
+
return (jsxs$1(Container$7, { children: [jsx$1(Text$6, __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$6, __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));
|
|
18322
18322
|
};
|
|
18323
|
-
var templateObject_1$
|
|
18323
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
18324
18324
|
|
|
18325
|
-
var Container$
|
|
18326
|
-
var Content = newStyled.div(templateObject_2$
|
|
18327
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18328
|
-
var ReviewContainer = newStyled.div(templateObject_4 || (templateObject_4 = __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"])));
|
|
18325
|
+
var Container$6 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
18326
|
+
var Content$1 = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
18327
|
+
var StarsContent = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18328
|
+
var ReviewContainer = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __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"])));
|
|
18329
18329
|
var DateText = newStyled.span(templateObject_5 || (templateObject_5 = __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"])));
|
|
18330
18330
|
var ReviewerName = newStyled.h1(templateObject_6 || (templateObject_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"])));
|
|
18331
18331
|
var VerifiedText = newStyled.h1(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n color: #1cc286;\n margin-left: 6px;\n\n @media (min-width: 768px) {\n font-size: 18px;\n }\n"])));
|
|
@@ -18360,10 +18360,10 @@ var Review = function (_a) {
|
|
|
18360
18360
|
}
|
|
18361
18361
|
}
|
|
18362
18362
|
}, [opened]);
|
|
18363
|
-
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$
|
|
18364
|
-
(!isVideo ? (jsx$1(ImageWrapper, { 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, { children: [reviewerName, verified && jsx$1(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0)), jsxs$1(Content, __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, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { 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));
|
|
18363
|
+
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$6, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18364
|
+
(!isVideo ? (jsx$1(ImageWrapper, { 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, { 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, { children: formatDate(date) }, void 0)] }, void 0), jsxs$1(ReviewContainer, { children: [jsx$1(ReviewTitle, { 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));
|
|
18365
18365
|
};
|
|
18366
|
-
var templateObject_1$
|
|
18366
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$4, templateObject_4$1, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18367
18367
|
|
|
18368
18368
|
function _extends() {
|
|
18369
18369
|
_extends = Object.assign || function (target) {
|
|
@@ -18630,40 +18630,40 @@ function useSwipeable(options) {
|
|
|
18630
18630
|
return handlers;
|
|
18631
18631
|
}
|
|
18632
18632
|
|
|
18633
|
-
var Container$
|
|
18633
|
+
var Container$5 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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) {
|
|
18634
18634
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
18635
18635
|
return borderRadiusVariant &&
|
|
18636
18636
|
"\n border-radius: 40px;\n ";
|
|
18637
18637
|
});
|
|
18638
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
18639
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
18638
|
+
var TopTagContainer = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __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'); });
|
|
18639
|
+
var BottomTagContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
18640
18640
|
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18641
18641
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18642
|
-
return (jsxs$1(Container$
|
|
18642
|
+
return (jsxs$1(Container$5, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
18643
18643
|
});
|
|
18644
|
-
var templateObject_1$
|
|
18644
|
+
var templateObject_1$8, templateObject_2$4, templateObject_3$3;
|
|
18645
18645
|
|
|
18646
|
-
var Button = newStyled.button(templateObject_1$
|
|
18646
|
+
var Button = newStyled.button(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
18647
18647
|
var ArrowButton = function (_a) {
|
|
18648
18648
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
18649
18649
|
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
18650
18650
|
};
|
|
18651
|
-
var templateObject_1$
|
|
18651
|
+
var templateObject_1$7;
|
|
18652
18652
|
|
|
18653
|
-
var Container$
|
|
18653
|
+
var Container$4 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
18654
18654
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
18655
18655
|
var SlideDots = function (_a) {
|
|
18656
18656
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
18657
18657
|
var theme = useTheme();
|
|
18658
|
-
return (jsx$1(Container$
|
|
18658
|
+
return (jsx$1(Container$4, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
18659
18659
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
18660
18660
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
18661
18661
|
};
|
|
18662
|
-
var templateObject_1$
|
|
18662
|
+
var templateObject_1$6;
|
|
18663
18663
|
|
|
18664
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
18665
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
18666
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
18664
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18665
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
18666
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
18667
18667
|
var SlideNavigation = function (_a) {
|
|
18668
18668
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
18669
18669
|
var theme = useTheme();
|
|
@@ -18675,9 +18675,9 @@ var SlideNavigation = function (_a) {
|
|
|
18675
18675
|
onNavigate(selectedIndex + 1);
|
|
18676
18676
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
18677
18677
|
};
|
|
18678
|
-
var templateObject_1$
|
|
18678
|
+
var templateObject_1$5, templateObject_2$3, templateObject_3$2;
|
|
18679
18679
|
|
|
18680
|
-
var Container$
|
|
18680
|
+
var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __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"])));
|
|
18681
18681
|
var ProductGalleryMobileV2 = function (_a) {
|
|
18682
18682
|
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;
|
|
18683
18683
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -18699,31 +18699,31 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
18699
18699
|
useEffect(function () {
|
|
18700
18700
|
setSelectedImage(images[index]);
|
|
18701
18701
|
}, [index, images]);
|
|
18702
|
-
return (jsxs$1(Container$
|
|
18702
|
+
return (jsxs$1(Container$3, { 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));
|
|
18703
18703
|
};
|
|
18704
|
-
var templateObject_1$
|
|
18704
|
+
var templateObject_1$4;
|
|
18705
18705
|
|
|
18706
|
-
var Container$
|
|
18707
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
18706
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
18707
|
+
var DropContainer = newStyled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18708
18708
|
var DropList = function (_a) {
|
|
18709
18709
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
18710
|
-
return (jsx$1(Container$
|
|
18710
|
+
return (jsx$1(Container$2, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
18711
18711
|
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));
|
|
18712
18712
|
}) }, void 0));
|
|
18713
18713
|
};
|
|
18714
|
-
var templateObject_1$
|
|
18714
|
+
var templateObject_1$3, templateObject_2$2;
|
|
18715
18715
|
|
|
18716
18716
|
var DROPS_TOTAL = 5;
|
|
18717
|
-
var Container = newStyled.div(templateObject_1$
|
|
18718
|
-
var Title = newStyled.p(templateObject_2 || (templateObject_2 = __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"])));
|
|
18719
|
-
var Description = newStyled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
18717
|
+
var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
18718
|
+
var Title = newStyled.p(templateObject_2$1 || (templateObject_2$1 = __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"])));
|
|
18719
|
+
var Description = newStyled.p(templateObject_3$1 || (templateObject_3$1 = __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"])));
|
|
18720
18720
|
var AbsorbencyLevel = function (_a) {
|
|
18721
18721
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
18722
|
-
return (jsxs$1(Container, { children: [jsx$1(Title, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
18722
|
+
return (jsxs$1(Container$1, { children: [jsx$1(Title, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
18723
18723
|
};
|
|
18724
|
-
var templateObject_1$
|
|
18724
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3$1;
|
|
18725
18725
|
|
|
18726
|
-
var TimerContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: 0px;\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: 8px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: 0px;\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: 8px;\n }\n"])), function (_a) {
|
|
18726
|
+
var TimerContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: 0px;\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: 8px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: 0px;\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: 8px;\n }\n"])), function (_a) {
|
|
18727
18727
|
var textPosition = _a.textPosition;
|
|
18728
18728
|
return textPosition;
|
|
18729
18729
|
}, function (_a) {
|
|
@@ -18750,7 +18750,23 @@ var HurryUp = function (_a) {
|
|
|
18750
18750
|
}, []), hours = _e.hours, minutes = _e.minutes, seconds = _e.seconds;
|
|
18751
18751
|
return (jsxs$1(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsx$1(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsx$1(Text$6, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsx$1(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
18752
18752
|
};
|
|
18753
|
-
var templateObject_1;
|
|
18753
|
+
var templateObject_1$1;
|
|
18754
|
+
|
|
18755
|
+
var Container = newStyled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n align-items: flex-end;\n"])));
|
|
18756
|
+
var Content = newStyled('div')(templateObject_2 || (templateObject_2 = __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"])));
|
|
18757
|
+
var BarContainer = newStyled('div')(templateObject_3 || (templateObject_3 = __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"])));
|
|
18758
|
+
var Bar = newStyled('div')(templateObject_4 || (templateObject_4 = __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) {
|
|
18759
|
+
var index = _a.index;
|
|
18760
|
+
return "".concat(6 + 3 * index, "px");
|
|
18761
|
+
}, function (_a) {
|
|
18762
|
+
var isFilled = _a.isFilled;
|
|
18763
|
+
return (isFilled ? '#292929' : '#D9D9D9');
|
|
18764
|
+
});
|
|
18765
|
+
var StrengthBars = function (_a) {
|
|
18766
|
+
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
18767
|
+
return (jsxs$1(Container, __assign$1({ "data-testid": "strength-bar" }, { children: [jsx$1(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsx$1(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsx$1(Content, { children: supportText }, void 0)] }), void 0));
|
|
18768
|
+
};
|
|
18769
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
18754
18770
|
|
|
18755
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$3 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, HurryUp, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
18771
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$3 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, HurryUp, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$6 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
18756
18772
|
//# sourceMappingURL=index.esm.js.map
|