@trafilea/afrodita-components 5.0.0-beta.201 → 5.0.0-beta.203
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 +10 -1
- package/build/index.esm.js +222 -193
- package/build/index.esm.js.map +1 -1
- package/build/index.js +222 -192
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4107,7 +4107,7 @@ exports.InputValidationType = void 0;
|
|
|
4107
4107
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4108
4108
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4109
4109
|
|
|
4110
|
-
var Section = newStyled.div(templateObject_1$
|
|
4110
|
+
var Section = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
4111
4111
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4112
4112
|
});
|
|
4113
4113
|
var CardHeader = function (_a) {
|
|
@@ -4118,14 +4118,14 @@ var CardFooter = function (_a) {
|
|
|
4118
4118
|
var children = _a.children;
|
|
4119
4119
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4120
4120
|
};
|
|
4121
|
-
var templateObject_1$
|
|
4121
|
+
var templateObject_1$1w;
|
|
4122
4122
|
|
|
4123
|
-
var Body = newStyled.div(templateObject_1$
|
|
4123
|
+
var Body = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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"])));
|
|
4124
4124
|
var CardBody = function (_a) {
|
|
4125
4125
|
var children = _a.children;
|
|
4126
4126
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4127
4127
|
};
|
|
4128
|
-
var templateObject_1$
|
|
4128
|
+
var templateObject_1$1v;
|
|
4129
4129
|
|
|
4130
4130
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4131
4131
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4270,7 +4270,7 @@ var AssetsProvider = function (_a) {
|
|
|
4270
4270
|
};
|
|
4271
4271
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4272
4272
|
|
|
4273
|
-
var Container$Z = newStyled.div(templateObject_1$
|
|
4273
|
+
var Container$Z = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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) {
|
|
4274
4274
|
var flex = _a.flex;
|
|
4275
4275
|
return flex &&
|
|
4276
4276
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4292,7 +4292,7 @@ var Card$3 = Object.assign(Card$2, {
|
|
|
4292
4292
|
Footer: CardFooter,
|
|
4293
4293
|
Body: CardBody,
|
|
4294
4294
|
});
|
|
4295
|
-
var templateObject_1$
|
|
4295
|
+
var templateObject_1$1u;
|
|
4296
4296
|
|
|
4297
4297
|
var Fragment = jsxRuntime.Fragment;
|
|
4298
4298
|
function jsx(type, props, key) {
|
|
@@ -4438,7 +4438,7 @@ function BaseSelectOption(_a) {
|
|
|
4438
4438
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4439
4439
|
}
|
|
4440
4440
|
|
|
4441
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4441
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1t || (templateObject_1$1t = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4442
4442
|
function BaseSelect(_a) {
|
|
4443
4443
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4444
4444
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4448,7 +4448,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4448
4448
|
Options: BaseSelectOptions,
|
|
4449
4449
|
Option: BaseSelectOption,
|
|
4450
4450
|
});
|
|
4451
|
-
var templateObject_1$
|
|
4451
|
+
var templateObject_1$1t;
|
|
4452
4452
|
|
|
4453
4453
|
var CustomButton = newStyled.button(function (_a) {
|
|
4454
4454
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4505,14 +4505,14 @@ var withLabel = function (Button, label) {
|
|
|
4505
4505
|
};
|
|
4506
4506
|
};
|
|
4507
4507
|
|
|
4508
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4508
|
+
var ErrorText = newStyled.h3(templateObject_1$1s || (templateObject_1$1s = __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; });
|
|
4509
4509
|
var ErrorContainer = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
4510
4510
|
var Error$1 = function (_a) {
|
|
4511
4511
|
var error = _a.error;
|
|
4512
4512
|
var theme = useTheme();
|
|
4513
4513
|
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));
|
|
4514
4514
|
};
|
|
4515
|
-
var templateObject_1$
|
|
4515
|
+
var templateObject_1$1s, templateObject_2$Y;
|
|
4516
4516
|
|
|
4517
4517
|
var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4518
4518
|
var theme = _a.theme;
|
|
@@ -4678,7 +4678,7 @@ var CustomCheckboxStyles = {
|
|
|
4678
4678
|
},
|
|
4679
4679
|
};
|
|
4680
4680
|
|
|
4681
|
-
var Container$Y = newStyled.div(templateObject_1$
|
|
4681
|
+
var Container$Y = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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"])));
|
|
4682
4682
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4683
4683
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4684
4684
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4720,7 +4720,7 @@ var Checkbox = function (_a) {
|
|
|
4720
4720
|
}, []);
|
|
4721
4721
|
return (jsxRuntime.jsxs(Container$Y, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4722
4722
|
};
|
|
4723
|
-
var templateObject_1$
|
|
4723
|
+
var templateObject_1$1r, templateObject_2$X;
|
|
4724
4724
|
|
|
4725
4725
|
var CustomOption = newStyled.li(function (_a) {
|
|
4726
4726
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4767,7 +4767,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4767
4767
|
Option: BaseDropdownOption,
|
|
4768
4768
|
});
|
|
4769
4769
|
|
|
4770
|
-
var Container$X = newStyled.div(templateObject_1$
|
|
4770
|
+
var Container$X = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject([""], [""])));
|
|
4771
4771
|
var RequiredPlaceholder = newStyled.p(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
4772
4772
|
function SimpleDropdown(_a) {
|
|
4773
4773
|
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;
|
|
@@ -4800,9 +4800,9 @@ function SimpleDropdown(_a) {
|
|
|
4800
4800
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4801
4801
|
return (jsxRuntime.jsxs(Container$X, __assign$1({ as: showRequiredPlaceholder ? 'div' : React$2.Fragment }, { 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));
|
|
4802
4802
|
}
|
|
4803
|
-
var templateObject_1$
|
|
4803
|
+
var templateObject_1$1q, templateObject_2$W;
|
|
4804
4804
|
|
|
4805
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4805
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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; });
|
|
4806
4806
|
var DialogDropdownListContainer = newStyled.ul(templateObject_2$V || (templateObject_2$V = __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; });
|
|
4807
4807
|
var DialogDropdownListItem = newStyled.li(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
4808
4808
|
var DialogDropdownLink = newStyled.a(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
@@ -4813,7 +4813,7 @@ var DropdownDialog = function (_a) {
|
|
|
4813
4813
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4814
4814
|
}) }), void 0) }), void 0));
|
|
4815
4815
|
};
|
|
4816
|
-
var templateObject_1$
|
|
4816
|
+
var templateObject_1$1p, templateObject_2$V, templateObject_3$J, templateObject_4$w;
|
|
4817
4817
|
|
|
4818
4818
|
var getStylesBySize$9 = function (size, theme) {
|
|
4819
4819
|
switch (size) {
|
|
@@ -4881,7 +4881,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4881
4881
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4882
4882
|
// `variants` styles that are consistent through all themes.
|
|
4883
4883
|
var TAGS = {
|
|
4884
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4884
|
+
hero1: newStyled.h1(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject([""], [""]))),
|
|
4885
4885
|
hero2: newStyled.h2(templateObject_2$U || (templateObject_2$U = __makeTemplateObject([""], [""]))),
|
|
4886
4886
|
hero3: newStyled.h3(templateObject_3$I || (templateObject_3$I = __makeTemplateObject([""], [""]))),
|
|
4887
4887
|
display1: newStyled.h1(templateObject_4$v || (templateObject_4$v = __makeTemplateObject([""], [""]))),
|
|
@@ -5005,9 +5005,9 @@ var DEFAULTS = {
|
|
|
5005
5005
|
size: 'regular',
|
|
5006
5006
|
},
|
|
5007
5007
|
};
|
|
5008
|
-
var templateObject_1$
|
|
5008
|
+
var templateObject_1$1o, templateObject_2$U, templateObject_3$I, templateObject_4$v, templateObject_5$i, templateObject_6$f, templateObject_7$9, templateObject_8$6, templateObject_9$3, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2;
|
|
5009
5009
|
|
|
5010
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5010
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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) {
|
|
5011
5011
|
var inline = _a.inline;
|
|
5012
5012
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5013
5013
|
});
|
|
@@ -5026,7 +5026,7 @@ var SizeSelector = function (_a) {
|
|
|
5026
5026
|
}, 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));
|
|
5027
5027
|
}) }), void 0)] }), void 0));
|
|
5028
5028
|
};
|
|
5029
|
-
var templateObject_1$
|
|
5029
|
+
var templateObject_1$1n;
|
|
5030
5030
|
|
|
5031
5031
|
var getStylesBySize$8 = function (size) {
|
|
5032
5032
|
switch (size) {
|
|
@@ -5053,7 +5053,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5053
5053
|
} });
|
|
5054
5054
|
};
|
|
5055
5055
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5056
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5056
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1m || (templateObject_1$1m = __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));
|
|
5057
5057
|
};
|
|
5058
5058
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5059
5059
|
if (disabled)
|
|
@@ -5069,16 +5069,16 @@ var TextButton = function (_a) {
|
|
|
5069
5069
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5070
5070
|
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));
|
|
5071
5071
|
};
|
|
5072
|
-
var templateObject_1$
|
|
5072
|
+
var templateObject_1$1m;
|
|
5073
5073
|
|
|
5074
|
-
var Container$W = newStyled.div(templateObject_1$
|
|
5074
|
+
var Container$W = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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"])));
|
|
5075
5075
|
var P$2 = newStyled.p(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5076
5076
|
var PercentageSpan = newStyled.span(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
5077
5077
|
var SizeFitGuide = function (_a) {
|
|
5078
5078
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5079
5079
|
return (jsxRuntime.jsxs(Container$W, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$2, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5080
5080
|
};
|
|
5081
|
-
var templateObject_1$
|
|
5081
|
+
var templateObject_1$1l, templateObject_2$T, templateObject_3$H;
|
|
5082
5082
|
|
|
5083
5083
|
var getStylesBySize$7 = function (size) {
|
|
5084
5084
|
switch (size) {
|
|
@@ -5108,7 +5108,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5108
5108
|
};
|
|
5109
5109
|
}
|
|
5110
5110
|
};
|
|
5111
|
-
var Container$V = newStyled.div(templateObject_1$
|
|
5111
|
+
var Container$V = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
5112
5112
|
var backgroundColor = _a.backgroundColor;
|
|
5113
5113
|
return backgroundColor;
|
|
5114
5114
|
}, function (_a) {
|
|
@@ -5147,7 +5147,7 @@ var DiscountTag = function (_a) {
|
|
|
5147
5147
|
var theme = useTheme();
|
|
5148
5148
|
return (jsxRuntime.jsx(Container$V, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5149
5149
|
};
|
|
5150
|
-
var templateObject_1$
|
|
5150
|
+
var templateObject_1$1k, templateObject_2$S;
|
|
5151
5151
|
|
|
5152
5152
|
var getStylesBySize$6 = function (size) {
|
|
5153
5153
|
switch (size) {
|
|
@@ -5177,7 +5177,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5177
5177
|
};
|
|
5178
5178
|
}
|
|
5179
5179
|
};
|
|
5180
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
5180
|
+
var Container$U = 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"])));
|
|
5181
5181
|
var Price = newStyled.p(templateObject_2$R || (templateObject_2$R = __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) {
|
|
5182
5182
|
var weight = _a.weight;
|
|
5183
5183
|
return (weight ? weight : '400');
|
|
@@ -5230,9 +5230,9 @@ var PriceLabel = function (_a) {
|
|
|
5230
5230
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5231
5231
|
return (jsxRuntime.jsxs(Container$U, { 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), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5232
5232
|
};
|
|
5233
|
-
var templateObject_1$
|
|
5233
|
+
var templateObject_1$1j, templateObject_2$R, templateObject_3$G;
|
|
5234
5234
|
|
|
5235
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5235
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5236
5236
|
var PriceLabelV2 = function (_a) {
|
|
5237
5237
|
var _b;
|
|
5238
5238
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, 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;
|
|
@@ -5262,7 +5262,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5262
5262
|
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)); };
|
|
5263
5263
|
return (jsxRuntime.jsxs(Container$U, { 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))] }, void 0));
|
|
5264
5264
|
};
|
|
5265
|
-
var templateObject_1$
|
|
5265
|
+
var templateObject_1$1i;
|
|
5266
5266
|
|
|
5267
5267
|
var OneColorSelector = function (_a) {
|
|
5268
5268
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5303,7 +5303,7 @@ var OutOfStock = function (_a) {
|
|
|
5303
5303
|
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));
|
|
5304
5304
|
};
|
|
5305
5305
|
|
|
5306
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5306
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5307
5307
|
newStyled(lt.Label)(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5308
5308
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
5309
5309
|
var Span = newStyled.span(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -5325,9 +5325,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5325
5325
|
Option: Option,
|
|
5326
5326
|
OptionsContainer: OptionsContainer,
|
|
5327
5327
|
});
|
|
5328
|
-
var templateObject_1$
|
|
5328
|
+
var templateObject_1$1h, templateObject_2$Q, templateObject_3$F, templateObject_4$u, templateObject_5$h;
|
|
5329
5329
|
|
|
5330
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
5330
|
+
var Container$T = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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) {
|
|
5331
5331
|
var borderColor = _a.borderColor;
|
|
5332
5332
|
return borderColor;
|
|
5333
5333
|
}, function (_a) {
|
|
@@ -5341,7 +5341,7 @@ var PatternSelector = function (_a) {
|
|
|
5341
5341
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5342
5342
|
return (jsxRuntime.jsx(Container$T, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5343
5343
|
};
|
|
5344
|
-
var templateObject_1$
|
|
5344
|
+
var templateObject_1$1g, templateObject_2$P;
|
|
5345
5345
|
|
|
5346
5346
|
var renderOptions$1 = function (options) {
|
|
5347
5347
|
if (options.length === 0) {
|
|
@@ -5546,7 +5546,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5546
5546
|
literal: true,
|
|
5547
5547
|
});
|
|
5548
5548
|
|
|
5549
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5549
|
+
var Image$2 = newStyled.img(templateObject_1$1f || (templateObject_1$1f = __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) {
|
|
5550
5550
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5551
5551
|
return borderRadiusVariant &&
|
|
5552
5552
|
"\nborder-radius: 20px;\n";
|
|
@@ -5561,7 +5561,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5561
5561
|
var theme = useTheme();
|
|
5562
5562
|
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));
|
|
5563
5563
|
};
|
|
5564
|
-
var templateObject_1$
|
|
5564
|
+
var templateObject_1$1f;
|
|
5565
5565
|
|
|
5566
5566
|
var Button$4 = newStyled.button(function () { return ({
|
|
5567
5567
|
background: 'transparent',
|
|
@@ -9805,14 +9805,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9805
9805
|
return Slider;
|
|
9806
9806
|
}(React__default["default"].Component);
|
|
9807
9807
|
|
|
9808
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9808
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
9809
9809
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9810
9810
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9811
9811
|
}, function (_a) {
|
|
9812
9812
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9813
9813
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9814
9814
|
});
|
|
9815
|
-
var templateObject_1$
|
|
9815
|
+
var templateObject_1$1e;
|
|
9816
9816
|
|
|
9817
9817
|
var getStylesBySize$5 = function (size) {
|
|
9818
9818
|
// rem units
|
|
@@ -9871,7 +9871,7 @@ var SliderNavigation = function (_a) {
|
|
|
9871
9871
|
} }, { 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));
|
|
9872
9872
|
};
|
|
9873
9873
|
|
|
9874
|
-
var horizontalStyles = css(templateObject_1$
|
|
9874
|
+
var horizontalStyles = css(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
9875
9875
|
var verticalStyles = css(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
9876
9876
|
var Container$S = newStyled.div(templateObject_3$E || (templateObject_3$E = __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) {
|
|
9877
9877
|
var position = _a.position;
|
|
@@ -9886,7 +9886,7 @@ var ImagePreviewList = function (_a) {
|
|
|
9886
9886
|
arrowPadding: 1.625,
|
|
9887
9887
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
9888
9888
|
};
|
|
9889
|
-
var templateObject_1$
|
|
9889
|
+
var templateObject_1$1d, templateObject_2$O, templateObject_3$E, templateObject_4$t;
|
|
9890
9890
|
|
|
9891
9891
|
var propTypes = {exports: {}};
|
|
9892
9892
|
|
|
@@ -11479,7 +11479,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11479
11479
|
afterZoomOut: PropTypes.func
|
|
11480
11480
|
} : {};
|
|
11481
11481
|
|
|
11482
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
11482
|
+
var Container$R = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
11483
11483
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11484
11484
|
return borderRadiusVariant &&
|
|
11485
11485
|
"\n border-radius: 40px;\n ";
|
|
@@ -11494,9 +11494,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11494
11494
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11495
11495
|
}, 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), 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));
|
|
11496
11496
|
};
|
|
11497
|
-
var templateObject_1$
|
|
11497
|
+
var templateObject_1$1c, templateObject_2$N, templateObject_3$D, templateObject_4$s;
|
|
11498
11498
|
|
|
11499
|
-
var Container$Q = newStyled.div(templateObject_1$
|
|
11499
|
+
var Container$Q = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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"])));
|
|
11500
11500
|
var ProductGallery = function (_a) {
|
|
11501
11501
|
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;
|
|
11502
11502
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11508,7 +11508,7 @@ var ProductGallery = function (_a) {
|
|
|
11508
11508
|
setSelectedImage(value);
|
|
11509
11509
|
}, 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));
|
|
11510
11510
|
};
|
|
11511
|
-
var templateObject_1$
|
|
11511
|
+
var templateObject_1$1b;
|
|
11512
11512
|
|
|
11513
11513
|
/* base styles & size variants */
|
|
11514
11514
|
var StarStyles = {
|
|
@@ -11554,8 +11554,8 @@ var StarStyles = {
|
|
|
11554
11554
|
});
|
|
11555
11555
|
},
|
|
11556
11556
|
};
|
|
11557
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
11558
|
-
var templateObject_1$
|
|
11557
|
+
var Container$P = 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"])));
|
|
11558
|
+
var templateObject_1$1a;
|
|
11559
11559
|
|
|
11560
11560
|
var StarContainer = newStyled.div(function (_a) {
|
|
11561
11561
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11617,8 +11617,8 @@ var LabelStyles = {
|
|
|
11617
11617
|
});
|
|
11618
11618
|
},
|
|
11619
11619
|
};
|
|
11620
|
-
var Container$O = newStyled.a(templateObject_1$
|
|
11621
|
-
var templateObject_1$
|
|
11620
|
+
var Container$O = newStyled.a(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11621
|
+
var templateObject_1$19;
|
|
11622
11622
|
|
|
11623
11623
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11624
11624
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11659,7 +11659,7 @@ var Rating = function (_a) {
|
|
|
11659
11659
|
return (jsxRuntime.jsxs(Container$O, __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, " ", reviewsText] }), void 0)] }), void 0));
|
|
11660
11660
|
};
|
|
11661
11661
|
|
|
11662
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
11662
|
+
var Container$N = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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"])));
|
|
11663
11663
|
var P$1 = newStyled.p(templateObject_2$M || (templateObject_2$M = __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; });
|
|
11664
11664
|
var textButtonStyles = function (theme) { return ({
|
|
11665
11665
|
border: 'none',
|
|
@@ -11675,7 +11675,7 @@ var FitPredictor = function (_a) {
|
|
|
11675
11675
|
var theme = useTheme();
|
|
11676
11676
|
return (jsxs(Container$N, __assign$1({ theme: theme }, { children: [jsx(Container$N, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$1, __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));
|
|
11677
11677
|
};
|
|
11678
|
-
var templateObject_1$
|
|
11678
|
+
var templateObject_1$18, templateObject_2$M;
|
|
11679
11679
|
|
|
11680
11680
|
var H2$1 = newStyled.h2(function (_a) {
|
|
11681
11681
|
var color = _a.color;
|
|
@@ -11689,7 +11689,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
11689
11689
|
margin: '0.938rem 4.188rem',
|
|
11690
11690
|
});
|
|
11691
11691
|
});
|
|
11692
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11692
|
+
var Bar = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\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: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11693
11693
|
var backgroundColor = _a.backgroundColor;
|
|
11694
11694
|
return backgroundColor;
|
|
11695
11695
|
}, function (_a) {
|
|
@@ -11728,7 +11728,7 @@ var ProgressBar = function (_a) {
|
|
|
11728
11728
|
var theme = useTheme();
|
|
11729
11729
|
return (jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11730
11730
|
};
|
|
11731
|
-
var templateObject_1$
|
|
11731
|
+
var templateObject_1$17;
|
|
11732
11732
|
|
|
11733
11733
|
var getStylesBySize$4 = function (size) {
|
|
11734
11734
|
switch (size) {
|
|
@@ -11749,7 +11749,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11749
11749
|
};
|
|
11750
11750
|
}
|
|
11751
11751
|
};
|
|
11752
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
11752
|
+
var Container$L = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
11753
11753
|
var backgroundColor = _a.backgroundColor;
|
|
11754
11754
|
return backgroundColor;
|
|
11755
11755
|
}, function (_a) {
|
|
@@ -11779,7 +11779,7 @@ var IconButton = function (_a) {
|
|
|
11779
11779
|
var theme = useTheme();
|
|
11780
11780
|
return (jsxRuntime.jsx(Container$L, __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));
|
|
11781
11781
|
};
|
|
11782
|
-
var templateObject_1$
|
|
11782
|
+
var templateObject_1$16;
|
|
11783
11783
|
|
|
11784
11784
|
var TooltipArrow = function (_a) {
|
|
11785
11785
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11859,7 +11859,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11859
11859
|
}
|
|
11860
11860
|
};
|
|
11861
11861
|
|
|
11862
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11862
|
+
var Wrapper$5 = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
11863
11863
|
var position = _a.position;
|
|
11864
11864
|
return getWrapperFlexDirection(position);
|
|
11865
11865
|
});
|
|
@@ -11911,7 +11911,7 @@ var Title$7 = newStyled.h1(templateObject_6$e || (templateObject_6$e = __makeTem
|
|
|
11911
11911
|
return color;
|
|
11912
11912
|
});
|
|
11913
11913
|
var IconContainer$5 = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __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"])));
|
|
11914
|
-
var templateObject_1$
|
|
11914
|
+
var templateObject_1$15, templateObject_2$L, templateObject_3$C, templateObject_4$r, templateObject_5$g, templateObject_6$e, templateObject_7$8;
|
|
11915
11915
|
|
|
11916
11916
|
var Tooltip = function (_a) {
|
|
11917
11917
|
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;
|
|
@@ -11998,7 +11998,7 @@ var AccordionDetailsStyles = {
|
|
|
11998
11998
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
11999
11999
|
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)]; });
|
|
12000
12000
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
12001
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
12001
|
+
var StyledContent = newStyled.button(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n"])));
|
|
12002
12002
|
var Accordion$1 = function (_a) {
|
|
12003
12003
|
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;
|
|
12004
12004
|
var theme = useTheme();
|
|
@@ -12010,7 +12010,7 @@ var Accordion$1 = function (_a) {
|
|
|
12010
12010
|
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));
|
|
12011
12011
|
} }), void 0));
|
|
12012
12012
|
};
|
|
12013
|
-
var templateObject_1$
|
|
12013
|
+
var templateObject_1$14;
|
|
12014
12014
|
|
|
12015
12015
|
/* base styles & size variants */
|
|
12016
12016
|
var CustomRadioStyles = {
|
|
@@ -12075,7 +12075,7 @@ var ContainerStyles = {
|
|
|
12075
12075
|
},
|
|
12076
12076
|
};
|
|
12077
12077
|
|
|
12078
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
12078
|
+
var Wrapper$4 = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12079
12079
|
var Container$K = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
12080
12080
|
var Input$2 = newStyled.input(templateObject_2$K || (templateObject_2$K = __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) {
|
|
12081
12081
|
var disabled = _a.disabled;
|
|
@@ -12101,7 +12101,7 @@ var RadioInput = function (_a) {
|
|
|
12101
12101
|
};
|
|
12102
12102
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$K, __assign$1({ theme: theme, size: size, "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 }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12103
12103
|
};
|
|
12104
|
-
var templateObject_1$
|
|
12104
|
+
var templateObject_1$13, templateObject_2$K, templateObject_3$B;
|
|
12105
12105
|
|
|
12106
12106
|
var RadioGroupInput = function (_a) {
|
|
12107
12107
|
var 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;
|
|
@@ -12115,16 +12115,16 @@ var RadioGroupInput = function (_a) {
|
|
|
12115
12115
|
}) }), void 0));
|
|
12116
12116
|
};
|
|
12117
12117
|
|
|
12118
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
12118
|
+
var Wrapper$3 = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __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"])));
|
|
12119
12119
|
var Container$J = newStyled.div(templateObject_2$J || (templateObject_2$J = __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"])));
|
|
12120
12120
|
var Minimalistic = function (_a) {
|
|
12121
12121
|
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;
|
|
12122
12122
|
var theme = useTheme();
|
|
12123
12123
|
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$J, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 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$J, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
12124
12124
|
};
|
|
12125
|
-
var templateObject_1$
|
|
12125
|
+
var templateObject_1$12, templateObject_2$J;
|
|
12126
12126
|
|
|
12127
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
12127
|
+
var Container$I = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
12128
12128
|
var Title$6 = newStyled.h1(templateObject_2$I || (templateObject_2$I = __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; });
|
|
12129
12129
|
var Details$1 = newStyled.span(templateObject_3$A || (templateObject_3$A = __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; });
|
|
12130
12130
|
var PriceContainer$1 = newStyled.span(templateObject_4$q || (templateObject_4$q = __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"])));
|
|
@@ -12133,19 +12133,19 @@ var Simple = function (_a) {
|
|
|
12133
12133
|
var theme = useTheme();
|
|
12134
12134
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$I, { 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));
|
|
12135
12135
|
};
|
|
12136
|
-
var templateObject_1$
|
|
12136
|
+
var templateObject_1$11, templateObject_2$I, templateObject_3$A, templateObject_4$q;
|
|
12137
12137
|
|
|
12138
12138
|
var Bundle = {
|
|
12139
12139
|
Minimalistic: Minimalistic,
|
|
12140
12140
|
Simple: Simple,
|
|
12141
12141
|
};
|
|
12142
12142
|
|
|
12143
|
-
var Container$H = newStyled.div(templateObject_1
|
|
12143
|
+
var Container$H = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __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"])));
|
|
12144
12144
|
var Tag$2 = function (_a) {
|
|
12145
12145
|
var text = _a.text, className = _a.className;
|
|
12146
12146
|
return jsxRuntime.jsx(Container$H, __assign$1({ className: className }, { children: text }), void 0);
|
|
12147
12147
|
};
|
|
12148
|
-
var templateObject_1
|
|
12148
|
+
var templateObject_1$10;
|
|
12149
12149
|
|
|
12150
12150
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
12151
12151
|
switch (size) {
|
|
@@ -12248,7 +12248,7 @@ var Timer = function (_a) {
|
|
|
12248
12248
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12249
12249
|
};
|
|
12250
12250
|
|
|
12251
|
-
var Label$2 = newStyled.span(templateObject_1
|
|
12251
|
+
var Label$2 = newStyled.span(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
12252
12252
|
var color = _a.color;
|
|
12253
12253
|
return color;
|
|
12254
12254
|
});
|
|
@@ -12261,7 +12261,7 @@ var InputLabel = function (_a) {
|
|
|
12261
12261
|
var theme = useTheme();
|
|
12262
12262
|
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));
|
|
12263
12263
|
};
|
|
12264
|
-
var templateObject_1
|
|
12264
|
+
var templateObject_1$$, templateObject_2$H;
|
|
12265
12265
|
|
|
12266
12266
|
var containerByStatus = function (theme, status) {
|
|
12267
12267
|
if (status === exports.InputValidationType.Valid)
|
|
@@ -12270,7 +12270,7 @@ var containerByStatus = function (theme, status) {
|
|
|
12270
12270
|
return theme.colors.semantic.urgent.color;
|
|
12271
12271
|
return '';
|
|
12272
12272
|
};
|
|
12273
|
-
var Container$G = newStyled.div(templateObject_1$
|
|
12273
|
+
var Container$G = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12274
12274
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12275
12275
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12276
12276
|
});
|
|
@@ -12336,7 +12336,7 @@ var InputWrapper = newStyled.div(templateObject_4$p || (templateObject_4$p = __m
|
|
|
12336
12336
|
});
|
|
12337
12337
|
var AnimatedPlaceholder = newStyled.span(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
12338
12338
|
var ClearInput = newStyled.div(templateObject_6$d || (templateObject_6$d = __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"])));
|
|
12339
|
-
var templateObject_1$
|
|
12339
|
+
var templateObject_1$_, templateObject_2$G, templateObject_3$z, templateObject_4$p, templateObject_5$f, templateObject_6$d;
|
|
12340
12340
|
|
|
12341
12341
|
var BaseInput = function (_a) {
|
|
12342
12342
|
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"]);
|
|
@@ -12380,7 +12380,7 @@ var Button$2 = function (_a) {
|
|
|
12380
12380
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12381
12381
|
};
|
|
12382
12382
|
|
|
12383
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
12383
|
+
var Container$F = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __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) {
|
|
12384
12384
|
var theme = _a.theme;
|
|
12385
12385
|
return theme.component.inputCustom.input.borderRadius;
|
|
12386
12386
|
});
|
|
@@ -12399,9 +12399,9 @@ var Custom = function (_a) {
|
|
|
12399
12399
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12400
12400
|
return (jsxRuntime.jsx(Container$F, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12401
12401
|
};
|
|
12402
|
-
var templateObject_1$
|
|
12402
|
+
var templateObject_1$Z, templateObject_2$F;
|
|
12403
12403
|
|
|
12404
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12404
|
+
var SuccessContainer = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12405
12405
|
var size = _a.size;
|
|
12406
12406
|
return (size === 'small' ? '36px' : '');
|
|
12407
12407
|
});
|
|
@@ -12411,9 +12411,9 @@ var Success = function (_a) {
|
|
|
12411
12411
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12412
12412
|
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));
|
|
12413
12413
|
};
|
|
12414
|
-
var templateObject_1$
|
|
12414
|
+
var templateObject_1$Y, templateObject_2$E, templateObject_3$y;
|
|
12415
12415
|
|
|
12416
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12416
|
+
var ButtonContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __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) {
|
|
12417
12417
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12418
12418
|
return status === exports.InputValidationType.Empty &&
|
|
12419
12419
|
type === 'primary' &&
|
|
@@ -12430,9 +12430,9 @@ var BasePlusButton = function (_a) {
|
|
|
12430
12430
|
}
|
|
12431
12431
|
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));
|
|
12432
12432
|
};
|
|
12433
|
-
var templateObject_1$
|
|
12433
|
+
var templateObject_1$X;
|
|
12434
12434
|
|
|
12435
|
-
var Container$E = newStyled.div(templateObject_1$
|
|
12435
|
+
var Container$E = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12436
12436
|
var IconContainer$4 = newStyled.div(templateObject_2$D || (templateObject_2$D = __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; });
|
|
12437
12437
|
var BasePlusIcon = function (_a) {
|
|
12438
12438
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
@@ -12444,7 +12444,7 @@ var BasePlusIcon = function (_a) {
|
|
|
12444
12444
|
? theme.colors.semantic.urgent.color
|
|
12445
12445
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12446
12446
|
};
|
|
12447
|
-
var templateObject_1$
|
|
12447
|
+
var templateObject_1$W, templateObject_2$D;
|
|
12448
12448
|
|
|
12449
12449
|
var Input$1 = {
|
|
12450
12450
|
Simple: BaseInput,
|
|
@@ -12453,7 +12453,7 @@ var Input$1 = {
|
|
|
12453
12453
|
SimplePlusIcon: BasePlusIcon,
|
|
12454
12454
|
};
|
|
12455
12455
|
|
|
12456
|
-
var Container$D = newStyled.div(templateObject_1$
|
|
12456
|
+
var Container$D = newStyled.div(templateObject_1$V || (templateObject_1$V = __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) {
|
|
12457
12457
|
var width = _a.width;
|
|
12458
12458
|
return width;
|
|
12459
12459
|
}, function (_a) {
|
|
@@ -12471,9 +12471,9 @@ var PaymentMethod = function (_a) {
|
|
|
12471
12471
|
var theme = useTheme();
|
|
12472
12472
|
return (jsxRuntime.jsx(Container$D, __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));
|
|
12473
12473
|
};
|
|
12474
|
-
var templateObject_1$
|
|
12474
|
+
var templateObject_1$V;
|
|
12475
12475
|
|
|
12476
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12476
|
+
var Text$5 = newStyled.h3(templateObject_1$U || (templateObject_1$U = __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) {
|
|
12477
12477
|
var backgroundColor = _a.backgroundColor;
|
|
12478
12478
|
return backgroundColor;
|
|
12479
12479
|
}, function (_a) {
|
|
@@ -12485,9 +12485,9 @@ var OfferBanner = function (_a) {
|
|
|
12485
12485
|
var theme = useTheme();
|
|
12486
12486
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12487
12487
|
};
|
|
12488
|
-
var templateObject_1$
|
|
12488
|
+
var templateObject_1$U;
|
|
12489
12489
|
|
|
12490
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12490
|
+
var Wrapper$2 = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
12491
12491
|
var GrandTotal = newStyled.h1(templateObject_2$C || (templateObject_2$C = __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; });
|
|
12492
12492
|
var Currency = newStyled.span(templateObject_3$x || (templateObject_3$x = __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) {
|
|
12493
12493
|
var theme = _a.theme;
|
|
@@ -12525,9 +12525,9 @@ var Total = function (_a) {
|
|
|
12525
12525
|
var theme = useTheme();
|
|
12526
12526
|
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$C, __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));
|
|
12527
12527
|
};
|
|
12528
|
-
var templateObject_1$
|
|
12528
|
+
var templateObject_1$T, templateObject_2$C, templateObject_3$x, templateObject_4$o, templateObject_5$e, templateObject_6$c;
|
|
12529
12529
|
|
|
12530
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12530
|
+
var Wrapper$1 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12531
12531
|
var color = _a.color;
|
|
12532
12532
|
return color;
|
|
12533
12533
|
});
|
|
@@ -12552,14 +12552,14 @@ var Subtotal = function (_a) {
|
|
|
12552
12552
|
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));
|
|
12553
12553
|
})] }), void 0));
|
|
12554
12554
|
};
|
|
12555
|
-
var templateObject_1$
|
|
12555
|
+
var templateObject_1$S, templateObject_2$B, templateObject_3$w, templateObject_4$n;
|
|
12556
12556
|
|
|
12557
12557
|
var Totals = {
|
|
12558
12558
|
Total: Total,
|
|
12559
12559
|
Subtotal: Subtotal,
|
|
12560
12560
|
};
|
|
12561
12561
|
|
|
12562
|
-
var Container$B = newStyled.div(templateObject_1$
|
|
12562
|
+
var Container$B = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
|
|
12563
12563
|
var IconContainer$3 = newStyled.div(templateObject_2$A || (templateObject_2$A = __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"])));
|
|
12564
12564
|
var Text$4 = newStyled.p(templateObject_3$v || (templateObject_3$v = __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; });
|
|
12565
12565
|
var Details = newStyled.span(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
@@ -12568,9 +12568,9 @@ var Note = function (_a) {
|
|
|
12568
12568
|
var theme = useTheme();
|
|
12569
12569
|
return (jsxRuntime.jsxs(Container$B, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __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));
|
|
12570
12570
|
};
|
|
12571
|
-
var templateObject_1$
|
|
12571
|
+
var templateObject_1$R, templateObject_2$A, templateObject_3$v, templateObject_4$m;
|
|
12572
12572
|
|
|
12573
|
-
var Title$5 = newStyled.h1(templateObject_1$
|
|
12573
|
+
var Title$5 = newStyled.h1(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
12574
12574
|
var Line = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
12575
12575
|
var Row$1 = newStyled.div(templateObject_3$u || (templateObject_3$u = __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({
|
|
12576
12576
|
flexDirection: ['column', 'row'],
|
|
@@ -12607,9 +12607,9 @@ var DeliveryDetails = function (_a) {
|
|
|
12607
12607
|
var theme = useTheme();
|
|
12608
12608
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].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, {}, 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, {}, 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, {}, 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));
|
|
12609
12609
|
};
|
|
12610
|
-
var templateObject_1$
|
|
12610
|
+
var templateObject_1$Q, templateObject_2$z, templateObject_3$u, templateObject_4$l, templateObject_5$d, templateObject_6$b, templateObject_7$7, templateObject_8$5;
|
|
12611
12611
|
|
|
12612
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
12612
|
+
var Container$A = newStyled.div(templateObject_1$P || (templateObject_1$P = __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"])));
|
|
12613
12613
|
var Text$3 = newStyled.p(templateObject_2$y || (templateObject_2$y = __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; });
|
|
12614
12614
|
var ScrollToTop = function (_a) {
|
|
12615
12615
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
@@ -12617,10 +12617,10 @@ var ScrollToTop = function (_a) {
|
|
|
12617
12617
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12618
12618
|
return (jsxRuntime.jsxs(Container$A, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$3, __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));
|
|
12619
12619
|
};
|
|
12620
|
-
var templateObject_1$
|
|
12620
|
+
var templateObject_1$P, templateObject_2$y;
|
|
12621
12621
|
|
|
12622
12622
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12623
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
12623
|
+
var Container$z = newStyled.div(templateObject_1$O || (templateObject_1$O = __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) {
|
|
12624
12624
|
var color = _a.color;
|
|
12625
12625
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12626
12626
|
});
|
|
@@ -12630,9 +12630,9 @@ var OrderBar = function (_a) {
|
|
|
12630
12630
|
var theme = useTheme();
|
|
12631
12631
|
return (jsxRuntime.jsxs(Container$z, __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.colors.shades['700'].color }, { children: message }), void 0)] }), void 0));
|
|
12632
12632
|
};
|
|
12633
|
-
var templateObject_1$
|
|
12633
|
+
var templateObject_1$O, templateObject_2$x;
|
|
12634
12634
|
|
|
12635
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
12635
|
+
var TableElement$1 = newStyled.table(templateObject_1$N || (templateObject_1$N = __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; });
|
|
12636
12636
|
var TableCell$1 = newStyled.td(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\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: 0 1.25rem;\n text-align: center;\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; });
|
|
12637
12637
|
var TableHead$1 = newStyled.th(templateObject_3$t || (templateObject_3$t = __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; });
|
|
12638
12638
|
var TableRow$1 = newStyled.tr(templateObject_4$k || (templateObject_4$k = __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; });
|
|
@@ -12641,9 +12641,9 @@ var SizeTable = function (_a) {
|
|
|
12641
12641
|
var theme = useTheme();
|
|
12642
12642
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { 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));
|
|
12643
12643
|
};
|
|
12644
|
-
var templateObject_1$
|
|
12644
|
+
var templateObject_1$N, templateObject_2$w, templateObject_3$t, templateObject_4$k;
|
|
12645
12645
|
|
|
12646
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12646
|
+
var TableElement = newStyled.table(templateObject_1$M || (templateObject_1$M = __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; });
|
|
12647
12647
|
var TableCell = newStyled.td(templateObject_2$v || (templateObject_2$v = __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; });
|
|
12648
12648
|
var TableHead = newStyled.th(templateObject_3$s || (templateObject_3$s = __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; });
|
|
12649
12649
|
var TableRow = newStyled.tr(templateObject_4$j || (templateObject_4$j = __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; });
|
|
@@ -12677,16 +12677,16 @@ var SizeChartTable = function (_a) {
|
|
|
12677
12677
|
backgroundColor: getCellColor(index, cell),
|
|
12678
12678
|
}, 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));
|
|
12679
12679
|
};
|
|
12680
|
-
var templateObject_1$
|
|
12680
|
+
var templateObject_1$M, templateObject_2$v, templateObject_3$s, templateObject_4$j;
|
|
12681
12681
|
|
|
12682
|
-
var Img = newStyled.img(templateObject_1$
|
|
12682
|
+
var Img = newStyled.img(templateObject_1$L || (templateObject_1$L = __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; });
|
|
12683
12683
|
var Image = function (_a) {
|
|
12684
12684
|
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;
|
|
12685
12685
|
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));
|
|
12686
12686
|
};
|
|
12687
|
-
var templateObject_1$
|
|
12687
|
+
var templateObject_1$L;
|
|
12688
12688
|
|
|
12689
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
12689
|
+
var Container$y = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
12690
12690
|
var ImageContainer$4 = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12691
12691
|
var DescriptionContainer$1 = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
12692
12692
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
@@ -12726,7 +12726,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
12726
12726
|
var theme = useTheme();
|
|
12727
12727
|
return (jsxRuntime.jsxs(Container$y, __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: quantity }), 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));
|
|
12728
12728
|
};
|
|
12729
|
-
var templateObject_1$
|
|
12729
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$r, templateObject_4$i, templateObject_5$c;
|
|
12730
12730
|
|
|
12731
12731
|
function formatDate(date) {
|
|
12732
12732
|
var day = date.getDate();
|
|
@@ -12735,7 +12735,7 @@ function formatDate(date) {
|
|
|
12735
12735
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12736
12736
|
}
|
|
12737
12737
|
|
|
12738
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
12738
|
+
var Container$x = newStyled.div(templateObject_1$J || (templateObject_1$J = __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"])));
|
|
12739
12739
|
var Heading = newStyled.div(templateObject_2$t || (templateObject_2$t = __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"])));
|
|
12740
12740
|
var Content$1 = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12741
12741
|
var ReviewContainer$1 = newStyled.div(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
@@ -12758,15 +12758,15 @@ var Review$1 = function (_a) {
|
|
|
12758
12758
|
var theme = useTheme();
|
|
12759
12759
|
return (jsxRuntime.jsxs(Container$x, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewerName$1, __assign$1({ theme: theme }, { 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$1, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, { 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" }, 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));
|
|
12760
12760
|
};
|
|
12761
|
-
var templateObject_1$
|
|
12761
|
+
var templateObject_1$J, templateObject_2$t, templateObject_3$q, templateObject_4$h, templateObject_5$b, templateObject_6$a, templateObject_7$6, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
|
|
12762
12762
|
|
|
12763
|
-
var List = newStyled.ul(templateObject_1$
|
|
12763
|
+
var List = newStyled.ul(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12764
12764
|
var Item$1 = newStyled.li(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
12765
12765
|
var DropdownWrapper = newStyled.div(templateObject_3$p || (templateObject_3$p = __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"])));
|
|
12766
12766
|
var ArrowContainer$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __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"])));
|
|
12767
12767
|
var StyledDropdown = newStyled.ul(templateObject_5$a || (templateObject_5$a = __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; });
|
|
12768
12768
|
var DropdownItem = newStyled.li(templateObject_6$9 || (templateObject_6$9 = __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; });
|
|
12769
|
-
var templateObject_1$
|
|
12769
|
+
var templateObject_1$I, templateObject_2$s, templateObject_3$p, templateObject_4$g, templateObject_5$a, templateObject_6$9;
|
|
12770
12770
|
|
|
12771
12771
|
var DropdownListIcons = function (_a) {
|
|
12772
12772
|
var items = _a.items;
|
|
@@ -12779,7 +12779,7 @@ var Dropdown = function (_a) {
|
|
|
12779
12779
|
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));
|
|
12780
12780
|
};
|
|
12781
12781
|
|
|
12782
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12782
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$H || (templateObject_1$H = __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; });
|
|
12783
12783
|
var AmazonButton = function (_a) {
|
|
12784
12784
|
var onClick = _a.onClick;
|
|
12785
12785
|
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));
|
|
@@ -12788,9 +12788,9 @@ var PaypalButton = function (_a) {
|
|
|
12788
12788
|
var onClick = _a.onClick;
|
|
12789
12789
|
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));
|
|
12790
12790
|
};
|
|
12791
|
-
var templateObject_1$
|
|
12791
|
+
var templateObject_1$H;
|
|
12792
12792
|
|
|
12793
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12793
|
+
var Wrapper = newStyled.div(templateObject_1$G || (templateObject_1$G = __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'); });
|
|
12794
12794
|
var Col = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12795
12795
|
var Row = newStyled.div(templateObject_3$o || (templateObject_3$o = __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) {
|
|
12796
12796
|
return props.rightToLeft &&
|
|
@@ -12804,7 +12804,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12804
12804
|
var theme = useTheme();
|
|
12805
12805
|
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, __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));
|
|
12806
12806
|
};
|
|
12807
|
-
var templateObject_1$
|
|
12807
|
+
var templateObject_1$G, templateObject_2$r, templateObject_3$o, templateObject_4$f, templateObject_5$9, templateObject_6$8;
|
|
12808
12808
|
|
|
12809
12809
|
var index = /*#__PURE__*/Object.freeze({
|
|
12810
12810
|
__proto__: null,
|
|
@@ -12817,7 +12817,7 @@ var Spacing = function (_a) {
|
|
|
12817
12817
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12818
12818
|
};
|
|
12819
12819
|
|
|
12820
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
12820
|
+
var Container$w = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
12821
12821
|
var height = _a.height;
|
|
12822
12822
|
return (height ? height : '1.5em');
|
|
12823
12823
|
}, function (_a) {
|
|
@@ -12844,7 +12844,7 @@ var SkeletonBox = function (_a) {
|
|
|
12844
12844
|
var theme = useTheme();
|
|
12845
12845
|
return jsxRuntime.jsx(Container$w, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12846
12846
|
};
|
|
12847
|
-
var templateObject_1$
|
|
12847
|
+
var templateObject_1$F;
|
|
12848
12848
|
|
|
12849
12849
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
12850
12850
|
var width = _a.width, height = _a.height;
|
|
@@ -12854,7 +12854,7 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
12854
12854
|
height: height,
|
|
12855
12855
|
});
|
|
12856
12856
|
});
|
|
12857
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
12857
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
12858
12858
|
var Container$v = newStyled.a(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
12859
12859
|
var ProdCardContainer = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
12860
12860
|
var Title$3 = newStyled.p(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
@@ -12914,9 +12914,9 @@ var ProductItemMobile = function (_a) {
|
|
|
12914
12914
|
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)); };
|
|
12915
12915
|
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$3, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, 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));
|
|
12916
12916
|
};
|
|
12917
|
-
var templateObject_1$
|
|
12917
|
+
var templateObject_1$E, templateObject_2$q, templateObject_3$n, templateObject_4$e, templateObject_5$8, templateObject_6$7, templateObject_7$5;
|
|
12918
12918
|
|
|
12919
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
12919
|
+
var Container$u = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
12920
12920
|
function withProductGrid(ProductItemComponent, data) {
|
|
12921
12921
|
function WithProductGrid(props) {
|
|
12922
12922
|
return (jsxRuntime.jsx(Container$u, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
@@ -12926,14 +12926,14 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
12926
12926
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12927
12927
|
return WithProductGrid;
|
|
12928
12928
|
}
|
|
12929
|
-
var templateObject_1$
|
|
12929
|
+
var templateObject_1$D;
|
|
12930
12930
|
|
|
12931
12931
|
var Collection = {
|
|
12932
12932
|
ProductItemMobile: ProductItemMobile,
|
|
12933
12933
|
withProductGrid: withProductGrid,
|
|
12934
12934
|
};
|
|
12935
12935
|
|
|
12936
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12936
|
+
var Backdrop = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
12937
12937
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12938
12938
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12939
12939
|
});
|
|
@@ -12978,9 +12978,9 @@ var Drawer = function (_a) {
|
|
|
12978
12978
|
}, [isOpen, onClose, onOpen]);
|
|
12979
12979
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12980
12980
|
};
|
|
12981
|
-
var templateObject_1$
|
|
12981
|
+
var templateObject_1$C, templateObject_2$p;
|
|
12982
12982
|
|
|
12983
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
12983
|
+
var Container$t = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12984
12984
|
var size = _a.size;
|
|
12985
12985
|
return (size ? size : '100%');
|
|
12986
12986
|
}, function (_a) {
|
|
@@ -12995,9 +12995,9 @@ var Spinner = function (_a) {
|
|
|
12995
12995
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
12996
12996
|
return (jsxRuntime.jsx(Container$t, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12997
12997
|
};
|
|
12998
|
-
var templateObject_1$
|
|
12998
|
+
var templateObject_1$B, templateObject_2$o;
|
|
12999
12999
|
|
|
13000
|
-
var UL = newStyled.ul(templateObject_1$
|
|
13000
|
+
var UL = newStyled.ul(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
13001
13001
|
var LI = newStyled.li(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
13002
13002
|
var CloseIconContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
13003
13003
|
var Tags = function (_a) {
|
|
@@ -13007,7 +13007,7 @@ var Tags = function (_a) {
|
|
|
13007
13007
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
13008
13008
|
}) }), void 0));
|
|
13009
13009
|
};
|
|
13010
|
-
var templateObject_1$
|
|
13010
|
+
var templateObject_1$A, templateObject_2$n, templateObject_3$m;
|
|
13011
13011
|
|
|
13012
13012
|
function FilteringDropdown(_a) {
|
|
13013
13013
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -13040,7 +13040,7 @@ function FilteringDropdown(_a) {
|
|
|
13040
13040
|
}) }, void 0)] }), void 0));
|
|
13041
13041
|
}
|
|
13042
13042
|
|
|
13043
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
13043
|
+
var Container$s = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
13044
13044
|
var IconContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
13045
13045
|
var PageNumbersContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
13046
13046
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
@@ -13062,7 +13062,7 @@ var PageNumber = newStyled.span(templateObject_4$d || (templateObject_4$d = __ma
|
|
|
13062
13062
|
var background = _a.background;
|
|
13063
13063
|
return background || 'unset';
|
|
13064
13064
|
});
|
|
13065
|
-
var templateObject_1$
|
|
13065
|
+
var templateObject_1$z, templateObject_2$m, templateObject_3$l, templateObject_4$d;
|
|
13066
13066
|
|
|
13067
13067
|
var Pagination = function (_a) {
|
|
13068
13068
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -13127,7 +13127,7 @@ var PaginatorBlog = function (_a) {
|
|
|
13127
13127
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13128
13128
|
};
|
|
13129
13129
|
|
|
13130
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
13130
|
+
var Container$r = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
13131
13131
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13132
13132
|
}));
|
|
13133
13133
|
var Description$2 = newStyled.div({
|
|
@@ -13146,7 +13146,7 @@ var ProductItem = function (_a) {
|
|
|
13146
13146
|
var theme = useTheme();
|
|
13147
13147
|
return (jsxRuntime.jsxs(Container$r, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$2, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
13148
13148
|
};
|
|
13149
|
-
var templateObject_1$
|
|
13149
|
+
var templateObject_1$y;
|
|
13150
13150
|
|
|
13151
13151
|
var Container$q = newStyled.div({
|
|
13152
13152
|
display: 'flex',
|
|
@@ -13162,7 +13162,7 @@ var Ul = newStyled.ul({
|
|
|
13162
13162
|
margin: '0px',
|
|
13163
13163
|
padding: '0px',
|
|
13164
13164
|
});
|
|
13165
|
-
var Li = newStyled.li(templateObject_1$
|
|
13165
|
+
var Li = newStyled.li(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
13166
13166
|
padding: [0, '0rem 1rem'],
|
|
13167
13167
|
borderRadius: [0, '0.5rem'],
|
|
13168
13168
|
}));
|
|
@@ -13187,7 +13187,7 @@ var ResultsPanel = function (_a) {
|
|
|
13187
13187
|
var theme = useTheme();
|
|
13188
13188
|
return (jsxRuntime.jsxs(Container$p, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
13189
13189
|
};
|
|
13190
|
-
var templateObject_1$
|
|
13190
|
+
var templateObject_1$x, templateObject_2$l, templateObject_3$k;
|
|
13191
13191
|
|
|
13192
13192
|
var Input = newStyled.input(function (props) { return ({
|
|
13193
13193
|
padding: props.theme.component.input.padding,
|
|
@@ -13218,7 +13218,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13218
13218
|
},
|
|
13219
13219
|
}); });
|
|
13220
13220
|
|
|
13221
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
13221
|
+
var Button$1 = newStyled.button(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
13222
13222
|
right: ['1rem', '7.75rem'],
|
|
13223
13223
|
top: ['0.75rem', '0.75rem'],
|
|
13224
13224
|
}));
|
|
@@ -13227,7 +13227,7 @@ var ClearButton = function (_a) {
|
|
|
13227
13227
|
var theme = useTheme();
|
|
13228
13228
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13229
13229
|
};
|
|
13230
|
-
var templateObject_1$
|
|
13230
|
+
var templateObject_1$w;
|
|
13231
13231
|
|
|
13232
13232
|
var useOnClickOutside = function (ref, handler) {
|
|
13233
13233
|
React$2.useEffect(function () {
|
|
@@ -13361,7 +13361,7 @@ var SearchBar = function (_a) {
|
|
|
13361
13361
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
13362
13362
|
};
|
|
13363
13363
|
|
|
13364
|
-
var Container$n = newStyled.div(templateObject_1$
|
|
13364
|
+
var Container$n = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"])), function (_a) {
|
|
13365
13365
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13366
13366
|
return borderRadiusVariant &&
|
|
13367
13367
|
"\n border-radius: 40px;\n ";
|
|
@@ -13432,14 +13432,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13432
13432
|
};
|
|
13433
13433
|
}, [preventTouch, ref, touchStart]);
|
|
13434
13434
|
}
|
|
13435
|
-
var templateObject_1$
|
|
13435
|
+
var templateObject_1$v, templateObject_2$k, templateObject_3$j;
|
|
13436
13436
|
|
|
13437
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
13437
|
+
var Container$m = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13438
13438
|
var ProductGalleryMobile = function (_a) {
|
|
13439
13439
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13440
13440
|
return (jsxRuntime.jsx(Container$m, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13441
13441
|
};
|
|
13442
|
-
var templateObject_1$
|
|
13442
|
+
var templateObject_1$u;
|
|
13443
13443
|
|
|
13444
13444
|
var Portal = function (_a) {
|
|
13445
13445
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13572,7 +13572,7 @@ var react = __toCommonJS(react_exports);
|
|
|
13572
13572
|
var visibleStyle = function (_a) {
|
|
13573
13573
|
var opened = _a.opened;
|
|
13574
13574
|
return opened
|
|
13575
|
-
? css(templateObject_1$
|
|
13575
|
+
? css(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13576
13576
|
};
|
|
13577
13577
|
var transformStyle = function (_a) {
|
|
13578
13578
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
@@ -13620,39 +13620,39 @@ var useModal = function (id) {
|
|
|
13620
13620
|
close: close,
|
|
13621
13621
|
}); }, [close, open, opened]);
|
|
13622
13622
|
};
|
|
13623
|
-
var templateObject_1$
|
|
13623
|
+
var templateObject_1$t, templateObject_2$j, templateObject_3$i, templateObject_4$c, templateObject_5$7, templateObject_6$6;
|
|
13624
13624
|
|
|
13625
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13625
|
+
var Text$2 = newStyled.span(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13626
13626
|
var Title$2 = function (_a) {
|
|
13627
13627
|
var title = _a.title;
|
|
13628
13628
|
var theme = useTheme();
|
|
13629
13629
|
return jsxRuntime.jsx(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13630
13630
|
};
|
|
13631
|
-
var templateObject_1$
|
|
13631
|
+
var templateObject_1$s;
|
|
13632
13632
|
|
|
13633
|
-
var P = newStyled.p(templateObject_1$
|
|
13633
|
+
var P = newStyled.p(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13634
13634
|
var Promo = function (_a) {
|
|
13635
13635
|
var text = _a.text;
|
|
13636
13636
|
var theme = useTheme();
|
|
13637
13637
|
return (jsxRuntime.jsx(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13638
13638
|
};
|
|
13639
|
-
var templateObject_1$
|
|
13639
|
+
var templateObject_1$r;
|
|
13640
13640
|
|
|
13641
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13641
|
+
var Text$1 = newStyled.span(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13642
13642
|
var Description$1 = function (_a) {
|
|
13643
13643
|
var text = _a.text;
|
|
13644
13644
|
var theme = useTheme();
|
|
13645
13645
|
return jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13646
13646
|
};
|
|
13647
|
-
var templateObject_1$
|
|
13647
|
+
var templateObject_1$q;
|
|
13648
13648
|
|
|
13649
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
13649
|
+
var Container$k = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
13650
13650
|
var CloseButton$1 = function (_a) {
|
|
13651
13651
|
var onClick = _a.onClick, size = _a.size;
|
|
13652
13652
|
var theme = useTheme();
|
|
13653
13653
|
return (jsxRuntime.jsx(Container$k, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13654
13654
|
};
|
|
13655
|
-
var templateObject_1$
|
|
13655
|
+
var templateObject_1$p;
|
|
13656
13656
|
|
|
13657
13657
|
var CartProductItem = {
|
|
13658
13658
|
Title: Title$2,
|
|
@@ -13662,7 +13662,7 @@ var CartProductItem = {
|
|
|
13662
13662
|
CloseButton: CloseButton$1,
|
|
13663
13663
|
};
|
|
13664
13664
|
|
|
13665
|
-
var Container$j = newStyled.div(templateObject_1$
|
|
13665
|
+
var Container$j = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
13666
13666
|
var Item = newStyled.span(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
13667
13667
|
var Number$1 = newStyled(Item)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
13668
13668
|
var IncreaseDecrease = newStyled(Item)(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
@@ -13690,7 +13690,7 @@ var QuantityPicker = function (_a) {
|
|
|
13690
13690
|
}, [value, clamp]);
|
|
13691
13691
|
return (jsxRuntime.jsxs(Container$j, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13692
13692
|
};
|
|
13693
|
-
var templateObject_1$
|
|
13693
|
+
var templateObject_1$o, templateObject_2$i, templateObject_3$h, templateObject_4$b;
|
|
13694
13694
|
|
|
13695
13695
|
var htmlReactParser = {exports: {}};
|
|
13696
13696
|
|
|
@@ -17471,7 +17471,7 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17471
17471
|
HTMLReactParser$1.attributesToProps;
|
|
17472
17472
|
HTMLReactParser$1.Element;
|
|
17473
17473
|
|
|
17474
|
-
var Container$i = newStyled.div(templateObject_1$
|
|
17474
|
+
var Container$i = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
17475
17475
|
var Card$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"])));
|
|
17476
17476
|
var Tag$1 = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
17477
17477
|
var Label$1 = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -17507,9 +17507,9 @@ var PackCard$1 = function (_a) {
|
|
|
17507
17507
|
currency: currencyCode || 'USD',
|
|
17508
17508
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17509
17509
|
};
|
|
17510
|
-
var templateObject_1$
|
|
17510
|
+
var templateObject_1$n, templateObject_2$h, templateObject_3$g, templateObject_4$a, templateObject_5$6, templateObject_6$5, templateObject_7$4, templateObject_8$3;
|
|
17511
17511
|
|
|
17512
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
17512
|
+
var Container$h = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
17513
17513
|
var Card = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"])));
|
|
17514
17514
|
var Tag = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
17515
17515
|
var Label = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -17538,9 +17538,9 @@ var PackCard = function (_a) {
|
|
|
17538
17538
|
currency: currencyCode || 'USD',
|
|
17539
17539
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
17540
17540
|
};
|
|
17541
|
-
var templateObject_1$
|
|
17541
|
+
var templateObject_1$m, templateObject_2$g, templateObject_3$f, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
17542
17542
|
|
|
17543
|
-
var Title$1 = newStyled.div(templateObject_1$
|
|
17543
|
+
var Title$1 = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
17544
17544
|
var H2 = newStyled.h2(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
17545
17545
|
var ArrowContainer = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
17546
17546
|
var Container$g = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
@@ -17550,9 +17550,9 @@ var Accordion = function (_a) {
|
|
|
17550
17550
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17551
17551
|
return (jsxRuntime.jsxs(Container$g, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
17552
17552
|
};
|
|
17553
|
-
var templateObject_1$
|
|
17553
|
+
var templateObject_1$l, templateObject_2$f, templateObject_3$e, templateObject_4$8;
|
|
17554
17554
|
|
|
17555
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17555
|
+
var SectionContent = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
17556
17556
|
var Header = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
17557
17557
|
var MobileHeader = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
17558
17558
|
var MobileIconsContainer = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
@@ -17562,7 +17562,7 @@ var OptionContainer = newStyled.div(templateObject_7$3 || (templateObject_7$3 =
|
|
|
17562
17562
|
var ClearAll = newStyled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
17563
17563
|
var MobileFooter = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
17564
17564
|
var MobileClearContainer = newStyled.div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
17565
|
-
var templateObject_1$
|
|
17565
|
+
var templateObject_1$k, templateObject_2$e, templateObject_3$d, templateObject_4$7, templateObject_5$4, templateObject_6$3, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
|
|
17566
17566
|
|
|
17567
17567
|
var Filters = function (_a) {
|
|
17568
17568
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -17679,7 +17679,7 @@ var FilterCheckboxColor = function (_a) {
|
|
|
17679
17679
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
17680
17680
|
};
|
|
17681
17681
|
|
|
17682
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
17682
|
+
var Container$f = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
17683
17683
|
var BackArrow = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
17684
17684
|
var BoldSpan = newStyled.span(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
17685
17685
|
var NormalSpan = newStyled.span(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
@@ -17690,9 +17690,9 @@ var SearchNavigation = function (_a) {
|
|
|
17690
17690
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17691
17691
|
}) }, void 0)] }, void 0));
|
|
17692
17692
|
};
|
|
17693
|
-
var templateObject_1$
|
|
17693
|
+
var templateObject_1$j, templateObject_2$d, templateObject_3$c, templateObject_4$6, templateObject_5$3;
|
|
17694
17694
|
|
|
17695
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17695
|
+
var TabContainer = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
17696
17696
|
var titleSize = _a.titleSize;
|
|
17697
17697
|
return titleSize;
|
|
17698
17698
|
}, function (_a) {
|
|
@@ -17709,9 +17709,9 @@ var Tab = function (_a) {
|
|
|
17709
17709
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
17710
17710
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
17711
17711
|
};
|
|
17712
|
-
var templateObject_1$
|
|
17712
|
+
var templateObject_1$i;
|
|
17713
17713
|
|
|
17714
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
17714
|
+
var Container$e = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17715
17715
|
var TabList = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
17716
17716
|
var backgroundColor = _a.backgroundColor;
|
|
17717
17717
|
return backgroundColor;
|
|
@@ -17728,7 +17728,7 @@ var Tabs = function (_a) {
|
|
|
17728
17728
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17729
17729
|
return (jsxRuntime.jsxs(Container$e, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17730
17730
|
};
|
|
17731
|
-
var templateObject_1$
|
|
17731
|
+
var templateObject_1$h, templateObject_2$c, templateObject_3$b, templateObject_4$5;
|
|
17732
17732
|
|
|
17733
17733
|
var Container$d = newStyled.div(function (props) { return ({
|
|
17734
17734
|
height: 'auto',
|
|
@@ -17783,7 +17783,7 @@ var IconsWithTitle = function (_a) {
|
|
|
17783
17783
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$d, __assign$1({ textPosition: iconTitlePosition }, { children: [jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0), jsxRuntime.jsx(Text$6, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
17784
17784
|
};
|
|
17785
17785
|
|
|
17786
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
17786
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
17787
17787
|
var VideoOverlay = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
17788
17788
|
var FullscreenVideo = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
17789
17789
|
var ImageVideo = function (_a) {
|
|
@@ -17805,9 +17805,9 @@ var ImageVideo = function (_a) {
|
|
|
17805
17805
|
height: '100%',
|
|
17806
17806
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17807
17807
|
};
|
|
17808
|
-
var templateObject_1$
|
|
17808
|
+
var templateObject_1$g, templateObject_2$b, templateObject_3$a;
|
|
17809
17809
|
|
|
17810
|
-
var ContainerDesktop = css(templateObject_1$
|
|
17810
|
+
var ContainerDesktop = css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
17811
17811
|
var ContainerMobile = css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
17812
17812
|
var Container$c = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
17813
17813
|
var TextContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
@@ -17840,9 +17840,9 @@ var TextWithImage = function (_a) {
|
|
|
17840
17840
|
},
|
|
17841
17841
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
17842
17842
|
};
|
|
17843
|
-
var templateObject_1$
|
|
17843
|
+
var templateObject_1$f, templateObject_2$a, templateObject_3$9, templateObject_4$4;
|
|
17844
17844
|
|
|
17845
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
17845
|
+
var Container$b = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
17846
17846
|
var AccordionOptions = function (_a) {
|
|
17847
17847
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17848
17848
|
var _b = React$2.useState({
|
|
@@ -17866,9 +17866,9 @@ var AccordionOptions = function (_a) {
|
|
|
17866
17866
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17867
17867
|
}) }, void 0));
|
|
17868
17868
|
};
|
|
17869
|
-
var templateObject_1$
|
|
17869
|
+
var templateObject_1$e;
|
|
17870
17870
|
|
|
17871
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
17871
|
+
var Container$a = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
17872
17872
|
var alignCenter = _a.alignCenter;
|
|
17873
17873
|
return alignCenter &&
|
|
17874
17874
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -17885,7 +17885,7 @@ var ShortBanner = function (_a) {
|
|
|
17885
17885
|
var theme = useTheme();
|
|
17886
17886
|
return (jsxRuntime.jsxs(Container$a, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
17887
17887
|
};
|
|
17888
|
-
var templateObject_1$
|
|
17888
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$8;
|
|
17889
17889
|
|
|
17890
17890
|
/* base styles & size variants */
|
|
17891
17891
|
var getStylesBySize = function (size, theme) {
|
|
@@ -17941,7 +17941,7 @@ var getStylesBySize = function (size, theme) {
|
|
|
17941
17941
|
}
|
|
17942
17942
|
};
|
|
17943
17943
|
|
|
17944
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
17944
|
+
var Container$9 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: 15px;\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n row-gap: 12px;\n max-width: ", ";\n }\n"])), function (props) { return props.styles.imageContainerMaxWidth; }, function (props) { return props.styles.imageContainerPadding; }, function (props) { return props.styles.imageContainerMobileMaxWidth; });
|
|
17945
17945
|
var ImageContainer$2 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"])));
|
|
17946
17946
|
var ImageCard = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n }\n"])), function (props) { return props.styles.imageMinHeight; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.imageMinWidth; }, function (props) { return props.styles.mobileImageMinHeight; }, function (props) { return props.styles.mobileImageMinWidth; }, function (props) { return props.styles.mobileImageMinWidth; });
|
|
17947
17947
|
var UserInfoText = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"], ["\n color: ", ";\n font-size: ", ";\n text-align: ", ";\n margin: 0;\n font-weight: 400;\n line-height: 130%;\n\n @media (max-width: 768px) {\n font-size: ", ";\n }\n"])), function (props) { return props.color; }, function (props) { return props.styles.userInfoTextFontSize; }, function (props) { return (props.alignCenter ? 'center' : 'left'); }, function (props) { return props.styles.userInfoTextMobileFontSize; });
|
|
@@ -17953,9 +17953,9 @@ var BeforeAfterCard = function (_a) {
|
|
|
17953
17953
|
infoText = months ? "".concat(infoText, " | ").concat(months, " months") : infoText;
|
|
17954
17954
|
return (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "Container", styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer" }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", styles: stylesBySize }, { children: jsxRuntime.jsx(Image, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ styles: stylesBySize }, { children: jsxRuntime.jsx(Image, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(UserInfoText, __assign$1({ "data-testid": "UserInfoText", alignCenter: alignCenter, color: theme.colors.pallete.secondary.color, styles: stylesBySize }, { children: infoText }), void 0)] }), void 0));
|
|
17955
17955
|
};
|
|
17956
|
-
var templateObject_1$
|
|
17956
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$7, templateObject_4$3;
|
|
17957
17957
|
|
|
17958
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
17958
|
+
var Container$8 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
17959
17959
|
var ImageContainer$1 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
17960
17960
|
var StyledTitle = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17961
17961
|
var titlePosition = _a.titlePosition;
|
|
@@ -17967,9 +17967,9 @@ var ImageCardWithDescription = function (_a) {
|
|
|
17967
17967
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17968
17968
|
return (jsxRuntime.jsxs(Container$8, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
17969
17969
|
};
|
|
17970
|
-
var templateObject_1$
|
|
17970
|
+
var templateObject_1$b, templateObject_2$7, templateObject_3$6;
|
|
17971
17971
|
|
|
17972
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
17972
|
+
var Container$7 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
17973
17973
|
var CheckpointContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
17974
17974
|
var CheckpointDate = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
17975
17975
|
var CheckpointDateLabel = newStyled.p(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
@@ -18007,9 +18007,9 @@ var TrackingProgress = function (_a) {
|
|
|
18007
18007
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
18008
18008
|
})] }), void 0));
|
|
18009
18009
|
};
|
|
18010
|
-
var templateObject_1$
|
|
18010
|
+
var templateObject_1$a, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$1;
|
|
18011
18011
|
|
|
18012
|
-
var Container$6 = newStyled.div(templateObject_1$
|
|
18012
|
+
var Container$6 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
18013
18013
|
var ReviewsContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
18014
18014
|
var ReviewsCount = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
18015
18015
|
var ReviewsStars = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
@@ -18025,9 +18025,9 @@ var ReviewsHeader = function (_a) {
|
|
|
18025
18025
|
var theme = useTheme();
|
|
18026
18026
|
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18027
18027
|
};
|
|
18028
|
-
var templateObject_1$
|
|
18028
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$4, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
18029
18029
|
|
|
18030
|
-
var Container$5 = newStyled.div(templateObject_1$
|
|
18030
|
+
var Container$5 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
18031
18031
|
var Content = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
18032
18032
|
var StarsContent = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18033
18033
|
var ReviewContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
@@ -18068,7 +18068,7 @@ var Review = function (_a) {
|
|
|
18068
18068
|
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18069
18069
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [jsxRuntime.jsxs(ReviewerName, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18070
18070
|
};
|
|
18071
|
-
var templateObject_1$
|
|
18071
|
+
var templateObject_1$8, templateObject_2$4, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18072
18072
|
|
|
18073
18073
|
function _extends() {
|
|
18074
18074
|
_extends = Object.assign || function (target) {
|
|
@@ -18335,7 +18335,7 @@ function useSwipeable(options) {
|
|
|
18335
18335
|
return handlers;
|
|
18336
18336
|
}
|
|
18337
18337
|
|
|
18338
|
-
var Container$4 = newStyled.div(templateObject_1$
|
|
18338
|
+
var Container$4 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
18339
18339
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
18340
18340
|
return borderRadiusVariant &&
|
|
18341
18341
|
"\n border-radius: 40px;\n ";
|
|
@@ -18346,16 +18346,16 @@ var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithT
|
|
|
18346
18346
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18347
18347
|
return (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
18348
18348
|
});
|
|
18349
|
-
var templateObject_1$
|
|
18349
|
+
var templateObject_1$7, templateObject_2$3, templateObject_3$2;
|
|
18350
18350
|
|
|
18351
|
-
var Button = newStyled.button(templateObject_1$
|
|
18351
|
+
var Button = newStyled.button(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
18352
18352
|
var ArrowButton = function (_a) {
|
|
18353
18353
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
18354
18354
|
return (jsxRuntime.jsx(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
18355
18355
|
};
|
|
18356
|
-
var templateObject_1$
|
|
18356
|
+
var templateObject_1$6;
|
|
18357
18357
|
|
|
18358
|
-
var Container$3 = newStyled.div(templateObject_1$
|
|
18358
|
+
var Container$3 = newStyled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
18359
18359
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
18360
18360
|
var SlideDots = function (_a) {
|
|
18361
18361
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
@@ -18364,9 +18364,9 @@ var SlideDots = function (_a) {
|
|
|
18364
18364
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
18365
18365
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
18366
18366
|
};
|
|
18367
|
-
var templateObject_1$
|
|
18367
|
+
var templateObject_1$5;
|
|
18368
18368
|
|
|
18369
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
18369
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18370
18370
|
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
18371
18371
|
var LeftButton = newStyled(NavigationButton)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
18372
18372
|
var SlideNavigation = function (_a) {
|
|
@@ -18380,9 +18380,9 @@ var SlideNavigation = function (_a) {
|
|
|
18380
18380
|
onNavigate(selectedIndex + 1);
|
|
18381
18381
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
18382
18382
|
};
|
|
18383
|
-
var templateObject_1$
|
|
18383
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1;
|
|
18384
18384
|
|
|
18385
|
-
var Container$2 = newStyled.div(templateObject_1$
|
|
18385
|
+
var Container$2 = newStyled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
18386
18386
|
var ProductGalleryMobileV2 = function (_a) {
|
|
18387
18387
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
18388
18388
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -18406,9 +18406,9 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
18406
18406
|
}, [index, images]);
|
|
18407
18407
|
return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
18408
18408
|
};
|
|
18409
|
-
var templateObject_1$
|
|
18409
|
+
var templateObject_1$3;
|
|
18410
18410
|
|
|
18411
|
-
var Container$1 = newStyled.div(templateObject_1$
|
|
18411
|
+
var Container$1 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
18412
18412
|
var DropContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18413
18413
|
var DropList = function (_a) {
|
|
18414
18414
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
@@ -18416,17 +18416,46 @@ var DropList = function (_a) {
|
|
|
18416
18416
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
18417
18417
|
}) }, void 0));
|
|
18418
18418
|
};
|
|
18419
|
-
var templateObject_1$
|
|
18419
|
+
var templateObject_1$2, templateObject_2$1;
|
|
18420
18420
|
|
|
18421
18421
|
var DROPS_TOTAL = 5;
|
|
18422
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
18422
|
+
var Container = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
18423
18423
|
var Title = newStyled.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
18424
18424
|
var Description = newStyled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
18425
18425
|
var AbsorbencyLevel = function (_a) {
|
|
18426
18426
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
18427
18427
|
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(Title, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
18428
18428
|
};
|
|
18429
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
18429
|
+
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
18430
|
+
|
|
18431
|
+
var TimerContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: 0px;\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: 8px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: ", ";\n align-items: center;\n background-color: ", ";\n width: 100%;\n padding: 5px 24px;\n height: 40px;\n line-height: 14px;\n border-radius: 0px;\n\n & [data-testid='HurryUpText'] {\n font-size: 12px !important;\n line-height: 12px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n @media (min-width: 330px) {\n & [data-testid='HurryUpText'] {\n font-size: 14px !important;\n line-height: 14px !important;\n }\n\n & [data-testid='Time'] {\n font-size: 16px !important;\n line-height: 16px !important;\n }\n }\n\n @media (min-width: 767px) {\n border-radius: 8px;\n }\n"])), function (_a) {
|
|
18432
|
+
var textPosition = _a.textPosition;
|
|
18433
|
+
return textPosition;
|
|
18434
|
+
}, function (_a) {
|
|
18435
|
+
var backgroundColor = _a.backgroundColor;
|
|
18436
|
+
return backgroundColor;
|
|
18437
|
+
});
|
|
18438
|
+
var HurryUp = function (_a) {
|
|
18439
|
+
var hurryUpText = _a.hurryUpText, backgroundColor = _a.backgroundColor, _b = _a.iconSize, iconSize = _b === void 0 ? 1.5 : _b, _c = _a.textPosition, textPosition = _c === void 0 ? 'center' : _c, _d = _a.showTimer, showTimer = _d === void 0 ? false : _d;
|
|
18440
|
+
var theme = useTheme();
|
|
18441
|
+
var _e = React__default["default"].useMemo(function () {
|
|
18442
|
+
var tomorrowDate = new Date();
|
|
18443
|
+
tomorrowDate.setDate(tomorrowDate.getDate() + 1);
|
|
18444
|
+
tomorrowDate.setHours(0, 0, 0, 0);
|
|
18445
|
+
var totalSeconds = (tomorrowDate.getTime() - new Date().getTime()) / 1000;
|
|
18446
|
+
var hours = Math.floor(totalSeconds / 3600);
|
|
18447
|
+
var restOfHour = Math.floor(totalSeconds % 3600);
|
|
18448
|
+
var minutes = Math.floor(restOfHour / 60);
|
|
18449
|
+
var seconds = Math.floor(totalSeconds % 60);
|
|
18450
|
+
return {
|
|
18451
|
+
hours: hours,
|
|
18452
|
+
minutes: minutes,
|
|
18453
|
+
seconds: seconds,
|
|
18454
|
+
};
|
|
18455
|
+
}, []), hours = _e.hours, minutes = _e.minutes, seconds = _e.seconds;
|
|
18456
|
+
return (jsxRuntime.jsxs(TimerContainer, __assign$1({ backgroundColor: backgroundColor || theme.component.card.backgroundColor, textPosition: textPosition, "data-testid": "HurryUp" }, { children: [jsxRuntime.jsx(Icon.PDP.Stopwatch, { width: iconSize, height: iconSize, fill: theme.colors.pallete.secondary.color }, void 0), "\u00A0", jsxRuntime.jsx(Text$6, __assign$1({ testId: "HurryUpText", variant: "body", size: "small", weight: "demi" }, { children: hurryUpText }), void 0), "\u00A0", showTimer && jsxRuntime.jsx(Timer, { hours: hours, minutes: minutes, seconds: seconds, onTimeUp: function () { } }, void 0)] }), void 0));
|
|
18457
|
+
};
|
|
18458
|
+
var templateObject_1;
|
|
18430
18459
|
|
|
18431
18460
|
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
18432
18461
|
exports.Accordion = Accordion$1;
|
|
@@ -18453,6 +18482,7 @@ exports.FilteringDropdown = FilteringDropdown;
|
|
|
18453
18482
|
exports.FilteringTags = Tags;
|
|
18454
18483
|
exports.Filters = Filters;
|
|
18455
18484
|
exports.FitPredictor = FitPredictor;
|
|
18485
|
+
exports.HurryUp = HurryUp;
|
|
18456
18486
|
exports.Icon = Icon;
|
|
18457
18487
|
exports.IconButton = IconButton;
|
|
18458
18488
|
exports.IconsWithTitle = IconsWithTitle;
|