@trafilea/afrodita-components 5.0.0-beta.256 → 5.0.0-beta.258
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 +14 -5
- package/build/index.esm.js +224 -121
- package/build/index.esm.js.map +1 -1
- package/build/index.js +224 -120
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +0 -4
- package/build/theme/revel.theme.js +0 -4
- package/build/theme/shapermint.theme.d.ts +0 -4
- package/build/theme/shapermint.theme.js +5 -9
- package/build/theme/thespadr.theme.d.ts +0 -4
- package/build/theme/thespadr.theme.js +0 -4
- package/build/theme/truekind.theme.d.ts +0 -4
- package/build/theme/truekind.theme.js +0 -4
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4148,7 +4148,7 @@ var InputValidationType;
|
|
|
4148
4148
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4149
4149
|
})(InputValidationType || (InputValidationType = {}));
|
|
4150
4150
|
|
|
4151
|
-
var Section = newStyled.div(templateObject_1$
|
|
4151
|
+
var Section = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __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) {
|
|
4152
4152
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4153
4153
|
});
|
|
4154
4154
|
var CardHeader = function (_a) {
|
|
@@ -4159,14 +4159,14 @@ var CardFooter = function (_a) {
|
|
|
4159
4159
|
var children = _a.children;
|
|
4160
4160
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
4161
4161
|
};
|
|
4162
|
-
var templateObject_1$
|
|
4162
|
+
var templateObject_1$1D;
|
|
4163
4163
|
|
|
4164
|
-
var Body = newStyled.div(templateObject_1$
|
|
4164
|
+
var Body = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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"])));
|
|
4165
4165
|
var CardBody = function (_a) {
|
|
4166
4166
|
var children = _a.children;
|
|
4167
4167
|
return jsx$1(Body, { children: children }, void 0);
|
|
4168
4168
|
};
|
|
4169
|
-
var templateObject_1$
|
|
4169
|
+
var templateObject_1$1C;
|
|
4170
4170
|
|
|
4171
4171
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4172
4172
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4311,7 +4311,7 @@ var AssetsProvider = function (_a) {
|
|
|
4311
4311
|
};
|
|
4312
4312
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4313
4313
|
|
|
4314
|
-
var Container$
|
|
4314
|
+
var Container$14 = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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) {
|
|
4315
4315
|
var flex = _a.flex;
|
|
4316
4316
|
return flex &&
|
|
4317
4317
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4326,14 +4326,14 @@ var Container$13 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = _
|
|
|
4326
4326
|
var Card$2 = function (_a) {
|
|
4327
4327
|
var children = _a.children, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, border = _a.border, _c = _a.flex, flex = _c === void 0 ? true : _c;
|
|
4328
4328
|
var theme = useTheme();
|
|
4329
|
-
return (jsx$1(Container$
|
|
4329
|
+
return (jsx$1(Container$14, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4330
4330
|
};
|
|
4331
4331
|
var Card$3 = Object.assign(Card$2, {
|
|
4332
4332
|
Header: CardHeader,
|
|
4333
4333
|
Footer: CardFooter,
|
|
4334
4334
|
Body: CardBody,
|
|
4335
4335
|
});
|
|
4336
|
-
var templateObject_1$
|
|
4336
|
+
var templateObject_1$1B;
|
|
4337
4337
|
|
|
4338
4338
|
var Fragment = Fragment$1;
|
|
4339
4339
|
function jsx(type, props, key) {
|
|
@@ -4479,7 +4479,7 @@ function BaseSelectOption(_a) {
|
|
|
4479
4479
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4480
4480
|
}
|
|
4481
4481
|
|
|
4482
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4482
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1A || (templateObject_1$1A = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4483
4483
|
function BaseSelect(_a) {
|
|
4484
4484
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4485
4485
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4489,7 +4489,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4489
4489
|
Options: BaseSelectOptions,
|
|
4490
4490
|
Option: BaseSelectOption,
|
|
4491
4491
|
});
|
|
4492
|
-
var templateObject_1$
|
|
4492
|
+
var templateObject_1$1A;
|
|
4493
4493
|
|
|
4494
4494
|
var CustomButton = newStyled.button(function (_a) {
|
|
4495
4495
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4546,14 +4546,14 @@ var withLabel = function (Button, label) {
|
|
|
4546
4546
|
};
|
|
4547
4547
|
};
|
|
4548
4548
|
|
|
4549
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4550
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4549
|
+
var ErrorText = newStyled.h3(templateObject_1$1z || (templateObject_1$1z = __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; });
|
|
4550
|
+
var ErrorContainer = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __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"])));
|
|
4551
4551
|
var Error$1 = function (_a) {
|
|
4552
4552
|
var error = _a.error;
|
|
4553
4553
|
var theme = useTheme();
|
|
4554
4554
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4555
4555
|
};
|
|
4556
|
-
var templateObject_1$
|
|
4556
|
+
var templateObject_1$1z, templateObject_2$12;
|
|
4557
4557
|
|
|
4558
4558
|
var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4559
4559
|
var theme = _a.theme;
|
|
@@ -4625,7 +4625,7 @@ var Styles = /*#__PURE__*/Object.freeze({
|
|
|
4625
4625
|
large: large
|
|
4626
4626
|
});
|
|
4627
4627
|
|
|
4628
|
-
var StyledLabel$
|
|
4628
|
+
var StyledLabel$4 = newStyled.label(baseStyles, function (props) { return [
|
|
4629
4629
|
{ color: props.disabled ? props.theme.colors.text.disabled : props.theme.colors.text.color },
|
|
4630
4630
|
Styles[props.variant](props.theme),
|
|
4631
4631
|
Styles[props.size](props.theme),
|
|
@@ -4633,7 +4633,7 @@ var StyledLabel$3 = newStyled.label(baseStyles, function (props) { return [
|
|
|
4633
4633
|
var Label$4 = function (_a) {
|
|
4634
4634
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
4635
4635
|
var theme = useTheme();
|
|
4636
|
-
return (jsx$1(StyledLabel$
|
|
4636
|
+
return (jsx$1(StyledLabel$4, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
4637
4637
|
};
|
|
4638
4638
|
|
|
4639
4639
|
/* base styles & size variants */
|
|
@@ -4719,7 +4719,7 @@ var CustomCheckboxStyles = {
|
|
|
4719
4719
|
},
|
|
4720
4720
|
};
|
|
4721
4721
|
|
|
4722
|
-
var Container$
|
|
4722
|
+
var Container$13 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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"])));
|
|
4723
4723
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4724
4724
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4725
4725
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4730,7 +4730,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4730
4730
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4731
4731
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4732
4732
|
]; });
|
|
4733
|
-
var Input$
|
|
4733
|
+
var Input$5 = newStyled.input(templateObject_2$11 || (templateObject_2$11 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
4734
4734
|
var disabled = _a.disabled;
|
|
4735
4735
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4736
4736
|
});
|
|
@@ -4759,9 +4759,9 @@ var Checkbox = function (_a) {
|
|
|
4759
4759
|
useEffect(function () {
|
|
4760
4760
|
mounted.current = true;
|
|
4761
4761
|
}, []);
|
|
4762
|
-
return (jsxs$1(Container$
|
|
4762
|
+
return (jsxs$1(Container$13, { children: [jsx$1(Input$5, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4763
4763
|
};
|
|
4764
|
-
var templateObject_1$
|
|
4764
|
+
var templateObject_1$1y, templateObject_2$11;
|
|
4765
4765
|
|
|
4766
4766
|
var CustomOption = newStyled.li(function (_a) {
|
|
4767
4767
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4808,8 +4808,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4808
4808
|
Option: BaseDropdownOption,
|
|
4809
4809
|
});
|
|
4810
4810
|
|
|
4811
|
-
var Container$
|
|
4812
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2
|
|
4811
|
+
var Container$12 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __makeTemplateObject([""], [""])));
|
|
4812
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$10 || (templateObject_2$10 = __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"])));
|
|
4813
4813
|
function SimpleDropdown(_a) {
|
|
4814
4814
|
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;
|
|
4815
4815
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4839,13 +4839,13 @@ function SimpleDropdown(_a) {
|
|
|
4839
4839
|
setSelectedValue(value);
|
|
4840
4840
|
}, [value, options, initialValue]);
|
|
4841
4841
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4842
|
-
return (jsxs$1(Container$
|
|
4842
|
+
return (jsxs$1(Container$12, __assign$1({ as: showRequiredPlaceholder ? 'div' : Fragment$2 }, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
|
|
4843
4843
|
}
|
|
4844
|
-
var templateObject_1$
|
|
4844
|
+
var templateObject_1$1x, templateObject_2$10;
|
|
4845
4845
|
|
|
4846
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4847
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2
|
|
4848
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4846
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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; });
|
|
4847
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$$ || (templateObject_2$$ = __makeTemplateObject(["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"], ["\n position: absolute;\n list-style: none;\n width: max-content;\n min-width: 100px;\n background: #fff;\n border: 1px solid #e9e9e9;\n top: calc(", " + 15px);\n right: calc(", " - 23px);\n z-index: 50 !important;\n margin-bottom: 1rem;\n\n font-family: inherit;\n font-size: 100%;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n margin: 0;\n padding: 0;\n vertical-align: inherit;\n"])), function (props) { return props.top; }, function (props) { return props.right; });
|
|
4848
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$O || (templateObject_3$O = __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"])));
|
|
4849
4849
|
var DialogDropdownLink = newStyled.a(templateObject_4$z || (templateObject_4$z = __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"])));
|
|
4850
4850
|
var DropdownDialog = function (_a) {
|
|
4851
4851
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -4854,7 +4854,7 @@ var DropdownDialog = function (_a) {
|
|
|
4854
4854
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4855
4855
|
}) }), void 0) }), void 0));
|
|
4856
4856
|
};
|
|
4857
|
-
var templateObject_1$
|
|
4857
|
+
var templateObject_1$1w, templateObject_2$$, templateObject_3$O, templateObject_4$z;
|
|
4858
4858
|
|
|
4859
4859
|
var getStylesBySize$a = function (size, theme) {
|
|
4860
4860
|
switch (size) {
|
|
@@ -4922,9 +4922,9 @@ var SelectorSecondary = function (_a) {
|
|
|
4922
4922
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4923
4923
|
// `variants` styles that are consistent through all themes.
|
|
4924
4924
|
var TAGS = {
|
|
4925
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4926
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4927
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4925
|
+
hero1: newStyled.h1(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject([""], [""]))),
|
|
4926
|
+
hero2: newStyled.h2(templateObject_2$_ || (templateObject_2$_ = __makeTemplateObject([""], [""]))),
|
|
4927
|
+
hero3: newStyled.h3(templateObject_3$N || (templateObject_3$N = __makeTemplateObject([""], [""]))),
|
|
4928
4928
|
display1: newStyled.h1(templateObject_4$y || (templateObject_4$y = __makeTemplateObject([""], [""]))),
|
|
4929
4929
|
display2: newStyled.h2(templateObject_5$l || (templateObject_5$l = __makeTemplateObject([""], [""]))),
|
|
4930
4930
|
heading1: newStyled.h1(templateObject_6$i || (templateObject_6$i = __makeTemplateObject([""], [""]))),
|
|
@@ -5054,9 +5054,9 @@ var DEFAULTS = {
|
|
|
5054
5054
|
size: 'regular',
|
|
5055
5055
|
},
|
|
5056
5056
|
};
|
|
5057
|
-
var templateObject_1$
|
|
5057
|
+
var templateObject_1$1v, templateObject_2$_, templateObject_3$N, templateObject_4$y, templateObject_5$l, templateObject_6$i, templateObject_7$c, templateObject_8$7, templateObject_9$4, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$1;
|
|
5058
5058
|
|
|
5059
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5059
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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) {
|
|
5060
5060
|
var inline = _a.inline;
|
|
5061
5061
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5062
5062
|
});
|
|
@@ -5075,7 +5075,7 @@ var SizeSelector = function (_a) {
|
|
|
5075
5075
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
5076
5076
|
}) }), void 0)] }), void 0));
|
|
5077
5077
|
};
|
|
5078
|
-
var templateObject_1$
|
|
5078
|
+
var templateObject_1$1u;
|
|
5079
5079
|
|
|
5080
5080
|
var getStylesBySize$9 = function (size) {
|
|
5081
5081
|
switch (size) {
|
|
@@ -5102,7 +5102,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5102
5102
|
} });
|
|
5103
5103
|
};
|
|
5104
5104
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5105
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5105
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1t || (templateObject_1$1t = __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));
|
|
5106
5106
|
};
|
|
5107
5107
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5108
5108
|
if (disabled)
|
|
@@ -5118,16 +5118,16 @@ var TextButton = function (_a) {
|
|
|
5118
5118
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5119
5119
|
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));
|
|
5120
5120
|
};
|
|
5121
|
-
var templateObject_1$
|
|
5121
|
+
var templateObject_1$1t;
|
|
5122
5122
|
|
|
5123
|
-
var Container$
|
|
5124
|
-
var P$3 = newStyled.p(templateObject_2$
|
|
5125
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5123
|
+
var Container$11 = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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"])));
|
|
5124
|
+
var P$3 = newStyled.p(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5125
|
+
var PercentageSpan = newStyled.span(templateObject_3$M || (templateObject_3$M = __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"])));
|
|
5126
5126
|
var SizeFitGuide = function (_a) {
|
|
5127
5127
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5128
|
-
return (jsxs$1(Container$
|
|
5128
|
+
return (jsxs$1(Container$11, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5129
5129
|
};
|
|
5130
|
-
var templateObject_1$
|
|
5130
|
+
var templateObject_1$1s, templateObject_2$Z, templateObject_3$M;
|
|
5131
5131
|
|
|
5132
5132
|
var getStylesBySize$8 = function (size) {
|
|
5133
5133
|
switch (size) {
|
|
@@ -5157,7 +5157,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5157
5157
|
};
|
|
5158
5158
|
}
|
|
5159
5159
|
};
|
|
5160
|
-
var Container
|
|
5160
|
+
var Container$10 = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5161
5161
|
var backgroundColor = _a.backgroundColor;
|
|
5162
5162
|
return backgroundColor;
|
|
5163
5163
|
}, function (_a) {
|
|
@@ -5179,7 +5179,7 @@ var Container$$ = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __
|
|
|
5179
5179
|
var size = _a.size;
|
|
5180
5180
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5181
5181
|
});
|
|
5182
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5182
|
+
var H3$3 = newStyled.h3(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5183
5183
|
var textColor = _a.textColor;
|
|
5184
5184
|
return textColor;
|
|
5185
5185
|
}, function (_a) {
|
|
@@ -5191,13 +5191,13 @@ var H3$3 = newStyled.h3(templateObject_2$X || (templateObject_2$X = __makeTempla
|
|
|
5191
5191
|
var size = _a.size;
|
|
5192
5192
|
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5193
5193
|
});
|
|
5194
|
-
var Now = newStyled(H3$3)(templateObject_3$
|
|
5194
|
+
var Now = newStyled(H3$3)(templateObject_3$L || (templateObject_3$L = __makeTemplateObject(["\n display: none;\n margin-right: 0.25rem;\n"], ["\n display: none;\n margin-right: 0.25rem;\n"])));
|
|
5195
5195
|
var DiscountTag = function (_a) {
|
|
5196
5196
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5197
5197
|
var theme = useTheme();
|
|
5198
|
-
return (jsxs$1(Container
|
|
5198
|
+
return (jsxs$1(Container$10, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style }, { children: [jsx$1(Now, __assign$1({ "data-testid": "vwo-discount-now", textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: "Now:" }), void 0), jsxs$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0)] }), void 0));
|
|
5199
5199
|
};
|
|
5200
|
-
var templateObject_1$
|
|
5200
|
+
var templateObject_1$1r, templateObject_2$Y, templateObject_3$L;
|
|
5201
5201
|
|
|
5202
5202
|
var getStylesBySize$7 = function (size) {
|
|
5203
5203
|
switch (size) {
|
|
@@ -5227,8 +5227,8 @@ var getStylesBySize$7 = function (size) {
|
|
|
5227
5227
|
};
|
|
5228
5228
|
}
|
|
5229
5229
|
};
|
|
5230
|
-
var Container
|
|
5231
|
-
var Price = newStyled.p(templateObject_2$
|
|
5230
|
+
var Container$$ = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5231
|
+
var Price = newStyled.p(templateObject_2$X || (templateObject_2$X = __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) {
|
|
5232
5232
|
var weight = _a.weight;
|
|
5233
5233
|
return (weight ? weight : '400');
|
|
5234
5234
|
}, function (_a) {
|
|
@@ -5257,7 +5257,7 @@ var Price = newStyled.p(templateObject_2$W || (templateObject_2$W = __makeTempla
|
|
|
5257
5257
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5258
5258
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5259
5259
|
});
|
|
5260
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5260
|
+
var TagContainer = newStyled.p(templateObject_3$K || (templateObject_3$K = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5261
5261
|
var _b;
|
|
5262
5262
|
var size = _a.size;
|
|
5263
5263
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5278,9 +5278,9 @@ var PriceLabel = function (_a) {
|
|
|
5278
5278
|
weight: 700,
|
|
5279
5279
|
};
|
|
5280
5280
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5281
|
-
return (jsxs$1(Container
|
|
5281
|
+
return (jsxs$1(Container$$, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5282
5282
|
};
|
|
5283
|
-
var templateObject_1$
|
|
5283
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$K;
|
|
5284
5284
|
|
|
5285
5285
|
var getStylesBySize$6 = function (size) {
|
|
5286
5286
|
switch (size) {
|
|
@@ -5310,7 +5310,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5310
5310
|
};
|
|
5311
5311
|
}
|
|
5312
5312
|
};
|
|
5313
|
-
var Container$
|
|
5313
|
+
var Container$_ = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5314
5314
|
var backgroundColor = _a.backgroundColor;
|
|
5315
5315
|
return backgroundColor;
|
|
5316
5316
|
}, function (_a) {
|
|
@@ -5332,7 +5332,7 @@ var Container$Z = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __
|
|
|
5332
5332
|
var size = _a.size;
|
|
5333
5333
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5334
5334
|
});
|
|
5335
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5335
|
+
var H3$2 = newStyled.h3(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5336
5336
|
var textColor = _a.textColor;
|
|
5337
5337
|
return textColor;
|
|
5338
5338
|
}, function (_a) {
|
|
@@ -5347,11 +5347,11 @@ var H3$2 = newStyled.h3(templateObject_2$V || (templateObject_2$V = __makeTempla
|
|
|
5347
5347
|
var ClubOfferTag = function (_a) {
|
|
5348
5348
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5349
5349
|
var theme = useTheme();
|
|
5350
|
-
return (jsx$1(Container$
|
|
5350
|
+
return (jsx$1(Container$_, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5351
5351
|
};
|
|
5352
|
-
var templateObject_1$
|
|
5352
|
+
var templateObject_1$1p, templateObject_2$W;
|
|
5353
5353
|
|
|
5354
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5354
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5355
5355
|
var PriceLabelV2 = function (_a) {
|
|
5356
5356
|
var _b;
|
|
5357
5357
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
@@ -5376,19 +5376,23 @@ var PriceLabelV2 = function (_a) {
|
|
|
5376
5376
|
: ['', ''];
|
|
5377
5377
|
var priceCommonProps = {
|
|
5378
5378
|
size: ComponentSize.Small,
|
|
5379
|
-
color:
|
|
5379
|
+
color: isClubOffer
|
|
5380
|
+
? 'var(--colors-pallete-wine-color)'
|
|
5381
|
+
: color || theme.colors.pallete.secondary.color,
|
|
5380
5382
|
weight: 700,
|
|
5381
5383
|
};
|
|
5382
5384
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5383
|
-
return (jsxs$1(Container
|
|
5384
|
-
borderRadius: '
|
|
5385
|
-
width: '
|
|
5386
|
-
height: '
|
|
5385
|
+
return (jsxs$1(Container$$, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
|
|
5386
|
+
borderRadius: '8px',
|
|
5387
|
+
width: '107px',
|
|
5388
|
+
height: '28px',
|
|
5387
5389
|
alignItems: 'center',
|
|
5388
|
-
padding: '
|
|
5390
|
+
padding: '3px 8px 3px 8px',
|
|
5391
|
+
fontSize: '14px',
|
|
5392
|
+
lineHeight: '22px',
|
|
5389
5393
|
} }), void 0)) }), void 0))] }, void 0));
|
|
5390
5394
|
};
|
|
5391
|
-
var templateObject_1$
|
|
5395
|
+
var templateObject_1$1o;
|
|
5392
5396
|
|
|
5393
5397
|
var OneColorSelector = function (_a) {
|
|
5394
5398
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5429,9 +5433,9 @@ var OutOfStock = function (_a) {
|
|
|
5429
5433
|
return (jsxs$1("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5430
5434
|
};
|
|
5431
5435
|
|
|
5432
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5433
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5434
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5436
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5437
|
+
newStyled(lt.Label)(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5438
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
5435
5439
|
var Span = newStyled.span(templateObject_4$x || (templateObject_4$x = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5436
5440
|
var OptionsContainer = newStyled.div(templateObject_5$k || (templateObject_5$k = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
5437
5441
|
var Label$3 = function (_a) {
|
|
@@ -5451,23 +5455,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5451
5455
|
Option: Option,
|
|
5452
5456
|
OptionsContainer: OptionsContainer,
|
|
5453
5457
|
});
|
|
5454
|
-
var templateObject_1$
|
|
5458
|
+
var templateObject_1$1n, templateObject_2$V, templateObject_3$J, templateObject_4$x, templateObject_5$k;
|
|
5455
5459
|
|
|
5456
|
-
var Container$
|
|
5460
|
+
var Container$Z = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
5457
5461
|
var borderColor = _a.borderColor;
|
|
5458
5462
|
return borderColor;
|
|
5459
5463
|
}, function (_a) {
|
|
5460
5464
|
var noStock = _a.noStock;
|
|
5461
5465
|
return (noStock ? '0.4' : '1');
|
|
5462
5466
|
});
|
|
5463
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5467
|
+
var Image$3 = newStyled.img(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5464
5468
|
var PatternSelector = function (_a) {
|
|
5465
5469
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5466
5470
|
var theme = useTheme();
|
|
5467
5471
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5468
|
-
return (jsx$1(Container$
|
|
5472
|
+
return (jsx$1(Container$Z, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5469
5473
|
};
|
|
5470
|
-
var templateObject_1$
|
|
5474
|
+
var templateObject_1$1m, templateObject_2$U;
|
|
5471
5475
|
|
|
5472
5476
|
var renderOptions$1 = function (options) {
|
|
5473
5477
|
if (options.length === 0) {
|
|
@@ -5672,7 +5676,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5672
5676
|
literal: true,
|
|
5673
5677
|
});
|
|
5674
5678
|
|
|
5675
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5679
|
+
var Image$2 = newStyled.img(templateObject_1$1l || (templateObject_1$1l = __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) {
|
|
5676
5680
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5677
5681
|
return borderRadiusVariant &&
|
|
5678
5682
|
"\nborder-radius: 20px;\n";
|
|
@@ -5687,7 +5691,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5687
5691
|
var theme = useTheme();
|
|
5688
5692
|
return (jsx$1(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5689
5693
|
};
|
|
5690
|
-
var templateObject_1$
|
|
5694
|
+
var templateObject_1$1l;
|
|
5691
5695
|
|
|
5692
5696
|
var Button$4 = newStyled.button(function () { return ({
|
|
5693
5697
|
background: 'transparent',
|
|
@@ -9931,14 +9935,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9931
9935
|
return Slider;
|
|
9932
9936
|
}(React__default.Component);
|
|
9933
9937
|
|
|
9934
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9938
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
9935
9939
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9936
9940
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9937
9941
|
}, function (_a) {
|
|
9938
9942
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9939
9943
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9940
9944
|
});
|
|
9941
|
-
var templateObject_1$
|
|
9945
|
+
var templateObject_1$1k;
|
|
9942
9946
|
|
|
9943
9947
|
var getStylesBySize$5 = function (size) {
|
|
9944
9948
|
// rem units
|
|
@@ -9997,22 +10001,22 @@ var SliderNavigation = function (_a) {
|
|
|
9997
10001
|
} }, { 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));
|
|
9998
10002
|
};
|
|
9999
10003
|
|
|
10000
|
-
var horizontalStyles = css(templateObject_1$
|
|
10001
|
-
var verticalStyles = css(templateObject_2$
|
|
10002
|
-
var Container$
|
|
10004
|
+
var horizontalStyles = css(templateObject_1$1j || (templateObject_1$1j = __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"])));
|
|
10005
|
+
var verticalStyles = css(templateObject_2$T || (templateObject_2$T = __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"])));
|
|
10006
|
+
var Container$Y = newStyled.div(templateObject_3$I || (templateObject_3$I = __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) {
|
|
10003
10007
|
var position = _a.position;
|
|
10004
10008
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10005
10009
|
});
|
|
10006
10010
|
var Button$3 = newStyled.button(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
10007
10011
|
var ImagePreviewList = function (_a) {
|
|
10008
10012
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
10009
|
-
return (jsx$1(Container$
|
|
10013
|
+
return (jsx$1(Container$Y, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
10010
10014
|
arrowWidth: 0.75,
|
|
10011
10015
|
arrowHeight: 1.25,
|
|
10012
10016
|
arrowPadding: 1.625,
|
|
10013
10017
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
10014
10018
|
};
|
|
10015
|
-
var templateObject_1$
|
|
10019
|
+
var templateObject_1$1j, templateObject_2$T, templateObject_3$I, templateObject_4$w;
|
|
10016
10020
|
|
|
10017
10021
|
var propTypes = {exports: {}};
|
|
10018
10022
|
|
|
@@ -11605,13 +11609,13 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11605
11609
|
afterZoomOut: PropTypes.func
|
|
11606
11610
|
} : {};
|
|
11607
11611
|
|
|
11608
|
-
var Container$
|
|
11612
|
+
var Container$X = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __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) {
|
|
11609
11613
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11610
11614
|
return borderRadiusVariant &&
|
|
11611
11615
|
"\n border-radius: 40px;\n ";
|
|
11612
11616
|
});
|
|
11613
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11614
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11617
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$S || (templateObject_2$S = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
11618
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11615
11619
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
11616
11620
|
var Video$1 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 666px;\n background: #efefef;\n\n & > iframe {\n border: none;\n }\n\n @media (max-width: 768px) {\n height: 506px;\n }\n"])));
|
|
11617
11621
|
var VideoTag$1 = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"], ["\n gap: 8px;\n display: flex;\n padding: 8.6px 0;\n font-weight: 600;\n align-items: center;\n background: #f7f7f7;\n justify-content: center;\n"])));
|
|
@@ -11619,14 +11623,14 @@ var Text$7 = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTem
|
|
|
11619
11623
|
var ImageProductWithTags$1 = function (_a) {
|
|
11620
11624
|
var _b, _c;
|
|
11621
11625
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
11622
|
-
return (jsxs$1(Container$
|
|
11626
|
+
return (jsxs$1(Container$X, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [!((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11623
11627
|
alt: image.alt,
|
|
11624
11628
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11625
11629
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsx$1(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsx$1(BottomTagContainer$3, { children: bottomTag }, void 0)] }, void 0)), ((_c = image === null || image === void 0 ? void 0 : image.alt) === null || _c === void 0 ? void 0 : _c.includes('-video')) && (jsxs$1(Fragment$1, { children: [jsx$1(Video$1, { children: jsx$1("iframe", { allowFullScreen: true, title: image.alt, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 300, src: image === null || image === void 0 ? void 0 : image.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0) }, void 0), jsxs$1(VideoTag$1, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.4 }, void 0), jsx$1(Text$7, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0)), ctaText && ctaAction && (jsx$1("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsx$1(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
11626
11630
|
};
|
|
11627
|
-
var templateObject_1$
|
|
11631
|
+
var templateObject_1$1i, templateObject_2$S, templateObject_3$H, templateObject_4$v, templateObject_5$j, templateObject_6$h, templateObject_7$b;
|
|
11628
11632
|
|
|
11629
|
-
var Container$
|
|
11633
|
+
var Container$W = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
11630
11634
|
var ProductGallery = function (_a) {
|
|
11631
11635
|
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;
|
|
11632
11636
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11634,11 +11638,11 @@ var ProductGallery = function (_a) {
|
|
|
11634
11638
|
useEffect(function () {
|
|
11635
11639
|
setSelectedImage(initialValue);
|
|
11636
11640
|
}, [initialValue]);
|
|
11637
|
-
return (jsxs$1(Container$
|
|
11641
|
+
return (jsxs$1(Container$W, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11638
11642
|
setSelectedImage(value);
|
|
11639
11643
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
11640
11644
|
};
|
|
11641
|
-
var templateObject_1$
|
|
11645
|
+
var templateObject_1$1h;
|
|
11642
11646
|
|
|
11643
11647
|
/* base styles & size variants */
|
|
11644
11648
|
var StarStyles = {
|
|
@@ -11684,8 +11688,8 @@ var StarStyles = {
|
|
|
11684
11688
|
});
|
|
11685
11689
|
},
|
|
11686
11690
|
};
|
|
11687
|
-
var Container$
|
|
11688
|
-
var templateObject_1$
|
|
11691
|
+
var Container$V = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11692
|
+
var templateObject_1$1g;
|
|
11689
11693
|
|
|
11690
11694
|
var StarContainer = newStyled.div(function (_a) {
|
|
11691
11695
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11703,7 +11707,7 @@ var sizes = {
|
|
|
11703
11707
|
var StarList = function (_a) {
|
|
11704
11708
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
11705
11709
|
var theme = useTheme();
|
|
11706
|
-
return (jsx$1(Container$
|
|
11710
|
+
return (jsx$1(Container$V, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11707
11711
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11708
11712
|
}) }, void 0));
|
|
11709
11713
|
};
|
|
@@ -11747,8 +11751,8 @@ var LabelStyles = {
|
|
|
11747
11751
|
});
|
|
11748
11752
|
},
|
|
11749
11753
|
};
|
|
11750
|
-
var Container$
|
|
11751
|
-
var templateObject_1$
|
|
11754
|
+
var Container$U = newStyled.a(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11755
|
+
var templateObject_1$1f;
|
|
11752
11756
|
|
|
11753
11757
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11754
11758
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11788,11 +11792,11 @@ var Rating = function (_a) {
|
|
|
11788
11792
|
href: reviewsContainerId,
|
|
11789
11793
|
}
|
|
11790
11794
|
: {};
|
|
11791
|
-
return (jsxs$1(Container$
|
|
11795
|
+
return (jsxs$1(Container$U, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
11792
11796
|
};
|
|
11793
11797
|
|
|
11794
|
-
var Container$
|
|
11795
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
11798
|
+
var Container$T = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __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"])));
|
|
11799
|
+
var P$2 = newStyled.p(templateObject_2$R || (templateObject_2$R = __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; });
|
|
11796
11800
|
var textButtonStyles = function (theme) { return ({
|
|
11797
11801
|
border: 'none',
|
|
11798
11802
|
background: 'transparent',
|
|
@@ -11805,9 +11809,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11805
11809
|
var FitPredictor = function (_a) {
|
|
11806
11810
|
var onClick = _a.onClick;
|
|
11807
11811
|
var theme = useTheme();
|
|
11808
|
-
return (jsxs(Container$
|
|
11812
|
+
return (jsxs(Container$T, __assign$1({ theme: theme }, { children: [jsx(Container$T, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
11809
11813
|
};
|
|
11810
|
-
var templateObject_1$
|
|
11814
|
+
var templateObject_1$1e, templateObject_2$R;
|
|
11811
11815
|
|
|
11812
11816
|
var P$1 = newStyled.p(function (_a) {
|
|
11813
11817
|
var color = _a.color;
|
|
@@ -11821,7 +11825,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
11821
11825
|
margin: '0.938rem 4.188rem',
|
|
11822
11826
|
});
|
|
11823
11827
|
});
|
|
11824
|
-
var Bar$2 = newStyled.div(templateObject_1$
|
|
11828
|
+
var Bar$2 = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11825
11829
|
var height = _a.height;
|
|
11826
11830
|
return height || '0.5rem';
|
|
11827
11831
|
}, function (_a) {
|
|
@@ -11850,7 +11854,7 @@ var Background$1 = newStyled.div(function (_a) {
|
|
|
11850
11854
|
position: 'absolute',
|
|
11851
11855
|
});
|
|
11852
11856
|
});
|
|
11853
|
-
var Container$
|
|
11857
|
+
var Container$S = newStyled.div(function (_a) {
|
|
11854
11858
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
11855
11859
|
return ({
|
|
11856
11860
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11864,11 +11868,11 @@ var getBarWithBasedOnPercent$1 = function (percent) {
|
|
|
11864
11868
|
var ProgressBar = function (_a) {
|
|
11865
11869
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
11866
11870
|
var theme = useTheme();
|
|
11867
|
-
return (jsxs$1(Container$
|
|
11871
|
+
return (jsxs$1(Container$S, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsx$1(Background$1, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsx$1(Bar$2, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsx$1(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
11868
11872
|
};
|
|
11869
|
-
var templateObject_1$
|
|
11873
|
+
var templateObject_1$1d;
|
|
11870
11874
|
|
|
11871
|
-
var Bar$1 = newStyled.div(templateObject_1$
|
|
11875
|
+
var Bar$1 = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11872
11876
|
var height = _a.height;
|
|
11873
11877
|
return height || '0.5rem';
|
|
11874
11878
|
}, function (_a) {
|
|
@@ -11907,7 +11911,7 @@ var BarContainer$1 = newStyled.div({
|
|
|
11907
11911
|
padding: '0 16px',
|
|
11908
11912
|
position: 'relative',
|
|
11909
11913
|
});
|
|
11910
|
-
var Container$
|
|
11914
|
+
var Container$R = newStyled.div(function (_a) {
|
|
11911
11915
|
var backgroundColor = _a.backgroundColor;
|
|
11912
11916
|
return ({
|
|
11913
11917
|
width: '475px',
|
|
@@ -11938,9 +11942,9 @@ var MotivatorProgressBar = function (_a) {
|
|
|
11938
11942
|
var theme = useTheme();
|
|
11939
11943
|
var isRewardUnlocked = currentAmount >= endingValue;
|
|
11940
11944
|
var progress = _calculatePercentage(currentAmount, endingValue);
|
|
11941
|
-
return (jsxs$1(Container$
|
|
11945
|
+
return (jsxs$1(Container$R, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer$1, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxs$1("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
11942
11946
|
};
|
|
11943
|
-
var templateObject_1$
|
|
11947
|
+
var templateObject_1$1c;
|
|
11944
11948
|
|
|
11945
11949
|
var getStylesBySize$4 = function (size) {
|
|
11946
11950
|
switch (size) {
|
|
@@ -11961,7 +11965,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11961
11965
|
};
|
|
11962
11966
|
}
|
|
11963
11967
|
};
|
|
11964
|
-
var Container$
|
|
11968
|
+
var Container$Q = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
11965
11969
|
var backgroundColor = _a.backgroundColor;
|
|
11966
11970
|
return backgroundColor;
|
|
11967
11971
|
}, function (_a) {
|
|
@@ -11989,9 +11993,9 @@ var Container$P = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __
|
|
|
11989
11993
|
var IconButton = function (_a) {
|
|
11990
11994
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11991
11995
|
var theme = useTheme();
|
|
11992
|
-
return (jsx$1(Container$
|
|
11996
|
+
return (jsx$1(Container$Q, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
11993
11997
|
};
|
|
11994
|
-
var templateObject_1$
|
|
11998
|
+
var templateObject_1$1b;
|
|
11995
11999
|
|
|
11996
12000
|
var TooltipArrow = function (_a) {
|
|
11997
12001
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -12071,7 +12075,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
12071
12075
|
}
|
|
12072
12076
|
};
|
|
12073
12077
|
|
|
12074
|
-
var Wrapper$
|
|
12078
|
+
var Wrapper$7 = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
12075
12079
|
var position = _a.position;
|
|
12076
12080
|
return getWrapperFlexDirection(position);
|
|
12077
12081
|
});
|
|
@@ -12096,14 +12100,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
12096
12100
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
12097
12101
|
return actual === expected ? margin : '0';
|
|
12098
12102
|
};
|
|
12099
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
12103
|
+
var ContentWrapper = newStyled.div(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"])), function (_a) {
|
|
12100
12104
|
var borderColor = _a.borderColor;
|
|
12101
12105
|
return borderColor;
|
|
12102
12106
|
}, function (_a) {
|
|
12103
12107
|
var backgroundColor = _a.backgroundColor;
|
|
12104
12108
|
return backgroundColor;
|
|
12105
12109
|
});
|
|
12106
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
12110
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
12107
12111
|
var position = _a.position;
|
|
12108
12112
|
return getArrowRotation(position);
|
|
12109
12113
|
}, function (_a) {
|
|
@@ -12123,7 +12127,7 @@ var Title$7 = newStyled.h1(templateObject_6$g || (templateObject_6$g = __makeTem
|
|
|
12123
12127
|
return color;
|
|
12124
12128
|
});
|
|
12125
12129
|
var IconContainer$5 = newStyled.div(templateObject_7$a || (templateObject_7$a = __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"])));
|
|
12126
|
-
var templateObject_1$
|
|
12130
|
+
var templateObject_1$1a, templateObject_2$Q, templateObject_3$G, templateObject_4$u, templateObject_5$i, templateObject_6$g, templateObject_7$a;
|
|
12127
12131
|
|
|
12128
12132
|
var Tooltip = function (_a) {
|
|
12129
12133
|
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;
|
|
@@ -12140,7 +12144,7 @@ var Tooltip = function (_a) {
|
|
|
12140
12144
|
var ref = tooltipRef.current;
|
|
12141
12145
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
12142
12146
|
}, [tooltipRef]);
|
|
12143
|
-
return (jsxs$1(Wrapper$
|
|
12147
|
+
return (jsxs$1(Wrapper$7, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, {
|
|
12144
12148
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
12145
12149
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
12146
12150
|
: theme.colors.pallete.secondary.color,
|
|
@@ -12210,7 +12214,7 @@ var AccordionDetailsStyles = {
|
|
|
12210
12214
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
12211
12215
|
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)]; });
|
|
12212
12216
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
12213
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
12217
|
+
var StyledContent = newStyled.button(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
12214
12218
|
var Accordion$1 = function (_a) {
|
|
12215
12219
|
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;
|
|
12216
12220
|
var theme = useTheme();
|
|
@@ -12222,7 +12226,96 @@ var Accordion$1 = function (_a) {
|
|
|
12222
12226
|
return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsx$1(ControlIcon, { title: openWithForce ? 'close icon' : 'open icon', height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0)] }), void 0), showPanel && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
12223
12227
|
} }), void 0));
|
|
12224
12228
|
};
|
|
12225
|
-
var templateObject_1$
|
|
12229
|
+
var templateObject_1$19;
|
|
12230
|
+
|
|
12231
|
+
/* base styles & size variants */
|
|
12232
|
+
var CustomRadioStyles$2 = {
|
|
12233
|
+
baseStyles: function (theme, disabled, active) {
|
|
12234
|
+
return css({
|
|
12235
|
+
borderRadius: '50%',
|
|
12236
|
+
height: '100%',
|
|
12237
|
+
width: '100%',
|
|
12238
|
+
boxSizing: 'border-box',
|
|
12239
|
+
borderStyle: 'solid',
|
|
12240
|
+
background: theme.component.radio.background,
|
|
12241
|
+
borderColor: disabled
|
|
12242
|
+
? theme.colors.border.disabled
|
|
12243
|
+
: active
|
|
12244
|
+
? theme.colors.pallete.primary.color
|
|
12245
|
+
: theme.colors.shades[400].color,
|
|
12246
|
+
});
|
|
12247
|
+
},
|
|
12248
|
+
small: function (theme, active) {
|
|
12249
|
+
return css({
|
|
12250
|
+
borderWidth: active
|
|
12251
|
+
? theme.component.radio.size.small.active.borderWidth
|
|
12252
|
+
: theme.component.radio.size.small.borderWidth,
|
|
12253
|
+
});
|
|
12254
|
+
},
|
|
12255
|
+
medium: function (theme, active) {
|
|
12256
|
+
return css({
|
|
12257
|
+
borderWidth: active
|
|
12258
|
+
? theme.component.radio.size.medium.active.borderWidth
|
|
12259
|
+
: theme.component.radio.size.medium.borderWidth,
|
|
12260
|
+
});
|
|
12261
|
+
},
|
|
12262
|
+
large: function (theme, active) {
|
|
12263
|
+
return css({
|
|
12264
|
+
borderWidth: active
|
|
12265
|
+
? theme.component.radio.size.large.active.borderWidth
|
|
12266
|
+
: theme.component.radio.size.large.borderWidth,
|
|
12267
|
+
});
|
|
12268
|
+
},
|
|
12269
|
+
};
|
|
12270
|
+
/* base styles & size variants */
|
|
12271
|
+
var ContainerStyles$2 = {
|
|
12272
|
+
baseStyles: css({
|
|
12273
|
+
position: 'relative',
|
|
12274
|
+
}),
|
|
12275
|
+
small: function (theme) {
|
|
12276
|
+
return css({
|
|
12277
|
+
height: theme.component.radio.size.small.height,
|
|
12278
|
+
width: theme.component.radio.size.small.height,
|
|
12279
|
+
marginRight: theme.component.radio.size.small.margin,
|
|
12280
|
+
});
|
|
12281
|
+
},
|
|
12282
|
+
medium: function (theme) {
|
|
12283
|
+
return css({
|
|
12284
|
+
height: theme.component.radio.size.medium.height,
|
|
12285
|
+
width: theme.component.radio.size.medium.height,
|
|
12286
|
+
marginRight: theme.component.radio.size.medium.margin,
|
|
12287
|
+
});
|
|
12288
|
+
},
|
|
12289
|
+
large: function (theme) {
|
|
12290
|
+
return css({
|
|
12291
|
+
height: theme.component.radio.size.large.height,
|
|
12292
|
+
width: theme.component.radio.size.large.height,
|
|
12293
|
+
marginRight: theme.component.radio.size.large.margin,
|
|
12294
|
+
});
|
|
12295
|
+
},
|
|
12296
|
+
};
|
|
12297
|
+
|
|
12298
|
+
var Wrapper$6 = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12299
|
+
var Container$P = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
12300
|
+
var Input$4 = newStyled.input(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
12301
|
+
var disabled = _a.disabled;
|
|
12302
|
+
return (disabled ? 'not-allowed' : 'pointer');
|
|
12303
|
+
});
|
|
12304
|
+
var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
12305
|
+
CustomRadioStyles$2.baseStyles(props.theme, props.disabled, props.isChecked),
|
|
12306
|
+
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
12307
|
+
]; });
|
|
12308
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$F || (templateObject_3$F = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"], ["\n font-size: 14px;\n font-weight: 400;\n line-height: 22px;\n"])));
|
|
12309
|
+
var RadioPrimary = function (_a) {
|
|
12310
|
+
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
12311
|
+
var theme = useTheme();
|
|
12312
|
+
var handleChange = function (event, label) {
|
|
12313
|
+
var value = event.currentTarget.value;
|
|
12314
|
+
onChange({ value: value, label: label });
|
|
12315
|
+
};
|
|
12316
|
+
return (jsxs$1(Wrapper$6, { children: [jsxs$1(Container$P, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12317
|
+
};
|
|
12318
|
+
var templateObject_1$18, templateObject_2$P, templateObject_3$F;
|
|
12226
12319
|
|
|
12227
12320
|
/* base styles & size variants */
|
|
12228
12321
|
var CustomRadioStyles$1 = {
|
|
@@ -12651,9 +12744,18 @@ var InputWrapper = newStyled.div(templateObject_4$s || (templateObject_4$s = __m
|
|
|
12651
12744
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12652
12745
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12653
12746
|
});
|
|
12654
|
-
var AnimatedPlaceholder = newStyled.span(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n color: ", ";\n font-weight:
|
|
12747
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"], ["\n color: ", ";\n font-weight: ", ";\n left: 0.9375rem;\n top: 0;\n margin: auto;\n bottom: 0;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: ", ";\n line-height: ", ";\n display: inline-block;\n height: 24px;\n"])), function (_a) {
|
|
12655
12748
|
var theme = _a.theme;
|
|
12656
12749
|
return theme.component.input.placeholderColor;
|
|
12750
|
+
}, function (_a) {
|
|
12751
|
+
var theme = _a.theme;
|
|
12752
|
+
return theme.component.input.fontWeight;
|
|
12753
|
+
}, function (_a) {
|
|
12754
|
+
var theme = _a.theme;
|
|
12755
|
+
return theme.component.input.fontSize;
|
|
12756
|
+
}, function (_a) {
|
|
12757
|
+
var theme = _a.theme;
|
|
12758
|
+
return theme.component.input.lineHeight;
|
|
12657
12759
|
});
|
|
12658
12760
|
var ClearInput = newStyled.div(templateObject_6$f || (templateObject_6$f = __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"])));
|
|
12659
12761
|
var templateObject_1$11, templateObject_2$J, templateObject_3$B, templateObject_4$s, templateObject_5$h, templateObject_6$f;
|
|
@@ -13011,11 +13113,12 @@ var Image = function (_a) {
|
|
|
13011
13113
|
};
|
|
13012
13114
|
var templateObject_1$O;
|
|
13013
13115
|
|
|
13014
|
-
var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
13015
|
-
var
|
|
13016
|
-
var
|
|
13017
|
-
|
|
13018
|
-
|
|
13116
|
+
var Container$B = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 10px 0;\n"])));
|
|
13117
|
+
var IMAGE_WIDTH = '63px';
|
|
13118
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"], ["\n position: relative;\n width: ", ";\n img {\n display: block;\n }\n"])), IMAGE_WIDTH);
|
|
13119
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: calc(100% - ", ");\n"])), mediaQueries({
|
|
13120
|
+
paddingLeft: ['0.938rem', '1.875rem'],
|
|
13121
|
+
}), IMAGE_WIDTH);
|
|
13019
13122
|
var Title$4 = newStyled.h2(function (_a) {
|
|
13020
13123
|
var color = _a.color;
|
|
13021
13124
|
return ({
|
|
@@ -18918,5 +19021,5 @@ var HurryUp = function (_a) {
|
|
|
18918
19021
|
};
|
|
18919
19022
|
var templateObject_1;
|
|
18920
19023
|
|
|
18921
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$3 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, HurryUp, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$8 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19024
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, BeforeAfterCard, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$3 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, HurryUp, Icon, IconButton, IconsWithTitle, Image, ImageCardWithDescription, Input$1 as Input, InputValidationType, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review$1 as Review, Review as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$8 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
18922
19025
|
//# sourceMappingURL=index.esm.js.map
|