@trafilea/afrodita-components 5.0.0-beta.297 → 5.0.0-beta.299
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 +5 -2
- package/build/index.esm.js +253 -237
- package/build/index.esm.js.map +1 -1
- package/build/index.js +253 -237
- 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$1G || (templateObject_1$1G = __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$1G;
|
|
4223
4223
|
|
|
4224
|
-
var Body = newStyled.div(templateObject_1$
|
|
4224
|
+
var Body = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __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$1F;
|
|
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$
|
|
4374
|
+
var Container$15 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __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;";
|
|
@@ -4386,14 +4386,14 @@ var Container$14 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = _
|
|
|
4386
4386
|
var Card$2 = function (_a) {
|
|
4387
4387
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
4388
4388
|
var theme = useTheme();
|
|
4389
|
-
return (jsx$1(Container$
|
|
4389
|
+
return (jsx$1(Container$15, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4390
4390
|
};
|
|
4391
4391
|
var Card$3 = Object.assign(Card$2, {
|
|
4392
4392
|
Header: CardHeader,
|
|
4393
4393
|
Footer: CardFooter,
|
|
4394
4394
|
Body: CardBody,
|
|
4395
4395
|
});
|
|
4396
|
-
var templateObject_1$
|
|
4396
|
+
var templateObject_1$1E;
|
|
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$1D || (templateObject_1$1D = __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$1D;
|
|
4553
4553
|
|
|
4554
4554
|
var CustomButton = newStyled.button(function (_a) {
|
|
4555
4555
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4602,18 +4602,20 @@ var withLabel = function (Button, label) {
|
|
|
4602
4602
|
display: 'flex',
|
|
4603
4603
|
flexDirection: 'column',
|
|
4604
4604
|
alignItems: 'flex-start',
|
|
4605
|
+
whiteSpace: 'nowrap',
|
|
4606
|
+
overflowX: 'hidden',
|
|
4605
4607
|
} }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0) }), void 0));
|
|
4606
4608
|
};
|
|
4607
4609
|
};
|
|
4608
4610
|
|
|
4609
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4610
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4611
|
+
var ErrorText = newStyled.h3(templateObject_1$1C || (templateObject_1$1C = __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; });
|
|
4612
|
+
var ErrorContainer = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __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
4613
|
var Error$1 = function (_a) {
|
|
4612
4614
|
var error = _a.error;
|
|
4613
4615
|
var theme = useTheme();
|
|
4614
4616
|
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
4617
|
};
|
|
4616
|
-
var templateObject_1$
|
|
4618
|
+
var templateObject_1$1C, templateObject_2$15;
|
|
4617
4619
|
|
|
4618
4620
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4619
4621
|
var theme = _a.theme;
|
|
@@ -4779,7 +4781,7 @@ var CustomCheckboxStyles = {
|
|
|
4779
4781
|
},
|
|
4780
4782
|
};
|
|
4781
4783
|
|
|
4782
|
-
var Container$
|
|
4784
|
+
var Container$14 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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
4785
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4784
4786
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4785
4787
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4790,7 +4792,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4790
4792
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4791
4793
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4792
4794
|
]; });
|
|
4793
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4795
|
+
var Input$5 = newStyled.input(templateObject_2$14 || (templateObject_2$14 = __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
4796
|
var disabled = _a.disabled;
|
|
4795
4797
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4796
4798
|
});
|
|
@@ -4804,9 +4806,9 @@ var Checkbox = function (_a) {
|
|
|
4804
4806
|
}
|
|
4805
4807
|
onChange(e.target.checked);
|
|
4806
4808
|
};
|
|
4807
|
-
return (jsxs$1(Container$
|
|
4809
|
+
return (jsxs$1(Container$14, { 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
4810
|
};
|
|
4809
|
-
var templateObject_1$
|
|
4811
|
+
var templateObject_1$1B, templateObject_2$14;
|
|
4810
4812
|
|
|
4811
4813
|
var CustomOption = newStyled.li(function (_a) {
|
|
4812
4814
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4853,8 +4855,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4853
4855
|
Option: BaseDropdownOption,
|
|
4854
4856
|
});
|
|
4855
4857
|
|
|
4856
|
-
var Container$
|
|
4857
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4858
|
+
var Container$13 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject([""], [""])));
|
|
4859
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$13 || (templateObject_2$13 = __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
4860
|
function SimpleDropdown(_a) {
|
|
4859
4861
|
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
4862
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4884,14 +4886,14 @@ function SimpleDropdown(_a) {
|
|
|
4884
4886
|
setSelectedValue(value);
|
|
4885
4887
|
}, [value, options, initialValue]);
|
|
4886
4888
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4887
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4889
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$13 : Fragment$2;
|
|
4888
4890
|
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
4891
|
}
|
|
4890
|
-
var templateObject_1$
|
|
4892
|
+
var templateObject_1$1A, templateObject_2$13;
|
|
4891
4893
|
|
|
4892
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4893
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4894
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4894
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __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; });
|
|
4895
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$12 || (templateObject_2$12 = __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; });
|
|
4896
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$R || (templateObject_3$R = __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
4897
|
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
4898
|
var DropdownDialog = function (_a) {
|
|
4897
4899
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -4900,7 +4902,7 @@ var DropdownDialog = function (_a) {
|
|
|
4900
4902
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4901
4903
|
}) }), void 0) }), void 0));
|
|
4902
4904
|
};
|
|
4903
|
-
var templateObject_1$
|
|
4905
|
+
var templateObject_1$1z, templateObject_2$12, templateObject_3$R, templateObject_4$B;
|
|
4904
4906
|
|
|
4905
4907
|
var getStylesBySize$a = function (size, theme) {
|
|
4906
4908
|
switch (size) {
|
|
@@ -4968,9 +4970,9 @@ var SelectorSecondary = function (_a) {
|
|
|
4968
4970
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4969
4971
|
// `variants` styles that are consistent through all themes.
|
|
4970
4972
|
var TAGS = {
|
|
4971
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4972
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4973
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4973
|
+
hero1: newStyled.h1(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject([""], [""]))),
|
|
4974
|
+
hero2: newStyled.h2(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject([""], [""]))),
|
|
4975
|
+
hero3: newStyled.h3(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject([""], [""]))),
|
|
4974
4976
|
display1: newStyled.h1(templateObject_4$A || (templateObject_4$A = __makeTemplateObject([""], [""]))),
|
|
4975
4977
|
display2: newStyled.h2(templateObject_5$n || (templateObject_5$n = __makeTemplateObject([""], [""]))),
|
|
4976
4978
|
heading1: newStyled.h1(templateObject_6$l || (templateObject_6$l = __makeTemplateObject([""], [""]))),
|
|
@@ -5100,9 +5102,9 @@ var DEFAULTS = {
|
|
|
5100
5102
|
size: 'regular',
|
|
5101
5103
|
},
|
|
5102
5104
|
};
|
|
5103
|
-
var templateObject_1$
|
|
5105
|
+
var templateObject_1$1y, templateObject_2$11, templateObject_3$Q, 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
5106
|
|
|
5105
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5107
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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
5108
|
var inline = _a.inline;
|
|
5107
5109
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5108
5110
|
});
|
|
@@ -5121,7 +5123,7 @@ var SizeSelector = function (_a) {
|
|
|
5121
5123
|
}, 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
5124
|
}) }), void 0)] }), void 0));
|
|
5123
5125
|
};
|
|
5124
|
-
var templateObject_1$
|
|
5126
|
+
var templateObject_1$1x;
|
|
5125
5127
|
|
|
5126
5128
|
var getStylesBySize$9 = function (size) {
|
|
5127
5129
|
switch (size) {
|
|
@@ -5148,7 +5150,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5148
5150
|
} });
|
|
5149
5151
|
};
|
|
5150
5152
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5151
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5153
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1w || (templateObject_1$1w = __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
5154
|
};
|
|
5153
5155
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5154
5156
|
if (disabled)
|
|
@@ -5164,16 +5166,16 @@ var TextButton = function (_a) {
|
|
|
5164
5166
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5165
5167
|
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
5168
|
};
|
|
5167
|
-
var templateObject_1$
|
|
5169
|
+
var templateObject_1$1w;
|
|
5168
5170
|
|
|
5169
|
-
var Container$
|
|
5170
|
-
var P$3 = newStyled.p(templateObject_2
|
|
5171
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5171
|
+
var Container$12 = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
5172
|
+
var P$3 = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5173
|
+
var PercentageSpan = newStyled.span(templateObject_3$P || (templateObject_3$P = __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
5174
|
var SizeFitGuide = function (_a) {
|
|
5173
5175
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5174
|
-
return (jsxs$1(Container$
|
|
5176
|
+
return (jsxs$1(Container$12, { 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
5177
|
};
|
|
5176
|
-
var templateObject_1$
|
|
5178
|
+
var templateObject_1$1v, templateObject_2$10, templateObject_3$P;
|
|
5177
5179
|
|
|
5178
5180
|
var getStylesBySize$8 = function (size) {
|
|
5179
5181
|
switch (size) {
|
|
@@ -5203,7 +5205,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5203
5205
|
};
|
|
5204
5206
|
}
|
|
5205
5207
|
};
|
|
5206
|
-
var Container$
|
|
5208
|
+
var Container$11 = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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
5209
|
var backgroundColor = _a.backgroundColor;
|
|
5208
5210
|
return backgroundColor;
|
|
5209
5211
|
}, function (_a) {
|
|
@@ -5225,7 +5227,7 @@ var Container$10 = newStyled.div(templateObject_1$1t || (templateObject_1$1t = _
|
|
|
5225
5227
|
var size = _a.size;
|
|
5226
5228
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5227
5229
|
});
|
|
5228
|
-
var H3$3 = newStyled.h3(templateObject_2
|
|
5230
|
+
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
5231
|
var textColor = _a.textColor;
|
|
5230
5232
|
return textColor;
|
|
5231
5233
|
}, function (_a) {
|
|
@@ -5240,9 +5242,9 @@ var H3$3 = newStyled.h3(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5240
5242
|
var DiscountTag = function (_a) {
|
|
5241
5243
|
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;
|
|
5242
5244
|
var theme = useTheme();
|
|
5243
|
-
return (jsx$1(Container$
|
|
5245
|
+
return (jsx$1(Container$11, __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));
|
|
5244
5246
|
};
|
|
5245
|
-
var templateObject_1$
|
|
5247
|
+
var templateObject_1$1u, templateObject_2$$;
|
|
5246
5248
|
|
|
5247
5249
|
var getStylesBySize$7 = function (size) {
|
|
5248
5250
|
switch (size) {
|
|
@@ -5272,8 +5274,8 @@ var getStylesBySize$7 = function (size) {
|
|
|
5272
5274
|
};
|
|
5273
5275
|
}
|
|
5274
5276
|
};
|
|
5275
|
-
var Container
|
|
5276
|
-
var Price = newStyled.p(templateObject_2$
|
|
5277
|
+
var Container$10 = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5278
|
+
var Price = newStyled.p(templateObject_2$_ || (templateObject_2$_ = __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) {
|
|
5277
5279
|
var weight = _a.weight;
|
|
5278
5280
|
return (weight ? weight : '400');
|
|
5279
5281
|
}, function (_a) {
|
|
@@ -5302,7 +5304,7 @@ var Price = newStyled.p(templateObject_2$Z || (templateObject_2$Z = __makeTempla
|
|
|
5302
5304
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5303
5305
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5304
5306
|
});
|
|
5305
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5307
|
+
var TagContainer = newStyled.div(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5306
5308
|
var _b;
|
|
5307
5309
|
var size = _a.size;
|
|
5308
5310
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5315,17 +5317,17 @@ function getTestId() {
|
|
|
5315
5317
|
return args.filter(Boolean).join('-');
|
|
5316
5318
|
}
|
|
5317
5319
|
var PriceLabel = function (_a) {
|
|
5318
|
-
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _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;
|
|
5320
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _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, _f = _a.clubStyle, clubStyle = _f === void 0 ? false : _f;
|
|
5319
5321
|
var theme = useTheme();
|
|
5320
5322
|
var priceCommonProps = {
|
|
5321
5323
|
size: finalPriceStyled ? ComponentSize.Small : size,
|
|
5322
5324
|
color: color || theme.colors.pallete.secondary.color,
|
|
5323
5325
|
weight: 700,
|
|
5324
5326
|
};
|
|
5325
|
-
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin:
|
|
5326
|
-
return (jsxs$1(Container
|
|
5327
|
+
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5328
|
+
return (jsxs$1(Container$10, { children: [clubStyle ? (jsxs$1(Fragment$1, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$1, { 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)] }, 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));
|
|
5327
5329
|
};
|
|
5328
|
-
var templateObject_1$
|
|
5330
|
+
var templateObject_1$1t, templateObject_2$_, templateObject_3$O;
|
|
5329
5331
|
|
|
5330
5332
|
var getStylesBySize$6 = function (size) {
|
|
5331
5333
|
switch (size) {
|
|
@@ -5355,7 +5357,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5355
5357
|
};
|
|
5356
5358
|
}
|
|
5357
5359
|
};
|
|
5358
|
-
var Container
|
|
5360
|
+
var Container$$ = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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) {
|
|
5359
5361
|
var backgroundColor = _a.backgroundColor;
|
|
5360
5362
|
return backgroundColor;
|
|
5361
5363
|
}, function (_a) {
|
|
@@ -5377,7 +5379,7 @@ var Container$_ = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __
|
|
|
5377
5379
|
var size = _a.size;
|
|
5378
5380
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5379
5381
|
});
|
|
5380
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5382
|
+
var H3$2 = newStyled.h3(templateObject_2$Z || (templateObject_2$Z = __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) {
|
|
5381
5383
|
var textColor = _a.textColor;
|
|
5382
5384
|
return textColor;
|
|
5383
5385
|
}, function (_a) {
|
|
@@ -5392,11 +5394,11 @@ var H3$2 = newStyled.h3(templateObject_2$Y || (templateObject_2$Y = __makeTempla
|
|
|
5392
5394
|
var ClubOfferTag = function (_a) {
|
|
5393
5395
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5394
5396
|
var theme = useTheme();
|
|
5395
|
-
return (jsx$1(Container
|
|
5397
|
+
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));
|
|
5396
5398
|
};
|
|
5397
|
-
var templateObject_1$
|
|
5399
|
+
var templateObject_1$1s, templateObject_2$Z;
|
|
5398
5400
|
|
|
5399
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5401
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5400
5402
|
var PriceLabelV2 = function (_a) {
|
|
5401
5403
|
var _b;
|
|
5402
5404
|
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;
|
|
@@ -5427,7 +5429,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5427
5429
|
weight: 700,
|
|
5428
5430
|
};
|
|
5429
5431
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5430
|
-
return (jsxs$1(Container
|
|
5432
|
+
return (jsxs$1(Container$10, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
|
|
5431
5433
|
borderRadius: '8px',
|
|
5432
5434
|
width: '107px',
|
|
5433
5435
|
height: '28px',
|
|
@@ -5437,7 +5439,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5437
5439
|
lineHeight: '22px',
|
|
5438
5440
|
} }), void 0)) }), void 0))] }, void 0));
|
|
5439
5441
|
};
|
|
5440
|
-
var templateObject_1$
|
|
5442
|
+
var templateObject_1$1r;
|
|
5441
5443
|
|
|
5442
5444
|
var OneColorSelector = function (_a) {
|
|
5443
5445
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5478,9 +5480,9 @@ var OutOfStock = function (_a) {
|
|
|
5478
5480
|
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));
|
|
5479
5481
|
};
|
|
5480
5482
|
|
|
5481
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5482
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5483
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5483
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5484
|
+
newStyled(lt.Label)(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5485
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$N || (templateObject_3$N = __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
5486
|
var Span = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5485
5487
|
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"])));
|
|
5486
5488
|
var Label$3 = function (_a) {
|
|
@@ -5500,23 +5502,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5500
5502
|
Option: Option,
|
|
5501
5503
|
OptionsContainer: OptionsContainer,
|
|
5502
5504
|
});
|
|
5503
|
-
var templateObject_1$
|
|
5505
|
+
var templateObject_1$1q, templateObject_2$Y, templateObject_3$N, templateObject_4$z, templateObject_5$m;
|
|
5504
5506
|
|
|
5505
|
-
var Container$
|
|
5507
|
+
var Container$_ = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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) {
|
|
5506
5508
|
var borderColor = _a.borderColor;
|
|
5507
5509
|
return borderColor;
|
|
5508
5510
|
}, function (_a) {
|
|
5509
5511
|
var noStock = _a.noStock;
|
|
5510
5512
|
return (noStock ? '0.4' : '1');
|
|
5511
5513
|
});
|
|
5512
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5514
|
+
var Image$3 = newStyled.img(templateObject_2$X || (templateObject_2$X = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5513
5515
|
var PatternSelector = function (_a) {
|
|
5514
5516
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5515
5517
|
var theme = useTheme();
|
|
5516
5518
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5517
|
-
return (jsx$1(Container$
|
|
5519
|
+
return (jsx$1(Container$_, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5518
5520
|
};
|
|
5519
|
-
var templateObject_1$
|
|
5521
|
+
var templateObject_1$1p, templateObject_2$X;
|
|
5520
5522
|
|
|
5521
5523
|
var renderOptions$1 = function (options) {
|
|
5522
5524
|
if (options.length === 0) {
|
|
@@ -5721,7 +5723,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5721
5723
|
literal: true,
|
|
5722
5724
|
});
|
|
5723
5725
|
|
|
5724
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5726
|
+
var Image$2 = newStyled.img(templateObject_1$1o || (templateObject_1$1o = __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) {
|
|
5725
5727
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5726
5728
|
return borderRadiusVariant &&
|
|
5727
5729
|
"\nborder-radius: 20px;\n";
|
|
@@ -5736,7 +5738,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5736
5738
|
var theme = useTheme();
|
|
5737
5739
|
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));
|
|
5738
5740
|
};
|
|
5739
|
-
var templateObject_1$
|
|
5741
|
+
var templateObject_1$1o;
|
|
5740
5742
|
|
|
5741
5743
|
var Button$5 = newStyled.button(function () { return ({
|
|
5742
5744
|
background: 'transparent',
|
|
@@ -9980,14 +9982,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9980
9982
|
return Slider;
|
|
9981
9983
|
}(React__default.Component);
|
|
9982
9984
|
|
|
9983
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9985
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
9984
9986
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9985
9987
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9986
9988
|
}, function (_a) {
|
|
9987
9989
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9988
9990
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9989
9991
|
});
|
|
9990
|
-
var templateObject_1$
|
|
9992
|
+
var templateObject_1$1n;
|
|
9991
9993
|
|
|
9992
9994
|
var getStylesBySize$5 = function (size) {
|
|
9993
9995
|
// rem units
|
|
@@ -10046,22 +10048,22 @@ var SliderNavigation = function (_a) {
|
|
|
10046
10048
|
} }, { 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));
|
|
10047
10049
|
};
|
|
10048
10050
|
|
|
10049
|
-
var horizontalStyles = css(templateObject_1$
|
|
10050
|
-
var verticalStyles = css(templateObject_2$
|
|
10051
|
-
var Container$
|
|
10051
|
+
var horizontalStyles = css(templateObject_1$1m || (templateObject_1$1m = __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"])));
|
|
10052
|
+
var verticalStyles = css(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
10053
|
+
var Container$Z = newStyled.div(templateObject_3$M || (templateObject_3$M = __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) {
|
|
10052
10054
|
var position = _a.position;
|
|
10053
10055
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10054
10056
|
});
|
|
10055
10057
|
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"])));
|
|
10056
10058
|
var ImagePreviewList = function (_a) {
|
|
10057
10059
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
10058
|
-
return (jsx$1(Container$
|
|
10060
|
+
return (jsx$1(Container$Z, __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: {
|
|
10059
10061
|
arrowWidth: 0.75,
|
|
10060
10062
|
arrowHeight: 1.25,
|
|
10061
10063
|
arrowPadding: 1.625,
|
|
10062
10064
|
}, 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));
|
|
10063
10065
|
};
|
|
10064
|
-
var templateObject_1$
|
|
10066
|
+
var templateObject_1$1m, templateObject_2$W, templateObject_3$M, templateObject_4$y;
|
|
10065
10067
|
|
|
10066
10068
|
var propTypes = {exports: {}};
|
|
10067
10069
|
|
|
@@ -11654,13 +11656,13 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11654
11656
|
afterZoomOut: PropTypes.func
|
|
11655
11657
|
} : {};
|
|
11656
11658
|
|
|
11657
|
-
var Container$
|
|
11659
|
+
var Container$Y = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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) {
|
|
11658
11660
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11659
11661
|
return borderRadiusVariant &&
|
|
11660
11662
|
"\n border-radius: 40px;\n ";
|
|
11661
11663
|
});
|
|
11662
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11663
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11664
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
11665
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11664
11666
|
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
11667
|
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
11668
|
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"])));
|
|
@@ -11668,14 +11670,14 @@ var Text$7 = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTem
|
|
|
11668
11670
|
var ImageProductWithTags$1 = function (_a) {
|
|
11669
11671
|
var _b, _c;
|
|
11670
11672
|
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;
|
|
11671
|
-
return (jsxs$1(Container$
|
|
11673
|
+
return (jsxs$1(Container$Y, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11672
11674
|
alt: image.alt,
|
|
11673
11675
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11674
11676
|
}, 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));
|
|
11675
11677
|
};
|
|
11676
|
-
var templateObject_1$
|
|
11678
|
+
var templateObject_1$1l, templateObject_2$V, templateObject_3$L, templateObject_4$x, templateObject_5$l, templateObject_6$k, templateObject_7$c;
|
|
11677
11679
|
|
|
11678
|
-
var Container$
|
|
11680
|
+
var Container$X = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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"])));
|
|
11679
11681
|
var ProductGallery = function (_a) {
|
|
11680
11682
|
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;
|
|
11681
11683
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11683,11 +11685,11 @@ var ProductGallery = function (_a) {
|
|
|
11683
11685
|
useEffect(function () {
|
|
11684
11686
|
setSelectedImage(initialValue);
|
|
11685
11687
|
}, [initialValue]);
|
|
11686
|
-
return (jsxs$1(Container$
|
|
11688
|
+
return (jsxs$1(Container$X, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11687
11689
|
setSelectedImage(value);
|
|
11688
11690
|
}, 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));
|
|
11689
11691
|
};
|
|
11690
|
-
var templateObject_1$
|
|
11692
|
+
var templateObject_1$1k;
|
|
11691
11693
|
|
|
11692
11694
|
/* base styles & size variants */
|
|
11693
11695
|
var StarStyles = {
|
|
@@ -11733,8 +11735,8 @@ var StarStyles = {
|
|
|
11733
11735
|
});
|
|
11734
11736
|
},
|
|
11735
11737
|
};
|
|
11736
|
-
var Container$
|
|
11737
|
-
var templateObject_1$
|
|
11738
|
+
var Container$W = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11739
|
+
var templateObject_1$1j;
|
|
11738
11740
|
|
|
11739
11741
|
var StarContainer = newStyled.div(function (_a) {
|
|
11740
11742
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11752,7 +11754,7 @@ var sizes = {
|
|
|
11752
11754
|
var StarList = function (_a) {
|
|
11753
11755
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
11754
11756
|
var theme = useTheme();
|
|
11755
|
-
return (jsx$1(Container$
|
|
11757
|
+
return (jsx$1(Container$W, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11756
11758
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11757
11759
|
}) }, void 0));
|
|
11758
11760
|
};
|
|
@@ -11796,8 +11798,8 @@ var LabelStyles = {
|
|
|
11796
11798
|
});
|
|
11797
11799
|
},
|
|
11798
11800
|
};
|
|
11799
|
-
var Container$
|
|
11800
|
-
var templateObject_1$
|
|
11801
|
+
var Container$V = newStyled.a(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11802
|
+
var templateObject_1$1i;
|
|
11801
11803
|
|
|
11802
11804
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11803
11805
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11837,11 +11839,11 @@ var Rating = function (_a) {
|
|
|
11837
11839
|
href: reviewsContainerId,
|
|
11838
11840
|
}
|
|
11839
11841
|
: {};
|
|
11840
|
-
return (jsxs$1(Container$
|
|
11842
|
+
return (jsxs$1(Container$V, __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));
|
|
11841
11843
|
};
|
|
11842
11844
|
|
|
11843
|
-
var Container$
|
|
11844
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11845
|
+
var Container$U = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
11846
|
+
var P$2 = newStyled.p(templateObject_2$U || (templateObject_2$U = __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; });
|
|
11845
11847
|
var textButtonStyles = function (theme) { return ({
|
|
11846
11848
|
border: 'none',
|
|
11847
11849
|
background: 'transparent',
|
|
@@ -11854,9 +11856,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11854
11856
|
var FitPredictor = function (_a) {
|
|
11855
11857
|
var onClick = _a.onClick;
|
|
11856
11858
|
var theme = useTheme();
|
|
11857
|
-
return (jsxs(Container$
|
|
11859
|
+
return (jsxs(Container$U, __assign$1({ theme: theme }, { children: [jsx(Container$U, { 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));
|
|
11858
11860
|
};
|
|
11859
|
-
var templateObject_1$
|
|
11861
|
+
var templateObject_1$1h, templateObject_2$U;
|
|
11860
11862
|
|
|
11861
11863
|
var P$1 = newStyled.p(function (_a) {
|
|
11862
11864
|
var color = _a.color;
|
|
@@ -11870,7 +11872,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
11870
11872
|
margin: '0.938rem 4.188rem',
|
|
11871
11873
|
});
|
|
11872
11874
|
});
|
|
11873
|
-
var Bar$2 = newStyled.div(templateObject_1$
|
|
11875
|
+
var Bar$2 = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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) {
|
|
11874
11876
|
var height = _a.height;
|
|
11875
11877
|
return height || '0.5rem';
|
|
11876
11878
|
}, function (_a) {
|
|
@@ -11899,7 +11901,7 @@ var Background$1 = newStyled.div(function (_a) {
|
|
|
11899
11901
|
position: 'absolute',
|
|
11900
11902
|
});
|
|
11901
11903
|
});
|
|
11902
|
-
var Container$
|
|
11904
|
+
var Container$T = newStyled.div(function (_a) {
|
|
11903
11905
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
11904
11906
|
return ({
|
|
11905
11907
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11913,11 +11915,11 @@ var getBarWithBasedOnPercent$1 = function (percent) {
|
|
|
11913
11915
|
var ProgressBar = function (_a) {
|
|
11914
11916
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
11915
11917
|
var theme = useTheme();
|
|
11916
|
-
return (jsxs$1(Container$
|
|
11918
|
+
return (jsxs$1(Container$T, __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));
|
|
11917
11919
|
};
|
|
11918
|
-
var templateObject_1$
|
|
11920
|
+
var templateObject_1$1g;
|
|
11919
11921
|
|
|
11920
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
11922
|
+
var Bar$1 = 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 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) {
|
|
11921
11923
|
var height = _a.height;
|
|
11922
11924
|
return height || '0.5rem';
|
|
11923
11925
|
}, function (_a) {
|
|
@@ -11956,7 +11958,7 @@ var BarContainer$1 = newStyled.div({
|
|
|
11956
11958
|
padding: '0 16px',
|
|
11957
11959
|
position: 'relative',
|
|
11958
11960
|
});
|
|
11959
|
-
var Container$
|
|
11961
|
+
var Container$S = newStyled.div(function (_a) {
|
|
11960
11962
|
var backgroundColor = _a.backgroundColor;
|
|
11961
11963
|
return ({
|
|
11962
11964
|
width: '475px',
|
|
@@ -11987,9 +11989,9 @@ var MotivatorProgressBar = function (_a) {
|
|
|
11987
11989
|
var theme = useTheme();
|
|
11988
11990
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
11989
11991
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
11990
|
-
return (jsxs$1(Container$
|
|
11992
|
+
return (jsxs$1(Container$S, __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));
|
|
11991
11993
|
};
|
|
11992
|
-
var templateObject_1$
|
|
11994
|
+
var templateObject_1$1f;
|
|
11993
11995
|
|
|
11994
11996
|
var getStylesBySize$4 = function (size) {
|
|
11995
11997
|
switch (size) {
|
|
@@ -12010,7 +12012,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
12010
12012
|
};
|
|
12011
12013
|
}
|
|
12012
12014
|
};
|
|
12013
|
-
var Container$
|
|
12015
|
+
var Container$R = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
12014
12016
|
var backgroundColor = _a.backgroundColor;
|
|
12015
12017
|
return backgroundColor;
|
|
12016
12018
|
}, function (_a) {
|
|
@@ -12038,9 +12040,9 @@ var Container$Q = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __
|
|
|
12038
12040
|
var IconButton = function (_a) {
|
|
12039
12041
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
12040
12042
|
var theme = useTheme();
|
|
12041
|
-
return (jsx$1(Container$
|
|
12043
|
+
return (jsx$1(Container$R, __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));
|
|
12042
12044
|
};
|
|
12043
|
-
var templateObject_1$
|
|
12045
|
+
var templateObject_1$1e;
|
|
12044
12046
|
|
|
12045
12047
|
var TooltipArrow = function (_a) {
|
|
12046
12048
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -12120,7 +12122,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
12120
12122
|
}
|
|
12121
12123
|
};
|
|
12122
12124
|
|
|
12123
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
12125
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
12124
12126
|
var position = _a.position;
|
|
12125
12127
|
return getWrapperFlexDirection(position);
|
|
12126
12128
|
});
|
|
@@ -12145,14 +12147,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
12145
12147
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
12146
12148
|
return actual === expected ? margin : '0';
|
|
12147
12149
|
};
|
|
12148
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
12150
|
+
var ContentWrapper = newStyled.div(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"], ["\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) {
|
|
12149
12151
|
var borderColor = _a.borderColor;
|
|
12150
12152
|
return borderColor;
|
|
12151
12153
|
}, function (_a) {
|
|
12152
12154
|
var backgroundColor = _a.backgroundColor;
|
|
12153
12155
|
return backgroundColor;
|
|
12154
12156
|
});
|
|
12155
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
12157
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$K || (templateObject_3$K = __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) {
|
|
12156
12158
|
var position = _a.position;
|
|
12157
12159
|
return getArrowRotation(position);
|
|
12158
12160
|
}, function (_a) {
|
|
@@ -12172,7 +12174,7 @@ var Title$7 = newStyled.h1(templateObject_6$j || (templateObject_6$j = __makeTem
|
|
|
12172
12174
|
return color;
|
|
12173
12175
|
});
|
|
12174
12176
|
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$
|
|
12177
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$K, templateObject_4$w, templateObject_5$k, templateObject_6$j, templateObject_7$b;
|
|
12176
12178
|
|
|
12177
12179
|
var Tooltip = function (_a) {
|
|
12178
12180
|
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;
|
|
@@ -12259,7 +12261,7 @@ var AccordionDetailsStyles = {
|
|
|
12259
12261
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
12260
12262
|
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)]; });
|
|
12261
12263
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
12262
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
12264
|
+
var StyledContent = newStyled.button(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
12263
12265
|
var Accordion$1 = function (_a) {
|
|
12264
12266
|
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;
|
|
12265
12267
|
var theme = useTheme();
|
|
@@ -12271,7 +12273,7 @@ var Accordion$1 = function (_a) {
|
|
|
12271
12273
|
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));
|
|
12272
12274
|
} }), void 0));
|
|
12273
12275
|
};
|
|
12274
|
-
var templateObject_1$
|
|
12276
|
+
var templateObject_1$1c;
|
|
12275
12277
|
|
|
12276
12278
|
/* base styles & size variants */
|
|
12277
12279
|
var CustomRadioStyles$2 = {
|
|
@@ -12340,9 +12342,9 @@ var ContainerStyles$2 = {
|
|
|
12340
12342
|
},
|
|
12341
12343
|
};
|
|
12342
12344
|
|
|
12343
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
12344
|
-
var Container$
|
|
12345
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
12345
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12346
|
+
var Container$Q = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
12347
|
+
var Input$4 = newStyled.input(templateObject_2$S || (templateObject_2$S = __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) {
|
|
12346
12348
|
var disabled = _a.disabled;
|
|
12347
12349
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12348
12350
|
});
|
|
@@ -12350,7 +12352,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
12350
12352
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12351
12353
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
12352
12354
|
]; });
|
|
12353
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
12355
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
12354
12356
|
var RadioPrimary = function (_a) {
|
|
12355
12357
|
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;
|
|
12356
12358
|
var theme = useTheme();
|
|
@@ -12358,9 +12360,9 @@ var RadioPrimary = function (_a) {
|
|
|
12358
12360
|
var value = event.currentTarget.value;
|
|
12359
12361
|
onChange({ value: value, label: label });
|
|
12360
12362
|
};
|
|
12361
|
-
return (jsxs$1(Wrapper$6, { children: [jsxs$1(Container$
|
|
12363
|
+
return (jsxs$1(Wrapper$6, { children: [jsxs$1(Container$Q, __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));
|
|
12362
12364
|
};
|
|
12363
|
-
var templateObject_1$
|
|
12365
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$J;
|
|
12364
12366
|
|
|
12365
12367
|
/* base styles & size variants */
|
|
12366
12368
|
var CustomRadioStyles$1 = {
|
|
@@ -12425,9 +12427,9 @@ var ContainerStyles$1 = {
|
|
|
12425
12427
|
},
|
|
12426
12428
|
};
|
|
12427
12429
|
|
|
12428
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
12429
|
-
var Container$
|
|
12430
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
12430
|
+
var Wrapper$5 = 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"])));
|
|
12431
|
+
var Container$P = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
12432
|
+
var Input$3 = 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) {
|
|
12431
12433
|
var disabled = _a.disabled;
|
|
12432
12434
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12433
12435
|
});
|
|
@@ -12435,7 +12437,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
12435
12437
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled),
|
|
12436
12438
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
12437
12439
|
]; });
|
|
12438
|
-
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$
|
|
12440
|
+
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$I || (templateObject_3$I = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12439
12441
|
var theme = _a.theme;
|
|
12440
12442
|
return theme.component.radio.textSize;
|
|
12441
12443
|
}, function (_a) {
|
|
@@ -12449,9 +12451,9 @@ var RadioInput = function (_a) {
|
|
|
12449
12451
|
var value = event.currentTarget.value;
|
|
12450
12452
|
onChange({ value: value, label: label });
|
|
12451
12453
|
};
|
|
12452
|
-
return (jsxs$1(Wrapper$5, { children: [jsxs$1(Container$
|
|
12454
|
+
return (jsxs$1(Wrapper$5, { children: [jsxs$1(Container$P, __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));
|
|
12453
12455
|
};
|
|
12454
|
-
var templateObject_1$
|
|
12456
|
+
var templateObject_1$1a, templateObject_2$R, templateObject_3$I;
|
|
12455
12457
|
|
|
12456
12458
|
var RadioGroupInput = function (_a) {
|
|
12457
12459
|
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;
|
|
@@ -12530,9 +12532,9 @@ var ContainerStyles = {
|
|
|
12530
12532
|
},
|
|
12531
12533
|
};
|
|
12532
12534
|
|
|
12533
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
12534
|
-
var Container$
|
|
12535
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
12535
|
+
var Wrapper$4 = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
12536
|
+
var Container$O = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
12537
|
+
var Input$2 = 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) {
|
|
12536
12538
|
var disabled = _a.disabled;
|
|
12537
12539
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12538
12540
|
});
|
|
@@ -12540,7 +12542,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
12540
12542
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12541
12543
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
12542
12544
|
]; });
|
|
12543
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
12545
|
+
var StyledLabel$1 = 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) {
|
|
12544
12546
|
var theme = _a.theme;
|
|
12545
12547
|
return theme.component.radio.textSize;
|
|
12546
12548
|
}, function (_a) {
|
|
@@ -12554,9 +12556,9 @@ var ClubRadioInput = function (_a) {
|
|
|
12554
12556
|
var value = event.currentTarget.value;
|
|
12555
12557
|
onChange({ value: value, label: label });
|
|
12556
12558
|
};
|
|
12557
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
12559
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$O, __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));
|
|
12558
12560
|
};
|
|
12559
|
-
var templateObject_1$
|
|
12561
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$H;
|
|
12560
12562
|
|
|
12561
12563
|
var ClubRadioGroupInput = function (_a) {
|
|
12562
12564
|
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;
|
|
@@ -12570,37 +12572,37 @@ var ClubRadioGroupInput = function (_a) {
|
|
|
12570
12572
|
}) }), void 0));
|
|
12571
12573
|
};
|
|
12572
12574
|
|
|
12573
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
12574
|
-
var Container$
|
|
12575
|
+
var Wrapper$3 = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
12576
|
+
var Container$N = newStyled.div(templateObject_2$P || (templateObject_2$P = __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"])));
|
|
12575
12577
|
var Minimalistic = function (_a) {
|
|
12576
12578
|
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;
|
|
12577
12579
|
var theme = useTheme();
|
|
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$
|
|
12580
|
+
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$N, __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$N, __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));
|
|
12579
12581
|
};
|
|
12580
|
-
var templateObject_1$
|
|
12582
|
+
var templateObject_1$18, templateObject_2$P;
|
|
12581
12583
|
|
|
12582
|
-
var Container$
|
|
12583
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
12584
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
12584
|
+
var Container$M = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
12585
|
+
var Title$6 = newStyled.h1(templateObject_2$O || (templateObject_2$O = __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; });
|
|
12586
|
+
var Details$1 = newStyled.span(templateObject_3$G || (templateObject_3$G = __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
12587
|
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"])));
|
|
12586
12588
|
var Simple = function (_a) {
|
|
12587
12589
|
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;
|
|
12588
12590
|
var theme = useTheme();
|
|
12589
|
-
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
12591
|
+
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$M, { 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));
|
|
12590
12592
|
};
|
|
12591
|
-
var templateObject_1$
|
|
12593
|
+
var templateObject_1$17, templateObject_2$O, templateObject_3$G, templateObject_4$v;
|
|
12592
12594
|
|
|
12593
12595
|
var Bundle = {
|
|
12594
12596
|
Minimalistic: Minimalistic,
|
|
12595
12597
|
Simple: Simple,
|
|
12596
12598
|
};
|
|
12597
12599
|
|
|
12598
|
-
var Container$
|
|
12600
|
+
var Container$L = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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"])));
|
|
12599
12601
|
var Tag$2 = function (_a) {
|
|
12600
12602
|
var text = _a.text, className = _a.className;
|
|
12601
|
-
return jsx$1(Container$
|
|
12603
|
+
return jsx$1(Container$L, __assign$1({ className: className }, { children: text }), void 0);
|
|
12602
12604
|
};
|
|
12603
|
-
var templateObject_1$
|
|
12605
|
+
var templateObject_1$16;
|
|
12604
12606
|
|
|
12605
12607
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
12606
12608
|
switch (size) {
|
|
@@ -12703,11 +12705,11 @@ var Timer = function (_a) {
|
|
|
12703
12705
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12704
12706
|
};
|
|
12705
12707
|
|
|
12706
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
12708
|
+
var Label$2 = newStyled.span(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
12707
12709
|
var color = _a.color;
|
|
12708
12710
|
return color;
|
|
12709
12711
|
});
|
|
12710
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12712
|
+
var MandatoryIcon = newStyled.span(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
12711
12713
|
var color = _a.color;
|
|
12712
12714
|
return color;
|
|
12713
12715
|
});
|
|
@@ -12716,7 +12718,7 @@ var InputLabel = function (_a) {
|
|
|
12716
12718
|
var theme = useTheme();
|
|
12717
12719
|
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));
|
|
12718
12720
|
};
|
|
12719
|
-
var templateObject_1$
|
|
12721
|
+
var templateObject_1$15, templateObject_2$N;
|
|
12720
12722
|
|
|
12721
12723
|
var containerByStatus = function (theme, status) {
|
|
12722
12724
|
if (status === InputValidationType.Valid)
|
|
@@ -12725,12 +12727,12 @@ var containerByStatus = function (theme, status) {
|
|
|
12725
12727
|
return theme.colors.semantic.urgent.color;
|
|
12726
12728
|
return '';
|
|
12727
12729
|
};
|
|
12728
|
-
var Container$
|
|
12730
|
+
var Container$K = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12729
12731
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12730
12732
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12731
12733
|
});
|
|
12732
|
-
var StyledLabel = newStyled.label(templateObject_2$
|
|
12733
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
12734
|
+
var StyledLabel = newStyled.label(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
12735
|
+
var StyledInput = newStyled.input(templateObject_3$F || (templateObject_3$F = __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) {
|
|
12734
12736
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12735
12737
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12736
12738
|
}, function (_a) {
|
|
@@ -12803,7 +12805,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$j || (templateObject_5
|
|
|
12803
12805
|
return theme.component.input.lineHeight;
|
|
12804
12806
|
});
|
|
12805
12807
|
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$
|
|
12808
|
+
var templateObject_1$14, templateObject_2$M, templateObject_3$F, templateObject_4$u, templateObject_5$j, templateObject_6$i;
|
|
12807
12809
|
|
|
12808
12810
|
var BaseInput = function (_a) {
|
|
12809
12811
|
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"]);
|
|
@@ -12826,7 +12828,7 @@ var BaseInput = function (_a) {
|
|
|
12826
12828
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12827
12829
|
}, [status]);
|
|
12828
12830
|
var hasValue = Boolean(value);
|
|
12829
|
-
return (jsxs$1(Container$
|
|
12831
|
+
return (jsxs$1(Container$K, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12830
12832
|
onChange(event.target.value, event);
|
|
12831
12833
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
12832
12834
|
onChange('', { target: { value: '' } });
|
|
@@ -12847,11 +12849,11 @@ var Button$3 = function (_a) {
|
|
|
12847
12849
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12848
12850
|
};
|
|
12849
12851
|
|
|
12850
|
-
var Container$
|
|
12852
|
+
var Container$J = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
12851
12853
|
var theme = _a.theme;
|
|
12852
12854
|
return theme.component.inputCustom.input.borderRadius;
|
|
12853
12855
|
});
|
|
12854
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12856
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$L || (templateObject_2$L = __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) {
|
|
12855
12857
|
var theme = _a.theme;
|
|
12856
12858
|
return theme.component.inputCustom.button.borderRadius;
|
|
12857
12859
|
});
|
|
@@ -12864,23 +12866,23 @@ var Custom = function (_a) {
|
|
|
12864
12866
|
text: text,
|
|
12865
12867
|
disabled: rest.disabled,
|
|
12866
12868
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12867
|
-
return (jsx$1(Container$
|
|
12869
|
+
return (jsx$1(Container$J, __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));
|
|
12868
12870
|
};
|
|
12869
|
-
var templateObject_1$
|
|
12871
|
+
var templateObject_1$13, templateObject_2$L;
|
|
12870
12872
|
|
|
12871
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12873
|
+
var SuccessContainer = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12872
12874
|
var size = _a.size;
|
|
12873
12875
|
return (size === 'small' ? '36px' : '');
|
|
12874
12876
|
});
|
|
12875
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12876
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12877
|
+
var SuccessMessage = newStyled.div(templateObject_2$K || (templateObject_2$K = __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"])));
|
|
12878
|
+
var SuccessText = newStyled.span(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
12877
12879
|
var Success = function (_a) {
|
|
12878
12880
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12879
12881
|
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));
|
|
12880
12882
|
};
|
|
12881
|
-
var templateObject_1$
|
|
12883
|
+
var templateObject_1$12, templateObject_2$K, templateObject_3$E;
|
|
12882
12884
|
|
|
12883
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12885
|
+
var ButtonContainer = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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) {
|
|
12884
12886
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12885
12887
|
return status === InputValidationType.Empty &&
|
|
12886
12888
|
type === 'primary' &&
|
|
@@ -12897,21 +12899,21 @@ var BasePlusButton = function (_a) {
|
|
|
12897
12899
|
}
|
|
12898
12900
|
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));
|
|
12899
12901
|
};
|
|
12900
|
-
var templateObject_1$
|
|
12902
|
+
var templateObject_1$11;
|
|
12901
12903
|
|
|
12902
|
-
var Container$
|
|
12903
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12904
|
+
var Container$I = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12905
|
+
var IconContainer$4 = newStyled.div(templateObject_2$J || (templateObject_2$J = __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; });
|
|
12904
12906
|
var BasePlusIcon = function (_a) {
|
|
12905
12907
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12906
12908
|
var theme = useTheme();
|
|
12907
12909
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12908
|
-
return (jsx$1(Container$
|
|
12910
|
+
return (jsx$1(Container$I, { children: jsx$1(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$4, __assign$1({ color: status === InputValidationType.Valid
|
|
12909
12911
|
? theme.colors.shades['700'].color
|
|
12910
12912
|
: status === InputValidationType.Error
|
|
12911
12913
|
? theme.colors.semantic.urgent.color
|
|
12912
12914
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12913
12915
|
};
|
|
12914
|
-
var templateObject_1
|
|
12916
|
+
var templateObject_1$10, templateObject_2$J;
|
|
12915
12917
|
|
|
12916
12918
|
var Input$1 = {
|
|
12917
12919
|
Simple: BaseInput,
|
|
@@ -12920,7 +12922,7 @@ var Input$1 = {
|
|
|
12920
12922
|
SimplePlusIcon: BasePlusIcon,
|
|
12921
12923
|
};
|
|
12922
12924
|
|
|
12923
|
-
var Container$
|
|
12925
|
+
var Container$H = 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) {
|
|
12924
12926
|
var width = _a.width;
|
|
12925
12927
|
return width;
|
|
12926
12928
|
}, function (_a) {
|
|
@@ -12936,11 +12938,11 @@ var Container$G = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __ma
|
|
|
12936
12938
|
var PaymentMethod = function (_a) {
|
|
12937
12939
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12938
12940
|
var theme = useTheme();
|
|
12939
|
-
return (jsx$1(Container$
|
|
12941
|
+
return (jsx$1(Container$H, __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));
|
|
12940
12942
|
};
|
|
12941
|
-
var templateObject_1
|
|
12943
|
+
var templateObject_1$$;
|
|
12942
12944
|
|
|
12943
|
-
var Text$6 = newStyled.h3(templateObject_1$
|
|
12945
|
+
var Text$6 = newStyled.h3(templateObject_1$_ || (templateObject_1$_ = __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) {
|
|
12944
12946
|
var backgroundColor = _a.backgroundColor;
|
|
12945
12947
|
return backgroundColor;
|
|
12946
12948
|
}, function (_a) {
|
|
@@ -12952,11 +12954,11 @@ var OfferBanner = function (_a) {
|
|
|
12952
12954
|
var theme = useTheme();
|
|
12953
12955
|
return (jsx$1(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12954
12956
|
};
|
|
12955
|
-
var templateObject_1$
|
|
12957
|
+
var templateObject_1$_;
|
|
12956
12958
|
|
|
12957
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12958
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12959
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12959
|
+
var Wrapper$2 = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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"])));
|
|
12960
|
+
var GrandTotal = newStyled.h1(templateObject_2$I || (templateObject_2$I = __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; });
|
|
12961
|
+
var Currency = newStyled.span(templateObject_3$D || (templateObject_3$D = __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) {
|
|
12960
12962
|
var theme = _a.theme;
|
|
12961
12963
|
return theme.component.total.basicTotal.currency.color;
|
|
12962
12964
|
}, function (_a) {
|
|
@@ -12969,7 +12971,7 @@ var Currency = newStyled.span(templateObject_3$C || (templateObject_3$C = __make
|
|
|
12969
12971
|
var theme = _a.theme;
|
|
12970
12972
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12971
12973
|
});
|
|
12972
|
-
var Container$
|
|
12974
|
+
var Container$G = 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
12975
|
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
12976
|
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) {
|
|
12975
12977
|
var theme = _a.theme;
|
|
@@ -12978,16 +12980,16 @@ var DiscountAmount = newStyled.h3(templateObject_6$h || (templateObject_6$h = __
|
|
|
12978
12980
|
var Total = function (_a) {
|
|
12979
12981
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12980
12982
|
var theme = useTheme();
|
|
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$
|
|
12983
|
+
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$G, __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));
|
|
12982
12984
|
};
|
|
12983
|
-
var templateObject_1$
|
|
12985
|
+
var templateObject_1$Z, templateObject_2$I, templateObject_3$D, templateObject_4$t, templateObject_5$i, templateObject_6$h;
|
|
12984
12986
|
|
|
12985
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12987
|
+
var Wrapper$1 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12986
12988
|
var color = _a.color;
|
|
12987
12989
|
return color;
|
|
12988
12990
|
});
|
|
12989
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12990
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12991
|
+
var ItemContainer = newStyled.div(templateObject_2$H || (templateObject_2$H = __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"])));
|
|
12992
|
+
var Item$2 = newStyled.h4(templateObject_3$C || (templateObject_3$C = __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) {
|
|
12991
12993
|
var theme = _a.theme;
|
|
12992
12994
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12993
12995
|
}, function (_a) {
|
|
@@ -13007,30 +13009,30 @@ var Subtotal = function (_a) {
|
|
|
13007
13009
|
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));
|
|
13008
13010
|
})] }), void 0));
|
|
13009
13011
|
};
|
|
13010
|
-
var templateObject_1$
|
|
13012
|
+
var templateObject_1$Y, templateObject_2$H, templateObject_3$C, templateObject_4$s;
|
|
13011
13013
|
|
|
13012
13014
|
var Totals = {
|
|
13013
13015
|
Total: Total,
|
|
13014
13016
|
Subtotal: Subtotal,
|
|
13015
13017
|
};
|
|
13016
13018
|
|
|
13017
|
-
var Container$
|
|
13018
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
13019
|
-
var Text$5 = newStyled.p(templateObject_3$
|
|
13019
|
+
var Container$F = newStyled.div(templateObject_1$X || (templateObject_1$X = __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; });
|
|
13020
|
+
var IconContainer$3 = newStyled.div(templateObject_2$G || (templateObject_2$G = __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"])));
|
|
13021
|
+
var Text$5 = newStyled.p(templateObject_3$B || (templateObject_3$B = __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
13022
|
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; });
|
|
13021
13023
|
var Note = function (_a) {
|
|
13022
13024
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
13023
13025
|
var theme = useTheme();
|
|
13024
|
-
return (jsxs$1(Container$
|
|
13026
|
+
return (jsxs$1(Container$F, __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));
|
|
13025
13027
|
};
|
|
13026
|
-
var templateObject_1$
|
|
13028
|
+
var templateObject_1$X, templateObject_2$G, templateObject_3$B, templateObject_4$r;
|
|
13027
13029
|
|
|
13028
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
13030
|
+
var Title$5 = newStyled.h1(templateObject_1$W || (templateObject_1$W = __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) {
|
|
13029
13031
|
var theme = _a.theme;
|
|
13030
13032
|
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 ");
|
|
13031
13033
|
});
|
|
13032
|
-
var Line = newStyled.div(templateObject_2$
|
|
13033
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
13034
|
+
var Line = newStyled.div(templateObject_2$F || (templateObject_2$F = __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; });
|
|
13035
|
+
var Row$1 = newStyled.div(templateObject_3$A || (templateObject_3$A = __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({
|
|
13034
13036
|
flexDirection: ['column', 'row'],
|
|
13035
13037
|
}));
|
|
13036
13038
|
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({
|
|
@@ -13068,44 +13070,44 @@ var DeliveryDetails = function (_a) {
|
|
|
13068
13070
|
var theme = useTheme();
|
|
13069
13071
|
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));
|
|
13070
13072
|
};
|
|
13071
|
-
var templateObject_1$
|
|
13073
|
+
var templateObject_1$W, templateObject_2$F, templateObject_3$A, templateObject_4$q, templateObject_5$h, templateObject_6$g, templateObject_7$a, templateObject_8$8;
|
|
13072
13074
|
|
|
13073
|
-
var Container$
|
|
13074
|
-
var Text$4 = newStyled.p(templateObject_2$
|
|
13075
|
+
var Container$E = newStyled.div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
13076
|
+
var Text$4 = newStyled.p(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
13075
13077
|
var ScrollToTop = function (_a) {
|
|
13076
13078
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
13077
13079
|
var theme = useTheme();
|
|
13078
13080
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
13079
|
-
return (jsxs$1(Container$
|
|
13081
|
+
return (jsxs$1(Container$E, __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));
|
|
13080
13082
|
};
|
|
13081
|
-
var templateObject_1$
|
|
13083
|
+
var templateObject_1$V, templateObject_2$E;
|
|
13082
13084
|
|
|
13083
|
-
var Container$
|
|
13085
|
+
var Container$D = newStyled.div(templateObject_1$U || (templateObject_1$U = __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) {
|
|
13084
13086
|
var theme = _a.theme;
|
|
13085
13087
|
return theme.component.orderBar.backgroundColor;
|
|
13086
13088
|
});
|
|
13087
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
13089
|
+
var H1 = newStyled.h1(templateObject_2$D || (templateObject_2$D = __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; });
|
|
13088
13090
|
var OrderBar = function (_a) {
|
|
13089
13091
|
var message = _a.message, color = _a.color;
|
|
13090
13092
|
var theme = useTheme();
|
|
13091
|
-
return (jsxs$1(Container$
|
|
13093
|
+
return (jsxs$1(Container$D, __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));
|
|
13092
13094
|
};
|
|
13093
|
-
var templateObject_1$
|
|
13095
|
+
var templateObject_1$U, templateObject_2$D;
|
|
13094
13096
|
|
|
13095
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
13096
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
13097
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
13097
|
+
var TableElement$1 = newStyled.table(templateObject_1$T || (templateObject_1$T = __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; });
|
|
13098
|
+
var TableCell$1 = newStyled.td(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 8px;\n text-align: center;\n line-height: 20px;\n height: 52px;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
13099
|
+
var TableHead$1 = newStyled.th(templateObject_3$z || (templateObject_3$z = __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
13100
|
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; });
|
|
13099
13101
|
var SizeTable = function (_a) {
|
|
13100
13102
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
13101
13103
|
var theme = useTheme();
|
|
13102
13104
|
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));
|
|
13103
13105
|
};
|
|
13104
|
-
var templateObject_1$
|
|
13106
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$z, templateObject_4$p;
|
|
13105
13107
|
|
|
13106
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
13107
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
13108
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
13108
|
+
var TableElement = 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; });
|
|
13109
|
+
var TableCell = newStyled.td(templateObject_2$B || (templateObject_2$B = __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; });
|
|
13110
|
+
var TableHead = 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 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
13111
|
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; });
|
|
13110
13112
|
var SizeChartTable = function (_a) {
|
|
13111
13113
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
@@ -13139,19 +13141,19 @@ var SizeChartTable = function (_a) {
|
|
|
13139
13141
|
backgroundColor: getCellColor(index, cell),
|
|
13140
13142
|
}, 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));
|
|
13141
13143
|
};
|
|
13142
|
-
var templateObject_1$
|
|
13144
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$y, templateObject_4$o;
|
|
13143
13145
|
|
|
13144
|
-
var Img = newStyled.img(templateObject_1$
|
|
13146
|
+
var Img = newStyled.img(templateObject_1$R || (templateObject_1$R = __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; });
|
|
13145
13147
|
var Image = function (_a) {
|
|
13146
13148
|
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;
|
|
13147
13149
|
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));
|
|
13148
13150
|
};
|
|
13149
|
-
var templateObject_1$
|
|
13151
|
+
var templateObject_1$R;
|
|
13150
13152
|
|
|
13151
|
-
var Container$
|
|
13153
|
+
var Container$C = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __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"])));
|
|
13152
13154
|
var IMAGE_WIDTH = '63px';
|
|
13153
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13154
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
13155
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$A || (templateObject_2$A = __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);
|
|
13156
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$x || (templateObject_3$x = __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({
|
|
13155
13157
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
13156
13158
|
}), IMAGE_WIDTH);
|
|
13157
13159
|
var Title$4 = newStyled.h2(function (_a) {
|
|
@@ -13188,9 +13190,9 @@ var StyledSpan = newStyled.span(templateObject_6$f || (templateObject_6$f = __ma
|
|
|
13188
13190
|
var SimpleOrderItem = function (_a) {
|
|
13189
13191
|
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;
|
|
13190
13192
|
var theme = useTheme();
|
|
13191
|
-
return (jsxs$1(Container$
|
|
13193
|
+
return (jsxs$1(Container$C, __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));
|
|
13192
13194
|
};
|
|
13193
|
-
var templateObject_1$
|
|
13195
|
+
var templateObject_1$Q, templateObject_2$A, templateObject_3$x, templateObject_4$n, templateObject_5$g, templateObject_6$f;
|
|
13194
13196
|
|
|
13195
13197
|
function formatDate(date) {
|
|
13196
13198
|
var day = date.getDate();
|
|
@@ -13201,9 +13203,9 @@ function formatDate(date) {
|
|
|
13201
13203
|
|
|
13202
13204
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
13203
13205
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
13204
|
-
var Container$
|
|
13205
|
-
var Heading = newStyled.div(templateObject_2$
|
|
13206
|
-
var Content$2 = newStyled.div(templateObject_3$
|
|
13206
|
+
var Container$B = newStyled.div(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
13207
|
+
var Heading = newStyled.div(templateObject_2$z || (templateObject_2$z = __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"])));
|
|
13208
|
+
var Content$2 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
13207
13209
|
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
13210
|
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
13211
|
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"])));
|
|
@@ -13243,7 +13245,7 @@ var Review$1 = function (_a) {
|
|
|
13243
13245
|
});
|
|
13244
13246
|
};
|
|
13245
13247
|
}, [randomId]);
|
|
13246
|
-
return (jsxs$1(Container$
|
|
13248
|
+
return (jsxs$1(Container$B, { children: [jsxs$1(Heading, { children: [jsx$1(ReviewerName$1, { children: reviewerName }, void 0), jsx$1(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content$2, __assign$1({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer$1, { children: [jsx$1(ReviewTitle$1, { children: title }, void 0), jsx$1(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
13247
13249
|
__html: showMoreMobile
|
|
13248
13250
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
13249
13251
|
: description,
|
|
@@ -13253,15 +13255,15 @@ var Review$1 = function (_a) {
|
|
|
13253
13255
|
: description,
|
|
13254
13256
|
} }, 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));
|
|
13255
13257
|
};
|
|
13256
|
-
var templateObject_1$
|
|
13258
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$w, 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;
|
|
13257
13259
|
|
|
13258
|
-
var List = newStyled.ul(templateObject_1$
|
|
13259
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
13260
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
13260
|
+
var List = newStyled.ul(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
13261
|
+
var Item$1 = newStyled.li(templateObject_2$y || (templateObject_2$y = __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"])));
|
|
13262
|
+
var DropdownWrapper = newStyled.div(templateObject_3$v || (templateObject_3$v = __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
13263
|
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
13264
|
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
13265
|
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$
|
|
13266
|
+
var templateObject_1$O, templateObject_2$y, templateObject_3$v, templateObject_4$l, templateObject_5$e, templateObject_6$d;
|
|
13265
13267
|
|
|
13266
13268
|
var DropdownListIcons = function (_a) {
|
|
13267
13269
|
var items = _a.items;
|
|
@@ -13274,7 +13276,7 @@ var Dropdown = function (_a) {
|
|
|
13274
13276
|
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));
|
|
13275
13277
|
};
|
|
13276
13278
|
|
|
13277
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
13279
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$N || (templateObject_1$N = __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; });
|
|
13278
13280
|
var AmazonButton = function (_a) {
|
|
13279
13281
|
var onClick = _a.onClick;
|
|
13280
13282
|
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));
|
|
@@ -13283,11 +13285,11 @@ var PaypalButton = function (_a) {
|
|
|
13283
13285
|
var onClick = _a.onClick;
|
|
13284
13286
|
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));
|
|
13285
13287
|
};
|
|
13286
|
-
var templateObject_1$
|
|
13288
|
+
var templateObject_1$N;
|
|
13287
13289
|
|
|
13288
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
13289
|
-
var Col = newStyled.div(templateObject_2$
|
|
13290
|
-
var Row = newStyled.div(templateObject_3$
|
|
13290
|
+
var Wrapper = newStyled.div(templateObject_1$M || (templateObject_1$M = __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'); });
|
|
13291
|
+
var Col = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
13292
|
+
var Row = newStyled.div(templateObject_3$u || (templateObject_3$u = __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) {
|
|
13291
13293
|
return props.rightToLeft &&
|
|
13292
13294
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
13293
13295
|
});
|
|
@@ -13299,7 +13301,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
13299
13301
|
var theme = useTheme();
|
|
13300
13302
|
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));
|
|
13301
13303
|
};
|
|
13302
|
-
var templateObject_1$
|
|
13304
|
+
var templateObject_1$M, templateObject_2$x, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c;
|
|
13303
13305
|
|
|
13304
13306
|
var index = /*#__PURE__*/Object.freeze({
|
|
13305
13307
|
__proto__: null,
|
|
@@ -13312,7 +13314,7 @@ var Spacing = function (_a) {
|
|
|
13312
13314
|
return jsx$1("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
13313
13315
|
};
|
|
13314
13316
|
|
|
13315
|
-
var Container$
|
|
13317
|
+
var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __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) {
|
|
13316
13318
|
var height = _a.height;
|
|
13317
13319
|
return (height ? height : '1.5em');
|
|
13318
13320
|
}, function (_a) {
|
|
@@ -13337,16 +13339,16 @@ var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13337
13339
|
var SkeletonBox = function (_a) {
|
|
13338
13340
|
var width = _a.width, height = _a.height;
|
|
13339
13341
|
var theme = useTheme();
|
|
13340
|
-
return jsx$1(Container$
|
|
13342
|
+
return jsx$1(Container$A, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
13341
13343
|
};
|
|
13342
|
-
var templateObject_1$
|
|
13344
|
+
var templateObject_1$L;
|
|
13343
13345
|
|
|
13344
|
-
var Container$
|
|
13346
|
+
var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
13345
13347
|
var displayBNPL = _a.displayBNPL;
|
|
13346
13348
|
return (displayBNPL ? 'flex' : 'none');
|
|
13347
13349
|
});
|
|
13348
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
13349
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
13350
|
+
var TextContainer$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __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"])));
|
|
13351
|
+
var IconWrapper$1 = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: inline;\n top: -1px;\n position: relative;\n"], ["\n display: inline;\n top: -1px;\n position: relative;\n"])));
|
|
13350
13352
|
var BuyNowPayLater = function (_a) {
|
|
13351
13353
|
var _b;
|
|
13352
13354
|
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;
|
|
@@ -13356,13 +13358,13 @@ var BuyNowPayLater = function (_a) {
|
|
|
13356
13358
|
console.error('Icon', iconName, 'not found');
|
|
13357
13359
|
return null;
|
|
13358
13360
|
}
|
|
13359
|
-
return (jsx$1(Container$
|
|
13361
|
+
return (jsx$1(Container$z, __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));
|
|
13360
13362
|
};
|
|
13361
|
-
var templateObject_1$
|
|
13363
|
+
var templateObject_1$K, templateObject_2$w, templateObject_3$t;
|
|
13362
13364
|
|
|
13363
|
-
var Container$
|
|
13364
|
-
var Content$1 = newStyled('div')(templateObject_2$
|
|
13365
|
-
var BarContainer = newStyled('div')(templateObject_3$
|
|
13365
|
+
var Container$y = newStyled('div')(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
13366
|
+
var Content$1 = newStyled('div')(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"], ["\n display: flex;\n align-items: flex-end;\n font-size: 14px;\n font-weight: 600;\n"])));
|
|
13367
|
+
var BarContainer = newStyled('div')(templateObject_3$s || (templateObject_3$s = __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
13368
|
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) {
|
|
13367
13369
|
var index = _a.index;
|
|
13368
13370
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -13372,9 +13374,18 @@ var Bar = newStyled('div')(templateObject_4$j || (templateObject_4$j = __makeTem
|
|
|
13372
13374
|
});
|
|
13373
13375
|
var StrengthBars = function (_a) {
|
|
13374
13376
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
13375
|
-
return (jsxs$1(Container$
|
|
13377
|
+
return (jsxs$1(Container$y, __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));
|
|
13376
13378
|
};
|
|
13377
|
-
var templateObject_1$
|
|
13379
|
+
var templateObject_1$J, templateObject_2$v, templateObject_3$s, templateObject_4$j;
|
|
13380
|
+
|
|
13381
|
+
var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"], ["\n display: inline-flex;\n height: 20px;\n padding: 1px 10px;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n border-radius: 6px;\n background: #882a2b;\n margin-top: 4px;\n margin-bottom: 10px;\n"])));
|
|
13382
|
+
var DollarPart = newStyled.span(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 14px; /* 116.667% */\n"])));
|
|
13383
|
+
var ClubMembersText = newStyled.span(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"], ["\n color: #fff;\n font-family: 'Avenir Next', sans-serif;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 14px; /* 116.667% */\n"])));
|
|
13384
|
+
var ClubPriceLabel = function (_a) {
|
|
13385
|
+
var clubPrice = _a.clubPrice;
|
|
13386
|
+
return (jsxs$1(Container$x, { children: [jsx$1(DollarPart, { children: clubPrice }, void 0), jsx$1(ClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0));
|
|
13387
|
+
};
|
|
13388
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$r;
|
|
13378
13389
|
|
|
13379
13390
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
13380
13391
|
var width = _a.width, height = _a.height;
|
|
@@ -13439,7 +13450,7 @@ var ProductItemMobile = function (_a) {
|
|
|
13439
13450
|
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
13440
13451
|
strength: -1,
|
|
13441
13452
|
description: '',
|
|
13442
|
-
} : _g;
|
|
13453
|
+
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j;
|
|
13443
13454
|
var theme = useTheme();
|
|
13444
13455
|
var styles = getStylesBySize$1(size);
|
|
13445
13456
|
var space = useMemo(function () {
|
|
@@ -13451,10 +13462,15 @@ var ProductItemMobile = function (_a) {
|
|
|
13451
13462
|
_a)[size];
|
|
13452
13463
|
}, [size]);
|
|
13453
13464
|
var PriceLabelDisplay = function () {
|
|
13454
|
-
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount"
|
|
13465
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel ? true : false, finalPriceStyle: showClubPriceLabel
|
|
13466
|
+
? {
|
|
13467
|
+
fontSize: '16px',
|
|
13468
|
+
fontWeight: 700,
|
|
13469
|
+
}
|
|
13470
|
+
: undefined }, void 0));
|
|
13455
13471
|
};
|
|
13456
13472
|
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)); };
|
|
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));
|
|
13473
|
+
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", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$3, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [jsx(PriceLabelDisplay, {}, void 0), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), 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));
|
|
13458
13474
|
};
|
|
13459
13475
|
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
13460
13476
|
|