@trafilea/afrodita-components 5.0.0-beta.295 → 5.0.0-beta.297
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 +28 -1
- package/build/index.esm.js +510 -446
- package/build/index.esm.js.map +1 -1
- package/build/index.js +510 -445
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4208,7 +4208,7 @@ var InputValidationType;
|
|
|
4208
4208
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4209
4209
|
})(InputValidationType || (InputValidationType = {}));
|
|
4210
4210
|
|
|
4211
|
-
var Section = newStyled.div(templateObject_1$
|
|
4211
|
+
var Section = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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) {
|
|
4212
4212
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4213
4213
|
});
|
|
4214
4214
|
var CardHeader = function (_a) {
|
|
@@ -4219,14 +4219,14 @@ var CardFooter = function (_a) {
|
|
|
4219
4219
|
var children = _a.children;
|
|
4220
4220
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
4221
4221
|
};
|
|
4222
|
-
var templateObject_1$
|
|
4222
|
+
var templateObject_1$1F;
|
|
4223
4223
|
|
|
4224
|
-
var Body = newStyled.div(templateObject_1$
|
|
4224
|
+
var Body = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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"])));
|
|
4225
4225
|
var CardBody = function (_a) {
|
|
4226
4226
|
var children = _a.children;
|
|
4227
4227
|
return jsx$1(Body, { children: children }, void 0);
|
|
4228
4228
|
};
|
|
4229
|
-
var templateObject_1$
|
|
4229
|
+
var templateObject_1$1E;
|
|
4230
4230
|
|
|
4231
4231
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4232
4232
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4371,7 +4371,7 @@ var AssetsProvider = function (_a) {
|
|
|
4371
4371
|
};
|
|
4372
4372
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4373
4373
|
|
|
4374
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4374
|
+
var Container$14 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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) {
|
|
4375
4375
|
var flex = _a.flex;
|
|
4376
4376
|
return flex &&
|
|
4377
4377
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4393,7 +4393,7 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
4393
4393
|
Footer: CardFooter,
|
|
4394
4394
|
Body: CardBody,
|
|
4395
4395
|
});
|
|
4396
|
-
var templateObject_1$
|
|
4396
|
+
var templateObject_1$1D;
|
|
4397
4397
|
|
|
4398
4398
|
var Fragment = Fragment$1;
|
|
4399
4399
|
function jsx(type, props, key) {
|
|
@@ -4539,7 +4539,7 @@ function BaseSelectOption(_a) {
|
|
|
4539
4539
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4540
4540
|
}
|
|
4541
4541
|
|
|
4542
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4542
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4543
4543
|
function BaseSelect(_a) {
|
|
4544
4544
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4545
4545
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4549,7 +4549,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4549
4549
|
Options: BaseSelectOptions,
|
|
4550
4550
|
Option: BaseSelectOption,
|
|
4551
4551
|
});
|
|
4552
|
-
var templateObject_1$
|
|
4552
|
+
var templateObject_1$1C;
|
|
4553
4553
|
|
|
4554
4554
|
var CustomButton = newStyled.button(function (_a) {
|
|
4555
4555
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4606,14 +4606,14 @@ var withLabel = function (Button, label) {
|
|
|
4606
4606
|
};
|
|
4607
4607
|
};
|
|
4608
4608
|
|
|
4609
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4610
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4609
|
+
var ErrorText = newStyled.h3(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
4610
|
+
var ErrorContainer = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __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"])));
|
|
4611
4611
|
var Error$1 = function (_a) {
|
|
4612
4612
|
var error = _a.error;
|
|
4613
4613
|
var theme = useTheme();
|
|
4614
4614
|
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));
|
|
4615
4615
|
};
|
|
4616
|
-
var templateObject_1$
|
|
4616
|
+
var templateObject_1$1B, templateObject_2$14;
|
|
4617
4617
|
|
|
4618
4618
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4619
4619
|
var theme = _a.theme;
|
|
@@ -4779,7 +4779,7 @@ var CustomCheckboxStyles = {
|
|
|
4779
4779
|
},
|
|
4780
4780
|
};
|
|
4781
4781
|
|
|
4782
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4782
|
+
var Container$13 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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"])));
|
|
4783
4783
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4784
4784
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4785
4785
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4790,7 +4790,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4790
4790
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4791
4791
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4792
4792
|
]; });
|
|
4793
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4793
|
+
var Input$5 = newStyled.input(templateObject_2$13 || (templateObject_2$13 = __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) {
|
|
4794
4794
|
var disabled = _a.disabled;
|
|
4795
4795
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4796
4796
|
});
|
|
@@ -4806,7 +4806,7 @@ var Checkbox = function (_a) {
|
|
|
4806
4806
|
};
|
|
4807
4807
|
return (jsxs$1(Container$13, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4808
4808
|
};
|
|
4809
|
-
var templateObject_1$
|
|
4809
|
+
var templateObject_1$1A, templateObject_2$13;
|
|
4810
4810
|
|
|
4811
4811
|
var CustomOption = newStyled.li(function (_a) {
|
|
4812
4812
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4853,8 +4853,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4853
4853
|
Option: BaseDropdownOption,
|
|
4854
4854
|
});
|
|
4855
4855
|
|
|
4856
|
-
var Container$12 = newStyled.div(templateObject_1$
|
|
4857
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4856
|
+
var Container$12 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject([""], [""])));
|
|
4857
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
4858
4858
|
function SimpleDropdown(_a) {
|
|
4859
4859
|
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;
|
|
4860
4860
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4887,12 +4887,12 @@ function SimpleDropdown(_a) {
|
|
|
4887
4887
|
var DropdownContainer = showRequiredPlaceholder ? Container$12 : Fragment$2;
|
|
4888
4888
|
return (jsxs$1(DropdownContainer, { 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));
|
|
4889
4889
|
}
|
|
4890
|
-
var templateObject_1$
|
|
4890
|
+
var templateObject_1$1z, templateObject_2$12;
|
|
4891
4891
|
|
|
4892
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4893
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4892
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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; });
|
|
4893
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$11 || (templateObject_2$11 = __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; });
|
|
4894
4894
|
var DialogDropdownListItem = newStyled.li(templateObject_3$Q || (templateObject_3$Q = __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"])));
|
|
4895
|
-
var DialogDropdownLink = newStyled.a(templateObject_4$
|
|
4895
|
+
var DialogDropdownLink = newStyled.a(templateObject_4$B || (templateObject_4$B = __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"])));
|
|
4896
4896
|
var DropdownDialog = function (_a) {
|
|
4897
4897
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
4898
4898
|
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) {
|
|
@@ -4900,7 +4900,7 @@ var DropdownDialog = function (_a) {
|
|
|
4900
4900
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4901
4901
|
}) }), void 0) }), void 0));
|
|
4902
4902
|
};
|
|
4903
|
-
var templateObject_1$
|
|
4903
|
+
var templateObject_1$1y, templateObject_2$11, templateObject_3$Q, templateObject_4$B;
|
|
4904
4904
|
|
|
4905
4905
|
var getStylesBySize$a = function (size, theme) {
|
|
4906
4906
|
switch (size) {
|
|
@@ -4968,16 +4968,16 @@ var SelectorSecondary = function (_a) {
|
|
|
4968
4968
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4969
4969
|
// `variants` styles that are consistent through all themes.
|
|
4970
4970
|
var TAGS = {
|
|
4971
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4972
|
-
hero2: newStyled.h2(templateObject_2
|
|
4971
|
+
hero1: newStyled.h1(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject([""], [""]))),
|
|
4972
|
+
hero2: newStyled.h2(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject([""], [""]))),
|
|
4973
4973
|
hero3: newStyled.h3(templateObject_3$P || (templateObject_3$P = __makeTemplateObject([""], [""]))),
|
|
4974
|
-
display1: newStyled.h1(templateObject_4$
|
|
4975
|
-
display2: newStyled.h2(templateObject_5$
|
|
4976
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4977
|
-
heading2: newStyled.h2(templateObject_7$
|
|
4978
|
-
heading3: newStyled.h3(templateObject_8$
|
|
4979
|
-
heading4: newStyled.h4(templateObject_9$
|
|
4980
|
-
heading5: newStyled.h5(templateObject_10$
|
|
4974
|
+
display1: newStyled.h1(templateObject_4$A || (templateObject_4$A = __makeTemplateObject([""], [""]))),
|
|
4975
|
+
display2: newStyled.h2(templateObject_5$n || (templateObject_5$n = __makeTemplateObject([""], [""]))),
|
|
4976
|
+
heading1: newStyled.h1(templateObject_6$l || (templateObject_6$l = __makeTemplateObject([""], [""]))),
|
|
4977
|
+
heading2: newStyled.h2(templateObject_7$d || (templateObject_7$d = __makeTemplateObject([""], [""]))),
|
|
4978
|
+
heading3: newStyled.h3(templateObject_8$9 || (templateObject_8$9 = __makeTemplateObject([""], [""]))),
|
|
4979
|
+
heading4: newStyled.h4(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject([""], [""]))),
|
|
4980
|
+
heading5: newStyled.h5(templateObject_10$4 || (templateObject_10$4 = __makeTemplateObject([""], [""]))),
|
|
4981
4981
|
heading6: newStyled.h6(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject([""], [""]))),
|
|
4982
4982
|
heading7: newStyled.h1(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject([""], [""]))),
|
|
4983
4983
|
heading8: newStyled.h1(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -5100,9 +5100,9 @@ var DEFAULTS = {
|
|
|
5100
5100
|
size: 'regular',
|
|
5101
5101
|
},
|
|
5102
5102
|
};
|
|
5103
|
-
var templateObject_1$
|
|
5103
|
+
var templateObject_1$1x, templateObject_2$10, templateObject_3$P, templateObject_4$A, templateObject_5$n, templateObject_6$l, templateObject_7$d, templateObject_8$9, templateObject_9$6, templateObject_10$4, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2;
|
|
5104
5104
|
|
|
5105
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5105
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
5106
5106
|
var inline = _a.inline;
|
|
5107
5107
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5108
5108
|
});
|
|
@@ -5121,7 +5121,7 @@ var SizeSelector = function (_a) {
|
|
|
5121
5121
|
}, 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));
|
|
5122
5122
|
}) }), void 0)] }), void 0));
|
|
5123
5123
|
};
|
|
5124
|
-
var templateObject_1$
|
|
5124
|
+
var templateObject_1$1w;
|
|
5125
5125
|
|
|
5126
5126
|
var getStylesBySize$9 = function (size) {
|
|
5127
5127
|
switch (size) {
|
|
@@ -5148,7 +5148,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5148
5148
|
} });
|
|
5149
5149
|
};
|
|
5150
5150
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5151
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5151
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1v || (templateObject_1$1v = __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));
|
|
5152
5152
|
};
|
|
5153
5153
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5154
5154
|
if (disabled)
|
|
@@ -5164,16 +5164,16 @@ var TextButton = function (_a) {
|
|
|
5164
5164
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5165
5165
|
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));
|
|
5166
5166
|
};
|
|
5167
|
-
var templateObject_1$
|
|
5167
|
+
var templateObject_1$1v;
|
|
5168
5168
|
|
|
5169
|
-
var Container$11 = newStyled.div(templateObject_1$
|
|
5170
|
-
var P$3 = newStyled.p(templateObject_2
|
|
5169
|
+
var Container$11 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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"])));
|
|
5170
|
+
var P$3 = newStyled.p(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5171
5171
|
var PercentageSpan = newStyled.span(templateObject_3$O || (templateObject_3$O = __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"])));
|
|
5172
5172
|
var SizeFitGuide = function (_a) {
|
|
5173
5173
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5174
5174
|
return (jsxs$1(Container$11, { 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));
|
|
5175
5175
|
};
|
|
5176
|
-
var templateObject_1$
|
|
5176
|
+
var templateObject_1$1u, templateObject_2$$, templateObject_3$O;
|
|
5177
5177
|
|
|
5178
5178
|
var getStylesBySize$8 = function (size) {
|
|
5179
5179
|
switch (size) {
|
|
@@ -5203,7 +5203,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5203
5203
|
};
|
|
5204
5204
|
}
|
|
5205
5205
|
};
|
|
5206
|
-
var Container$10 = newStyled.div(templateObject_1$
|
|
5206
|
+
var Container$10 = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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) {
|
|
5207
5207
|
var backgroundColor = _a.backgroundColor;
|
|
5208
5208
|
return backgroundColor;
|
|
5209
5209
|
}, function (_a) {
|
|
@@ -5225,7 +5225,7 @@ var Container$10 = newStyled.div(templateObject_1$1s || (templateObject_1$1s = _
|
|
|
5225
5225
|
var size = _a.size;
|
|
5226
5226
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5227
5227
|
});
|
|
5228
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5228
|
+
var H3$3 = newStyled.h3(templateObject_2$_ || (templateObject_2$_ = __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) {
|
|
5229
5229
|
var textColor = _a.textColor;
|
|
5230
5230
|
return textColor;
|
|
5231
5231
|
}, function (_a) {
|
|
@@ -5237,13 +5237,12 @@ var H3$3 = newStyled.h3(templateObject_2$Z || (templateObject_2$Z = __makeTempla
|
|
|
5237
5237
|
var size = _a.size;
|
|
5238
5238
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5239
5239
|
});
|
|
5240
|
-
var Now = newStyled(H3$3)(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n display: none;\n margin-right: 0.25rem;\n"], ["\n display: none;\n margin-right: 0.25rem;\n"])));
|
|
5241
5240
|
var DiscountTag = function (_a) {
|
|
5242
5241
|
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;
|
|
5243
5242
|
var theme = useTheme();
|
|
5244
|
-
return (
|
|
5243
|
+
return (jsx$1(Container$10, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style }, { 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));
|
|
5245
5244
|
};
|
|
5246
|
-
var templateObject_1$
|
|
5245
|
+
var templateObject_1$1t, templateObject_2$_;
|
|
5247
5246
|
|
|
5248
5247
|
var getStylesBySize$7 = function (size) {
|
|
5249
5248
|
switch (size) {
|
|
@@ -5273,8 +5272,8 @@ var getStylesBySize$7 = function (size) {
|
|
|
5273
5272
|
};
|
|
5274
5273
|
}
|
|
5275
5274
|
};
|
|
5276
|
-
var Container$$ = newStyled.div(templateObject_1$
|
|
5277
|
-
var Price = newStyled.p(templateObject_2$
|
|
5275
|
+
var Container$$ = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5276
|
+
var Price = newStyled.p(templateObject_2$Z || (templateObject_2$Z = __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) {
|
|
5278
5277
|
var weight = _a.weight;
|
|
5279
5278
|
return (weight ? weight : '400');
|
|
5280
5279
|
}, function (_a) {
|
|
@@ -5303,7 +5302,7 @@ var Price = newStyled.p(templateObject_2$Y || (templateObject_2$Y = __makeTempla
|
|
|
5303
5302
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5304
5303
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5305
5304
|
});
|
|
5306
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5305
|
+
var TagContainer = newStyled.div(templateObject_3$N || (templateObject_3$N = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5307
5306
|
var _b;
|
|
5308
5307
|
var size = _a.size;
|
|
5309
5308
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5326,7 +5325,7 @@ var PriceLabel = function (_a) {
|
|
|
5326
5325
|
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)); };
|
|
5327
5326
|
return (jsxs$1(Container$$, { 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));
|
|
5328
5327
|
};
|
|
5329
|
-
var templateObject_1$
|
|
5328
|
+
var templateObject_1$1s, templateObject_2$Z, templateObject_3$N;
|
|
5330
5329
|
|
|
5331
5330
|
var getStylesBySize$6 = function (size) {
|
|
5332
5331
|
switch (size) {
|
|
@@ -5356,7 +5355,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5356
5355
|
};
|
|
5357
5356
|
}
|
|
5358
5357
|
};
|
|
5359
|
-
var Container$_ = newStyled.div(templateObject_1$
|
|
5358
|
+
var Container$_ = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5360
5359
|
var backgroundColor = _a.backgroundColor;
|
|
5361
5360
|
return backgroundColor;
|
|
5362
5361
|
}, function (_a) {
|
|
@@ -5378,7 +5377,7 @@ var Container$_ = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __
|
|
|
5378
5377
|
var size = _a.size;
|
|
5379
5378
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5380
5379
|
});
|
|
5381
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5380
|
+
var H3$2 = newStyled.h3(templateObject_2$Y || (templateObject_2$Y = __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) {
|
|
5382
5381
|
var textColor = _a.textColor;
|
|
5383
5382
|
return textColor;
|
|
5384
5383
|
}, function (_a) {
|
|
@@ -5395,9 +5394,9 @@ var ClubOfferTag = function (_a) {
|
|
|
5395
5394
|
var theme = useTheme();
|
|
5396
5395
|
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": "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));
|
|
5397
5396
|
};
|
|
5398
|
-
var templateObject_1$
|
|
5397
|
+
var templateObject_1$1r, templateObject_2$Y;
|
|
5399
5398
|
|
|
5400
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5399
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5401
5400
|
var PriceLabelV2 = function (_a) {
|
|
5402
5401
|
var _b;
|
|
5403
5402
|
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;
|
|
@@ -5438,7 +5437,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5438
5437
|
lineHeight: '22px',
|
|
5439
5438
|
} }), void 0)) }), void 0))] }, void 0));
|
|
5440
5439
|
};
|
|
5441
|
-
var templateObject_1$
|
|
5440
|
+
var templateObject_1$1q;
|
|
5442
5441
|
|
|
5443
5442
|
var OneColorSelector = function (_a) {
|
|
5444
5443
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5479,11 +5478,11 @@ var OutOfStock = function (_a) {
|
|
|
5479
5478
|
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));
|
|
5480
5479
|
};
|
|
5481
5480
|
|
|
5482
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5483
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5484
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5485
|
-
var Span = newStyled.span(templateObject_4$
|
|
5486
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
5481
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5482
|
+
newStyled(lt.Label)(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5483
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
5484
|
+
var Span = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5485
|
+
var OptionsContainer = newStyled.div(templateObject_5$m || (templateObject_5$m = __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"])));
|
|
5487
5486
|
var Label$3 = function (_a) {
|
|
5488
5487
|
var label = _a.label, values = _a.values;
|
|
5489
5488
|
return (jsxs$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
@@ -5501,23 +5500,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5501
5500
|
Option: Option,
|
|
5502
5501
|
OptionsContainer: OptionsContainer,
|
|
5503
5502
|
});
|
|
5504
|
-
var templateObject_1$
|
|
5503
|
+
var templateObject_1$1p, templateObject_2$X, templateObject_3$M, templateObject_4$z, templateObject_5$m;
|
|
5505
5504
|
|
|
5506
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
5505
|
+
var Container$Z = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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) {
|
|
5507
5506
|
var borderColor = _a.borderColor;
|
|
5508
5507
|
return borderColor;
|
|
5509
5508
|
}, function (_a) {
|
|
5510
5509
|
var noStock = _a.noStock;
|
|
5511
5510
|
return (noStock ? '0.4' : '1');
|
|
5512
5511
|
});
|
|
5513
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5512
|
+
var Image$3 = newStyled.img(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5514
5513
|
var PatternSelector = function (_a) {
|
|
5515
5514
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5516
5515
|
var theme = useTheme();
|
|
5517
5516
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5518
5517
|
return (jsx$1(Container$Z, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5519
5518
|
};
|
|
5520
|
-
var templateObject_1$
|
|
5519
|
+
var templateObject_1$1o, templateObject_2$W;
|
|
5521
5520
|
|
|
5522
5521
|
var renderOptions$1 = function (options) {
|
|
5523
5522
|
if (options.length === 0) {
|
|
@@ -5722,7 +5721,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5722
5721
|
literal: true,
|
|
5723
5722
|
});
|
|
5724
5723
|
|
|
5725
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5724
|
+
var Image$2 = newStyled.img(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
5726
5725
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5727
5726
|
return borderRadiusVariant &&
|
|
5728
5727
|
"\nborder-radius: 20px;\n";
|
|
@@ -5737,7 +5736,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5737
5736
|
var theme = useTheme();
|
|
5738
5737
|
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));
|
|
5739
5738
|
};
|
|
5740
|
-
var templateObject_1$
|
|
5739
|
+
var templateObject_1$1n;
|
|
5741
5740
|
|
|
5742
5741
|
var Button$5 = newStyled.button(function () { return ({
|
|
5743
5742
|
background: 'transparent',
|
|
@@ -9981,14 +9980,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9981
9980
|
return Slider;
|
|
9982
9981
|
}(React__default.Component);
|
|
9983
9982
|
|
|
9984
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9983
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
9985
9984
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9986
9985
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9987
9986
|
}, function (_a) {
|
|
9988
9987
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9989
9988
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9990
9989
|
});
|
|
9991
|
-
var templateObject_1$
|
|
9990
|
+
var templateObject_1$1m;
|
|
9992
9991
|
|
|
9993
9992
|
var getStylesBySize$5 = function (size) {
|
|
9994
9993
|
// rem units
|
|
@@ -10047,13 +10046,13 @@ var SliderNavigation = function (_a) {
|
|
|
10047
10046
|
} }, { 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));
|
|
10048
10047
|
};
|
|
10049
10048
|
|
|
10050
|
-
var horizontalStyles = css(templateObject_1$
|
|
10051
|
-
var verticalStyles = css(templateObject_2$
|
|
10052
|
-
var Container$Y = newStyled.div(templateObject_3$
|
|
10049
|
+
var horizontalStyles = css(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
10050
|
+
var verticalStyles = css(templateObject_2$V || (templateObject_2$V = __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"])));
|
|
10051
|
+
var Container$Y = newStyled.div(templateObject_3$L || (templateObject_3$L = __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) {
|
|
10053
10052
|
var position = _a.position;
|
|
10054
10053
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10055
10054
|
});
|
|
10056
|
-
var Button$4 = newStyled.button(templateObject_4$
|
|
10055
|
+
var Button$4 = newStyled.button(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
10057
10056
|
var ImagePreviewList = function (_a) {
|
|
10058
10057
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
10059
10058
|
return (jsx$1(Container$Y, __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: {
|
|
@@ -10062,7 +10061,7 @@ var ImagePreviewList = function (_a) {
|
|
|
10062
10061
|
arrowPadding: 1.625,
|
|
10063
10062
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
10064
10063
|
};
|
|
10065
|
-
var templateObject_1$
|
|
10064
|
+
var templateObject_1$1l, templateObject_2$V, templateObject_3$L, templateObject_4$y;
|
|
10066
10065
|
|
|
10067
10066
|
var propTypes = {exports: {}};
|
|
10068
10067
|
|
|
@@ -11655,17 +11654,17 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11655
11654
|
afterZoomOut: PropTypes.func
|
|
11656
11655
|
} : {};
|
|
11657
11656
|
|
|
11658
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
11657
|
+
var Container$X = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
11659
11658
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11660
11659
|
return borderRadiusVariant &&
|
|
11661
11660
|
"\n border-radius: 40px;\n ";
|
|
11662
11661
|
});
|
|
11663
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11664
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11665
|
-
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$
|
|
11666
|
-
var Video$1 = newStyled.div(templateObject_5$
|
|
11667
|
-
var VideoTag$1 = newStyled.div(templateObject_6$
|
|
11668
|
-
var Text$7 = newStyled.div(templateObject_7$
|
|
11662
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
11663
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11664
|
+
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$x || (templateObject_4$x = __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"])));
|
|
11665
|
+
var Video$1 = newStyled.div(templateObject_5$l || (templateObject_5$l = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"])));
|
|
11666
|
+
var VideoTag$1 = newStyled.div(templateObject_6$k || (templateObject_6$k = __makeTemplateObject(["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
11667
|
+
var Text$7 = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
11669
11668
|
var ImageProductWithTags$1 = function (_a) {
|
|
11670
11669
|
var _b, _c;
|
|
11671
11670
|
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;
|
|
@@ -11674,9 +11673,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11674
11673
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11675
11674
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(Video$1, { children: jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$7, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
11676
11675
|
};
|
|
11677
|
-
var templateObject_1$
|
|
11676
|
+
var templateObject_1$1k, templateObject_2$U, templateObject_3$K, templateObject_4$x, templateObject_5$l, templateObject_6$k, templateObject_7$c;
|
|
11678
11677
|
|
|
11679
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
11678
|
+
var Container$W = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
11680
11679
|
var ProductGallery = function (_a) {
|
|
11681
11680
|
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;
|
|
11682
11681
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11688,7 +11687,7 @@ var ProductGallery = function (_a) {
|
|
|
11688
11687
|
setSelectedImage(value);
|
|
11689
11688
|
}, 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));
|
|
11690
11689
|
};
|
|
11691
|
-
var templateObject_1$
|
|
11690
|
+
var templateObject_1$1j;
|
|
11692
11691
|
|
|
11693
11692
|
/* base styles & size variants */
|
|
11694
11693
|
var StarStyles = {
|
|
@@ -11734,8 +11733,8 @@ var StarStyles = {
|
|
|
11734
11733
|
});
|
|
11735
11734
|
},
|
|
11736
11735
|
};
|
|
11737
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
11738
|
-
var templateObject_1$
|
|
11736
|
+
var Container$V = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11737
|
+
var templateObject_1$1i;
|
|
11739
11738
|
|
|
11740
11739
|
var StarContainer = newStyled.div(function (_a) {
|
|
11741
11740
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11797,8 +11796,8 @@ var LabelStyles = {
|
|
|
11797
11796
|
});
|
|
11798
11797
|
},
|
|
11799
11798
|
};
|
|
11800
|
-
var Container$U = newStyled.a(templateObject_1$
|
|
11801
|
-
var templateObject_1$
|
|
11799
|
+
var Container$U = newStyled.a(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11800
|
+
var templateObject_1$1h;
|
|
11802
11801
|
|
|
11803
11802
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11804
11803
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11841,8 +11840,8 @@ var Rating = function (_a) {
|
|
|
11841
11840
|
return (jsxs$1(Container$U, __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 ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
11842
11841
|
};
|
|
11843
11842
|
|
|
11844
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
11845
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11843
|
+
var Container$T = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
11844
|
+
var P$2 = newStyled.p(templateObject_2$T || (templateObject_2$T = __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; });
|
|
11846
11845
|
var textButtonStyles = function (theme) { return ({
|
|
11847
11846
|
border: 'none',
|
|
11848
11847
|
background: 'transparent',
|
|
@@ -11857,7 +11856,7 @@ var FitPredictor = function (_a) {
|
|
|
11857
11856
|
var theme = useTheme();
|
|
11858
11857
|
return (jsxs(Container$T, __assign$1({ theme: theme }, { children: [jsx(Container$T, { 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));
|
|
11859
11858
|
};
|
|
11860
|
-
var templateObject_1$
|
|
11859
|
+
var templateObject_1$1g, templateObject_2$T;
|
|
11861
11860
|
|
|
11862
11861
|
var P$1 = newStyled.p(function (_a) {
|
|
11863
11862
|
var color = _a.color;
|
|
@@ -11871,7 +11870,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
11871
11870
|
margin: '0.938rem 4.188rem',
|
|
11872
11871
|
});
|
|
11873
11872
|
});
|
|
11874
|
-
var Bar$2 = newStyled.div(templateObject_1$
|
|
11873
|
+
var Bar$2 = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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) {
|
|
11875
11874
|
var height = _a.height;
|
|
11876
11875
|
return height || '0.5rem';
|
|
11877
11876
|
}, function (_a) {
|
|
@@ -11916,9 +11915,9 @@ var ProgressBar = function (_a) {
|
|
|
11916
11915
|
var theme = useTheme();
|
|
11917
11916
|
return (jsxs$1(Container$S, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background$1, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar$2, { "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));
|
|
11918
11917
|
};
|
|
11919
|
-
var templateObject_1$
|
|
11918
|
+
var templateObject_1$1f;
|
|
11920
11919
|
|
|
11921
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
11920
|
+
var Bar$1 = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11922
11921
|
var height = _a.height;
|
|
11923
11922
|
return height || '0.5rem';
|
|
11924
11923
|
}, function (_a) {
|
|
@@ -11990,7 +11989,7 @@ var MotivatorProgressBar = function (_a) {
|
|
|
11990
11989
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
11991
11990
|
return (jsxs$1(Container$R, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer$1, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
11992
11991
|
};
|
|
11993
|
-
var templateObject_1$
|
|
11992
|
+
var templateObject_1$1e;
|
|
11994
11993
|
|
|
11995
11994
|
var getStylesBySize$4 = function (size) {
|
|
11996
11995
|
switch (size) {
|
|
@@ -12011,7 +12010,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
12011
12010
|
};
|
|
12012
12011
|
}
|
|
12013
12012
|
};
|
|
12014
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
12013
|
+
var Container$Q = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
12015
12014
|
var backgroundColor = _a.backgroundColor;
|
|
12016
12015
|
return backgroundColor;
|
|
12017
12016
|
}, function (_a) {
|
|
@@ -12041,7 +12040,7 @@ var IconButton = function (_a) {
|
|
|
12041
12040
|
var theme = useTheme();
|
|
12042
12041
|
return (jsx$1(Container$Q, __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));
|
|
12043
12042
|
};
|
|
12044
|
-
var templateObject_1$
|
|
12043
|
+
var templateObject_1$1d;
|
|
12045
12044
|
|
|
12046
12045
|
var TooltipArrow = function (_a) {
|
|
12047
12046
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -12121,7 +12120,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
12121
12120
|
}
|
|
12122
12121
|
};
|
|
12123
12122
|
|
|
12124
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
12123
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
12125
12124
|
var position = _a.position;
|
|
12126
12125
|
return getWrapperFlexDirection(position);
|
|
12127
12126
|
});
|
|
@@ -12146,14 +12145,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
12146
12145
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
12147
12146
|
return actual === expected ? margin : '0';
|
|
12148
12147
|
};
|
|
12149
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
12148
|
+
var ContentWrapper = newStyled.div(templateObject_2$S || (templateObject_2$S = __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) {
|
|
12150
12149
|
var borderColor = _a.borderColor;
|
|
12151
12150
|
return borderColor;
|
|
12152
12151
|
}, function (_a) {
|
|
12153
12152
|
var backgroundColor = _a.backgroundColor;
|
|
12154
12153
|
return backgroundColor;
|
|
12155
12154
|
});
|
|
12156
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
12155
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$J || (templateObject_3$J = __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) {
|
|
12157
12156
|
var position = _a.position;
|
|
12158
12157
|
return getArrowRotation(position);
|
|
12159
12158
|
}, function (_a) {
|
|
@@ -12163,17 +12162,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$I || (templateObject_
|
|
|
12163
12162
|
var position = _a.position;
|
|
12164
12163
|
return getArrowContainerMargin(position);
|
|
12165
12164
|
});
|
|
12166
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
12165
|
+
var TooltipText = newStyled.div(templateObject_4$w || (templateObject_4$w = __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) {
|
|
12167
12166
|
var color = _a.color;
|
|
12168
12167
|
return color;
|
|
12169
12168
|
});
|
|
12170
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
12171
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
12169
|
+
var TopSection = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
12170
|
+
var Title$7 = newStyled.h1(templateObject_6$j || (templateObject_6$j = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
12172
12171
|
var color = _a.color;
|
|
12173
12172
|
return color;
|
|
12174
12173
|
});
|
|
12175
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
12176
|
-
var templateObject_1$
|
|
12174
|
+
var IconContainer$5 = newStyled.div(templateObject_7$b || (templateObject_7$b = __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"])));
|
|
12175
|
+
var templateObject_1$1c, templateObject_2$S, templateObject_3$J, templateObject_4$w, templateObject_5$k, templateObject_6$j, templateObject_7$b;
|
|
12177
12176
|
|
|
12178
12177
|
var Tooltip = function (_a) {
|
|
12179
12178
|
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;
|
|
@@ -12260,7 +12259,7 @@ var AccordionDetailsStyles = {
|
|
|
12260
12259
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
12261
12260
|
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)]; });
|
|
12262
12261
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
12263
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
12262
|
+
var StyledContent = newStyled.button(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
12264
12263
|
var Accordion$1 = function (_a) {
|
|
12265
12264
|
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;
|
|
12266
12265
|
var theme = useTheme();
|
|
@@ -12272,7 +12271,7 @@ var Accordion$1 = function (_a) {
|
|
|
12272
12271
|
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));
|
|
12273
12272
|
} }), void 0));
|
|
12274
12273
|
};
|
|
12275
|
-
var templateObject_1$
|
|
12274
|
+
var templateObject_1$1b;
|
|
12276
12275
|
|
|
12277
12276
|
/* base styles & size variants */
|
|
12278
12277
|
var CustomRadioStyles$2 = {
|
|
@@ -12341,9 +12340,9 @@ var ContainerStyles$2 = {
|
|
|
12341
12340
|
},
|
|
12342
12341
|
};
|
|
12343
12342
|
|
|
12344
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
12343
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12345
12344
|
var Container$P = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
12346
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
12345
|
+
var Input$4 = newStyled.input(templateObject_2$R || (templateObject_2$R = __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) {
|
|
12347
12346
|
var disabled = _a.disabled;
|
|
12348
12347
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12349
12348
|
});
|
|
@@ -12351,7 +12350,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
12351
12350
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12352
12351
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
12353
12352
|
]; });
|
|
12354
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
12353
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
12355
12354
|
var RadioPrimary = function (_a) {
|
|
12356
12355
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
12357
12356
|
var theme = useTheme();
|
|
@@ -12361,7 +12360,7 @@ var RadioPrimary = function (_a) {
|
|
|
12361
12360
|
};
|
|
12362
12361
|
return (jsxs$1(Wrapper$6, { children: [jsxs$1(Container$P, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12363
12362
|
};
|
|
12364
|
-
var templateObject_1$
|
|
12363
|
+
var templateObject_1$1a, templateObject_2$R, templateObject_3$I;
|
|
12365
12364
|
|
|
12366
12365
|
/* base styles & size variants */
|
|
12367
12366
|
var CustomRadioStyles$1 = {
|
|
@@ -12426,9 +12425,9 @@ var ContainerStyles$1 = {
|
|
|
12426
12425
|
},
|
|
12427
12426
|
};
|
|
12428
12427
|
|
|
12429
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
12428
|
+
var Wrapper$5 = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12430
12429
|
var Container$O = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
12431
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
12430
|
+
var Input$3 = newStyled.input(templateObject_2$Q || (templateObject_2$Q = __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) {
|
|
12432
12431
|
var disabled = _a.disabled;
|
|
12433
12432
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12434
12433
|
});
|
|
@@ -12436,7 +12435,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
12436
12435
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled),
|
|
12437
12436
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
12438
12437
|
]; });
|
|
12439
|
-
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$
|
|
12438
|
+
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12440
12439
|
var theme = _a.theme;
|
|
12441
12440
|
return theme.component.radio.textSize;
|
|
12442
12441
|
}, function (_a) {
|
|
@@ -12452,7 +12451,7 @@ var RadioInput = function (_a) {
|
|
|
12452
12451
|
};
|
|
12453
12452
|
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));
|
|
12454
12453
|
};
|
|
12455
|
-
var templateObject_1$
|
|
12454
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$H;
|
|
12456
12455
|
|
|
12457
12456
|
var RadioGroupInput = function (_a) {
|
|
12458
12457
|
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;
|
|
@@ -12531,9 +12530,9 @@ var ContainerStyles = {
|
|
|
12531
12530
|
},
|
|
12532
12531
|
};
|
|
12533
12532
|
|
|
12534
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
12533
|
+
var Wrapper$4 = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
12535
12534
|
var Container$N = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
12536
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
12535
|
+
var Input$2 = newStyled.input(templateObject_2$P || (templateObject_2$P = __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) {
|
|
12537
12536
|
var disabled = _a.disabled;
|
|
12538
12537
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12539
12538
|
});
|
|
@@ -12541,7 +12540,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
12541
12540
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12542
12541
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
12543
12542
|
]; });
|
|
12544
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
12543
|
+
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12545
12544
|
var theme = _a.theme;
|
|
12546
12545
|
return theme.component.radio.textSize;
|
|
12547
12546
|
}, function (_a) {
|
|
@@ -12557,7 +12556,7 @@ var ClubRadioInput = function (_a) {
|
|
|
12557
12556
|
};
|
|
12558
12557
|
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));
|
|
12559
12558
|
};
|
|
12560
|
-
var templateObject_1$
|
|
12559
|
+
var templateObject_1$18, templateObject_2$P, templateObject_3$G;
|
|
12561
12560
|
|
|
12562
12561
|
var ClubRadioGroupInput = function (_a) {
|
|
12563
12562
|
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;
|
|
@@ -12571,37 +12570,37 @@ var ClubRadioGroupInput = function (_a) {
|
|
|
12571
12570
|
}) }), void 0));
|
|
12572
12571
|
};
|
|
12573
12572
|
|
|
12574
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
12575
|
-
var Container$M = newStyled.div(templateObject_2$
|
|
12573
|
+
var Wrapper$3 = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
12574
|
+
var Container$M = newStyled.div(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
12576
12575
|
var Minimalistic = function (_a) {
|
|
12577
12576
|
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;
|
|
12578
12577
|
var theme = useTheme();
|
|
12579
12578
|
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$8, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '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$8, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
12580
12579
|
};
|
|
12581
|
-
var templateObject_1$
|
|
12580
|
+
var templateObject_1$17, templateObject_2$O;
|
|
12582
12581
|
|
|
12583
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
12584
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
12585
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
12586
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
12582
|
+
var Container$L = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
12583
|
+
var Title$6 = newStyled.h1(templateObject_2$N || (templateObject_2$N = __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; });
|
|
12584
|
+
var Details$1 = newStyled.span(templateObject_3$F || (templateObject_3$F = __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; });
|
|
12585
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
12587
12586
|
var Simple = function (_a) {
|
|
12588
12587
|
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;
|
|
12589
12588
|
var theme = useTheme();
|
|
12590
12589
|
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));
|
|
12591
12590
|
};
|
|
12592
|
-
var templateObject_1$
|
|
12591
|
+
var templateObject_1$16, templateObject_2$N, templateObject_3$F, templateObject_4$v;
|
|
12593
12592
|
|
|
12594
12593
|
var Bundle = {
|
|
12595
12594
|
Minimalistic: Minimalistic,
|
|
12596
12595
|
Simple: Simple,
|
|
12597
12596
|
};
|
|
12598
12597
|
|
|
12599
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
12598
|
+
var Container$K = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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"])));
|
|
12600
12599
|
var Tag$2 = function (_a) {
|
|
12601
12600
|
var text = _a.text, className = _a.className;
|
|
12602
12601
|
return jsx$1(Container$K, __assign$1({ className: className }, { children: text }), void 0);
|
|
12603
12602
|
};
|
|
12604
|
-
var templateObject_1$
|
|
12603
|
+
var templateObject_1$15;
|
|
12605
12604
|
|
|
12606
12605
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
12607
12606
|
switch (size) {
|
|
@@ -12704,11 +12703,11 @@ var Timer = function (_a) {
|
|
|
12704
12703
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12705
12704
|
};
|
|
12706
12705
|
|
|
12707
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
12706
|
+
var Label$2 = newStyled.span(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
12708
12707
|
var color = _a.color;
|
|
12709
12708
|
return color;
|
|
12710
12709
|
});
|
|
12711
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12710
|
+
var MandatoryIcon = newStyled.span(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
12712
12711
|
var color = _a.color;
|
|
12713
12712
|
return color;
|
|
12714
12713
|
});
|
|
@@ -12717,7 +12716,7 @@ var InputLabel = function (_a) {
|
|
|
12717
12716
|
var theme = useTheme();
|
|
12718
12717
|
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));
|
|
12719
12718
|
};
|
|
12720
|
-
var templateObject_1$
|
|
12719
|
+
var templateObject_1$14, templateObject_2$M;
|
|
12721
12720
|
|
|
12722
12721
|
var containerByStatus = function (theme, status) {
|
|
12723
12722
|
if (status === InputValidationType.Valid)
|
|
@@ -12726,12 +12725,12 @@ var containerByStatus = function (theme, status) {
|
|
|
12726
12725
|
return theme.colors.semantic.urgent.color;
|
|
12727
12726
|
return '';
|
|
12728
12727
|
};
|
|
12729
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
12728
|
+
var Container$J = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12730
12729
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12731
12730
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12732
12731
|
});
|
|
12733
|
-
var StyledLabel = newStyled.label(templateObject_2$
|
|
12734
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
12732
|
+
var StyledLabel = newStyled.label(templateObject_2$L || (templateObject_2$L = __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"])));
|
|
12733
|
+
var StyledInput = newStyled.input(templateObject_3$E || (templateObject_3$E = __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) {
|
|
12735
12734
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12736
12735
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12737
12736
|
}, function (_a) {
|
|
@@ -12786,11 +12785,11 @@ var StyledInput = newStyled.input(templateObject_3$D || (templateObject_3$D = __
|
|
|
12786
12785
|
return hasValue &&
|
|
12787
12786
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12788
12787
|
});
|
|
12789
|
-
var InputWrapper = newStyled.div(templateObject_4$
|
|
12788
|
+
var InputWrapper = newStyled.div(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12790
12789
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12791
12790
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12792
12791
|
});
|
|
12793
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$
|
|
12792
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
12794
12793
|
var theme = _a.theme;
|
|
12795
12794
|
return theme.component.input.placeholderColor;
|
|
12796
12795
|
}, function (_a) {
|
|
@@ -12803,8 +12802,8 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$i || (templateObject_5
|
|
|
12803
12802
|
var theme = _a.theme;
|
|
12804
12803
|
return theme.component.input.lineHeight;
|
|
12805
12804
|
});
|
|
12806
|
-
var ClearInput = newStyled.div(templateObject_6$
|
|
12807
|
-
var templateObject_1$
|
|
12805
|
+
var ClearInput = newStyled.div(templateObject_6$i || (templateObject_6$i = __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"])));
|
|
12806
|
+
var templateObject_1$13, templateObject_2$L, templateObject_3$E, templateObject_4$u, templateObject_5$j, templateObject_6$i;
|
|
12808
12807
|
|
|
12809
12808
|
var BaseInput = function (_a) {
|
|
12810
12809
|
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"]);
|
|
@@ -12848,11 +12847,11 @@ var Button$3 = function (_a) {
|
|
|
12848
12847
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12849
12848
|
};
|
|
12850
12849
|
|
|
12851
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
12850
|
+
var Container$I = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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) {
|
|
12852
12851
|
var theme = _a.theme;
|
|
12853
12852
|
return theme.component.inputCustom.input.borderRadius;
|
|
12854
12853
|
});
|
|
12855
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12854
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$K || (templateObject_2$K = __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) {
|
|
12856
12855
|
var theme = _a.theme;
|
|
12857
12856
|
return theme.component.inputCustom.button.borderRadius;
|
|
12858
12857
|
});
|
|
@@ -12867,21 +12866,21 @@ var Custom = function (_a) {
|
|
|
12867
12866
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12868
12867
|
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$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12869
12868
|
};
|
|
12870
|
-
var templateObject_1$
|
|
12869
|
+
var templateObject_1$12, templateObject_2$K;
|
|
12871
12870
|
|
|
12872
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12871
|
+
var SuccessContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12873
12872
|
var size = _a.size;
|
|
12874
12873
|
return (size === 'small' ? '36px' : '');
|
|
12875
12874
|
});
|
|
12876
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12877
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12875
|
+
var SuccessMessage = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
12876
|
+
var SuccessText = newStyled.span(templateObject_3$D || (templateObject_3$D = __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"])));
|
|
12878
12877
|
var Success = function (_a) {
|
|
12879
12878
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12880
12879
|
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));
|
|
12881
12880
|
};
|
|
12882
|
-
var templateObject_1$
|
|
12881
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$D;
|
|
12883
12882
|
|
|
12884
|
-
var ButtonContainer = newStyled.div(templateObject_1
|
|
12883
|
+
var ButtonContainer = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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) {
|
|
12885
12884
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12886
12885
|
return status === InputValidationType.Empty &&
|
|
12887
12886
|
type === 'primary' &&
|
|
@@ -12898,10 +12897,10 @@ var BasePlusButton = function (_a) {
|
|
|
12898
12897
|
}
|
|
12899
12898
|
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));
|
|
12900
12899
|
};
|
|
12901
|
-
var templateObject_1
|
|
12900
|
+
var templateObject_1$10;
|
|
12902
12901
|
|
|
12903
|
-
var Container$H = newStyled.div(templateObject_1
|
|
12904
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12902
|
+
var Container$H = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12903
|
+
var IconContainer$4 = newStyled.div(templateObject_2$I || (templateObject_2$I = __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; });
|
|
12905
12904
|
var BasePlusIcon = function (_a) {
|
|
12906
12905
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12907
12906
|
var theme = useTheme();
|
|
@@ -12912,7 +12911,7 @@ var BasePlusIcon = function (_a) {
|
|
|
12912
12911
|
? theme.colors.semantic.urgent.color
|
|
12913
12912
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12914
12913
|
};
|
|
12915
|
-
var templateObject_1
|
|
12914
|
+
var templateObject_1$$, templateObject_2$I;
|
|
12916
12915
|
|
|
12917
12916
|
var Input$1 = {
|
|
12918
12917
|
Simple: BaseInput,
|
|
@@ -12921,7 +12920,7 @@ var Input$1 = {
|
|
|
12921
12920
|
SimplePlusIcon: BasePlusIcon,
|
|
12922
12921
|
};
|
|
12923
12922
|
|
|
12924
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
12923
|
+
var Container$G = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
12925
12924
|
var width = _a.width;
|
|
12926
12925
|
return width;
|
|
12927
12926
|
}, function (_a) {
|
|
@@ -12939,9 +12938,9 @@ var PaymentMethod = function (_a) {
|
|
|
12939
12938
|
var theme = useTheme();
|
|
12940
12939
|
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));
|
|
12941
12940
|
};
|
|
12942
|
-
var templateObject_1$
|
|
12941
|
+
var templateObject_1$_;
|
|
12943
12942
|
|
|
12944
|
-
var Text$6 = newStyled.h3(templateObject_1$
|
|
12943
|
+
var Text$6 = newStyled.h3(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
12945
12944
|
var backgroundColor = _a.backgroundColor;
|
|
12946
12945
|
return backgroundColor;
|
|
12947
12946
|
}, function (_a) {
|
|
@@ -12953,11 +12952,11 @@ var OfferBanner = function (_a) {
|
|
|
12953
12952
|
var theme = useTheme();
|
|
12954
12953
|
return (jsx$1(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12955
12954
|
};
|
|
12956
|
-
var templateObject_1$
|
|
12955
|
+
var templateObject_1$Z;
|
|
12957
12956
|
|
|
12958
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12959
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12960
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12957
|
+
var Wrapper$2 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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"])));
|
|
12958
|
+
var GrandTotal = newStyled.h1(templateObject_2$H || (templateObject_2$H = __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; });
|
|
12959
|
+
var Currency = newStyled.span(templateObject_3$C || (templateObject_3$C = __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) {
|
|
12961
12960
|
var theme = _a.theme;
|
|
12962
12961
|
return theme.component.total.basicTotal.currency.color;
|
|
12963
12962
|
}, function (_a) {
|
|
@@ -12970,9 +12969,9 @@ var Currency = newStyled.span(templateObject_3$B || (templateObject_3$B = __make
|
|
|
12970
12969
|
var theme = _a.theme;
|
|
12971
12970
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12972
12971
|
});
|
|
12973
|
-
var Container$F = newStyled.div(templateObject_4$
|
|
12974
|
-
var DiscountText = newStyled.h3(templateObject_5$
|
|
12975
|
-
var DiscountAmount = newStyled.h3(templateObject_6$
|
|
12972
|
+
var Container$F = newStyled.div(templateObject_4$t || (templateObject_4$t = __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; });
|
|
12973
|
+
var DiscountText = newStyled.h3(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 14px;\n line-height: 22px;\n font-weight: 600;\n"])));
|
|
12974
|
+
var DiscountAmount = newStyled.h3(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 18px;\n line-height: 28px;\n font-weight: ", ";\n"])), function (_a) {
|
|
12976
12975
|
var theme = _a.theme;
|
|
12977
12976
|
return theme.component.total.basicTotal.savings.amountFontWeight;
|
|
12978
12977
|
});
|
|
@@ -12981,21 +12980,21 @@ var Total = function (_a) {
|
|
|
12981
12980
|
var theme = useTheme();
|
|
12982
12981
|
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));
|
|
12983
12982
|
};
|
|
12984
|
-
var templateObject_1$
|
|
12983
|
+
var templateObject_1$Y, templateObject_2$H, templateObject_3$C, templateObject_4$t, templateObject_5$i, templateObject_6$h;
|
|
12985
12984
|
|
|
12986
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12985
|
+
var Wrapper$1 = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12987
12986
|
var color = _a.color;
|
|
12988
12987
|
return color;
|
|
12989
12988
|
});
|
|
12990
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12991
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12989
|
+
var ItemContainer = newStyled.div(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
12990
|
+
var Item$2 = newStyled.h4(templateObject_3$B || (templateObject_3$B = __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) {
|
|
12992
12991
|
var theme = _a.theme;
|
|
12993
12992
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12994
12993
|
}, function (_a) {
|
|
12995
12994
|
var theme = _a.theme;
|
|
12996
12995
|
return theme.component.subTotal.basicSubTotal.weight;
|
|
12997
12996
|
});
|
|
12998
|
-
var CouponItem = newStyled(Item$2)(templateObject_4$
|
|
12997
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$s || (templateObject_4$s = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12999
12998
|
var color = _a.color;
|
|
13000
12999
|
return color;
|
|
13001
13000
|
});
|
|
@@ -13008,51 +13007,51 @@ var Subtotal = function (_a) {
|
|
|
13008
13007
|
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));
|
|
13009
13008
|
})] }), void 0));
|
|
13010
13009
|
};
|
|
13011
|
-
var templateObject_1$
|
|
13010
|
+
var templateObject_1$X, templateObject_2$G, templateObject_3$B, templateObject_4$s;
|
|
13012
13011
|
|
|
13013
13012
|
var Totals = {
|
|
13014
13013
|
Total: Total,
|
|
13015
13014
|
Subtotal: Subtotal,
|
|
13016
13015
|
};
|
|
13017
13016
|
|
|
13018
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
13019
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
13020
|
-
var Text$5 = newStyled.p(templateObject_3$
|
|
13021
|
-
var Details = newStyled.span(templateObject_4$
|
|
13017
|
+
var Container$E = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
13018
|
+
var IconContainer$3 = newStyled.div(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
13019
|
+
var Text$5 = newStyled.p(templateObject_3$A || (templateObject_3$A = __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; });
|
|
13020
|
+
var Details = newStyled.span(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
13022
13021
|
var Note = function (_a) {
|
|
13023
13022
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
13024
13023
|
var theme = useTheme();
|
|
13025
13024
|
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.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$5, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxs$1(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
13026
13025
|
};
|
|
13027
|
-
var templateObject_1$
|
|
13026
|
+
var templateObject_1$W, templateObject_2$F, templateObject_3$A, templateObject_4$r;
|
|
13028
13027
|
|
|
13029
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
13028
|
+
var Title$5 = newStyled.h1(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n ", "\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
|
|
13030
13029
|
var theme = _a.theme;
|
|
13031
13030
|
return "\n font-size: ".concat(theme.component.deliveryDetails.title.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.title.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.title.fontWeight, ";\n ");
|
|
13032
13031
|
});
|
|
13033
|
-
var Line = newStyled.div(templateObject_2$
|
|
13034
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
13032
|
+
var Line = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 1.25rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
13033
|
+
var Row$1 = newStyled.div(templateObject_3$z || (templateObject_3$z = __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({
|
|
13035
13034
|
flexDirection: ['column', 'row'],
|
|
13036
13035
|
}));
|
|
13037
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
13036
|
+
var Col$1 = newStyled.div(templateObject_4$q || (templateObject_4$q = __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({
|
|
13038
13037
|
margin: ['0', '0 1.25rem'],
|
|
13039
13038
|
marginBottom: ['1.875rem', '0'],
|
|
13040
13039
|
alignItems: ['center', 'flex-start'],
|
|
13041
13040
|
textAlign: ['center', 'inherit'],
|
|
13042
13041
|
width: ['100%', 'inherit'],
|
|
13043
13042
|
}));
|
|
13044
|
-
var IconContainer$2 = newStyled.div(templateObject_5$
|
|
13043
|
+
var IconContainer$2 = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n ", "\n"])), mediaQueries({
|
|
13045
13044
|
marginRight: ['0', '0.438rem'],
|
|
13046
13045
|
marginBottom: ['10px', '0'],
|
|
13047
13046
|
width: ['auto', '1.5rem'],
|
|
13048
13047
|
}));
|
|
13049
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
13048
|
+
var SectionTitle = newStyled.h1(templateObject_6$g || (templateObject_6$g = __makeTemplateObject(["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n margin: 0;\n text-transform: uppercase;\n"])), mediaQueries({
|
|
13050
13049
|
display: ['block', 'flex'],
|
|
13051
13050
|
}), function (_a) {
|
|
13052
13051
|
var theme = _a.theme;
|
|
13053
13052
|
return "\n color: ".concat(theme.colors.shades['700'].color, ";\n font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n ");
|
|
13054
13053
|
});
|
|
13055
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
13054
|
+
var SectionDetails = newStyled.p(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"], ["\n color: ", ";\n ", "\n margin: 0;\n margin-top: 0.625rem;\n ", ";\n"])), function (props) { return props.color; }, function (_a) {
|
|
13056
13055
|
var theme = _a.theme;
|
|
13057
13056
|
return "\n font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n ");
|
|
13058
13057
|
}, function (_a) {
|
|
@@ -13063,51 +13062,51 @@ var SectionDetails = newStyled.p(templateObject_7$9 || (templateObject_7$9 = __m
|
|
|
13063
13062
|
})
|
|
13064
13063
|
: '';
|
|
13065
13064
|
});
|
|
13066
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8$
|
|
13065
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.45rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
13067
13066
|
var DeliveryDetails = function (_a) {
|
|
13068
13067
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
13069
13068
|
var theme = useTheme();
|
|
13070
13069
|
return (jsxs$1("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsx$1(Note, __assign$1({}, note), void 0), jsxs$1(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$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, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$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, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$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, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxs$1(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
13071
13070
|
};
|
|
13072
|
-
var templateObject_1$
|
|
13071
|
+
var templateObject_1$V, templateObject_2$E, templateObject_3$z, templateObject_4$q, templateObject_5$h, templateObject_6$g, templateObject_7$a, templateObject_8$8;
|
|
13073
13072
|
|
|
13074
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
13075
|
-
var Text$4 = newStyled.p(templateObject_2$
|
|
13073
|
+
var Container$D = newStyled.div(templateObject_1$U || (templateObject_1$U = __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"])));
|
|
13074
|
+
var Text$4 = newStyled.p(templateObject_2$D || (templateObject_2$D = __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; });
|
|
13076
13075
|
var ScrollToTop = function (_a) {
|
|
13077
13076
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
13078
13077
|
var theme = useTheme();
|
|
13079
13078
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
13080
13079
|
return (jsxs$1(Container$D, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsx$1(Text$4, __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));
|
|
13081
13080
|
};
|
|
13082
|
-
var templateObject_1$
|
|
13081
|
+
var templateObject_1$U, templateObject_2$D;
|
|
13083
13082
|
|
|
13084
|
-
var Container$C = newStyled.div(templateObject_1$
|
|
13083
|
+
var Container$C = newStyled.div(templateObject_1$T || (templateObject_1$T = __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) {
|
|
13085
13084
|
var theme = _a.theme;
|
|
13086
13085
|
return theme.component.orderBar.backgroundColor;
|
|
13087
13086
|
});
|
|
13088
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
13087
|
+
var H1 = newStyled.h1(templateObject_2$C || (templateObject_2$C = __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; });
|
|
13089
13088
|
var OrderBar = function (_a) {
|
|
13090
13089
|
var message = _a.message, color = _a.color;
|
|
13091
13090
|
var theme = useTheme();
|
|
13092
13091
|
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.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
13093
13092
|
};
|
|
13094
|
-
var templateObject_1$
|
|
13093
|
+
var templateObject_1$T, templateObject_2$C;
|
|
13095
13094
|
|
|
13096
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
13097
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
13098
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
13099
|
-
var TableRow$1 = newStyled.tr(templateObject_4$
|
|
13095
|
+
var TableElement$1 = newStyled.table(templateObject_1$S || (templateObject_1$S = __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; });
|
|
13096
|
+
var TableCell$1 = newStyled.td(templateObject_2$B || (templateObject_2$B = __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; });
|
|
13097
|
+
var TableHead$1 = newStyled.th(templateObject_3$y || (templateObject_3$y = __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; });
|
|
13098
|
+
var TableRow$1 = newStyled.tr(templateObject_4$p || (templateObject_4$p = __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; });
|
|
13100
13099
|
var SizeTable = function (_a) {
|
|
13101
13100
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
13102
13101
|
var theme = useTheme();
|
|
13103
13102
|
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));
|
|
13104
13103
|
};
|
|
13105
|
-
var templateObject_1$
|
|
13104
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$y, templateObject_4$p;
|
|
13106
13105
|
|
|
13107
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
13108
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
13109
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
13110
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
13106
|
+
var TableElement = newStyled.table(templateObject_1$R || (templateObject_1$R = __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; });
|
|
13107
|
+
var TableCell = newStyled.td(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
13108
|
+
var TableHead = newStyled.th(templateObject_3$x || (templateObject_3$x = __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; });
|
|
13109
|
+
var TableRow = newStyled.tr(templateObject_4$o || (templateObject_4$o = __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; });
|
|
13111
13110
|
var SizeChartTable = function (_a) {
|
|
13112
13111
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
13113
13112
|
var theme = useTheme();
|
|
@@ -13140,19 +13139,19 @@ var SizeChartTable = function (_a) {
|
|
|
13140
13139
|
backgroundColor: getCellColor(index, cell),
|
|
13141
13140
|
}, 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));
|
|
13142
13141
|
};
|
|
13143
|
-
var templateObject_1$
|
|
13142
|
+
var templateObject_1$R, templateObject_2$A, templateObject_3$x, templateObject_4$o;
|
|
13144
13143
|
|
|
13145
|
-
var Img = newStyled.img(templateObject_1$
|
|
13144
|
+
var Img = newStyled.img(templateObject_1$Q || (templateObject_1$Q = __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; });
|
|
13146
13145
|
var Image = function (_a) {
|
|
13147
13146
|
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;
|
|
13148
13147
|
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));
|
|
13149
13148
|
};
|
|
13150
|
-
var templateObject_1$
|
|
13149
|
+
var templateObject_1$Q;
|
|
13151
13150
|
|
|
13152
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
13151
|
+
var Container$B = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
13153
13152
|
var IMAGE_WIDTH = '63px';
|
|
13154
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13155
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
13153
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
13154
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
13156
13155
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
13157
13156
|
}), IMAGE_WIDTH);
|
|
13158
13157
|
var Title$4 = newStyled.h2(function (_a) {
|
|
@@ -13175,7 +13174,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
13175
13174
|
margin: '0.063rem 0',
|
|
13176
13175
|
});
|
|
13177
13176
|
});
|
|
13178
|
-
var PriceContainer = newStyled.div(templateObject_4$
|
|
13177
|
+
var PriceContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __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) {
|
|
13179
13178
|
var withTag = _a.withTag; _a.theme;
|
|
13180
13179
|
return withTag
|
|
13181
13180
|
? mediaQueries({
|
|
@@ -13184,14 +13183,14 @@ var PriceContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = _
|
|
|
13184
13183
|
})
|
|
13185
13184
|
: 'justify-content: end';
|
|
13186
13185
|
});
|
|
13187
|
-
var Quantity = newStyled.div(templateObject_5$
|
|
13188
|
-
var StyledSpan = newStyled.span(templateObject_6$
|
|
13186
|
+
var Quantity = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1rem;\n height: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-300-color);\n color: var(--colors-shades-white-color);\n font-size: 0.75rem;\n font-weight: 600;\n line-height: 24px;\n"])));
|
|
13187
|
+
var StyledSpan = newStyled.span(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n display: block;\n transform: translateY(1px);\n"], ["\n display: block;\n transform: translateY(1px);\n"])));
|
|
13189
13188
|
var SimpleOrderItem = function (_a) {
|
|
13190
13189
|
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;
|
|
13191
13190
|
var theme = useTheme();
|
|
13192
13191
|
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: jsx$1(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxs$1(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$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));
|
|
13193
13192
|
};
|
|
13194
|
-
var templateObject_1$
|
|
13193
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$w, templateObject_4$n, templateObject_5$g, templateObject_6$f;
|
|
13195
13194
|
|
|
13196
13195
|
function formatDate(date) {
|
|
13197
13196
|
var day = date.getDate();
|
|
@@ -13202,16 +13201,16 @@ function formatDate(date) {
|
|
|
13202
13201
|
|
|
13203
13202
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
13204
13203
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
13205
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
13206
|
-
var Heading = newStyled.div(templateObject_2$
|
|
13207
|
-
var Content$2 = newStyled.div(templateObject_3$
|
|
13208
|
-
var ReviewContainer$1 = newStyled.div(templateObject_4$
|
|
13209
|
-
var DateText$1 = newStyled.span(templateObject_5$
|
|
13210
|
-
var VariantText = newStyled.div(templateObject_6$
|
|
13211
|
-
var ReviewerName$1 = newStyled.h2(templateObject_7$
|
|
13212
|
-
var ReviewTitle$1 = newStyled.h3(templateObject_8$
|
|
13213
|
-
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$
|
|
13214
|
-
var ReviewDescriptionMobile = newStyled.div(templateObject_10$
|
|
13204
|
+
var Container$A = newStyled.div(templateObject_1$O || (templateObject_1$O = __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"])));
|
|
13205
|
+
var Heading = newStyled.div(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
13206
|
+
var Content$2 = newStyled.div(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
13207
|
+
var ReviewContainer$1 = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
13208
|
+
var DateText$1 = newStyled.span(templateObject_5$f || (templateObject_5$f = __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"])));
|
|
13209
|
+
var VariantText = newStyled.div(templateObject_6$e || (templateObject_6$e = __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"])));
|
|
13210
|
+
var ReviewerName$1 = newStyled.h2(templateObject_7$9 || (templateObject_7$9 = __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"])));
|
|
13211
|
+
var ReviewTitle$1 = newStyled.h3(templateObject_8$7 || (templateObject_8$7 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 10px 0 8px;\n font-weight: 600;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
13212
|
+
var ReviewDescriptionDesktop = newStyled.div(templateObject_9$5 || (templateObject_9$5 = __makeTemplateObject(["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"], ["\n display: none;\n\n @media (min-width: 768px) {\n display: block;\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n white-space: pre-wrap;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n }\n"])));
|
|
13213
|
+
var ReviewDescriptionMobile = newStyled.div(templateObject_10$3 || (templateObject_10$3 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"], ["\n font-weight: normal;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n\n a.see-more {\n color: var(--colors-semantic-informative-color);\n text-decoration: underline;\n cursor: pointer;\n font-weight: 600;\n white-space: nowrap;\n }\n\n @media (min-width: 768px) {\n display: none;\n }\n"])));
|
|
13215
13214
|
var ImagesContainer = newStyled.div(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n margin-left: 10px;\n text-align: right;\n"], ["\n margin-left: 10px;\n text-align: right;\n"])));
|
|
13216
13215
|
var Images = newStyled.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n display: flex;\n justify-content: end;\n"], ["\n display: flex;\n justify-content: end;\n"])));
|
|
13217
13216
|
var ImageSpace = newStyled.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n width: 7.5rem;\n height: 4.125rem;\n"], ["\n width: 7.5rem;\n height: 4.125rem;\n"])));
|
|
@@ -13254,15 +13253,15 @@ var Review$1 = function (_a) {
|
|
|
13254
13253
|
: description,
|
|
13255
13254
|
} }, void 0), jsxs$1(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && 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", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsx$1(ImageSpace, {}, void 0))] }, void 0), jsx$1(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsx$1(HelpfulTexti, {}, void 0), jsxs$1(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsx$1(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: ComponentSize.Small }, void 0)), helpfulCount && jsxs$1(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
13256
13255
|
};
|
|
13257
|
-
var templateObject_1$
|
|
13256
|
+
var templateObject_1$O, templateObject_2$y, templateObject_3$v, templateObject_4$m, templateObject_5$f, templateObject_6$e, templateObject_7$9, templateObject_8$7, templateObject_9$5, templateObject_10$3, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1;
|
|
13258
13257
|
|
|
13259
|
-
var List = newStyled.ul(templateObject_1$
|
|
13260
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
13261
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
13262
|
-
var ArrowContainer$1 = newStyled.div(templateObject_4$
|
|
13263
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
13264
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
13265
|
-
var templateObject_1$
|
|
13258
|
+
var List = newStyled.ul(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
13259
|
+
var Item$1 = newStyled.li(templateObject_2$x || (templateObject_2$x = __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"])));
|
|
13260
|
+
var DropdownWrapper = newStyled.div(templateObject_3$u || (templateObject_3$u = __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"])));
|
|
13261
|
+
var ArrowContainer$1 = newStyled.div(templateObject_4$l || (templateObject_4$l = __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"])));
|
|
13262
|
+
var StyledDropdown = newStyled.ul(templateObject_5$e || (templateObject_5$e = __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; });
|
|
13263
|
+
var DropdownItem = newStyled.li(templateObject_6$d || (templateObject_6$d = __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; });
|
|
13264
|
+
var templateObject_1$N, templateObject_2$x, templateObject_3$u, templateObject_4$l, templateObject_5$e, templateObject_6$d;
|
|
13266
13265
|
|
|
13267
13266
|
var DropdownListIcons = function (_a) {
|
|
13268
13267
|
var items = _a.items;
|
|
@@ -13275,7 +13274,7 @@ var Dropdown = function (_a) {
|
|
|
13275
13274
|
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));
|
|
13276
13275
|
};
|
|
13277
13276
|
|
|
13278
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
13277
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$M || (templateObject_1$M = __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; });
|
|
13279
13278
|
var AmazonButton = function (_a) {
|
|
13280
13279
|
var onClick = _a.onClick;
|
|
13281
13280
|
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));
|
|
@@ -13284,23 +13283,23 @@ var PaypalButton = function (_a) {
|
|
|
13284
13283
|
var onClick = _a.onClick;
|
|
13285
13284
|
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));
|
|
13286
13285
|
};
|
|
13287
|
-
var templateObject_1$
|
|
13286
|
+
var templateObject_1$M;
|
|
13288
13287
|
|
|
13289
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
13290
|
-
var Col = newStyled.div(templateObject_2$
|
|
13291
|
-
var Row = newStyled.div(templateObject_3$
|
|
13288
|
+
var Wrapper = newStyled.div(templateObject_1$L || (templateObject_1$L = __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'); });
|
|
13289
|
+
var Col = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
13290
|
+
var Row = newStyled.div(templateObject_3$t || (templateObject_3$t = __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) {
|
|
13292
13291
|
return props.rightToLeft &&
|
|
13293
13292
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
13294
13293
|
});
|
|
13295
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
13296
|
-
var H3$1 = newStyled.h3(templateObject_5$
|
|
13297
|
-
var FreeShipping = newStyled.span(templateObject_6$
|
|
13294
|
+
var H5 = newStyled.h5(templateObject_4$k || (templateObject_4$k = __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; });
|
|
13295
|
+
var H3$1 = newStyled.h3(templateObject_5$d || (templateObject_5$d = __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; });
|
|
13296
|
+
var FreeShipping = newStyled.span(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
13298
13297
|
var CrossSellCheckbox = function (_a) {
|
|
13299
13298
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
13300
13299
|
var theme = useTheme();
|
|
13301
13300
|
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));
|
|
13302
13301
|
};
|
|
13303
|
-
var templateObject_1$
|
|
13302
|
+
var templateObject_1$L, templateObject_2$w, templateObject_3$t, templateObject_4$k, templateObject_5$d, templateObject_6$c;
|
|
13304
13303
|
|
|
13305
13304
|
var index = /*#__PURE__*/Object.freeze({
|
|
13306
13305
|
__proto__: null,
|
|
@@ -13313,7 +13312,7 @@ var Spacing = function (_a) {
|
|
|
13313
13312
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
13314
13313
|
};
|
|
13315
13314
|
|
|
13316
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
13315
|
+
var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
13317
13316
|
var height = _a.height;
|
|
13318
13317
|
return (height ? height : '1.5em');
|
|
13319
13318
|
}, function (_a) {
|
|
@@ -13340,14 +13339,14 @@ var SkeletonBox = function (_a) {
|
|
|
13340
13339
|
var theme = useTheme();
|
|
13341
13340
|
return jsx$1(Container$z, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
13342
13341
|
};
|
|
13343
|
-
var templateObject_1$
|
|
13342
|
+
var templateObject_1$K;
|
|
13344
13343
|
|
|
13345
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
13344
|
+
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"], ["\n display: ", ";\n align-items: center;\n font-size: 0.88rem;\n"])), function (_a) {
|
|
13346
13345
|
var displayBNPL = _a.displayBNPL;
|
|
13347
13346
|
return (displayBNPL ? 'flex' : 'none');
|
|
13348
13347
|
});
|
|
13349
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
13350
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
13348
|
+
var TextContainer$1 = newStyled.div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"], ["\n font-size: 14px;\n margin: 0;\n line-height: 24px;\n font-weight: 400;\n color: #292929;\n"])));
|
|
13349
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n"])));
|
|
13351
13350
|
var BuyNowPayLater = function (_a) {
|
|
13352
13351
|
var _b;
|
|
13353
13352
|
var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize;
|
|
@@ -13359,12 +13358,12 @@ var BuyNowPayLater = function (_a) {
|
|
|
13359
13358
|
}
|
|
13360
13359
|
return (jsx$1(Container$y, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsx$1(Text$8, __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));
|
|
13361
13360
|
};
|
|
13362
|
-
var templateObject_1$
|
|
13361
|
+
var templateObject_1$J, templateObject_2$v, templateObject_3$s;
|
|
13363
13362
|
|
|
13364
|
-
var Container$x = newStyled('div')(templateObject_1$
|
|
13365
|
-
var Content$1 = newStyled('div')(templateObject_2$
|
|
13366
|
-
var BarContainer = newStyled('div')(templateObject_3$
|
|
13367
|
-
var Bar = newStyled('div')(templateObject_4$
|
|
13363
|
+
var Container$x = newStyled('div')(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"], ["\n gap: 6px;\n display: flex;\n color: #292929;\n align-items: flex-end;\n"])));
|
|
13364
|
+
var Content$1 = newStyled('div')(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
13365
|
+
var BarContainer = newStyled('div')(templateObject_3$r || (templateObject_3$r = __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"])));
|
|
13366
|
+
var Bar = newStyled('div')(templateObject_4$j || (templateObject_4$j = __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) {
|
|
13368
13367
|
var index = _a.index;
|
|
13369
13368
|
return "".concat(6 + 3 * index, "px");
|
|
13370
13369
|
}, function (_a) {
|
|
@@ -13375,7 +13374,7 @@ var StrengthBars = function (_a) {
|
|
|
13375
13374
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
13376
13375
|
return (jsxs$1(Container$x, __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$1, { children: supportText }, void 0)] }), void 0));
|
|
13377
13376
|
};
|
|
13378
|
-
var templateObject_1$
|
|
13377
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$r, templateObject_4$j;
|
|
13379
13378
|
|
|
13380
13379
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
13381
13380
|
var width = _a.width, height = _a.height;
|
|
@@ -13385,10 +13384,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
13385
13384
|
height: height,
|
|
13386
13385
|
});
|
|
13387
13386
|
});
|
|
13388
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
13389
|
-
var Container$w = newStyled.a(templateObject_2$
|
|
13390
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
13391
|
-
var Title$3 = newStyled.p(templateObject_4$
|
|
13387
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$H || (templateObject_1$H = __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"])));
|
|
13388
|
+
var Container$w = newStyled.a(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
13389
|
+
var ProdCardContainer = newStyled.div(templateObject_3$q || (templateObject_3$q = __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"])));
|
|
13390
|
+
var Title$3 = newStyled.p(templateObject_4$i || (templateObject_4$i = __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; });
|
|
13392
13391
|
var getStylesBySize$1 = function (size) {
|
|
13393
13392
|
switch (size) {
|
|
13394
13393
|
case ComponentSize.Medium:
|
|
@@ -13414,15 +13413,15 @@ var getStylesBySize$1 = function (size) {
|
|
|
13414
13413
|
};
|
|
13415
13414
|
}
|
|
13416
13415
|
};
|
|
13417
|
-
var TopTagContainer$2 = newStyled.div(templateObject_5$
|
|
13416
|
+
var TopTagContainer$2 = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
13418
13417
|
var style = _a.style;
|
|
13419
13418
|
return style.width;
|
|
13420
13419
|
});
|
|
13421
|
-
var BottomTagContainer$2 = newStyled.div(templateObject_6$
|
|
13420
|
+
var BottomTagContainer$2 = newStyled.div(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"], ["\n position: absolute;\n bottom: 10%;\n left: 0;\n width: ", ";\n z-index: 1;\n"])), function (_a) {
|
|
13422
13421
|
var style = _a.style;
|
|
13423
13422
|
return style.width;
|
|
13424
13423
|
});
|
|
13425
|
-
var MarginTopContainer = newStyled.div(templateObject_7$
|
|
13424
|
+
var MarginTopContainer = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
13426
13425
|
var ProductItemMobile = function (_a) {
|
|
13427
13426
|
var title = _a.title, image = _a.image, imageHover = _a.imageHover, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c, priceAtBottom = _a.priceAtBottom, priceLoading = _a.priceLoading, _d = _a.noFollow, noFollow = _d === void 0 ? false : _d, _e = _a.colorPicker, colorPicker = _e === void 0 ? {
|
|
13428
13427
|
display: false,
|
|
@@ -13457,9 +13456,9 @@ var ProductItemMobile = function (_a) {
|
|
|
13457
13456
|
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)); };
|
|
13458
13457
|
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$w, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { 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$w, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', 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), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), 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));
|
|
13459
13458
|
};
|
|
13460
|
-
var templateObject_1$
|
|
13459
|
+
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
13461
13460
|
|
|
13462
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
13461
|
+
var Container$v = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
13463
13462
|
function withProductGrid(ProductItemComponent, data) {
|
|
13464
13463
|
function WithProductGrid(props) {
|
|
13465
13464
|
return (jsx$1(Container$v, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -13469,18 +13468,18 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
13469
13468
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
13470
13469
|
return WithProductGrid;
|
|
13471
13470
|
}
|
|
13472
|
-
var templateObject_1$
|
|
13471
|
+
var templateObject_1$G;
|
|
13473
13472
|
|
|
13474
13473
|
var Collection = {
|
|
13475
13474
|
ProductItemMobile: ProductItemMobile,
|
|
13476
13475
|
withProductGrid: withProductGrid,
|
|
13477
13476
|
};
|
|
13478
13477
|
|
|
13479
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
13478
|
+
var Backdrop = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
13480
13479
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
13481
13480
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
13482
13481
|
});
|
|
13483
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
13482
|
+
var Sidebar = newStyled.div(templateObject_2$s || (templateObject_2$s = __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) {
|
|
13484
13483
|
var width = _a.width;
|
|
13485
13484
|
return width;
|
|
13486
13485
|
}, function (_a) {
|
|
@@ -13521,16 +13520,16 @@ var Drawer = function (_a) {
|
|
|
13521
13520
|
}, [isOpen, onClose, onOpen]);
|
|
13522
13521
|
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;
|
|
13523
13522
|
};
|
|
13524
|
-
var templateObject_1$
|
|
13523
|
+
var templateObject_1$F, templateObject_2$s;
|
|
13525
13524
|
|
|
13526
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
13525
|
+
var Container$u = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
13527
13526
|
var size = _a.size;
|
|
13528
13527
|
return (size ? size : '100%');
|
|
13529
13528
|
}, function (_a) {
|
|
13530
13529
|
var size = _a.size;
|
|
13531
13530
|
return (size ? size : '100%');
|
|
13532
13531
|
});
|
|
13533
|
-
var Animation = newStyled.div(templateObject_2$
|
|
13532
|
+
var Animation = newStyled.div(templateObject_2$r || (templateObject_2$r = __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) {
|
|
13534
13533
|
var animationDuration = _a.animationDuration;
|
|
13535
13534
|
return animationDuration;
|
|
13536
13535
|
});
|
|
@@ -13538,11 +13537,11 @@ var Spinner = function (_a) {
|
|
|
13538
13537
|
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;
|
|
13539
13538
|
return (jsx$1(Container$u, __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));
|
|
13540
13539
|
};
|
|
13541
|
-
var templateObject_1$
|
|
13540
|
+
var templateObject_1$E, templateObject_2$r;
|
|
13542
13541
|
|
|
13543
|
-
var UL = newStyled.ul(templateObject_1$
|
|
13544
|
-
var LI = newStyled.li(templateObject_2$
|
|
13545
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
13542
|
+
var UL = newStyled.ul(templateObject_1$D || (templateObject_1$D = __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"])));
|
|
13543
|
+
var LI = newStyled.li(templateObject_2$q || (templateObject_2$q = __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; });
|
|
13544
|
+
var CloseIconContainer = newStyled.div(templateObject_3$p || (templateObject_3$p = __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"])));
|
|
13546
13545
|
var Tags = function (_a) {
|
|
13547
13546
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
13548
13547
|
var theme = useTheme();
|
|
@@ -13550,7 +13549,7 @@ var Tags = function (_a) {
|
|
|
13550
13549
|
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));
|
|
13551
13550
|
}) }), void 0));
|
|
13552
13551
|
};
|
|
13553
|
-
var templateObject_1$
|
|
13552
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$p;
|
|
13554
13553
|
|
|
13555
13554
|
function FilteringDropdown(_a) {
|
|
13556
13555
|
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;
|
|
@@ -13583,12 +13582,12 @@ function FilteringDropdown(_a) {
|
|
|
13583
13582
|
}) }, void 0)] }), void 0));
|
|
13584
13583
|
}
|
|
13585
13584
|
|
|
13586
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
13587
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
13588
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
13585
|
+
var Container$t = newStyled.div(templateObject_1$C || (templateObject_1$C = __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"])));
|
|
13586
|
+
var IconContainer$1 = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
13587
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
13589
13588
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
13590
13589
|
}));
|
|
13591
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
13590
|
+
var PageNumber = newStyled.span(templateObject_4$h || (templateObject_4$h = __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) {
|
|
13592
13591
|
var bold = _a.bold;
|
|
13593
13592
|
return (bold ? '700' : '500');
|
|
13594
13593
|
}, function (_a) {
|
|
@@ -13605,7 +13604,7 @@ var PageNumber = newStyled.span(templateObject_4$g || (templateObject_4$g = __ma
|
|
|
13605
13604
|
var background = _a.background;
|
|
13606
13605
|
return background || 'unset';
|
|
13607
13606
|
});
|
|
13608
|
-
var templateObject_1$
|
|
13607
|
+
var templateObject_1$C, templateObject_2$p, templateObject_3$o, templateObject_4$h;
|
|
13609
13608
|
|
|
13610
13609
|
var Pagination = function (_a) {
|
|
13611
13610
|
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;
|
|
@@ -13670,7 +13669,7 @@ var PaginatorBlog = function (_a) {
|
|
|
13670
13669
|
: 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));
|
|
13671
13670
|
};
|
|
13672
13671
|
|
|
13673
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
13672
|
+
var Container$s = newStyled.div(templateObject_1$B || (templateObject_1$B = __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({
|
|
13674
13673
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13675
13674
|
}));
|
|
13676
13675
|
var Description$2 = newStyled.div({
|
|
@@ -13689,7 +13688,7 @@ var ProductItem = function (_a) {
|
|
|
13689
13688
|
var theme = useTheme();
|
|
13690
13689
|
return (jsxs$1(Container$s, __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$8, __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));
|
|
13691
13690
|
};
|
|
13692
|
-
var templateObject_1$
|
|
13691
|
+
var templateObject_1$B;
|
|
13693
13692
|
|
|
13694
13693
|
var Container$r = newStyled.div({
|
|
13695
13694
|
display: 'flex',
|
|
@@ -13705,7 +13704,7 @@ var Ul = newStyled.ul({
|
|
|
13705
13704
|
margin: '0px',
|
|
13706
13705
|
padding: '0px',
|
|
13707
13706
|
});
|
|
13708
|
-
var Li = newStyled.li(templateObject_1$
|
|
13707
|
+
var Li = newStyled.li(templateObject_1$A || (templateObject_1$A = __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({
|
|
13709
13708
|
padding: [0, '0rem 1rem'],
|
|
13710
13709
|
borderRadius: [0, '0.5rem'],
|
|
13711
13710
|
}));
|
|
@@ -13717,12 +13716,12 @@ var Anchor = newStyled.a({
|
|
|
13717
13716
|
padding: 0,
|
|
13718
13717
|
textDecoration: 'none',
|
|
13719
13718
|
});
|
|
13720
|
-
var Container$q = newStyled.div(templateObject_2$
|
|
13719
|
+
var Container$q = newStyled.div(templateObject_2$o || (templateObject_2$o = __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({
|
|
13721
13720
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13722
13721
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13723
13722
|
borderRadius: ['0', '0.5rem'],
|
|
13724
13723
|
}));
|
|
13725
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13724
|
+
var Header$1 = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13726
13725
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13727
13726
|
}));
|
|
13728
13727
|
var ResultsPanel = function (_a) {
|
|
@@ -13730,7 +13729,7 @@ var ResultsPanel = function (_a) {
|
|
|
13730
13729
|
var theme = useTheme();
|
|
13731
13730
|
return (jsxs$1(Container$q, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$8, __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));
|
|
13732
13731
|
};
|
|
13733
|
-
var templateObject_1$
|
|
13732
|
+
var templateObject_1$A, templateObject_2$o, templateObject_3$n;
|
|
13734
13733
|
|
|
13735
13734
|
var Input = newStyled.input(function (props) { return ({
|
|
13736
13735
|
padding: props.theme.component.input.padding,
|
|
@@ -13761,7 +13760,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13761
13760
|
},
|
|
13762
13761
|
}); });
|
|
13763
13762
|
|
|
13764
|
-
var Button$2 = newStyled.button(templateObject_1$
|
|
13763
|
+
var Button$2 = newStyled.button(templateObject_1$z || (templateObject_1$z = __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({
|
|
13765
13764
|
right: ['1rem', '7.75rem'],
|
|
13766
13765
|
top: ['0.75rem', '0.75rem'],
|
|
13767
13766
|
}));
|
|
@@ -13770,7 +13769,7 @@ var ClearButton = function (_a) {
|
|
|
13770
13769
|
var theme = useTheme();
|
|
13771
13770
|
return (jsx$1(Button$2, __assign$1({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13772
13771
|
};
|
|
13773
|
-
var templateObject_1$
|
|
13772
|
+
var templateObject_1$z;
|
|
13774
13773
|
|
|
13775
13774
|
var useOnClickOutside = function (ref, handler) {
|
|
13776
13775
|
useEffect(function () {
|
|
@@ -13910,20 +13909,20 @@ var SearchBar = function (_a) {
|
|
|
13910
13909
|
} }, 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));
|
|
13911
13910
|
};
|
|
13912
13911
|
|
|
13913
|
-
var Container$o = newStyled.div(templateObject_1$
|
|
13912
|
+
var Container$o = newStyled.div(templateObject_1$y || (templateObject_1$y = __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) {
|
|
13914
13913
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13915
13914
|
return borderRadiusVariant &&
|
|
13916
13915
|
"\n border-radius: 40px;\n ";
|
|
13917
13916
|
});
|
|
13918
13917
|
// max-height: 31.875rem;
|
|
13919
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
13920
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
13921
|
-
var VideoOverlay$1 = newStyled.div(templateObject_4$
|
|
13922
|
-
var Video = newStyled.div(templateObject_5$
|
|
13923
|
-
var VideoTag = newStyled.div(templateObject_6$
|
|
13924
|
-
var Text$3 = newStyled.div(templateObject_7$
|
|
13925
|
-
var NavButtonContainer = newStyled.div(templateObject_8$
|
|
13926
|
-
var Button$1 = newStyled.button(templateObject_9$
|
|
13918
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$n || (templateObject_2$n = __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'); });
|
|
13919
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13920
|
+
var VideoOverlay$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"], ["\n content: '';\n background: transparent;\n width: 100%;\n height: 100%;\n min-height: 1px;\n position: absolute;\n top: 0;\n"])));
|
|
13921
|
+
var Video = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"], ["\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 510px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n"])));
|
|
13922
|
+
var VideoTag = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n position: absolute;\n width: 100%;\n bottom: 50px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
13923
|
+
var Text$3 = newStyled.div(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n padding-top: 3px;\n"], ["\n padding-top: 3px;\n"])));
|
|
13924
|
+
var NavButtonContainer = newStyled.div(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n height: 40px;\n width: 40px;\n"], ["\n height: 40px;\n width: 40px;\n"])));
|
|
13925
|
+
var Button$1 = newStyled.button(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n height: 40px !important;\n cursor: pointer;\n"])));
|
|
13927
13926
|
var settings = {
|
|
13928
13927
|
dots: true,
|
|
13929
13928
|
infinite: false,
|
|
@@ -14016,14 +14015,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
14016
14015
|
};
|
|
14017
14016
|
}, [preventTouch, ref, touchStart]);
|
|
14018
14017
|
}
|
|
14019
|
-
var templateObject_1$
|
|
14018
|
+
var templateObject_1$y, templateObject_2$n, templateObject_3$m, templateObject_4$g, templateObject_5$b, templateObject_6$a, templateObject_7$7, templateObject_8$6, templateObject_9$4;
|
|
14020
14019
|
|
|
14021
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
14020
|
+
var Container$n = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
14022
14021
|
var ProductGalleryMobile = function (_a) {
|
|
14023
14022
|
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;
|
|
14024
14023
|
return (jsx$1(Container$n, { children: jsx$1(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
14025
14024
|
};
|
|
14026
|
-
var templateObject_1$
|
|
14025
|
+
var templateObject_1$x;
|
|
14027
14026
|
|
|
14028
14027
|
var Portal = function (_a) {
|
|
14029
14028
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -14156,17 +14155,17 @@ var react = __toCommonJS(react_exports);
|
|
|
14156
14155
|
var visibleStyle = function (_a) {
|
|
14157
14156
|
var opened = _a.opened;
|
|
14158
14157
|
return opened
|
|
14159
|
-
? css(templateObject_1$
|
|
14158
|
+
? css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
14160
14159
|
};
|
|
14161
14160
|
var transformStyle = function (_a) {
|
|
14162
14161
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
14163
14162
|
return opened
|
|
14164
|
-
? css(templateObject_3$
|
|
14163
|
+
? css(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
14165
14164
|
};
|
|
14166
|
-
var Container$m = newStyled.div(templateObject_5$
|
|
14165
|
+
var Container$m = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
14167
14166
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
14168
14167
|
}), visibleStyle, transformStyle);
|
|
14169
|
-
var Overlay = newStyled.div(templateObject_6$
|
|
14168
|
+
var Overlay = newStyled.div(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
14170
14169
|
var Modal = function (_a) {
|
|
14171
14170
|
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding;
|
|
14172
14171
|
var _d = useModal(id), opened = _d.opened, close = _d.close;
|
|
@@ -14204,39 +14203,39 @@ var useModal = function (id) {
|
|
|
14204
14203
|
close: close,
|
|
14205
14204
|
}); }, [close, open, opened]);
|
|
14206
14205
|
};
|
|
14207
|
-
var templateObject_1$
|
|
14206
|
+
var templateObject_1$w, templateObject_2$m, templateObject_3$l, templateObject_4$f, templateObject_5$a, templateObject_6$9;
|
|
14208
14207
|
|
|
14209
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
14208
|
+
var Text$2 = newStyled.span(templateObject_1$v || (templateObject_1$v = __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; });
|
|
14210
14209
|
var Title$2 = function (_a) {
|
|
14211
14210
|
var title = _a.title;
|
|
14212
14211
|
var theme = useTheme();
|
|
14213
14212
|
return jsx$1(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
14214
14213
|
};
|
|
14215
|
-
var templateObject_1$
|
|
14214
|
+
var templateObject_1$v;
|
|
14216
14215
|
|
|
14217
|
-
var P = newStyled.p(templateObject_1$
|
|
14216
|
+
var P = newStyled.p(templateObject_1$u || (templateObject_1$u = __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; });
|
|
14218
14217
|
var Promo = function (_a) {
|
|
14219
14218
|
var text = _a.text;
|
|
14220
14219
|
var theme = useTheme();
|
|
14221
14220
|
return (jsx$1(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
14222
14221
|
};
|
|
14223
|
-
var templateObject_1$
|
|
14222
|
+
var templateObject_1$u;
|
|
14224
14223
|
|
|
14225
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
14224
|
+
var Text$1 = newStyled.span(templateObject_1$t || (templateObject_1$t = __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; });
|
|
14226
14225
|
var Description$1 = function (_a) {
|
|
14227
14226
|
var text = _a.text;
|
|
14228
14227
|
var theme = useTheme();
|
|
14229
14228
|
return jsx$1(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
14230
14229
|
};
|
|
14231
|
-
var templateObject_1$
|
|
14230
|
+
var templateObject_1$t;
|
|
14232
14231
|
|
|
14233
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
14232
|
+
var Container$l = newStyled.div(templateObject_1$s || (templateObject_1$s = __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"); });
|
|
14234
14233
|
var CloseButton$1 = function (_a) {
|
|
14235
14234
|
var onClick = _a.onClick, size = _a.size;
|
|
14236
14235
|
var theme = useTheme();
|
|
14237
14236
|
return (jsx$1(Container$l, __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));
|
|
14238
14237
|
};
|
|
14239
|
-
var templateObject_1$
|
|
14238
|
+
var templateObject_1$s;
|
|
14240
14239
|
|
|
14241
14240
|
var CartProductItem = {
|
|
14242
14241
|
Title: Title$2,
|
|
@@ -14246,10 +14245,10 @@ var CartProductItem = {
|
|
|
14246
14245
|
CloseButton: CloseButton$1,
|
|
14247
14246
|
};
|
|
14248
14247
|
|
|
14249
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
14250
|
-
var Item = newStyled.span(templateObject_2$
|
|
14251
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
14252
|
-
var IncreaseDecrease = newStyled(Item)(templateObject_4$
|
|
14248
|
+
var Container$k = newStyled.div(templateObject_1$r || (templateObject_1$r = __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; });
|
|
14249
|
+
var Item = newStyled.span(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
14250
|
+
var Number$1 = newStyled(Item)(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
14251
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4$e || (templateObject_4$e = __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)'; });
|
|
14253
14252
|
var QuantityPicker = function (_a) {
|
|
14254
14253
|
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;
|
|
14255
14254
|
var theme = useTheme();
|
|
@@ -14274,7 +14273,7 @@ var QuantityPicker = function (_a) {
|
|
|
14274
14273
|
}, [value, clamp]);
|
|
14275
14274
|
return (jsxs$1(Container$k, __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));
|
|
14276
14275
|
};
|
|
14277
|
-
var templateObject_1$
|
|
14276
|
+
var templateObject_1$r, templateObject_2$l, templateObject_3$k, templateObject_4$e;
|
|
14278
14277
|
|
|
14279
14278
|
var htmlReactParser = {exports: {}};
|
|
14280
14279
|
|
|
@@ -18055,14 +18054,14 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
18055
18054
|
HTMLReactParser$1.attributesToProps;
|
|
18056
18055
|
HTMLReactParser$1.Element;
|
|
18057
18056
|
|
|
18058
|
-
var Container$j = newStyled.div(templateObject_1$
|
|
18059
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
18060
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
18061
|
-
var Label$1 = newStyled.div(templateObject_4$
|
|
18062
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
18063
|
-
var IconContainer = newStyled.div(templateObject_6$
|
|
18064
|
-
var IconPlaceholder = newStyled.div(templateObject_7$
|
|
18065
|
-
var DiscountContainer$1 = newStyled.div(templateObject_8$
|
|
18057
|
+
var Container$j = newStyled.div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
18058
|
+
var Card$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __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"])));
|
|
18059
|
+
var Tag$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __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"])));
|
|
18060
|
+
var Label$1 = newStyled.div(templateObject_4$d || (templateObject_4$d = __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"])));
|
|
18061
|
+
var Check$1 = newStyled.div(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
18062
|
+
var IconContainer = newStyled.div(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
18063
|
+
var IconPlaceholder = newStyled.div(templateObject_7$6 || (templateObject_7$6 = __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"])));
|
|
18064
|
+
var DiscountContainer$1 = newStyled.div(templateObject_8$5 || (templateObject_8$5 = __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"])));
|
|
18066
18065
|
var PackSelector = function (_a) {
|
|
18067
18066
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18068
18067
|
return (jsx$1(Container$j, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -18091,14 +18090,14 @@ var PackCard$1 = function (_a) {
|
|
|
18091
18090
|
currency: currencyCode || 'USD',
|
|
18092
18091
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
18093
18092
|
};
|
|
18094
|
-
var templateObject_1$
|
|
18095
|
-
|
|
18096
|
-
var Container$i = newStyled.div(templateObject_1$
|
|
18097
|
-
var Card = newStyled.div(templateObject_2$
|
|
18098
|
-
var Tag = newStyled.div(templateObject_3$
|
|
18099
|
-
var Label = newStyled.div(templateObject_4$
|
|
18100
|
-
var Check = newStyled.div(templateObject_5$
|
|
18101
|
-
var DiscountContainer = newStyled.div(templateObject_6$
|
|
18093
|
+
var templateObject_1$q, templateObject_2$k, templateObject_3$j, templateObject_4$d, templateObject_5$9, templateObject_6$8, templateObject_7$6, templateObject_8$5;
|
|
18094
|
+
|
|
18095
|
+
var Container$i = 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"])));
|
|
18096
|
+
var Card = 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: 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"])));
|
|
18097
|
+
var Tag = 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"])));
|
|
18098
|
+
var Label = 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"])));
|
|
18099
|
+
var Check = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
18100
|
+
var DiscountContainer = newStyled.div(templateObject_6$7 || (templateObject_6$7 = __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"])));
|
|
18102
18101
|
var PackSelectorV2 = function (_a) {
|
|
18103
18102
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
18104
18103
|
return (jsx$1(Container$i, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
@@ -18122,31 +18121,31 @@ var PackCard = function (_a) {
|
|
|
18122
18121
|
currency: currencyCode || 'USD',
|
|
18123
18122
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
18124
18123
|
};
|
|
18125
|
-
var templateObject_1$
|
|
18124
|
+
var templateObject_1$p, templateObject_2$j, templateObject_3$i, templateObject_4$c, templateObject_5$8, templateObject_6$7;
|
|
18126
18125
|
|
|
18127
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
18128
|
-
var H3 = newStyled.h3(templateObject_2$
|
|
18129
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
18130
|
-
var Container$h = newStyled.div(templateObject_4$
|
|
18126
|
+
var Title$1 = newStyled.div(templateObject_1$o || (templateObject_1$o = __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; });
|
|
18127
|
+
var H3 = newStyled.h3(templateObject_2$i || (templateObject_2$i = __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; });
|
|
18128
|
+
var ArrowContainer = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
18129
|
+
var Container$h = newStyled.div(templateObject_4$b || (templateObject_4$b = __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'); });
|
|
18131
18130
|
var Accordion = function (_a) {
|
|
18132
18131
|
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;
|
|
18133
18132
|
var theme = useTheme();
|
|
18134
18133
|
var _d = React__default.useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
18135
18134
|
return (jsxs$1(Container$h, __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));
|
|
18136
18135
|
};
|
|
18137
|
-
var templateObject_1$
|
|
18138
|
-
|
|
18139
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
18140
|
-
var Header = newStyled.div(templateObject_2$
|
|
18141
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
18142
|
-
var MobileIconsContainer = newStyled.div(templateObject_4$
|
|
18143
|
-
var H4 = newStyled.h4(templateObject_5$
|
|
18144
|
-
var FilterLink = newStyled.a(templateObject_6$
|
|
18145
|
-
var OptionContainer = newStyled.div(templateObject_7$
|
|
18146
|
-
var ClearAll = newStyled.span(templateObject_8$
|
|
18147
|
-
var MobileFooter = newStyled.div(templateObject_9$
|
|
18148
|
-
var MobileClearContainer = newStyled.div(templateObject_10$
|
|
18149
|
-
var templateObject_1$
|
|
18136
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$h, templateObject_4$b;
|
|
18137
|
+
|
|
18138
|
+
var SectionContent = newStyled.div(templateObject_1$n || (templateObject_1$n = __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; });
|
|
18139
|
+
var Header = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
18140
|
+
var MobileHeader = newStyled.div(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
18141
|
+
var MobileIconsContainer = newStyled.div(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
18142
|
+
var H4 = newStyled.h4(templateObject_5$7 || (templateObject_5$7 = __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; });
|
|
18143
|
+
var FilterLink = newStyled.a(templateObject_6$6 || (templateObject_6$6 = __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; });
|
|
18144
|
+
var OptionContainer = newStyled.div(templateObject_7$5 || (templateObject_7$5 = __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'); });
|
|
18145
|
+
var ClearAll = newStyled.span(templateObject_8$4 || (templateObject_8$4 = __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; });
|
|
18146
|
+
var MobileFooter = newStyled.div(templateObject_9$3 || (templateObject_9$3 = __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"])));
|
|
18147
|
+
var MobileClearContainer = newStyled.div(templateObject_10$2 || (templateObject_10$2 = __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"])));
|
|
18148
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$g, templateObject_4$a, templateObject_5$7, templateObject_6$6, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2;
|
|
18150
18149
|
|
|
18151
18150
|
var Filters = function (_a) {
|
|
18152
18151
|
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;
|
|
@@ -18263,20 +18262,20 @@ var FilterCheckboxColor = function (_a) {
|
|
|
18263
18262
|
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));
|
|
18264
18263
|
};
|
|
18265
18264
|
|
|
18266
|
-
var Container$g = newStyled.div(templateObject_1$
|
|
18267
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
18268
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
18269
|
-
var NormalSpan = newStyled.span(templateObject_4$
|
|
18270
|
-
var SearchNavigationParents = newStyled.div(templateObject_5$
|
|
18265
|
+
var Container$g = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
18266
|
+
var BackArrow = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
18267
|
+
var BoldSpan = newStyled.span(templateObject_3$f || (templateObject_3$f = __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"])));
|
|
18268
|
+
var NormalSpan = newStyled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
18269
|
+
var SearchNavigationParents = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
18271
18270
|
var SearchNavigation = function (_a) {
|
|
18272
18271
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
18273
18272
|
return (jsxs$1(Container$g, { children: [jsxs$1(Text$8, __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) {
|
|
18274
18273
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
18275
18274
|
}) }, void 0)] }, void 0));
|
|
18276
18275
|
};
|
|
18277
|
-
var templateObject_1$
|
|
18276
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$f, templateObject_4$9, templateObject_5$6;
|
|
18278
18277
|
|
|
18279
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
18278
|
+
var TabContainer = newStyled.div(templateObject_1$l || (templateObject_1$l = __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) {
|
|
18280
18279
|
var titleSize = _a.titleSize;
|
|
18281
18280
|
return titleSize;
|
|
18282
18281
|
}, function (_a) {
|
|
@@ -18293,15 +18292,15 @@ var Tab = function (_a) {
|
|
|
18293
18292
|
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;
|
|
18294
18293
|
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));
|
|
18295
18294
|
};
|
|
18296
|
-
var templateObject_1$
|
|
18295
|
+
var templateObject_1$l;
|
|
18297
18296
|
|
|
18298
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
18299
|
-
var TabList = newStyled.div(templateObject_2$
|
|
18297
|
+
var Container$f = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
18298
|
+
var TabList = newStyled.div(templateObject_2$f || (templateObject_2$f = __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) {
|
|
18300
18299
|
var backgroundColor = _a.backgroundColor;
|
|
18301
18300
|
return backgroundColor;
|
|
18302
18301
|
});
|
|
18303
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
18304
|
-
var TabSeparator = newStyled.div(templateObject_4$
|
|
18302
|
+
var TabContent = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
18303
|
+
var TabSeparator = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
18305
18304
|
var Tabs = function (_a) {
|
|
18306
18305
|
var _b;
|
|
18307
18306
|
var _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'var(--colors-pallete-primary-color)' : _c, tabs = _a.tabs, initialSelected = _a.initialSelected, tabsMaxWidth = _a.tabsMaxWidth;
|
|
@@ -18312,7 +18311,7 @@ var Tabs = function (_a) {
|
|
|
18312
18311
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
18313
18312
|
return (jsxs$1(Container$f, __assign$1({ "data-testid": "tabs-container" }, { children: [jsx$1(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxs$1(React__default.Fragment, { 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)] }, tab.title)); }) }), void 0), jsx$1(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
18314
18313
|
};
|
|
18315
|
-
var templateObject_1$
|
|
18314
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$e, templateObject_4$8;
|
|
18316
18315
|
|
|
18317
18316
|
var Container$e = newStyled.div(function (props) { return ({
|
|
18318
18317
|
height: 'auto',
|
|
@@ -18367,9 +18366,9 @@ var IconsWithTitle = function (_a) {
|
|
|
18367
18366
|
return (jsx$1(Fragment$1, { children: jsxs$1(Container$e, __assign$1({ textPosition: iconTitlePosition }, { children: [withWrapper ? (jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0)) : (jsx$1(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0)), jsx$1(Text$8, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
18368
18367
|
};
|
|
18369
18368
|
|
|
18370
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
18371
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
18372
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
18369
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
18370
|
+
var VideoOverlay = newStyled.div(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
18371
|
+
var FullscreenVideo = newStyled.div(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
18373
18372
|
var ImageVideo = function (_a) {
|
|
18374
18373
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
18375
18374
|
var video = useRef(null);
|
|
@@ -18389,12 +18388,12 @@ var ImageVideo = function (_a) {
|
|
|
18389
18388
|
height: '100%',
|
|
18390
18389
|
} }, void 0)] }, void 0))] }, void 0));
|
|
18391
18390
|
};
|
|
18392
|
-
var templateObject_1$
|
|
18391
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$d;
|
|
18393
18392
|
|
|
18394
|
-
var ContainerDesktop = css(templateObject_1$
|
|
18395
|
-
var ContainerMobile = css(templateObject_2$
|
|
18396
|
-
var Container$d = newStyled.div(templateObject_3$
|
|
18397
|
-
var TextContainer = newStyled.div(templateObject_4$
|
|
18393
|
+
var ContainerDesktop = css(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
18394
|
+
var ContainerMobile = css(templateObject_2$d || (templateObject_2$d = __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"])));
|
|
18395
|
+
var Container$d = newStyled.div(templateObject_3$c || (templateObject_3$c = __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);
|
|
18396
|
+
var TextContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __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"])));
|
|
18398
18397
|
var TextWithImage = function (_a) {
|
|
18399
18398
|
var _b, _c, _d, _e;
|
|
18400
18399
|
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"]);
|
|
@@ -18424,9 +18423,9 @@ var TextWithImage = function (_a) {
|
|
|
18424
18423
|
},
|
|
18425
18424
|
} }, 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));
|
|
18426
18425
|
};
|
|
18427
|
-
var templateObject_1$
|
|
18426
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$c, templateObject_4$7;
|
|
18428
18427
|
|
|
18429
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
18428
|
+
var Container$c = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
18430
18429
|
var AccordionOptions = function (_a) {
|
|
18431
18430
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
18432
18431
|
var _b = useState({
|
|
@@ -18450,9 +18449,9 @@ var AccordionOptions = function (_a) {
|
|
|
18450
18449
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
18451
18450
|
}) }, void 0));
|
|
18452
18451
|
};
|
|
18453
|
-
var templateObject_1$
|
|
18452
|
+
var templateObject_1$h;
|
|
18454
18453
|
|
|
18455
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
18454
|
+
var Container$b = newStyled.div(templateObject_1$g || (templateObject_1$g = __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) {
|
|
18456
18455
|
var alignCenter = _a.alignCenter;
|
|
18457
18456
|
return alignCenter &&
|
|
18458
18457
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -18462,14 +18461,14 @@ var Container$b = newStyled.div(templateObject_1$f || (templateObject_1$f = __ma
|
|
|
18462
18461
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
18463
18462
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
18464
18463
|
});
|
|
18465
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
18466
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
18464
|
+
var TitleText = newStyled.div(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
18465
|
+
var BannerText = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
18467
18466
|
var ShortBanner = function (_a) {
|
|
18468
18467
|
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;
|
|
18469
18468
|
var theme = useTheme();
|
|
18470
18469
|
return (jsxs$1(Container$b, __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));
|
|
18471
18470
|
};
|
|
18472
|
-
var templateObject_1$
|
|
18471
|
+
var templateObject_1$g, templateObject_2$c, templateObject_3$b;
|
|
18473
18472
|
|
|
18474
18473
|
/* base styles & size variants */
|
|
18475
18474
|
var getStylesBySize = function (size, theme) {
|
|
@@ -18525,10 +18524,10 @@ var getStylesBySize = function (size, theme) {
|
|
|
18525
18524
|
}
|
|
18526
18525
|
};
|
|
18527
18526
|
|
|
18528
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
18529
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
18530
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
18531
|
-
var UserInfoText = newStyled.div(templateObject_4$
|
|
18527
|
+
var Container$a = newStyled.div(templateObject_1$f || (templateObject_1$f = __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; });
|
|
18528
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
18529
|
+
var ImageCard = newStyled.div(templateObject_3$a || (templateObject_3$a = __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; });
|
|
18530
|
+
var UserInfoText = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __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; });
|
|
18532
18531
|
var BeforeAfterCard = function (_a) {
|
|
18533
18532
|
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;
|
|
18534
18533
|
var theme = useTheme();
|
|
@@ -18537,11 +18536,11 @@ var BeforeAfterCard = function (_a) {
|
|
|
18537
18536
|
infoText = months ? "".concat(infoText, " | ").concat(months, " months") : infoText;
|
|
18538
18537
|
return (jsxs$1(Container$a, __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));
|
|
18539
18538
|
};
|
|
18540
|
-
var templateObject_1$
|
|
18539
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$a, templateObject_4$6;
|
|
18541
18540
|
|
|
18542
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
18543
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
18544
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
18541
|
+
var Container$9 = newStyled.div(templateObject_1$e || (templateObject_1$e = __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'); });
|
|
18542
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
18543
|
+
var StyledTitle = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
18545
18544
|
var titlePosition = _a.titlePosition;
|
|
18546
18545
|
return titlePosition == 'center' &&
|
|
18547
18546
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -18551,18 +18550,18 @@ var ImageCardWithDescription = function (_a) {
|
|
|
18551
18550
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
18552
18551
|
return (jsxs$1(Container$9, __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$8, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsx$1(Text$8, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsx$1(Text$8, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
18553
18552
|
};
|
|
18554
|
-
var templateObject_1$
|
|
18555
|
-
|
|
18556
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
18557
|
-
var CheckpointContainer$1 = newStyled.div(templateObject_2$
|
|
18558
|
-
var CheckpointDate$1 = newStyled.div(templateObject_3$
|
|
18559
|
-
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$
|
|
18560
|
-
var CheckpointStatus$1 = newStyled.p(templateObject_5$
|
|
18561
|
-
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_6$
|
|
18553
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$9;
|
|
18554
|
+
|
|
18555
|
+
var Container$8 = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
18556
|
+
var CheckpointContainer$1 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18557
|
+
var CheckpointDate$1 = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __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; });
|
|
18558
|
+
var CheckpointDateLabel$1 = newStyled.p(templateObject_4$5 || (templateObject_4$5 = __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'); });
|
|
18559
|
+
var CheckpointStatus$1 = newStyled.p(templateObject_5$5 || (templateObject_5$5 = __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'); });
|
|
18560
|
+
var ActiveCheckpointTrack$1 = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __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) {
|
|
18562
18561
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
18563
18562
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
18564
|
-
var ActiveCheckpointDot$1 = newStyled.div(templateObject_7$
|
|
18565
|
-
var LastCheckpointTrack = newStyled.div(templateObject_8$
|
|
18563
|
+
var ActiveCheckpointDot$1 = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
18564
|
+
var LastCheckpointTrack = newStyled.div(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n"])), function (props) { return props.backgroundColor; });
|
|
18566
18565
|
var TrackingProgress = function (_a) {
|
|
18567
18566
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints;
|
|
18568
18567
|
var theme = useTheme();
|
|
@@ -18591,25 +18590,25 @@ var TrackingProgress = function (_a) {
|
|
|
18591
18590
|
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));
|
|
18592
18591
|
})] }), void 0));
|
|
18593
18592
|
};
|
|
18594
|
-
var templateObject_1$
|
|
18593
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$8, templateObject_4$5, templateObject_5$5, templateObject_6$5, templateObject_7$4, templateObject_8$3;
|
|
18595
18594
|
|
|
18596
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
18597
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
18598
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
18599
|
-
var CheckpointDateLabel = newStyled.p(templateObject_4$
|
|
18600
|
-
var CheckpointStatus = newStyled.p(templateObject_5$
|
|
18595
|
+
var Container$7 = 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"])));
|
|
18596
|
+
var CheckpointContainer = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18597
|
+
var CheckpointDate = 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; });
|
|
18598
|
+
var CheckpointDateLabel = 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'); });
|
|
18599
|
+
var CheckpointStatus = newStyled.p(templateObject_5$4 || (templateObject_5$4 = __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) {
|
|
18601
18600
|
return props.finishedTrack
|
|
18602
18601
|
? props.finishedTrackColor
|
|
18603
18602
|
: props.activeTrack
|
|
18604
18603
|
? props.activeTrackColor
|
|
18605
18604
|
: '';
|
|
18606
18605
|
}, function (props) { return (props.finishedTrack || props.activeTrack ? '600' : '400'); });
|
|
18607
|
-
var ActiveCheckpointTrack = newStyled.div(templateObject_6$
|
|
18606
|
+
var ActiveCheckpointTrack = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __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) {
|
|
18608
18607
|
return props.firstElement ? '8px 8px 0 0' : props.lastElement ? '0 0 8px 8px' : '';
|
|
18609
18608
|
}, function (props) { return (props.firstElement ? '20px' : '0'); }, function (props) { return (props.firstElement ? '-20px' : '0'); });
|
|
18610
|
-
var ActiveCheckpointDot = newStyled.div(templateObject_7$
|
|
18611
|
-
var LastActiveCheckpointDot = newStyled.div(templateObject_8$
|
|
18612
|
-
var WarningIconWrapper = newStyled.div(templateObject_9$
|
|
18609
|
+
var ActiveCheckpointDot = newStyled.div(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"], ["\n &:after {\n content: ' ';\n position: absolute;\n width: 13px;\n height: 13px;\n background-color: #e5e5e5;\n z-index: 2;\n border-radius: 50%;\n transform: ", ";\n left: 0;\n }\n"])), function (props) { return (props.firstElement ? 'translate(0, -0.5px)' : 'translate(0, -6.5px)'); });
|
|
18610
|
+
var LastActiveCheckpointDot = newStyled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: translate(0, 33px);\n position: relative;\n border-radius: 0 0 8px 8px;\n margin-top: -1px;\n height: 8px;\n"])), function (props) { return props.trackColor; });
|
|
18611
|
+
var WarningIconWrapper = newStyled.div(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"], ["\n > svg {\n height: 28px;\n padding-bottom: 10px;\n }\n"])));
|
|
18613
18612
|
var TrackingProgressV2 = function (_a) {
|
|
18614
18613
|
var checkPoints = _a.checkPoints, amountOfCheckPoints = _a.amountOfCheckPoints, warning = _a.warning;
|
|
18615
18614
|
var theme = useTheme();
|
|
@@ -18641,15 +18640,15 @@ var TrackingProgressV2 = function (_a) {
|
|
|
18641
18640
|
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));
|
|
18642
18641
|
})] }), void 0));
|
|
18643
18642
|
};
|
|
18644
|
-
var templateObject_1$
|
|
18645
|
-
|
|
18646
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
18647
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18648
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18649
|
-
var ReviewsStars = newStyled.div(templateObject_4$
|
|
18650
|
-
var ReviewsTextCount = newStyled(Text$8)(templateObject_5$
|
|
18651
|
-
var ReviewsImages = newStyled.div(templateObject_6$
|
|
18652
|
-
var SummaryItem = newStyled.div(templateObject_7$
|
|
18643
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$7, templateObject_4$4, templateObject_5$4, templateObject_6$4, templateObject_7$3, templateObject_8$2, templateObject_9$2;
|
|
18644
|
+
|
|
18645
|
+
var Container$6 = newStyled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
18646
|
+
var ReviewsContainer = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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"])));
|
|
18647
|
+
var ReviewsCount = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
18648
|
+
var ReviewsStars = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
18649
|
+
var ReviewsTextCount = newStyled(Text$8)(templateObject_5$3 || (templateObject_5$3 = __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"])));
|
|
18650
|
+
var ReviewsImages = newStyled.div(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
18651
|
+
var SummaryItem = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __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) {
|
|
18653
18652
|
var backgroundUrl = _a.backgroundUrl;
|
|
18654
18653
|
return "url(".concat(backgroundUrl, ")");
|
|
18655
18654
|
});
|
|
@@ -18659,18 +18658,18 @@ var ReviewsHeader = function (_a) {
|
|
|
18659
18658
|
var theme = useTheme();
|
|
18660
18659
|
return (jsxs$1(Container$6, { children: [jsx$1(Text$8, __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$8, __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));
|
|
18661
18660
|
};
|
|
18662
|
-
var templateObject_1$
|
|
18663
|
-
|
|
18664
|
-
var Container$5 = newStyled.div(templateObject_1$
|
|
18665
|
-
var Content = newStyled.div(templateObject_2$
|
|
18666
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18667
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
18668
|
-
var DateText = newStyled.span(templateObject_5$
|
|
18669
|
-
var ReviewerName = newStyled.h1(templateObject_6$
|
|
18670
|
-
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"])));
|
|
18671
|
-
var ReviewTitle = newStyled.h2(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
18672
|
-
var ReviewDescription = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
18673
|
-
var ImageContainer = newStyled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
18661
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$6, templateObject_4$3, templateObject_5$3, templateObject_6$3, templateObject_7$2;
|
|
18662
|
+
|
|
18663
|
+
var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __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"])));
|
|
18664
|
+
var Content = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __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"])));
|
|
18665
|
+
var StarsContent = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18666
|
+
var ReviewContainer = newStyled.div(templateObject_4$2 || (templateObject_4$2 = __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"])));
|
|
18667
|
+
var DateText = newStyled.span(templateObject_5$2 || (templateObject_5$2 = __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"])));
|
|
18668
|
+
var ReviewerName = newStyled.h1(templateObject_6$2 || (templateObject_6$2 = __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"])));
|
|
18669
|
+
var VerifiedText = newStyled.h1(templateObject_7$1 || (templateObject_7$1 = __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"])));
|
|
18670
|
+
var ReviewTitle = newStyled.h2(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"], ["\n font-size: 18px;\n line-height: 20px;\n font-weight: 600;\n margin: 0;\n"])));
|
|
18671
|
+
var ReviewDescription = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"], ["\n font-weight: normal;\n font-size: 16px;\n margin: 0;\n line-height: 25px;\n word-break: break-word;\n margin-top: 5px;\n white-space: pre-wrap;\n"])));
|
|
18672
|
+
var ImageContainer = newStyled.div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"], ["\n width: 100% !important;\n min-width: 100%;\n height: initial !important;\n min-height: 250px;\n background-size: contain !important;\n margin: 0 !important;\n line-height: 0;\n\n @media (min-width: 768px) {\n width: unset;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n padding: 20px;\n }\n"])));
|
|
18674
18673
|
var ImageWrapper = newStyled(Image)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
18675
18674
|
var VideoWrapper = newStyled.video(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"], ["\n width: 100%;\n min-width: 50%;\n max-width: 100%;\n background-color: #fff;\n display: inline-block;\n vertical-align: middle;\n max-height: calc(100vh - 100px);\n"])));
|
|
18676
18675
|
var ProductContainer = newStyled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"], ["\n padding: 20px;\n border-top: 1px solid #eee;\n cursor: pointer;\n"])));
|
|
@@ -18702,7 +18701,7 @@ var Review = function (_a) {
|
|
|
18702
18701
|
return (jsx$1(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxs$1(Container$5, { children: [jsx$1(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsx$1(ImageContainer, { children: image &&
|
|
18703
18702
|
(!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));
|
|
18704
18703
|
};
|
|
18705
|
-
var templateObject_1$
|
|
18704
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10$1, 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;
|
|
18706
18705
|
|
|
18707
18706
|
function _extends() {
|
|
18708
18707
|
_extends = Object.assign || function (target) {
|
|
@@ -18969,28 +18968,28 @@ function useSwipeable(options) {
|
|
|
18969
18968
|
return handlers;
|
|
18970
18969
|
}
|
|
18971
18970
|
|
|
18972
|
-
var Container$4 = newStyled.div(templateObject_1$
|
|
18971
|
+
var Container$4 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __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) {
|
|
18973
18972
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
18974
18973
|
return borderRadiusVariant &&
|
|
18975
18974
|
"\n border-radius: 40px;\n ";
|
|
18976
18975
|
});
|
|
18977
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
18978
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
18976
|
+
var TopTagContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __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'); });
|
|
18977
|
+
var BottomTagContainer = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
18979
18978
|
var ImageProductWithTagsMobileV2 = forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18980
18979
|
var _b, _c;
|
|
18981
18980
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18982
18981
|
return (jsxs$1(Container$4, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$1, { 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)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: "100%", height: 510, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0))] }), void 0));
|
|
18983
18982
|
});
|
|
18984
|
-
var templateObject_1$
|
|
18983
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$4;
|
|
18985
18984
|
|
|
18986
|
-
var Button = newStyled.button(templateObject_1$
|
|
18985
|
+
var Button = newStyled.button(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
18987
18986
|
var ArrowButton = function (_a) {
|
|
18988
18987
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
18989
18988
|
return (jsx$1(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
18990
18989
|
};
|
|
18991
|
-
var templateObject_1$
|
|
18990
|
+
var templateObject_1$8;
|
|
18992
18991
|
|
|
18993
|
-
var Container$3 = newStyled.div(templateObject_1$
|
|
18992
|
+
var Container$3 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
18994
18993
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
18995
18994
|
var SlideDots = function (_a) {
|
|
18996
18995
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -18999,11 +18998,11 @@ var SlideDots = function (_a) {
|
|
|
18999
18998
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
19000
18999
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
19001
19000
|
};
|
|
19002
|
-
var templateObject_1$
|
|
19001
|
+
var templateObject_1$7;
|
|
19003
19002
|
|
|
19004
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
19005
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2$
|
|
19006
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3$
|
|
19003
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
19004
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
19005
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
19007
19006
|
var SlideNavigation = function (_a) {
|
|
19008
19007
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
19009
19008
|
var theme = useTheme();
|
|
@@ -19015,9 +19014,9 @@ var SlideNavigation = function (_a) {
|
|
|
19015
19014
|
onNavigate(selectedIndex + 1);
|
|
19016
19015
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
19017
19016
|
};
|
|
19018
|
-
var templateObject_1$
|
|
19017
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$3;
|
|
19019
19018
|
|
|
19020
|
-
var Container$2 = newStyled.div(templateObject_1$
|
|
19019
|
+
var Container$2 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
19021
19020
|
var ProductGalleryMobileV2 = function (_a) {
|
|
19022
19021
|
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;
|
|
19023
19022
|
var _c = useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -19041,29 +19040,29 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
19041
19040
|
}, [index, images]);
|
|
19042
19041
|
return (jsxs$1(Container$2, { 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));
|
|
19043
19042
|
};
|
|
19044
|
-
var templateObject_1$
|
|
19043
|
+
var templateObject_1$5;
|
|
19045
19044
|
|
|
19046
|
-
var Container$1 = newStyled.div(templateObject_1$
|
|
19047
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
19045
|
+
var Container$1 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
19046
|
+
var DropContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19048
19047
|
var DropList = function (_a) {
|
|
19049
19048
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
19050
19049
|
return (jsx$1(Container$1, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
19051
19050
|
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));
|
|
19052
19051
|
}) }, void 0));
|
|
19053
19052
|
};
|
|
19054
|
-
var templateObject_1$
|
|
19053
|
+
var templateObject_1$4, templateObject_2$3;
|
|
19055
19054
|
|
|
19056
19055
|
var DROPS_TOTAL = 5;
|
|
19057
|
-
var Container = newStyled.div(templateObject_1$
|
|
19058
|
-
var Title = newStyled.p(templateObject_2$
|
|
19059
|
-
var Description = newStyled.p(templateObject_3$
|
|
19056
|
+
var Container = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
19057
|
+
var Title = newStyled.p(templateObject_2$2 || (templateObject_2$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"])));
|
|
19058
|
+
var Description = newStyled.p(templateObject_3$2 || (templateObject_3$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-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"])));
|
|
19060
19059
|
var AbsorbencyLevel = function (_a) {
|
|
19061
19060
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
19062
19061
|
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));
|
|
19063
19062
|
};
|
|
19064
|
-
var templateObject_1$
|
|
19063
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$2;
|
|
19065
19064
|
|
|
19066
|
-
var TimerContainer = newStyled.div(templateObject_1$
|
|
19065
|
+
var TimerContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: 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) {
|
|
19067
19066
|
var textPosition = _a.textPosition;
|
|
19068
19067
|
return textPosition;
|
|
19069
19068
|
}, function (_a) {
|
|
@@ -19090,15 +19089,15 @@ var HurryUp = function (_a) {
|
|
|
19090
19089
|
}, []), hours = _e.hours, minutes = _e.minutes, seconds = _e.seconds;
|
|
19091
19090
|
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$8, __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));
|
|
19092
19091
|
};
|
|
19093
|
-
var templateObject_1$
|
|
19092
|
+
var templateObject_1$2;
|
|
19094
19093
|
|
|
19095
|
-
var DropdownContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
19096
|
-
var DropdownLabel = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
19097
|
-
var SizeLabel = newStyled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
19098
|
-
var DetailLabel = newStyled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
19099
|
-
var DropdownOptions = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
19100
|
-
var DropdownOption = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
19101
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
19094
|
+
var DropdownContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"], ["\n position: relative;\n font-size: 14px;\n line-height: 18px;\n"])));
|
|
19095
|
+
var DropdownLabel = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: #fff;\n border: 1px solid #bbb;\n border-radius: 8px;\n padding: 8px 12px 8px 16px;\n cursor: pointer;\n gap: 16px;\n font-weight: 600;\n color: var(--colors-pallete-secondary-color);\n max-width: 337px;\n height: 36px;\n\n @media (max-width: 767px) {\n max-width: 100%;\n }\n"])));
|
|
19096
|
+
var SizeLabel = newStyled.span(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n margin-right: 8px;\n"], ["\n margin-right: 8px;\n"])));
|
|
19097
|
+
var DetailLabel = newStyled.span(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"], ["\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n"])));
|
|
19098
|
+
var DropdownOptions = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"], ["\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 1;\n padding: 0;\n max-width: 337px;\n border: 1px solid var(--colors-pallete-secondary-color);\n border-radius: 8px;\n overflow: hidden;\n\n @media (max-width: 767px) {\n width: 100%;\n max-width: none;\n }\n"])));
|
|
19099
|
+
var DropdownOption = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px 10px;\n height: 40px;\n cursor: pointer;\n\n &:hover {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n &[aria-selected='true'] {\n background-color: rgb(247, 247, 247);\n border-radius: 8px;\n }\n\n & > span:first-of-type {\n margin-right: auto;\n font-weight: 600;\n }\n\n & > span:last-of-type {\n text-align: center;\n flex-grow: 1;\n font-weight: 400;\n color: var(--colors-shades-400-color);\n }\n"])));
|
|
19100
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
|
|
19102
19101
|
|
|
19103
19102
|
var SizeDropdown = function (_a) {
|
|
19104
19103
|
var options = _a.options, defaultLabel = _a.defaultLabel, onOptionSelect = _a.onOptionSelect;
|
|
@@ -19121,5 +19120,70 @@ var SizeDropdown = function (_a) {
|
|
|
19121
19120
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(DropdownLabel, __assign$1({ role: "button", tabIndex: 0, onClick: toggleDropdown }, { children: [jsx$1(SizeLabel, { children: selectedOption.size }, void 0), jsx$1(DetailLabel, { children: selectedOption.detail }, void 0), isOpen ? (jsx$1(Icon.Arrows.ChevronUp, { width: 0.563, height: 0.875, fill: "#292929" }, void 0)) : (jsx$1(Icon.Arrows.ChevronDown, { width: 0.563, height: 0.875, fill: "#292929" }, void 0))] }), void 0), isOpen && (jsx$1(DropdownOptions, { children: options.map(function (option) { return (jsxs$1(DropdownOption, __assign$1({ role: "option", "aria-selected": selectedOption.size === option.size, tabIndex: 0, onClick: function () { return handleOptionClick(option); }, onKeyDown: function (e) { return handleOptionKeyDown(e, option); } }, { children: [jsx$1("span", { children: option.size }, void 0), jsx$1("span", { children: option.detail }, void 0)] }), option.size)); }) }, void 0))] }, void 0));
|
|
19122
19121
|
};
|
|
19123
19122
|
|
|
19124
|
-
|
|
19123
|
+
var FlexContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
19124
|
+
var SinglePurchaseContainer = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border: 2px solid var(--colors-pallete-primary-80-color);\n padding: 16px;\n border-radius: 8px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n\n & label {\n font-weight: 700;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border: 2px solid var(--colors-pallete-primary-80-color);\n padding: 16px;\n border-radius: 8px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n\n & label {\n font-weight: 700;\n }\n"])));
|
|
19125
|
+
var SubscriptionContainer = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border: 2px solid var(--colors-pallete-secondary-soft-color);\n padding: 16px;\n border-radius: 8px;\n"], ["\n border: 2px solid var(--colors-pallete-secondary-soft-color);\n padding: 16px;\n border-radius: 8px;\n"])));
|
|
19126
|
+
var SubscriptionHeader = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--colors-pallete-secondary-20-color);\n padding-bottom: 10px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid var(--colors-pallete-secondary-20-color);\n padding-bottom: 10px;\n margin-bottom: 8px;\n\n & input:checked + div {\n border-color: var(--colors-pallete-primary-color);\n }\n"])));
|
|
19127
|
+
var BenefitsContainer = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
19128
|
+
var Benefit = newStyled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n"], ["\n display: flex;\n padding: 8px 0px;\n"])));
|
|
19129
|
+
var BenefitText = newStyled(Text$8)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
19130
|
+
var SubscriptionDetails = newStyled(Text$8)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
19131
|
+
var SubscriptionDetailsContainer = newStyled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
19132
|
+
var DeliveryFrequencyLabel = newStyled(Text$8)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n"])));
|
|
19133
|
+
var radioIds = {
|
|
19134
|
+
oneTime: {
|
|
19135
|
+
id: 'one-time-purchase',
|
|
19136
|
+
},
|
|
19137
|
+
autoship: {
|
|
19138
|
+
id: 'autoship-subscribe-and-save',
|
|
19139
|
+
},
|
|
19140
|
+
};
|
|
19141
|
+
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
19142
|
+
var Autoship = function (_a) {
|
|
19143
|
+
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, frequencyUnit = _a.frequencyUnit, autoshipBenefits = _a.autoshipBenefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel;
|
|
19144
|
+
var unit = frequencyUnit || 'months';
|
|
19145
|
+
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
19146
|
+
? frequencyValues.map(function (value) {
|
|
19147
|
+
var label = "".concat(value, " ").concat(value === 1 ? unit.slice(0, -1) : unit);
|
|
19148
|
+
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
19149
|
+
})
|
|
19150
|
+
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
19151
|
+
var _b = useState(radioIds.autoship), radioCheck = _b[0], setRadioCheck = _b[1];
|
|
19152
|
+
var _c = useState(dropdownOptions[0].value), subscriptionPeriod = _c[0], setSubscriptionPeriod = _c[1];
|
|
19153
|
+
var originalProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.originalPrice) || 0;
|
|
19154
|
+
var discountedProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.discountedPrice) || 0;
|
|
19155
|
+
var discount = (discountedProdPrice * (100 - ((pricing === null || pricing === void 0 ? void 0 : pricing.discountPercentage) || 0))) / 100;
|
|
19156
|
+
var discountedAutoshipPrice = discountedProdPrice !== discount ? discount.toFixed(2) : 0;
|
|
19157
|
+
var createDataObject = function () {
|
|
19158
|
+
return {
|
|
19159
|
+
subscriptionPeriod: subscriptionPeriod,
|
|
19160
|
+
autoship: radioCheck.id === radioIds.autoship.id,
|
|
19161
|
+
originalPrice: discountedProdPrice,
|
|
19162
|
+
discountedPrice: Number(discountedAutoshipPrice),
|
|
19163
|
+
};
|
|
19164
|
+
};
|
|
19165
|
+
useEffect(function () {
|
|
19166
|
+
onChange(createDataObject());
|
|
19167
|
+
}, []);
|
|
19168
|
+
var handleChange = function (value, type) {
|
|
19169
|
+
var dataObj = createDataObject();
|
|
19170
|
+
if (type === 'radio') {
|
|
19171
|
+
setRadioCheck(value);
|
|
19172
|
+
dataObj.autoship = value.id === radioIds.autoship.id;
|
|
19173
|
+
}
|
|
19174
|
+
else {
|
|
19175
|
+
setSubscriptionPeriod(value);
|
|
19176
|
+
dataObj.subscriptionPeriod = value;
|
|
19177
|
+
}
|
|
19178
|
+
onChange(__assign$1({}, dataObj));
|
|
19179
|
+
};
|
|
19180
|
+
return (jsxs$1(Fragment$1, { children: [jsxs$1(SinglePurchaseContainer, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), color: radioIds.oneTime.id === radioCheck.id
|
|
19181
|
+
? 'var(--colors-pallete-secondary-color)'
|
|
19182
|
+
: 'var(--colors-shades-400-color)', size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }, void 0), jsxs$1(SubscriptionContainer, { children: [jsxs$1(SubscriptionHeader, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(PriceLabelV2, { finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), color: radioIds.oneTime.id === radioCheck.id
|
|
19183
|
+
? 'var(--colors-shades-400-color)'
|
|
19184
|
+
: 'var(--colors-pallete-secondary-color)', size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: "var(--colors-pallete-secondary-color)" }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$1, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxs$1(SubscriptionDetailsContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "link", underline: true, weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0) }), void 0)] }, void 0)] }, void 0))] }, void 0)] }, void 0));
|
|
19185
|
+
};
|
|
19186
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
19187
|
+
|
|
19188
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, 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, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$8 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 };
|
|
19125
19189
|
//# sourceMappingURL=index.esm.js.map
|