@trafilea/afrodita-components 5.0.0-beta.296 → 5.0.0-beta.298
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 +248 -235
- package/build/index.esm.js.map +1 -1
- package/build/index.js +248 -235
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4234,7 +4234,7 @@ exports.InputValidationType = void 0;
|
|
|
4234
4234
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4235
4235
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4236
4236
|
|
|
4237
|
-
var Section = newStyled.div(templateObject_1$
|
|
4237
|
+
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) {
|
|
4238
4238
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4239
4239
|
});
|
|
4240
4240
|
var CardHeader = function (_a) {
|
|
@@ -4245,14 +4245,14 @@ var CardFooter = function (_a) {
|
|
|
4245
4245
|
var children = _a.children;
|
|
4246
4246
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4247
4247
|
};
|
|
4248
|
-
var templateObject_1$
|
|
4248
|
+
var templateObject_1$1G;
|
|
4249
4249
|
|
|
4250
|
-
var Body = newStyled.div(templateObject_1$
|
|
4250
|
+
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"])));
|
|
4251
4251
|
var CardBody = function (_a) {
|
|
4252
4252
|
var children = _a.children;
|
|
4253
4253
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4254
4254
|
};
|
|
4255
|
-
var templateObject_1$
|
|
4255
|
+
var templateObject_1$1F;
|
|
4256
4256
|
|
|
4257
4257
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4258
4258
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4397,7 +4397,7 @@ var AssetsProvider = function (_a) {
|
|
|
4397
4397
|
};
|
|
4398
4398
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4399
4399
|
|
|
4400
|
-
var Container$
|
|
4400
|
+
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) {
|
|
4401
4401
|
var flex = _a.flex;
|
|
4402
4402
|
return flex &&
|
|
4403
4403
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4412,14 +4412,14 @@ var Container$14 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = _
|
|
|
4412
4412
|
var Card$2 = function (_a) {
|
|
4413
4413
|
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;
|
|
4414
4414
|
var theme = useTheme();
|
|
4415
|
-
return (jsxRuntime.jsx(Container$
|
|
4415
|
+
return (jsxRuntime.jsx(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));
|
|
4416
4416
|
};
|
|
4417
4417
|
var Card$3 = Object.assign(Card$2, {
|
|
4418
4418
|
Header: CardHeader,
|
|
4419
4419
|
Footer: CardFooter,
|
|
4420
4420
|
Body: CardBody,
|
|
4421
4421
|
});
|
|
4422
|
-
var templateObject_1$
|
|
4422
|
+
var templateObject_1$1E;
|
|
4423
4423
|
|
|
4424
4424
|
var Fragment = jsxRuntime.Fragment;
|
|
4425
4425
|
function jsx(type, props, key) {
|
|
@@ -4565,7 +4565,7 @@ function BaseSelectOption(_a) {
|
|
|
4565
4565
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4566
4566
|
}
|
|
4567
4567
|
|
|
4568
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4568
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4569
4569
|
function BaseSelect(_a) {
|
|
4570
4570
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4571
4571
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4575,7 +4575,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4575
4575
|
Options: BaseSelectOptions,
|
|
4576
4576
|
Option: BaseSelectOption,
|
|
4577
4577
|
});
|
|
4578
|
-
var templateObject_1$
|
|
4578
|
+
var templateObject_1$1D;
|
|
4579
4579
|
|
|
4580
4580
|
var CustomButton = newStyled.button(function (_a) {
|
|
4581
4581
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4632,14 +4632,14 @@ var withLabel = function (Button, label) {
|
|
|
4632
4632
|
};
|
|
4633
4633
|
};
|
|
4634
4634
|
|
|
4635
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4636
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4635
|
+
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; });
|
|
4636
|
+
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"])));
|
|
4637
4637
|
var Error$1 = function (_a) {
|
|
4638
4638
|
var error = _a.error;
|
|
4639
4639
|
var theme = useTheme();
|
|
4640
4640
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4641
4641
|
};
|
|
4642
|
-
var templateObject_1$
|
|
4642
|
+
var templateObject_1$1C, templateObject_2$15;
|
|
4643
4643
|
|
|
4644
4644
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4645
4645
|
var theme = _a.theme;
|
|
@@ -4805,7 +4805,7 @@ var CustomCheckboxStyles = {
|
|
|
4805
4805
|
},
|
|
4806
4806
|
};
|
|
4807
4807
|
|
|
4808
|
-
var Container$
|
|
4808
|
+
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"])));
|
|
4809
4809
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4810
4810
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4811
4811
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4816,7 +4816,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4816
4816
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4817
4817
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4818
4818
|
]; });
|
|
4819
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4819
|
+
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) {
|
|
4820
4820
|
var disabled = _a.disabled;
|
|
4821
4821
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4822
4822
|
});
|
|
@@ -4830,9 +4830,9 @@ var Checkbox = function (_a) {
|
|
|
4830
4830
|
}
|
|
4831
4831
|
onChange(e.target.checked);
|
|
4832
4832
|
};
|
|
4833
|
-
return (jsxRuntime.jsxs(Container$
|
|
4833
|
+
return (jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4834
4834
|
};
|
|
4835
|
-
var templateObject_1$
|
|
4835
|
+
var templateObject_1$1B, templateObject_2$14;
|
|
4836
4836
|
|
|
4837
4837
|
var CustomOption = newStyled.li(function (_a) {
|
|
4838
4838
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4879,8 +4879,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4879
4879
|
Option: BaseDropdownOption,
|
|
4880
4880
|
});
|
|
4881
4881
|
|
|
4882
|
-
var Container$
|
|
4883
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4882
|
+
var Container$13 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject([""], [""])));
|
|
4883
|
+
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"])));
|
|
4884
4884
|
function SimpleDropdown(_a) {
|
|
4885
4885
|
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;
|
|
4886
4886
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4910,13 +4910,13 @@ function SimpleDropdown(_a) {
|
|
|
4910
4910
|
setSelectedValue(value);
|
|
4911
4911
|
}, [value, options, initialValue]);
|
|
4912
4912
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4913
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4913
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$13 : React$2.Fragment;
|
|
4914
4914
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4915
4915
|
}
|
|
4916
|
-
var templateObject_1$
|
|
4916
|
+
var templateObject_1$1A, templateObject_2$13;
|
|
4917
4917
|
|
|
4918
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4919
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4918
|
+
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; });
|
|
4919
|
+
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; });
|
|
4920
4920
|
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"])));
|
|
4921
4921
|
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"])));
|
|
4922
4922
|
var DropdownDialog = function (_a) {
|
|
@@ -4926,7 +4926,7 @@ var DropdownDialog = function (_a) {
|
|
|
4926
4926
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4927
4927
|
}) }), void 0) }), void 0));
|
|
4928
4928
|
};
|
|
4929
|
-
var templateObject_1$
|
|
4929
|
+
var templateObject_1$1z, templateObject_2$12, templateObject_3$R, templateObject_4$B;
|
|
4930
4930
|
|
|
4931
4931
|
var getStylesBySize$a = function (size, theme) {
|
|
4932
4932
|
switch (size) {
|
|
@@ -4994,8 +4994,8 @@ var SelectorSecondary = function (_a) {
|
|
|
4994
4994
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4995
4995
|
// `variants` styles that are consistent through all themes.
|
|
4996
4996
|
var TAGS = {
|
|
4997
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4998
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4997
|
+
hero1: newStyled.h1(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject([""], [""]))),
|
|
4998
|
+
hero2: newStyled.h2(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject([""], [""]))),
|
|
4999
4999
|
hero3: newStyled.h3(templateObject_3$Q || (templateObject_3$Q = __makeTemplateObject([""], [""]))),
|
|
5000
5000
|
display1: newStyled.h1(templateObject_4$A || (templateObject_4$A = __makeTemplateObject([""], [""]))),
|
|
5001
5001
|
display2: newStyled.h2(templateObject_5$n || (templateObject_5$n = __makeTemplateObject([""], [""]))),
|
|
@@ -5126,9 +5126,9 @@ var DEFAULTS = {
|
|
|
5126
5126
|
size: 'regular',
|
|
5127
5127
|
},
|
|
5128
5128
|
};
|
|
5129
|
-
var templateObject_1$
|
|
5129
|
+
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;
|
|
5130
5130
|
|
|
5131
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5131
|
+
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) {
|
|
5132
5132
|
var inline = _a.inline;
|
|
5133
5133
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5134
5134
|
});
|
|
@@ -5147,7 +5147,7 @@ var SizeSelector = function (_a) {
|
|
|
5147
5147
|
}, size: exports.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));
|
|
5148
5148
|
}) }), void 0)] }), void 0));
|
|
5149
5149
|
};
|
|
5150
|
-
var templateObject_1$
|
|
5150
|
+
var templateObject_1$1x;
|
|
5151
5151
|
|
|
5152
5152
|
var getStylesBySize$9 = function (size) {
|
|
5153
5153
|
switch (size) {
|
|
@@ -5174,7 +5174,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5174
5174
|
} });
|
|
5175
5175
|
};
|
|
5176
5176
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5177
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5177
|
+
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));
|
|
5178
5178
|
};
|
|
5179
5179
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5180
5180
|
if (disabled)
|
|
@@ -5190,16 +5190,16 @@ var TextButton = function (_a) {
|
|
|
5190
5190
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5191
5191
|
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));
|
|
5192
5192
|
};
|
|
5193
|
-
var templateObject_1$
|
|
5193
|
+
var templateObject_1$1w;
|
|
5194
5194
|
|
|
5195
|
-
var Container$
|
|
5196
|
-
var P$3 = newStyled.p(templateObject_2
|
|
5195
|
+
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"])));
|
|
5196
|
+
var P$3 = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5197
5197
|
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"])));
|
|
5198
5198
|
var SizeFitGuide = function (_a) {
|
|
5199
5199
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5200
|
-
return (jsxRuntime.jsxs(Container$
|
|
5200
|
+
return (jsxRuntime.jsxs(Container$12, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5201
5201
|
};
|
|
5202
|
-
var templateObject_1$
|
|
5202
|
+
var templateObject_1$1v, templateObject_2$10, templateObject_3$P;
|
|
5203
5203
|
|
|
5204
5204
|
var getStylesBySize$8 = function (size) {
|
|
5205
5205
|
switch (size) {
|
|
@@ -5229,7 +5229,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5229
5229
|
};
|
|
5230
5230
|
}
|
|
5231
5231
|
};
|
|
5232
|
-
var Container$
|
|
5232
|
+
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) {
|
|
5233
5233
|
var backgroundColor = _a.backgroundColor;
|
|
5234
5234
|
return backgroundColor;
|
|
5235
5235
|
}, function (_a) {
|
|
@@ -5251,7 +5251,7 @@ var Container$10 = newStyled.div(templateObject_1$1t || (templateObject_1$1t = _
|
|
|
5251
5251
|
var size = _a.size;
|
|
5252
5252
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5253
5253
|
});
|
|
5254
|
-
var H3$3 = newStyled.h3(templateObject_2
|
|
5254
|
+
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) {
|
|
5255
5255
|
var textColor = _a.textColor;
|
|
5256
5256
|
return textColor;
|
|
5257
5257
|
}, function (_a) {
|
|
@@ -5263,13 +5263,12 @@ var H3$3 = newStyled.h3(templateObject_2$_ || (templateObject_2$_ = __makeTempla
|
|
|
5263
5263
|
var size = _a.size;
|
|
5264
5264
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5265
5265
|
});
|
|
5266
|
-
var Now = newStyled(H3$3)(templateObject_3$O || (templateObject_3$O = __makeTemplateObject(["\n display: none;\n margin-right: 0.25rem;\n"], ["\n display: none;\n margin-right: 0.25rem;\n"])));
|
|
5267
5266
|
var DiscountTag = function (_a) {
|
|
5268
5267
|
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 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5269
5268
|
var theme = useTheme();
|
|
5270
|
-
return (jsxRuntime.
|
|
5269
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5271
5270
|
};
|
|
5272
|
-
var templateObject_1$
|
|
5271
|
+
var templateObject_1$1u, templateObject_2$$;
|
|
5273
5272
|
|
|
5274
5273
|
var getStylesBySize$7 = function (size) {
|
|
5275
5274
|
switch (size) {
|
|
@@ -5299,8 +5298,8 @@ var getStylesBySize$7 = function (size) {
|
|
|
5299
5298
|
};
|
|
5300
5299
|
}
|
|
5301
5300
|
};
|
|
5302
|
-
var Container
|
|
5303
|
-
var Price = newStyled.p(templateObject_2$
|
|
5301
|
+
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"])));
|
|
5302
|
+
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) {
|
|
5304
5303
|
var weight = _a.weight;
|
|
5305
5304
|
return (weight ? weight : '400');
|
|
5306
5305
|
}, function (_a) {
|
|
@@ -5329,7 +5328,7 @@ var Price = newStyled.p(templateObject_2$Z || (templateObject_2$Z = __makeTempla
|
|
|
5329
5328
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5330
5329
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5331
5330
|
});
|
|
5332
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5331
|
+
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) {
|
|
5333
5332
|
var _b;
|
|
5334
5333
|
var size = _a.size;
|
|
5335
5334
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5342,17 +5341,17 @@ function getTestId() {
|
|
|
5342
5341
|
return args.filter(Boolean).join('-');
|
|
5343
5342
|
}
|
|
5344
5343
|
var PriceLabel = function (_a) {
|
|
5345
|
-
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 ? exports.ComponentSize.Medium : _e;
|
|
5344
|
+
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 ? exports.ComponentSize.Medium : _e, _f = _a.clubStyle, clubStyle = _f === void 0 ? false : _f;
|
|
5346
5345
|
var theme = useTheme();
|
|
5347
5346
|
var priceCommonProps = {
|
|
5348
5347
|
size: finalPriceStyled ? exports.ComponentSize.Small : size,
|
|
5349
5348
|
color: color || theme.colors.pallete.secondary.color,
|
|
5350
5349
|
weight: 700,
|
|
5351
5350
|
};
|
|
5352
|
-
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin:
|
|
5353
|
-
return (jsxRuntime.jsxs(Container
|
|
5351
|
+
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5352
|
+
return (jsxRuntime.jsxs(Container$10, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5354
5353
|
};
|
|
5355
|
-
var templateObject_1$
|
|
5354
|
+
var templateObject_1$1t, templateObject_2$_, templateObject_3$O;
|
|
5356
5355
|
|
|
5357
5356
|
var getStylesBySize$6 = function (size) {
|
|
5358
5357
|
switch (size) {
|
|
@@ -5382,7 +5381,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5382
5381
|
};
|
|
5383
5382
|
}
|
|
5384
5383
|
};
|
|
5385
|
-
var Container
|
|
5384
|
+
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) {
|
|
5386
5385
|
var backgroundColor = _a.backgroundColor;
|
|
5387
5386
|
return backgroundColor;
|
|
5388
5387
|
}, function (_a) {
|
|
@@ -5404,7 +5403,7 @@ var Container$_ = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __
|
|
|
5404
5403
|
var size = _a.size;
|
|
5405
5404
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5406
5405
|
});
|
|
5407
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5406
|
+
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) {
|
|
5408
5407
|
var textColor = _a.textColor;
|
|
5409
5408
|
return textColor;
|
|
5410
5409
|
}, function (_a) {
|
|
@@ -5419,11 +5418,11 @@ var H3$2 = newStyled.h3(templateObject_2$Y || (templateObject_2$Y = __makeTempla
|
|
|
5419
5418
|
var ClubOfferTag = function (_a) {
|
|
5420
5419
|
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 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5421
5420
|
var theme = useTheme();
|
|
5422
|
-
return (jsxRuntime.jsx(Container
|
|
5421
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsx(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));
|
|
5423
5422
|
};
|
|
5424
|
-
var templateObject_1$
|
|
5423
|
+
var templateObject_1$1s, templateObject_2$Z;
|
|
5425
5424
|
|
|
5426
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5425
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5427
5426
|
var PriceLabelV2 = function (_a) {
|
|
5428
5427
|
var _b;
|
|
5429
5428
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
@@ -5454,7 +5453,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5454
5453
|
weight: 700,
|
|
5455
5454
|
};
|
|
5456
5455
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5457
|
-
return (jsxRuntime.jsxs(Container
|
|
5456
|
+
return (jsxRuntime.jsxs(Container$10, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
|
|
5458
5457
|
borderRadius: '8px',
|
|
5459
5458
|
width: '107px',
|
|
5460
5459
|
height: '28px',
|
|
@@ -5464,7 +5463,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5464
5463
|
lineHeight: '22px',
|
|
5465
5464
|
} }), void 0)) }), void 0))] }, void 0));
|
|
5466
5465
|
};
|
|
5467
|
-
var templateObject_1$
|
|
5466
|
+
var templateObject_1$1r;
|
|
5468
5467
|
|
|
5469
5468
|
var OneColorSelector = function (_a) {
|
|
5470
5469
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5505,9 +5504,9 @@ var OutOfStock = function (_a) {
|
|
|
5505
5504
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5506
5505
|
};
|
|
5507
5506
|
|
|
5508
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5509
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5510
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5507
|
+
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"])));
|
|
5508
|
+
newStyled(lt.Label)(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5509
|
+
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"])));
|
|
5511
5510
|
var Span = newStyled.span(templateObject_4$z || (templateObject_4$z = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5512
5511
|
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"])));
|
|
5513
5512
|
var Label$3 = function (_a) {
|
|
@@ -5527,23 +5526,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5527
5526
|
Option: Option,
|
|
5528
5527
|
OptionsContainer: OptionsContainer,
|
|
5529
5528
|
});
|
|
5530
|
-
var templateObject_1$
|
|
5529
|
+
var templateObject_1$1q, templateObject_2$Y, templateObject_3$N, templateObject_4$z, templateObject_5$m;
|
|
5531
5530
|
|
|
5532
|
-
var Container$
|
|
5531
|
+
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) {
|
|
5533
5532
|
var borderColor = _a.borderColor;
|
|
5534
5533
|
return borderColor;
|
|
5535
5534
|
}, function (_a) {
|
|
5536
5535
|
var noStock = _a.noStock;
|
|
5537
5536
|
return (noStock ? '0.4' : '1');
|
|
5538
5537
|
});
|
|
5539
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5538
|
+
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"])));
|
|
5540
5539
|
var PatternSelector = function (_a) {
|
|
5541
5540
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5542
5541
|
var theme = useTheme();
|
|
5543
5542
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5544
|
-
return (jsxRuntime.jsx(Container$
|
|
5543
|
+
return (jsxRuntime.jsx(Container$_, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5545
5544
|
};
|
|
5546
|
-
var templateObject_1$
|
|
5545
|
+
var templateObject_1$1p, templateObject_2$X;
|
|
5547
5546
|
|
|
5548
5547
|
var renderOptions$1 = function (options) {
|
|
5549
5548
|
if (options.length === 0) {
|
|
@@ -5748,7 +5747,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5748
5747
|
literal: true,
|
|
5749
5748
|
});
|
|
5750
5749
|
|
|
5751
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5750
|
+
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) {
|
|
5752
5751
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5753
5752
|
return borderRadiusVariant &&
|
|
5754
5753
|
"\nborder-radius: 20px;\n";
|
|
@@ -5763,7 +5762,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5763
5762
|
var theme = useTheme();
|
|
5764
5763
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5765
5764
|
};
|
|
5766
|
-
var templateObject_1$
|
|
5765
|
+
var templateObject_1$1o;
|
|
5767
5766
|
|
|
5768
5767
|
var Button$5 = newStyled.button(function () { return ({
|
|
5769
5768
|
background: 'transparent',
|
|
@@ -10007,14 +10006,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
10007
10006
|
return Slider;
|
|
10008
10007
|
}(React__default["default"].Component);
|
|
10009
10008
|
|
|
10010
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
10009
|
+
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) {
|
|
10011
10010
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10012
10011
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10013
10012
|
}, function (_a) {
|
|
10014
10013
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
10015
10014
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
10016
10015
|
});
|
|
10017
|
-
var templateObject_1$
|
|
10016
|
+
var templateObject_1$1n;
|
|
10018
10017
|
|
|
10019
10018
|
var getStylesBySize$5 = function (size) {
|
|
10020
10019
|
// rem units
|
|
@@ -10073,22 +10072,22 @@ var SliderNavigation = function (_a) {
|
|
|
10073
10072
|
} }, { 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));
|
|
10074
10073
|
};
|
|
10075
10074
|
|
|
10076
|
-
var horizontalStyles = css(templateObject_1$
|
|
10077
|
-
var verticalStyles = css(templateObject_2$
|
|
10078
|
-
var Container$
|
|
10075
|
+
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"])));
|
|
10076
|
+
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"])));
|
|
10077
|
+
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) {
|
|
10079
10078
|
var position = _a.position;
|
|
10080
10079
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10081
10080
|
});
|
|
10082
10081
|
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"])));
|
|
10083
10082
|
var ImagePreviewList = function (_a) {
|
|
10084
10083
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
10085
|
-
return (jsxRuntime.jsx(Container$
|
|
10084
|
+
return (jsxRuntime.jsx(Container$Z, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
10086
10085
|
arrowWidth: 0.75,
|
|
10087
10086
|
arrowHeight: 1.25,
|
|
10088
10087
|
arrowPadding: 1.625,
|
|
10089
10088
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.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 (jsxRuntime.jsx(Button$4, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
10090
10089
|
};
|
|
10091
|
-
var templateObject_1$
|
|
10090
|
+
var templateObject_1$1m, templateObject_2$W, templateObject_3$M, templateObject_4$y;
|
|
10092
10091
|
|
|
10093
10092
|
var propTypes = {exports: {}};
|
|
10094
10093
|
|
|
@@ -11681,13 +11680,13 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11681
11680
|
afterZoomOut: PropTypes.func
|
|
11682
11681
|
} : {};
|
|
11683
11682
|
|
|
11684
|
-
var Container$
|
|
11683
|
+
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) {
|
|
11685
11684
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11686
11685
|
return borderRadiusVariant &&
|
|
11687
11686
|
"\n border-radius: 40px;\n ";
|
|
11688
11687
|
});
|
|
11689
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11690
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11688
|
+
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'); });
|
|
11689
|
+
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"])));
|
|
11691
11690
|
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"])));
|
|
11692
11691
|
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"])));
|
|
11693
11692
|
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"])));
|
|
@@ -11695,14 +11694,14 @@ var Text$7 = newStyled.div(templateObject_7$c || (templateObject_7$c = __makeTem
|
|
|
11695
11694
|
var ImageProductWithTags$1 = function (_a) {
|
|
11696
11695
|
var _b, _c;
|
|
11697
11696
|
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;
|
|
11698
|
-
return (jsxRuntime.jsxs(Container$
|
|
11697
|
+
return (jsxRuntime.jsxs(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11699
11698
|
alt: image.alt,
|
|
11700
11699
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11701
11700
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Video$1, { children: jsxRuntime.jsx("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), jsxRuntime.jsxs(VideoTag$1, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsxRuntime.jsx(Text$7, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
11702
11701
|
};
|
|
11703
|
-
var templateObject_1$
|
|
11702
|
+
var templateObject_1$1l, templateObject_2$V, templateObject_3$L, templateObject_4$x, templateObject_5$l, templateObject_6$k, templateObject_7$c;
|
|
11704
11703
|
|
|
11705
|
-
var Container$
|
|
11704
|
+
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"])));
|
|
11706
11705
|
var ProductGallery = function (_a) {
|
|
11707
11706
|
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;
|
|
11708
11707
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11710,11 +11709,11 @@ var ProductGallery = function (_a) {
|
|
|
11710
11709
|
React$2.useEffect(function () {
|
|
11711
11710
|
setSelectedImage(initialValue);
|
|
11712
11711
|
}, [initialValue]);
|
|
11713
|
-
return (jsxRuntime.jsxs(Container$
|
|
11712
|
+
return (jsxRuntime.jsxs(Container$X, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11714
11713
|
setSelectedImage(value);
|
|
11715
11714
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
11716
11715
|
};
|
|
11717
|
-
var templateObject_1$
|
|
11716
|
+
var templateObject_1$1k;
|
|
11718
11717
|
|
|
11719
11718
|
/* base styles & size variants */
|
|
11720
11719
|
var StarStyles = {
|
|
@@ -11760,8 +11759,8 @@ var StarStyles = {
|
|
|
11760
11759
|
});
|
|
11761
11760
|
},
|
|
11762
11761
|
};
|
|
11763
|
-
var Container$
|
|
11764
|
-
var templateObject_1$
|
|
11762
|
+
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"])));
|
|
11763
|
+
var templateObject_1$1j;
|
|
11765
11764
|
|
|
11766
11765
|
var StarContainer = newStyled.div(function (_a) {
|
|
11767
11766
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11779,7 +11778,7 @@ var sizes = {
|
|
|
11779
11778
|
var StarList = function (_a) {
|
|
11780
11779
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11781
11780
|
var theme = useTheme();
|
|
11782
|
-
return (jsxRuntime.jsx(Container$
|
|
11781
|
+
return (jsxRuntime.jsx(Container$W, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11783
11782
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11784
11783
|
}) }, void 0));
|
|
11785
11784
|
};
|
|
@@ -11823,8 +11822,8 @@ var LabelStyles = {
|
|
|
11823
11822
|
});
|
|
11824
11823
|
},
|
|
11825
11824
|
};
|
|
11826
|
-
var Container$
|
|
11827
|
-
var templateObject_1$
|
|
11825
|
+
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"])));
|
|
11826
|
+
var templateObject_1$1i;
|
|
11828
11827
|
|
|
11829
11828
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11830
11829
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11864,11 +11863,11 @@ var Rating = function (_a) {
|
|
|
11864
11863
|
href: reviewsContainerId,
|
|
11865
11864
|
}
|
|
11866
11865
|
: {};
|
|
11867
|
-
return (jsxRuntime.jsxs(Container$
|
|
11866
|
+
return (jsxRuntime.jsxs(Container$V, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
11868
11867
|
};
|
|
11869
11868
|
|
|
11870
|
-
var Container$
|
|
11871
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11869
|
+
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"])));
|
|
11870
|
+
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; });
|
|
11872
11871
|
var textButtonStyles = function (theme) { return ({
|
|
11873
11872
|
border: 'none',
|
|
11874
11873
|
background: 'transparent',
|
|
@@ -11881,9 +11880,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11881
11880
|
var FitPredictor = function (_a) {
|
|
11882
11881
|
var onClick = _a.onClick;
|
|
11883
11882
|
var theme = useTheme();
|
|
11884
|
-
return (jsxs(Container$
|
|
11883
|
+
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));
|
|
11885
11884
|
};
|
|
11886
|
-
var templateObject_1$
|
|
11885
|
+
var templateObject_1$1h, templateObject_2$U;
|
|
11887
11886
|
|
|
11888
11887
|
var P$1 = newStyled.p(function (_a) {
|
|
11889
11888
|
var color = _a.color;
|
|
@@ -11897,7 +11896,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
11897
11896
|
margin: '0.938rem 4.188rem',
|
|
11898
11897
|
});
|
|
11899
11898
|
});
|
|
11900
|
-
var Bar$2 = newStyled.div(templateObject_1$
|
|
11899
|
+
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) {
|
|
11901
11900
|
var height = _a.height;
|
|
11902
11901
|
return height || '0.5rem';
|
|
11903
11902
|
}, function (_a) {
|
|
@@ -11926,7 +11925,7 @@ var Background$1 = newStyled.div(function (_a) {
|
|
|
11926
11925
|
position: 'absolute',
|
|
11927
11926
|
});
|
|
11928
11927
|
});
|
|
11929
|
-
var Container$
|
|
11928
|
+
var Container$T = newStyled.div(function (_a) {
|
|
11930
11929
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
11931
11930
|
return ({
|
|
11932
11931
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11940,11 +11939,11 @@ var getBarWithBasedOnPercent$1 = function (percent) {
|
|
|
11940
11939
|
var ProgressBar = function (_a) {
|
|
11941
11940
|
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;
|
|
11942
11941
|
var theme = useTheme();
|
|
11943
|
-
return (jsxRuntime.jsxs(Container$
|
|
11942
|
+
return (jsxRuntime.jsxs(Container$T, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar$2, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
11944
11943
|
};
|
|
11945
|
-
var templateObject_1$
|
|
11944
|
+
var templateObject_1$1g;
|
|
11946
11945
|
|
|
11947
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
11946
|
+
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) {
|
|
11948
11947
|
var height = _a.height;
|
|
11949
11948
|
return height || '0.5rem';
|
|
11950
11949
|
}, function (_a) {
|
|
@@ -11983,7 +11982,7 @@ var BarContainer$1 = newStyled.div({
|
|
|
11983
11982
|
padding: '0 16px',
|
|
11984
11983
|
position: 'relative',
|
|
11985
11984
|
});
|
|
11986
|
-
var Container$
|
|
11985
|
+
var Container$S = newStyled.div(function (_a) {
|
|
11987
11986
|
var backgroundColor = _a.backgroundColor;
|
|
11988
11987
|
return ({
|
|
11989
11988
|
width: '475px',
|
|
@@ -12014,9 +12013,9 @@ var MotivatorProgressBar = function (_a) {
|
|
|
12014
12013
|
var theme = useTheme();
|
|
12015
12014
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
12016
12015
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
12017
|
-
return (jsxRuntime.jsxs(Container$
|
|
12016
|
+
return (jsxRuntime.jsxs(Container$S, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer$1, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
12018
12017
|
};
|
|
12019
|
-
var templateObject_1$
|
|
12018
|
+
var templateObject_1$1f;
|
|
12020
12019
|
|
|
12021
12020
|
var getStylesBySize$4 = function (size) {
|
|
12022
12021
|
switch (size) {
|
|
@@ -12037,7 +12036,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
12037
12036
|
};
|
|
12038
12037
|
}
|
|
12039
12038
|
};
|
|
12040
|
-
var Container$
|
|
12039
|
+
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) {
|
|
12041
12040
|
var backgroundColor = _a.backgroundColor;
|
|
12042
12041
|
return backgroundColor;
|
|
12043
12042
|
}, function (_a) {
|
|
@@ -12065,9 +12064,9 @@ var Container$Q = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __
|
|
|
12065
12064
|
var IconButton = function (_a) {
|
|
12066
12065
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
12067
12066
|
var theme = useTheme();
|
|
12068
|
-
return (jsxRuntime.jsx(Container$
|
|
12067
|
+
return (jsxRuntime.jsx(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));
|
|
12069
12068
|
};
|
|
12070
|
-
var templateObject_1$
|
|
12069
|
+
var templateObject_1$1e;
|
|
12071
12070
|
|
|
12072
12071
|
var TooltipArrow = function (_a) {
|
|
12073
12072
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -12147,7 +12146,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
12147
12146
|
}
|
|
12148
12147
|
};
|
|
12149
12148
|
|
|
12150
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
12149
|
+
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) {
|
|
12151
12150
|
var position = _a.position;
|
|
12152
12151
|
return getWrapperFlexDirection(position);
|
|
12153
12152
|
});
|
|
@@ -12172,14 +12171,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
12172
12171
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
12173
12172
|
return actual === expected ? margin : '0';
|
|
12174
12173
|
};
|
|
12175
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
12174
|
+
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) {
|
|
12176
12175
|
var borderColor = _a.borderColor;
|
|
12177
12176
|
return borderColor;
|
|
12178
12177
|
}, function (_a) {
|
|
12179
12178
|
var backgroundColor = _a.backgroundColor;
|
|
12180
12179
|
return backgroundColor;
|
|
12181
12180
|
});
|
|
12182
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
12181
|
+
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) {
|
|
12183
12182
|
var position = _a.position;
|
|
12184
12183
|
return getArrowRotation(position);
|
|
12185
12184
|
}, function (_a) {
|
|
@@ -12199,7 +12198,7 @@ var Title$7 = newStyled.h1(templateObject_6$j || (templateObject_6$j = __makeTem
|
|
|
12199
12198
|
return color;
|
|
12200
12199
|
});
|
|
12201
12200
|
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"])));
|
|
12202
|
-
var templateObject_1$
|
|
12201
|
+
var templateObject_1$1d, templateObject_2$T, templateObject_3$K, templateObject_4$w, templateObject_5$k, templateObject_6$j, templateObject_7$b;
|
|
12203
12202
|
|
|
12204
12203
|
var Tooltip = function (_a) {
|
|
12205
12204
|
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;
|
|
@@ -12286,7 +12285,7 @@ var AccordionDetailsStyles = {
|
|
|
12286
12285
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
12287
12286
|
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)]; });
|
|
12288
12287
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
12289
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
12288
|
+
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"])));
|
|
12290
12289
|
var Accordion$1 = function (_a) {
|
|
12291
12290
|
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;
|
|
12292
12291
|
var theme = useTheme();
|
|
@@ -12298,7 +12297,7 @@ var Accordion$1 = function (_a) {
|
|
|
12298
12297
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsxRuntime.jsx(ControlIcon, { title: openWithForce ? 'close icon' : 'open icon', height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0)] }), void 0), showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
12299
12298
|
} }), void 0));
|
|
12300
12299
|
};
|
|
12301
|
-
var templateObject_1$
|
|
12300
|
+
var templateObject_1$1c;
|
|
12302
12301
|
|
|
12303
12302
|
/* base styles & size variants */
|
|
12304
12303
|
var CustomRadioStyles$2 = {
|
|
@@ -12367,9 +12366,9 @@ var ContainerStyles$2 = {
|
|
|
12367
12366
|
},
|
|
12368
12367
|
};
|
|
12369
12368
|
|
|
12370
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
12371
|
-
var Container$
|
|
12372
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
12369
|
+
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"])));
|
|
12370
|
+
var Container$Q = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
12371
|
+
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) {
|
|
12373
12372
|
var disabled = _a.disabled;
|
|
12374
12373
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12375
12374
|
});
|
|
@@ -12377,7 +12376,7 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
12377
12376
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12378
12377
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
12379
12378
|
]; });
|
|
12380
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
12379
|
+
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"])));
|
|
12381
12380
|
var RadioPrimary = function (_a) {
|
|
12382
12381
|
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 ? exports.ComponentSize.Medium : _d;
|
|
12383
12382
|
var theme = useTheme();
|
|
@@ -12385,9 +12384,9 @@ var RadioPrimary = function (_a) {
|
|
|
12385
12384
|
var value = event.currentTarget.value;
|
|
12386
12385
|
onChange({ value: value, label: label });
|
|
12387
12386
|
};
|
|
12388
|
-
return (jsxRuntime.jsxs(Wrapper$6, { children: [jsxRuntime.jsxs(Container$
|
|
12387
|
+
return (jsxRuntime.jsxs(Wrapper$6, { children: [jsxRuntime.jsxs(Container$Q, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12389
12388
|
};
|
|
12390
|
-
var templateObject_1$
|
|
12389
|
+
var templateObject_1$1b, templateObject_2$S, templateObject_3$J;
|
|
12391
12390
|
|
|
12392
12391
|
/* base styles & size variants */
|
|
12393
12392
|
var CustomRadioStyles$1 = {
|
|
@@ -12452,9 +12451,9 @@ var ContainerStyles$1 = {
|
|
|
12452
12451
|
},
|
|
12453
12452
|
};
|
|
12454
12453
|
|
|
12455
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
12456
|
-
var Container$
|
|
12457
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
12454
|
+
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"])));
|
|
12455
|
+
var Container$P = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
12456
|
+
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) {
|
|
12458
12457
|
var disabled = _a.disabled;
|
|
12459
12458
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12460
12459
|
});
|
|
@@ -12462,7 +12461,7 @@ var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
|
12462
12461
|
CustomRadioStyles$1.baseStyles(props.theme, props.disabled),
|
|
12463
12462
|
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
12464
12463
|
]; });
|
|
12465
|
-
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$
|
|
12464
|
+
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) {
|
|
12466
12465
|
var theme = _a.theme;
|
|
12467
12466
|
return theme.component.radio.textSize;
|
|
12468
12467
|
}, function (_a) {
|
|
@@ -12476,9 +12475,9 @@ var RadioInput = function (_a) {
|
|
|
12476
12475
|
var value = event.currentTarget.value;
|
|
12477
12476
|
onChange({ value: value, label: label });
|
|
12478
12477
|
};
|
|
12479
|
-
return (jsxRuntime.jsxs(Wrapper$5, { children: [jsxRuntime.jsxs(Container$
|
|
12478
|
+
return (jsxRuntime.jsxs(Wrapper$5, { children: [jsxRuntime.jsxs(Container$P, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12480
12479
|
};
|
|
12481
|
-
var templateObject_1$
|
|
12480
|
+
var templateObject_1$1a, templateObject_2$R, templateObject_3$I;
|
|
12482
12481
|
|
|
12483
12482
|
var RadioGroupInput = function (_a) {
|
|
12484
12483
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12557,9 +12556,9 @@ var ContainerStyles = {
|
|
|
12557
12556
|
},
|
|
12558
12557
|
};
|
|
12559
12558
|
|
|
12560
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
12561
|
-
var Container$
|
|
12562
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
12559
|
+
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"])));
|
|
12560
|
+
var Container$O = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
12561
|
+
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) {
|
|
12563
12562
|
var disabled = _a.disabled;
|
|
12564
12563
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
12565
12564
|
});
|
|
@@ -12567,7 +12566,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
12567
12566
|
CustomRadioStyles.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12568
12567
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
12569
12568
|
]; });
|
|
12570
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
12569
|
+
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) {
|
|
12571
12570
|
var theme = _a.theme;
|
|
12572
12571
|
return theme.component.radio.textSize;
|
|
12573
12572
|
}, function (_a) {
|
|
@@ -12581,9 +12580,9 @@ var ClubRadioInput = function (_a) {
|
|
|
12581
12580
|
var value = event.currentTarget.value;
|
|
12582
12581
|
onChange({ value: value, label: label });
|
|
12583
12582
|
};
|
|
12584
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
12583
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$O, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
12585
12584
|
};
|
|
12586
|
-
var templateObject_1$
|
|
12585
|
+
var templateObject_1$19, templateObject_2$Q, templateObject_3$H;
|
|
12587
12586
|
|
|
12588
12587
|
var ClubRadioGroupInput = function (_a) {
|
|
12589
12588
|
var style = _a.style, name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -12597,37 +12596,37 @@ var ClubRadioGroupInput = function (_a) {
|
|
|
12597
12596
|
}) }), void 0));
|
|
12598
12597
|
};
|
|
12599
12598
|
|
|
12600
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
12601
|
-
var Container$
|
|
12599
|
+
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"])));
|
|
12600
|
+
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"])));
|
|
12602
12601
|
var Minimalistic = function (_a) {
|
|
12603
12602
|
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;
|
|
12604
12603
|
var theme = useTheme();
|
|
12605
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
12604
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$8, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$N, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$8, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
12606
12605
|
};
|
|
12607
|
-
var templateObject_1$
|
|
12606
|
+
var templateObject_1$18, templateObject_2$P;
|
|
12608
12607
|
|
|
12609
|
-
var Container$
|
|
12610
|
-
var Title$6 = newStyled.h1(templateObject_2$
|
|
12611
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
12608
|
+
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"])));
|
|
12609
|
+
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; });
|
|
12610
|
+
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; });
|
|
12612
12611
|
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"])));
|
|
12613
12612
|
var Simple = function (_a) {
|
|
12614
12613
|
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;
|
|
12615
12614
|
var theme = useTheme();
|
|
12616
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
12615
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$M, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
12617
12616
|
};
|
|
12618
|
-
var templateObject_1$
|
|
12617
|
+
var templateObject_1$17, templateObject_2$O, templateObject_3$G, templateObject_4$v;
|
|
12619
12618
|
|
|
12620
12619
|
var Bundle = {
|
|
12621
12620
|
Minimalistic: Minimalistic,
|
|
12622
12621
|
Simple: Simple,
|
|
12623
12622
|
};
|
|
12624
12623
|
|
|
12625
|
-
var Container$
|
|
12624
|
+
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"])));
|
|
12626
12625
|
var Tag$2 = function (_a) {
|
|
12627
12626
|
var text = _a.text, className = _a.className;
|
|
12628
|
-
return jsxRuntime.jsx(Container$
|
|
12627
|
+
return jsxRuntime.jsx(Container$L, __assign$1({ className: className }, { children: text }), void 0);
|
|
12629
12628
|
};
|
|
12630
|
-
var templateObject_1$
|
|
12629
|
+
var templateObject_1$16;
|
|
12631
12630
|
|
|
12632
12631
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
12633
12632
|
switch (size) {
|
|
@@ -12730,11 +12729,11 @@ var Timer = function (_a) {
|
|
|
12730
12729
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12731
12730
|
};
|
|
12732
12731
|
|
|
12733
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
12732
|
+
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) {
|
|
12734
12733
|
var color = _a.color;
|
|
12735
12734
|
return color;
|
|
12736
12735
|
});
|
|
12737
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12736
|
+
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) {
|
|
12738
12737
|
var color = _a.color;
|
|
12739
12738
|
return color;
|
|
12740
12739
|
});
|
|
@@ -12743,7 +12742,7 @@ var InputLabel = function (_a) {
|
|
|
12743
12742
|
var theme = useTheme();
|
|
12744
12743
|
return (jsxRuntime.jsxs(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
12745
12744
|
};
|
|
12746
|
-
var templateObject_1$
|
|
12745
|
+
var templateObject_1$15, templateObject_2$N;
|
|
12747
12746
|
|
|
12748
12747
|
var containerByStatus = function (theme, status) {
|
|
12749
12748
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -12752,12 +12751,12 @@ var containerByStatus = function (theme, status) {
|
|
|
12752
12751
|
return theme.colors.semantic.urgent.color;
|
|
12753
12752
|
return '';
|
|
12754
12753
|
};
|
|
12755
|
-
var Container$
|
|
12754
|
+
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) {
|
|
12756
12755
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12757
12756
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12758
12757
|
});
|
|
12759
|
-
var StyledLabel = newStyled.label(templateObject_2$
|
|
12760
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
12758
|
+
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"])));
|
|
12759
|
+
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) {
|
|
12761
12760
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12762
12761
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12763
12762
|
}, function (_a) {
|
|
@@ -12830,7 +12829,7 @@ var AnimatedPlaceholder = newStyled.span(templateObject_5$j || (templateObject_5
|
|
|
12830
12829
|
return theme.component.input.lineHeight;
|
|
12831
12830
|
});
|
|
12832
12831
|
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"])));
|
|
12833
|
-
var templateObject_1$
|
|
12832
|
+
var templateObject_1$14, templateObject_2$M, templateObject_3$F, templateObject_4$u, templateObject_5$j, templateObject_6$i;
|
|
12834
12833
|
|
|
12835
12834
|
var BaseInput = function (_a) {
|
|
12836
12835
|
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"]);
|
|
@@ -12853,7 +12852,7 @@ var BaseInput = function (_a) {
|
|
|
12853
12852
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12854
12853
|
}, [status]);
|
|
12855
12854
|
var hasValue = Boolean(value);
|
|
12856
|
-
return (jsxRuntime.jsxs(Container$
|
|
12855
|
+
return (jsxRuntime.jsxs(Container$K, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12857
12856
|
onChange(event.target.value, event);
|
|
12858
12857
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
12859
12858
|
onChange('', { target: { value: '' } });
|
|
@@ -12874,11 +12873,11 @@ var Button$3 = function (_a) {
|
|
|
12874
12873
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12875
12874
|
};
|
|
12876
12875
|
|
|
12877
|
-
var Container$
|
|
12876
|
+
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) {
|
|
12878
12877
|
var theme = _a.theme;
|
|
12879
12878
|
return theme.component.inputCustom.input.borderRadius;
|
|
12880
12879
|
});
|
|
12881
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12880
|
+
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) {
|
|
12882
12881
|
var theme = _a.theme;
|
|
12883
12882
|
return theme.component.inputCustom.button.borderRadius;
|
|
12884
12883
|
});
|
|
@@ -12891,23 +12890,23 @@ var Custom = function (_a) {
|
|
|
12891
12890
|
text: text,
|
|
12892
12891
|
disabled: rest.disabled,
|
|
12893
12892
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12894
|
-
return (jsxRuntime.jsx(Container$
|
|
12893
|
+
return (jsxRuntime.jsx(Container$J, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$3, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12895
12894
|
};
|
|
12896
|
-
var templateObject_1$
|
|
12895
|
+
var templateObject_1$13, templateObject_2$L;
|
|
12897
12896
|
|
|
12898
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12897
|
+
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) {
|
|
12899
12898
|
var size = _a.size;
|
|
12900
12899
|
return (size === 'small' ? '36px' : '');
|
|
12901
12900
|
});
|
|
12902
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12903
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12901
|
+
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"])));
|
|
12902
|
+
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"])));
|
|
12904
12903
|
var Success = function (_a) {
|
|
12905
12904
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12906
12905
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12907
12906
|
};
|
|
12908
|
-
var templateObject_1$
|
|
12907
|
+
var templateObject_1$12, templateObject_2$K, templateObject_3$E;
|
|
12909
12908
|
|
|
12910
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12909
|
+
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) {
|
|
12911
12910
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12912
12911
|
return status === exports.InputValidationType.Empty &&
|
|
12913
12912
|
type === 'primary' &&
|
|
@@ -12924,21 +12923,21 @@ var BasePlusButton = function (_a) {
|
|
|
12924
12923
|
}
|
|
12925
12924
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12926
12925
|
};
|
|
12927
|
-
var templateObject_1$
|
|
12926
|
+
var templateObject_1$11;
|
|
12928
12927
|
|
|
12929
|
-
var Container$
|
|
12930
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12928
|
+
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"])));
|
|
12929
|
+
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; });
|
|
12931
12930
|
var BasePlusIcon = function (_a) {
|
|
12932
12931
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12933
12932
|
var theme = useTheme();
|
|
12934
12933
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12935
|
-
return (jsxRuntime.jsx(Container$
|
|
12934
|
+
return (jsxRuntime.jsx(Container$I, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
12936
12935
|
? theme.colors.shades['700'].color
|
|
12937
12936
|
: status === exports.InputValidationType.Error
|
|
12938
12937
|
? theme.colors.semantic.urgent.color
|
|
12939
12938
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12940
12939
|
};
|
|
12941
|
-
var templateObject_1
|
|
12940
|
+
var templateObject_1$10, templateObject_2$J;
|
|
12942
12941
|
|
|
12943
12942
|
var Input$1 = {
|
|
12944
12943
|
Simple: BaseInput,
|
|
@@ -12947,7 +12946,7 @@ var Input$1 = {
|
|
|
12947
12946
|
SimplePlusIcon: BasePlusIcon,
|
|
12948
12947
|
};
|
|
12949
12948
|
|
|
12950
|
-
var Container$
|
|
12949
|
+
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) {
|
|
12951
12950
|
var width = _a.width;
|
|
12952
12951
|
return width;
|
|
12953
12952
|
}, function (_a) {
|
|
@@ -12963,11 +12962,11 @@ var Container$G = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __ma
|
|
|
12963
12962
|
var PaymentMethod = function (_a) {
|
|
12964
12963
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12965
12964
|
var theme = useTheme();
|
|
12966
|
-
return (jsxRuntime.jsx(Container$
|
|
12965
|
+
return (jsxRuntime.jsx(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: React$2.createElement(Icon) }), void 0));
|
|
12967
12966
|
};
|
|
12968
|
-
var templateObject_1
|
|
12967
|
+
var templateObject_1$$;
|
|
12969
12968
|
|
|
12970
|
-
var Text$6 = newStyled.h3(templateObject_1$
|
|
12969
|
+
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) {
|
|
12971
12970
|
var backgroundColor = _a.backgroundColor;
|
|
12972
12971
|
return backgroundColor;
|
|
12973
12972
|
}, function (_a) {
|
|
@@ -12979,11 +12978,11 @@ var OfferBanner = function (_a) {
|
|
|
12979
12978
|
var theme = useTheme();
|
|
12980
12979
|
return (jsxRuntime.jsx(Text$6, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12981
12980
|
};
|
|
12982
|
-
var templateObject_1$
|
|
12981
|
+
var templateObject_1$_;
|
|
12983
12982
|
|
|
12984
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12985
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12986
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12983
|
+
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"])));
|
|
12984
|
+
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; });
|
|
12985
|
+
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) {
|
|
12987
12986
|
var theme = _a.theme;
|
|
12988
12987
|
return theme.component.total.basicTotal.currency.color;
|
|
12989
12988
|
}, function (_a) {
|
|
@@ -12996,7 +12995,7 @@ var Currency = newStyled.span(templateObject_3$C || (templateObject_3$C = __make
|
|
|
12996
12995
|
var theme = _a.theme;
|
|
12997
12996
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12998
12997
|
});
|
|
12999
|
-
var Container$
|
|
12998
|
+
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; });
|
|
13000
12999
|
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"])));
|
|
13001
13000
|
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) {
|
|
13002
13001
|
var theme = _a.theme;
|
|
@@ -13005,16 +13004,16 @@ var DiscountAmount = newStyled.h3(templateObject_6$h || (templateObject_6$h = __
|
|
|
13005
13004
|
var Total = function (_a) {
|
|
13006
13005
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
13007
13006
|
var theme = useTheme();
|
|
13008
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
13007
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$G, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
13009
13008
|
};
|
|
13010
|
-
var templateObject_1$
|
|
13009
|
+
var templateObject_1$Z, templateObject_2$I, templateObject_3$D, templateObject_4$t, templateObject_5$i, templateObject_6$h;
|
|
13011
13010
|
|
|
13012
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
13011
|
+
var Wrapper$1 = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
13013
13012
|
var color = _a.color;
|
|
13014
13013
|
return color;
|
|
13015
13014
|
});
|
|
13016
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
13017
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
13015
|
+
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"])));
|
|
13016
|
+
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) {
|
|
13018
13017
|
var theme = _a.theme;
|
|
13019
13018
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
13020
13019
|
}, function (_a) {
|
|
@@ -13034,30 +13033,30 @@ var Subtotal = function (_a) {
|
|
|
13034
13033
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
13035
13034
|
})] }), void 0));
|
|
13036
13035
|
};
|
|
13037
|
-
var templateObject_1$
|
|
13036
|
+
var templateObject_1$Y, templateObject_2$H, templateObject_3$C, templateObject_4$s;
|
|
13038
13037
|
|
|
13039
13038
|
var Totals = {
|
|
13040
13039
|
Total: Total,
|
|
13041
13040
|
Subtotal: Subtotal,
|
|
13042
13041
|
};
|
|
13043
13042
|
|
|
13044
|
-
var Container$
|
|
13045
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
13046
|
-
var Text$5 = newStyled.p(templateObject_3$
|
|
13043
|
+
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; });
|
|
13044
|
+
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"])));
|
|
13045
|
+
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; });
|
|
13047
13046
|
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; });
|
|
13048
13047
|
var Note = function (_a) {
|
|
13049
13048
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
13050
13049
|
var theme = useTheme();
|
|
13051
|
-
return (jsxRuntime.jsxs(Container$
|
|
13050
|
+
return (jsxRuntime.jsxs(Container$F, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.Warning, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$5, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
13052
13051
|
};
|
|
13053
|
-
var templateObject_1$
|
|
13052
|
+
var templateObject_1$X, templateObject_2$G, templateObject_3$B, templateObject_4$r;
|
|
13054
13053
|
|
|
13055
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
13054
|
+
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) {
|
|
13056
13055
|
var theme = _a.theme;
|
|
13057
13056
|
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 ");
|
|
13058
13057
|
});
|
|
13059
|
-
var Line = newStyled.div(templateObject_2$
|
|
13060
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
13058
|
+
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; });
|
|
13059
|
+
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({
|
|
13061
13060
|
flexDirection: ['column', 'row'],
|
|
13062
13061
|
}));
|
|
13063
13062
|
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({
|
|
@@ -13095,44 +13094,44 @@ var DeliveryDetails = function (_a) {
|
|
|
13095
13094
|
var theme = useTheme();
|
|
13096
13095
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.shades[700].color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['200'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, { width: 1.5 }, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, { width: 1.5 }, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1.5 }, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
13097
13096
|
};
|
|
13098
|
-
var templateObject_1$
|
|
13097
|
+
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;
|
|
13099
13098
|
|
|
13100
|
-
var Container$
|
|
13101
|
-
var Text$4 = newStyled.p(templateObject_2$
|
|
13099
|
+
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"])));
|
|
13100
|
+
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; });
|
|
13102
13101
|
var ScrollToTop = function (_a) {
|
|
13103
13102
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
13104
13103
|
var theme = useTheme();
|
|
13105
13104
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
13106
|
-
return (jsxRuntime.jsxs(Container$
|
|
13105
|
+
return (jsxRuntime.jsxs(Container$E, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$4, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
13107
13106
|
};
|
|
13108
|
-
var templateObject_1$
|
|
13107
|
+
var templateObject_1$V, templateObject_2$E;
|
|
13109
13108
|
|
|
13110
|
-
var Container$
|
|
13109
|
+
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) {
|
|
13111
13110
|
var theme = _a.theme;
|
|
13112
13111
|
return theme.component.orderBar.backgroundColor;
|
|
13113
13112
|
});
|
|
13114
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
13113
|
+
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; });
|
|
13115
13114
|
var OrderBar = function (_a) {
|
|
13116
13115
|
var message = _a.message, color = _a.color;
|
|
13117
13116
|
var theme = useTheme();
|
|
13118
|
-
return (jsxRuntime.jsxs(Container$
|
|
13117
|
+
return (jsxRuntime.jsxs(Container$D, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.component.orderBar.fontColor }, { children: message }), void 0)] }), void 0));
|
|
13119
13118
|
};
|
|
13120
|
-
var templateObject_1$
|
|
13119
|
+
var templateObject_1$U, templateObject_2$D;
|
|
13121
13120
|
|
|
13122
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
13123
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
13124
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
13121
|
+
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; });
|
|
13122
|
+
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; });
|
|
13123
|
+
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; });
|
|
13125
13124
|
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; });
|
|
13126
13125
|
var SizeTable = function (_a) {
|
|
13127
13126
|
var headers = _a.headers, data = _a.data, className = _a.className;
|
|
13128
13127
|
var theme = useTheme();
|
|
13129
13128
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color, className: className }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
13130
13129
|
};
|
|
13131
|
-
var templateObject_1$
|
|
13130
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$z, templateObject_4$p;
|
|
13132
13131
|
|
|
13133
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
13134
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
13135
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
13132
|
+
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; });
|
|
13133
|
+
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; });
|
|
13134
|
+
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; });
|
|
13136
13135
|
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; });
|
|
13137
13136
|
var SizeChartTable = function (_a) {
|
|
13138
13137
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
@@ -13166,19 +13165,19 @@ var SizeChartTable = function (_a) {
|
|
|
13166
13165
|
backgroundColor: getCellColor(index, cell),
|
|
13167
13166
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(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 (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
13168
13167
|
};
|
|
13169
|
-
var templateObject_1$
|
|
13168
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$y, templateObject_4$o;
|
|
13170
13169
|
|
|
13171
|
-
var Img = newStyled.img(templateObject_1$
|
|
13170
|
+
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; });
|
|
13172
13171
|
var Image = function (_a) {
|
|
13173
13172
|
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;
|
|
13174
13173
|
return (jsxRuntime.jsx(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));
|
|
13175
13174
|
};
|
|
13176
|
-
var templateObject_1$
|
|
13175
|
+
var templateObject_1$R;
|
|
13177
13176
|
|
|
13178
|
-
var Container$
|
|
13177
|
+
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"])));
|
|
13179
13178
|
var IMAGE_WIDTH = '63px';
|
|
13180
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
13181
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
13179
|
+
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);
|
|
13180
|
+
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({
|
|
13182
13181
|
paddingLeft: ['0.938rem', '1.875rem'],
|
|
13183
13182
|
}), IMAGE_WIDTH);
|
|
13184
13183
|
var Title$4 = newStyled.h2(function (_a) {
|
|
@@ -13215,9 +13214,9 @@ var StyledSpan = newStyled.span(templateObject_6$f || (templateObject_6$f = __ma
|
|
|
13215
13214
|
var SimpleOrderItem = function (_a) {
|
|
13216
13215
|
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;
|
|
13217
13216
|
var theme = useTheme();
|
|
13218
|
-
return (jsxRuntime.jsxs(Container$
|
|
13217
|
+
return (jsxRuntime.jsxs(Container$C, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$4, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? (jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: jsxRuntime.jsx(StyledSpan, { children: quantity }, void 0) }), void 0)) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
13219
13218
|
};
|
|
13220
|
-
var templateObject_1$
|
|
13219
|
+
var templateObject_1$Q, templateObject_2$A, templateObject_3$x, templateObject_4$n, templateObject_5$g, templateObject_6$f;
|
|
13221
13220
|
|
|
13222
13221
|
function formatDate(date) {
|
|
13223
13222
|
var day = date.getDate();
|
|
@@ -13228,9 +13227,9 @@ function formatDate(date) {
|
|
|
13228
13227
|
|
|
13229
13228
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP = 500;
|
|
13230
13229
|
var REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE = 168;
|
|
13231
|
-
var Container$
|
|
13232
|
-
var Heading = newStyled.div(templateObject_2$
|
|
13233
|
-
var Content$2 = newStyled.div(templateObject_3$
|
|
13230
|
+
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"])));
|
|
13231
|
+
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"])));
|
|
13232
|
+
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"])));
|
|
13234
13233
|
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"])));
|
|
13235
13234
|
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"])));
|
|
13236
13235
|
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"])));
|
|
@@ -13270,7 +13269,7 @@ var Review$1 = function (_a) {
|
|
|
13270
13269
|
});
|
|
13271
13270
|
};
|
|
13272
13271
|
}, [randomId]);
|
|
13273
|
-
return (jsxRuntime.jsxs(Container$
|
|
13272
|
+
return (jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(ReviewerName$1, { children: reviewerName }, void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content$2, __assign$1({ "data-testid": "review-content" }, { children: [jsxRuntime.jsxs(ReviewContainer$1, { children: [jsxRuntime.jsx(ReviewTitle$1, { children: title }, void 0), jsxRuntime.jsx(ReviewDescriptionMobile, { dangerouslySetInnerHTML: {
|
|
13274
13273
|
__html: showMoreMobile
|
|
13275
13274
|
? "".concat(description.slice(0, REVIEWS_DESCRIPTION_MAX_LENGTH_MOBILE), "... <a id=\"see-more-").concat(randomId, "\" class=\"see-more\">See more</a>")
|
|
13276
13275
|
: description,
|
|
@@ -13280,15 +13279,15 @@ var Review$1 = function (_a) {
|
|
|
13280
13279
|
: description,
|
|
13281
13280
|
} }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, __assign$1({ showMoreDesktop: description.length > REVIEWS_DESCRIPTION_MAX_LENGTH_DESKTOP }, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }), void 0)] }, void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, height: "10rem", width: "7.5rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
13282
13281
|
};
|
|
13283
|
-
var templateObject_1$
|
|
13282
|
+
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;
|
|
13284
13283
|
|
|
13285
|
-
var List = newStyled.ul(templateObject_1$
|
|
13286
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
13287
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
13284
|
+
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"])));
|
|
13285
|
+
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"])));
|
|
13286
|
+
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"])));
|
|
13288
13287
|
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"])));
|
|
13289
13288
|
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; });
|
|
13290
13289
|
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; });
|
|
13291
|
-
var templateObject_1$
|
|
13290
|
+
var templateObject_1$O, templateObject_2$y, templateObject_3$v, templateObject_4$l, templateObject_5$e, templateObject_6$d;
|
|
13292
13291
|
|
|
13293
13292
|
var DropdownListIcons = function (_a) {
|
|
13294
13293
|
var items = _a.items;
|
|
@@ -13301,7 +13300,7 @@ var Dropdown = function (_a) {
|
|
|
13301
13300
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
13302
13301
|
};
|
|
13303
13302
|
|
|
13304
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
13303
|
+
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; });
|
|
13305
13304
|
var AmazonButton = function (_a) {
|
|
13306
13305
|
var onClick = _a.onClick;
|
|
13307
13306
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -13310,11 +13309,11 @@ var PaypalButton = function (_a) {
|
|
|
13310
13309
|
var onClick = _a.onClick;
|
|
13311
13310
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
13312
13311
|
};
|
|
13313
|
-
var templateObject_1$
|
|
13312
|
+
var templateObject_1$N;
|
|
13314
13313
|
|
|
13315
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
13316
|
-
var Col = newStyled.div(templateObject_2$
|
|
13317
|
-
var Row = newStyled.div(templateObject_3$
|
|
13314
|
+
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'); });
|
|
13315
|
+
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"])));
|
|
13316
|
+
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) {
|
|
13318
13317
|
return props.rightToLeft &&
|
|
13319
13318
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
13320
13319
|
});
|
|
@@ -13326,7 +13325,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
13326
13325
|
var theme = useTheme();
|
|
13327
13326
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3$1, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
13328
13327
|
};
|
|
13329
|
-
var templateObject_1$
|
|
13328
|
+
var templateObject_1$M, templateObject_2$x, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$c;
|
|
13330
13329
|
|
|
13331
13330
|
var index = /*#__PURE__*/Object.freeze({
|
|
13332
13331
|
__proto__: null,
|
|
@@ -13339,7 +13338,7 @@ var Spacing = function (_a) {
|
|
|
13339
13338
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
13340
13339
|
};
|
|
13341
13340
|
|
|
13342
|
-
var Container$
|
|
13341
|
+
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) {
|
|
13343
13342
|
var height = _a.height;
|
|
13344
13343
|
return (height ? height : '1.5em');
|
|
13345
13344
|
}, function (_a) {
|
|
@@ -13364,16 +13363,16 @@ var Container$z = newStyled.div(templateObject_1$K || (templateObject_1$K = __ma
|
|
|
13364
13363
|
var SkeletonBox = function (_a) {
|
|
13365
13364
|
var width = _a.width, height = _a.height;
|
|
13366
13365
|
var theme = useTheme();
|
|
13367
|
-
return jsxRuntime.jsx(Container$
|
|
13366
|
+
return jsxRuntime.jsx(Container$A, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
13368
13367
|
};
|
|
13369
|
-
var templateObject_1$
|
|
13368
|
+
var templateObject_1$L;
|
|
13370
13369
|
|
|
13371
|
-
var Container$
|
|
13370
|
+
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) {
|
|
13372
13371
|
var displayBNPL = _a.displayBNPL;
|
|
13373
13372
|
return (displayBNPL ? 'flex' : 'none');
|
|
13374
13373
|
});
|
|
13375
|
-
var TextContainer$1 = newStyled.div(templateObject_2$
|
|
13376
|
-
var IconWrapper$1 = newStyled.div(templateObject_3$
|
|
13374
|
+
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"])));
|
|
13375
|
+
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"])));
|
|
13377
13376
|
var BuyNowPayLater = function (_a) {
|
|
13378
13377
|
var _b;
|
|
13379
13378
|
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;
|
|
@@ -13383,13 +13382,13 @@ var BuyNowPayLater = function (_a) {
|
|
|
13383
13382
|
console.error('Icon', iconName, 'not found');
|
|
13384
13383
|
return null;
|
|
13385
13384
|
}
|
|
13386
|
-
return (jsxRuntime.jsx(Container$
|
|
13385
|
+
return (jsxRuntime.jsx(Container$z, __assign$1({ displayBNPL: displayBNPL }, { children: jsxRuntime.jsxs(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: ["Or ".concat(installments, " payments of "), jsxRuntime.jsx(Text$8, __assign$1({ variant: "heading6", style: { display: 'inline', fontSize: fontSize }, testId: "InstallmentPriceId" }, { children: installmentPrice }), void 0), showLogo ? ' with' : '', showLogo && (jsxRuntime.jsx(IconWrapper$1, { children: jsxRuntime.jsx(IconComponent, { width: 3.2, height: 2, fill: iconColor, style: { top: '-3px', position: 'relative' } }, void 0) }, void 0))] }), void 0) }), void 0));
|
|
13387
13386
|
};
|
|
13388
|
-
var templateObject_1$
|
|
13387
|
+
var templateObject_1$K, templateObject_2$w, templateObject_3$t;
|
|
13389
13388
|
|
|
13390
|
-
var Container$
|
|
13391
|
-
var Content$1 = newStyled('div')(templateObject_2$
|
|
13392
|
-
var BarContainer = newStyled('div')(templateObject_3$
|
|
13389
|
+
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"])));
|
|
13390
|
+
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"])));
|
|
13391
|
+
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"])));
|
|
13393
13392
|
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) {
|
|
13394
13393
|
var index = _a.index;
|
|
13395
13394
|
return "".concat(6 + 3 * index, "px");
|
|
@@ -13399,9 +13398,18 @@ var Bar = newStyled('div')(templateObject_4$j || (templateObject_4$j = __makeTem
|
|
|
13399
13398
|
});
|
|
13400
13399
|
var StrengthBars = function (_a) {
|
|
13401
13400
|
var _b = _a.barsFilled, barsFilled = _b === void 0 ? 0 : _b, supportText = _a.supportText;
|
|
13402
|
-
return (jsxRuntime.jsxs(Container$
|
|
13401
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ "data-testid": "strength-bar" }, { children: [jsxRuntime.jsx(BarContainer, { children: [1, 2, 3, 4, 5].map(function (bar, index) { return (jsxRuntime.jsx(Bar, { index: index, isFilled: bar <= barsFilled }, bar)); }) }, void 0), jsxRuntime.jsx(Content$1, { children: supportText }, void 0)] }), void 0));
|
|
13403
13402
|
};
|
|
13404
|
-
var templateObject_1$
|
|
13403
|
+
var templateObject_1$J, templateObject_2$v, templateObject_3$s, templateObject_4$j;
|
|
13404
|
+
|
|
13405
|
+
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"])));
|
|
13406
|
+
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"])));
|
|
13407
|
+
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"])));
|
|
13408
|
+
var ClubPriceLabel = function (_a) {
|
|
13409
|
+
var clubPrice = _a.clubPrice;
|
|
13410
|
+
return (jsxRuntime.jsxs(Container$x, { children: [jsxRuntime.jsx(DollarPart, { children: clubPrice }, void 0), jsxRuntime.jsx(ClubMembersText, { children: "FOR CLUB MEMBERS" }, void 0)] }, void 0));
|
|
13411
|
+
};
|
|
13412
|
+
var templateObject_1$I, templateObject_2$u, templateObject_3$r;
|
|
13405
13413
|
|
|
13406
13414
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
13407
13415
|
var width = _a.width, height = _a.height;
|
|
@@ -13466,7 +13474,7 @@ var ProductItemMobile = function (_a) {
|
|
|
13466
13474
|
} : _f, _g = _a.hasStrength, hasStrength = _g === void 0 ? {
|
|
13467
13475
|
strength: -1,
|
|
13468
13476
|
description: '',
|
|
13469
|
-
} : _g;
|
|
13477
|
+
} : _g, _h = _a.clubPrice, clubPrice = _h === void 0 ? '' : _h, _j = _a.showClubPriceLabel, showClubPriceLabel = _j === void 0 ? false : _j;
|
|
13470
13478
|
var theme = useTheme();
|
|
13471
13479
|
var styles = getStylesBySize$1(size);
|
|
13472
13480
|
var space = React$2.useMemo(function () {
|
|
@@ -13478,10 +13486,15 @@ var ProductItemMobile = function (_a) {
|
|
|
13478
13486
|
_a)[size];
|
|
13479
13487
|
}, [size]);
|
|
13480
13488
|
var PriceLabelDisplay = function () {
|
|
13481
|
-
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount"
|
|
13489
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel ? true : false, finalPriceStyle: showClubPriceLabel
|
|
13490
|
+
? {
|
|
13491
|
+
fontSize: '16px',
|
|
13492
|
+
fontWeight: 700,
|
|
13493
|
+
}
|
|
13494
|
+
: undefined }, void 0));
|
|
13482
13495
|
};
|
|
13483
13496
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
13484
|
-
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));
|
|
13497
|
+
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));
|
|
13485
13498
|
};
|
|
13486
13499
|
var templateObject_1$H, templateObject_2$t, templateObject_3$q, templateObject_4$i, templateObject_5$c, templateObject_6$b, templateObject_7$8;
|
|
13487
13500
|
|