@trafilea/afrodita-components 5.0.0-beta.234 → 5.0.0-beta.235
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 -1
- package/build/index.esm.js +149 -75
- package/build/index.esm.js.map +1 -1
- package/build/index.js +149 -74
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4142,7 +4142,7 @@ var InputValidationType;
|
|
|
4142
4142
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4143
4143
|
})(InputValidationType || (InputValidationType = {}));
|
|
4144
4144
|
|
|
4145
|
-
var Section = newStyled.div(templateObject_1$
|
|
4145
|
+
var Section = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __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) {
|
|
4146
4146
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4147
4147
|
});
|
|
4148
4148
|
var CardHeader = function (_a) {
|
|
@@ -4153,14 +4153,14 @@ var CardFooter = function (_a) {
|
|
|
4153
4153
|
var children = _a.children;
|
|
4154
4154
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
4155
4155
|
};
|
|
4156
|
-
var templateObject_1$
|
|
4156
|
+
var templateObject_1$1C;
|
|
4157
4157
|
|
|
4158
|
-
var Body = newStyled.div(templateObject_1$
|
|
4158
|
+
var Body = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __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"])));
|
|
4159
4159
|
var CardBody = function (_a) {
|
|
4160
4160
|
var children = _a.children;
|
|
4161
4161
|
return jsx$1(Body, { children: children }, void 0);
|
|
4162
4162
|
};
|
|
4163
|
-
var templateObject_1$
|
|
4163
|
+
var templateObject_1$1B;
|
|
4164
4164
|
|
|
4165
4165
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4166
4166
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4305,7 +4305,7 @@ var AssetsProvider = function (_a) {
|
|
|
4305
4305
|
};
|
|
4306
4306
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4307
4307
|
|
|
4308
|
-
var Container$
|
|
4308
|
+
var Container$13 = newStyled.div(templateObject_1$1A || (templateObject_1$1A = __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) {
|
|
4309
4309
|
var flex = _a.flex;
|
|
4310
4310
|
return flex &&
|
|
4311
4311
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4320,14 +4320,14 @@ var Container$12 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = _
|
|
|
4320
4320
|
var Card$2 = function (_a) {
|
|
4321
4321
|
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;
|
|
4322
4322
|
var theme = useTheme();
|
|
4323
|
-
return (jsx$1(Container$
|
|
4323
|
+
return (jsx$1(Container$13, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4324
4324
|
};
|
|
4325
4325
|
var Card$3 = Object.assign(Card$2, {
|
|
4326
4326
|
Header: CardHeader,
|
|
4327
4327
|
Footer: CardFooter,
|
|
4328
4328
|
Body: CardBody,
|
|
4329
4329
|
});
|
|
4330
|
-
var templateObject_1$
|
|
4330
|
+
var templateObject_1$1A;
|
|
4331
4331
|
|
|
4332
4332
|
var Fragment = Fragment$1;
|
|
4333
4333
|
function jsx(type, props, key) {
|
|
@@ -4473,7 +4473,7 @@ function BaseSelectOption(_a) {
|
|
|
4473
4473
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4474
4474
|
}
|
|
4475
4475
|
|
|
4476
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4476
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4477
4477
|
function BaseSelect(_a) {
|
|
4478
4478
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4479
4479
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4483,7 +4483,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4483
4483
|
Options: BaseSelectOptions,
|
|
4484
4484
|
Option: BaseSelectOption,
|
|
4485
4485
|
});
|
|
4486
|
-
var templateObject_1$
|
|
4486
|
+
var templateObject_1$1z;
|
|
4487
4487
|
|
|
4488
4488
|
var CustomButton = newStyled.button(function (_a) {
|
|
4489
4489
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4540,14 +4540,14 @@ var withLabel = function (Button, label) {
|
|
|
4540
4540
|
};
|
|
4541
4541
|
};
|
|
4542
4542
|
|
|
4543
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4543
|
+
var ErrorText = newStyled.h3(templateObject_1$1y || (templateObject_1$1y = __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; });
|
|
4544
4544
|
var ErrorContainer = newStyled.div(templateObject_2$11 || (templateObject_2$11 = __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"])));
|
|
4545
4545
|
var Error$1 = function (_a) {
|
|
4546
4546
|
var error = _a.error;
|
|
4547
4547
|
var theme = useTheme();
|
|
4548
4548
|
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));
|
|
4549
4549
|
};
|
|
4550
|
-
var templateObject_1$
|
|
4550
|
+
var templateObject_1$1y, templateObject_2$11;
|
|
4551
4551
|
|
|
4552
4552
|
var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4553
4553
|
var theme = _a.theme;
|
|
@@ -4713,7 +4713,7 @@ var CustomCheckboxStyles = {
|
|
|
4713
4713
|
},
|
|
4714
4714
|
};
|
|
4715
4715
|
|
|
4716
|
-
var Container$
|
|
4716
|
+
var Container$12 = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
4717
4717
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4718
4718
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4719
4719
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4753,9 +4753,9 @@ var Checkbox = function (_a) {
|
|
|
4753
4753
|
useEffect(function () {
|
|
4754
4754
|
mounted.current = true;
|
|
4755
4755
|
}, []);
|
|
4756
|
-
return (jsxs$1(Container$
|
|
4756
|
+
return (jsxs$1(Container$12, { children: [jsx$1(Input$4, { 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));
|
|
4757
4757
|
};
|
|
4758
|
-
var templateObject_1$
|
|
4758
|
+
var templateObject_1$1x, templateObject_2$10;
|
|
4759
4759
|
|
|
4760
4760
|
var CustomOption = newStyled.li(function (_a) {
|
|
4761
4761
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4802,7 +4802,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4802
4802
|
Option: BaseDropdownOption,
|
|
4803
4803
|
});
|
|
4804
4804
|
|
|
4805
|
-
var Container$
|
|
4805
|
+
var Container$11 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject([""], [""])));
|
|
4806
4806
|
var RequiredPlaceholder = newStyled.p(templateObject_2$$ || (templateObject_2$$ = __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"])));
|
|
4807
4807
|
function SimpleDropdown(_a) {
|
|
4808
4808
|
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;
|
|
@@ -4833,11 +4833,11 @@ function SimpleDropdown(_a) {
|
|
|
4833
4833
|
setSelectedValue(value);
|
|
4834
4834
|
}, [value, options, initialValue]);
|
|
4835
4835
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4836
|
-
return (jsxs$1(Container$
|
|
4836
|
+
return (jsxs$1(Container$11, __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));
|
|
4837
4837
|
}
|
|
4838
|
-
var templateObject_1$
|
|
4838
|
+
var templateObject_1$1w, templateObject_2$$;
|
|
4839
4839
|
|
|
4840
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4840
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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; });
|
|
4841
4841
|
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; });
|
|
4842
4842
|
var DialogDropdownListItem = newStyled.li(templateObject_3$N || (templateObject_3$N = __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"])));
|
|
4843
4843
|
var DialogDropdownLink = newStyled.a(templateObject_4$y || (templateObject_4$y = __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"])));
|
|
@@ -4848,7 +4848,7 @@ var DropdownDialog = function (_a) {
|
|
|
4848
4848
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4849
4849
|
}) }), void 0) }), void 0));
|
|
4850
4850
|
};
|
|
4851
|
-
var templateObject_1$
|
|
4851
|
+
var templateObject_1$1v, templateObject_2$_, templateObject_3$N, templateObject_4$y;
|
|
4852
4852
|
|
|
4853
4853
|
var getStylesBySize$a = function (size, theme) {
|
|
4854
4854
|
switch (size) {
|
|
@@ -4916,7 +4916,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4916
4916
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4917
4917
|
// `variants` styles that are consistent through all themes.
|
|
4918
4918
|
var TAGS = {
|
|
4919
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4919
|
+
hero1: newStyled.h1(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject([""], [""]))),
|
|
4920
4920
|
hero2: newStyled.h2(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject([""], [""]))),
|
|
4921
4921
|
hero3: newStyled.h3(templateObject_3$M || (templateObject_3$M = __makeTemplateObject([""], [""]))),
|
|
4922
4922
|
display1: newStyled.h1(templateObject_4$x || (templateObject_4$x = __makeTemplateObject([""], [""]))),
|
|
@@ -5040,9 +5040,9 @@ var DEFAULTS = {
|
|
|
5040
5040
|
size: 'regular',
|
|
5041
5041
|
},
|
|
5042
5042
|
};
|
|
5043
|
-
var templateObject_1$
|
|
5043
|
+
var templateObject_1$1u, templateObject_2$Z, templateObject_3$M, templateObject_4$x, templateObject_5$j, templateObject_6$g, templateObject_7$a, 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;
|
|
5044
5044
|
|
|
5045
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5045
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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) {
|
|
5046
5046
|
var inline = _a.inline;
|
|
5047
5047
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5048
5048
|
});
|
|
@@ -5061,7 +5061,7 @@ var SizeSelector = function (_a) {
|
|
|
5061
5061
|
}, 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));
|
|
5062
5062
|
}) }), void 0)] }), void 0));
|
|
5063
5063
|
};
|
|
5064
|
-
var templateObject_1$
|
|
5064
|
+
var templateObject_1$1t;
|
|
5065
5065
|
|
|
5066
5066
|
var getStylesBySize$9 = function (size) {
|
|
5067
5067
|
switch (size) {
|
|
@@ -5088,7 +5088,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5088
5088
|
} });
|
|
5089
5089
|
};
|
|
5090
5090
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5091
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5091
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1s || (templateObject_1$1s = __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));
|
|
5092
5092
|
};
|
|
5093
5093
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5094
5094
|
if (disabled)
|
|
@@ -5104,16 +5104,16 @@ var TextButton = function (_a) {
|
|
|
5104
5104
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5105
5105
|
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));
|
|
5106
5106
|
};
|
|
5107
|
-
var templateObject_1$
|
|
5107
|
+
var templateObject_1$1s;
|
|
5108
5108
|
|
|
5109
|
-
var Container
|
|
5109
|
+
var Container$10 = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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"])));
|
|
5110
5110
|
var P$3 = newStyled.p(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5111
5111
|
var PercentageSpan = newStyled.span(templateObject_3$L || (templateObject_3$L = __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"])));
|
|
5112
5112
|
var SizeFitGuide = function (_a) {
|
|
5113
5113
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5114
|
-
return (jsxs$1(Container
|
|
5114
|
+
return (jsxs$1(Container$10, { 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));
|
|
5115
5115
|
};
|
|
5116
|
-
var templateObject_1$
|
|
5116
|
+
var templateObject_1$1r, templateObject_2$Y, templateObject_3$L;
|
|
5117
5117
|
|
|
5118
5118
|
var getStylesBySize$8 = function (size) {
|
|
5119
5119
|
switch (size) {
|
|
@@ -5143,7 +5143,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5143
5143
|
};
|
|
5144
5144
|
}
|
|
5145
5145
|
};
|
|
5146
|
-
var Container
|
|
5146
|
+
var Container$$ = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
5147
5147
|
var backgroundColor = _a.backgroundColor;
|
|
5148
5148
|
return backgroundColor;
|
|
5149
5149
|
}, function (_a) {
|
|
@@ -5181,9 +5181,9 @@ var Now = newStyled(H3$3)(templateObject_3$K || (templateObject_3$K = __makeTemp
|
|
|
5181
5181
|
var DiscountTag = function (_a) {
|
|
5182
5182
|
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;
|
|
5183
5183
|
var theme = useTheme();
|
|
5184
|
-
return (jsxs$1(Container
|
|
5184
|
+
return (jsxs$1(Container$$, __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));
|
|
5185
5185
|
};
|
|
5186
|
-
var templateObject_1$
|
|
5186
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$K;
|
|
5187
5187
|
|
|
5188
5188
|
var getStylesBySize$7 = function (size) {
|
|
5189
5189
|
switch (size) {
|
|
@@ -5213,7 +5213,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5213
5213
|
};
|
|
5214
5214
|
}
|
|
5215
5215
|
};
|
|
5216
|
-
var Container$
|
|
5216
|
+
var Container$_ = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5217
5217
|
var Price = newStyled.p(templateObject_2$W || (templateObject_2$W = __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) {
|
|
5218
5218
|
var weight = _a.weight;
|
|
5219
5219
|
return (weight ? weight : '400');
|
|
@@ -5264,9 +5264,9 @@ var PriceLabel = function (_a) {
|
|
|
5264
5264
|
weight: 700,
|
|
5265
5265
|
};
|
|
5266
5266
|
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)); };
|
|
5267
|
-
return (jsxs$1(Container$
|
|
5267
|
+
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));
|
|
5268
5268
|
};
|
|
5269
|
-
var templateObject_1$
|
|
5269
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$J;
|
|
5270
5270
|
|
|
5271
5271
|
var getStylesBySize$6 = function (size) {
|
|
5272
5272
|
switch (size) {
|
|
@@ -5296,7 +5296,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5296
5296
|
};
|
|
5297
5297
|
}
|
|
5298
5298
|
};
|
|
5299
|
-
var Container$
|
|
5299
|
+
var Container$Z = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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) {
|
|
5300
5300
|
var backgroundColor = _a.backgroundColor;
|
|
5301
5301
|
return backgroundColor;
|
|
5302
5302
|
}, function (_a) {
|
|
@@ -5333,11 +5333,11 @@ var H3$2 = newStyled.h3(templateObject_2$V || (templateObject_2$V = __makeTempla
|
|
|
5333
5333
|
var ClubOfferTag = function (_a) {
|
|
5334
5334
|
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;
|
|
5335
5335
|
var theme = useTheme();
|
|
5336
|
-
return (jsx$1(Container$
|
|
5336
|
+
return (jsx$1(Container$Z, __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));
|
|
5337
5337
|
};
|
|
5338
|
-
var templateObject_1$
|
|
5338
|
+
var templateObject_1$1o, templateObject_2$V;
|
|
5339
5339
|
|
|
5340
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5340
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5341
5341
|
var PriceLabelV2 = function (_a) {
|
|
5342
5342
|
var _b;
|
|
5343
5343
|
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;
|
|
@@ -5366,7 +5366,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5366
5366
|
weight: 700,
|
|
5367
5367
|
};
|
|
5368
5368
|
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)); };
|
|
5369
|
-
return (jsxs$1(Container$
|
|
5369
|
+
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: {
|
|
5370
5370
|
borderRadius: '6px',
|
|
5371
5371
|
width: '110px',
|
|
5372
5372
|
height: '32px',
|
|
@@ -5374,7 +5374,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5374
5374
|
padding: '6px 12px 4px',
|
|
5375
5375
|
} }), void 0)) }), void 0))] }, void 0));
|
|
5376
5376
|
};
|
|
5377
|
-
var templateObject_1$
|
|
5377
|
+
var templateObject_1$1n;
|
|
5378
5378
|
|
|
5379
5379
|
var OneColorSelector = function (_a) {
|
|
5380
5380
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5415,7 +5415,7 @@ var OutOfStock = function (_a) {
|
|
|
5415
5415
|
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));
|
|
5416
5416
|
};
|
|
5417
5417
|
|
|
5418
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5418
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5419
5419
|
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5420
5420
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
5421
5421
|
var Span = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -5437,9 +5437,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5437
5437
|
Option: Option,
|
|
5438
5438
|
OptionsContainer: OptionsContainer,
|
|
5439
5439
|
});
|
|
5440
|
-
var templateObject_1$
|
|
5440
|
+
var templateObject_1$1m, templateObject_2$U, templateObject_3$I, templateObject_4$w, templateObject_5$i;
|
|
5441
5441
|
|
|
5442
|
-
var Container$
|
|
5442
|
+
var Container$Y = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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) {
|
|
5443
5443
|
var borderColor = _a.borderColor;
|
|
5444
5444
|
return borderColor;
|
|
5445
5445
|
}, function (_a) {
|
|
@@ -5451,9 +5451,9 @@ var PatternSelector = function (_a) {
|
|
|
5451
5451
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5452
5452
|
var theme = useTheme();
|
|
5453
5453
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5454
|
-
return (jsx$1(Container$
|
|
5454
|
+
return (jsx$1(Container$Y, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5455
5455
|
};
|
|
5456
|
-
var templateObject_1$
|
|
5456
|
+
var templateObject_1$1l, templateObject_2$T;
|
|
5457
5457
|
|
|
5458
5458
|
var renderOptions$1 = function (options) {
|
|
5459
5459
|
if (options.length === 0) {
|
|
@@ -5658,7 +5658,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5658
5658
|
literal: true,
|
|
5659
5659
|
});
|
|
5660
5660
|
|
|
5661
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5661
|
+
var Image$2 = newStyled.img(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
5662
5662
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5663
5663
|
return borderRadiusVariant &&
|
|
5664
5664
|
"\nborder-radius: 20px;\n";
|
|
@@ -5673,7 +5673,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5673
5673
|
var theme = useTheme();
|
|
5674
5674
|
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));
|
|
5675
5675
|
};
|
|
5676
|
-
var templateObject_1$
|
|
5676
|
+
var templateObject_1$1k;
|
|
5677
5677
|
|
|
5678
5678
|
var Button$4 = newStyled.button(function () { return ({
|
|
5679
5679
|
background: 'transparent',
|
|
@@ -9917,14 +9917,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9917
9917
|
return Slider;
|
|
9918
9918
|
}(React__default.Component);
|
|
9919
9919
|
|
|
9920
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9920
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1j || (templateObject_1$1j = __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) {
|
|
9921
9921
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9922
9922
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9923
9923
|
}, function (_a) {
|
|
9924
9924
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9925
9925
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9926
9926
|
});
|
|
9927
|
-
var templateObject_1$
|
|
9927
|
+
var templateObject_1$1j;
|
|
9928
9928
|
|
|
9929
9929
|
var getStylesBySize$5 = function (size) {
|
|
9930
9930
|
// rem units
|
|
@@ -9983,22 +9983,22 @@ var SliderNavigation = function (_a) {
|
|
|
9983
9983
|
} }, { 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));
|
|
9984
9984
|
};
|
|
9985
9985
|
|
|
9986
|
-
var horizontalStyles = css(templateObject_1$
|
|
9986
|
+
var horizontalStyles = css(templateObject_1$1i || (templateObject_1$1i = __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"])));
|
|
9987
9987
|
var verticalStyles = css(templateObject_2$S || (templateObject_2$S = __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"])));
|
|
9988
|
-
var Container$
|
|
9988
|
+
var Container$X = newStyled.div(templateObject_3$H || (templateObject_3$H = __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) {
|
|
9989
9989
|
var position = _a.position;
|
|
9990
9990
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9991
9991
|
});
|
|
9992
9992
|
var Button$3 = newStyled.button(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
9993
9993
|
var ImagePreviewList = function (_a) {
|
|
9994
9994
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9995
|
-
return (jsx$1(Container$
|
|
9995
|
+
return (jsx$1(Container$X, __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: {
|
|
9996
9996
|
arrowWidth: 0.75,
|
|
9997
9997
|
arrowHeight: 1.25,
|
|
9998
9998
|
arrowPadding: 1.625,
|
|
9999
9999
|
}, 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.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.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
10000
10000
|
};
|
|
10001
|
-
var templateObject_1$
|
|
10001
|
+
var templateObject_1$1i, templateObject_2$S, templateObject_3$H, templateObject_4$v;
|
|
10002
10002
|
|
|
10003
10003
|
var propTypes = {exports: {}};
|
|
10004
10004
|
|
|
@@ -11591,7 +11591,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11591
11591
|
afterZoomOut: PropTypes.func
|
|
11592
11592
|
} : {};
|
|
11593
11593
|
|
|
11594
|
-
var Container$
|
|
11594
|
+
var Container$W = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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) {
|
|
11595
11595
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11596
11596
|
return borderRadiusVariant &&
|
|
11597
11597
|
"\n border-radius: 40px;\n ";
|
|
@@ -11601,14 +11601,14 @@ var BottomTagContainer$3 = newStyled.div(templateObject_3$G || (templateObject_3
|
|
|
11601
11601
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$u || (templateObject_4$u = __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"])));
|
|
11602
11602
|
var ImageProductWithTags$1 = function (_a) {
|
|
11603
11603
|
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;
|
|
11604
|
-
return (jsxs$1(Container$
|
|
11604
|
+
return (jsxs$1(Container$W, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11605
11605
|
alt: image.alt,
|
|
11606
11606
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11607
11607
|
}, 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), 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));
|
|
11608
11608
|
};
|
|
11609
|
-
var templateObject_1$
|
|
11609
|
+
var templateObject_1$1h, templateObject_2$R, templateObject_3$G, templateObject_4$u;
|
|
11610
11610
|
|
|
11611
|
-
var Container$
|
|
11611
|
+
var Container$V = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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"])));
|
|
11612
11612
|
var ProductGallery = function (_a) {
|
|
11613
11613
|
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;
|
|
11614
11614
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11616,11 +11616,11 @@ var ProductGallery = function (_a) {
|
|
|
11616
11616
|
useEffect(function () {
|
|
11617
11617
|
setSelectedImage(initialValue);
|
|
11618
11618
|
}, [initialValue]);
|
|
11619
|
-
return (jsxs$1(Container$
|
|
11619
|
+
return (jsxs$1(Container$V, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11620
11620
|
setSelectedImage(value);
|
|
11621
11621
|
}, 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));
|
|
11622
11622
|
};
|
|
11623
|
-
var templateObject_1$
|
|
11623
|
+
var templateObject_1$1g;
|
|
11624
11624
|
|
|
11625
11625
|
/* base styles & size variants */
|
|
11626
11626
|
var StarStyles = {
|
|
@@ -11666,8 +11666,8 @@ var StarStyles = {
|
|
|
11666
11666
|
});
|
|
11667
11667
|
},
|
|
11668
11668
|
};
|
|
11669
|
-
var Container$
|
|
11670
|
-
var templateObject_1$
|
|
11669
|
+
var Container$U = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11670
|
+
var templateObject_1$1f;
|
|
11671
11671
|
|
|
11672
11672
|
var StarContainer = newStyled.div(function (_a) {
|
|
11673
11673
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11685,7 +11685,7 @@ var sizes = {
|
|
|
11685
11685
|
var StarList = function (_a) {
|
|
11686
11686
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
11687
11687
|
var theme = useTheme();
|
|
11688
|
-
return (jsx$1(Container$
|
|
11688
|
+
return (jsx$1(Container$U, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11689
11689
|
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));
|
|
11690
11690
|
}) }, void 0));
|
|
11691
11691
|
};
|
|
@@ -11729,8 +11729,8 @@ var LabelStyles = {
|
|
|
11729
11729
|
});
|
|
11730
11730
|
},
|
|
11731
11731
|
};
|
|
11732
|
-
var Container$
|
|
11733
|
-
var templateObject_1$
|
|
11732
|
+
var Container$T = newStyled.a(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11733
|
+
var templateObject_1$1e;
|
|
11734
11734
|
|
|
11735
11735
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11736
11736
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11770,10 +11770,10 @@ var Rating = function (_a) {
|
|
|
11770
11770
|
href: reviewsContainerId,
|
|
11771
11771
|
}
|
|
11772
11772
|
: {};
|
|
11773
|
-
return (jsxs$1(Container$
|
|
11773
|
+
return (jsxs$1(Container$T, __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));
|
|
11774
11774
|
};
|
|
11775
11775
|
|
|
11776
|
-
var Container$
|
|
11776
|
+
var Container$S = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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"])));
|
|
11777
11777
|
var P$2 = newStyled.p(templateObject_2$Q || (templateObject_2$Q = __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; });
|
|
11778
11778
|
var textButtonStyles = function (theme) { return ({
|
|
11779
11779
|
border: 'none',
|
|
@@ -11787,9 +11787,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11787
11787
|
var FitPredictor = function (_a) {
|
|
11788
11788
|
var onClick = _a.onClick;
|
|
11789
11789
|
var theme = useTheme();
|
|
11790
|
-
return (jsxs(Container$
|
|
11790
|
+
return (jsxs(Container$S, __assign$1({ theme: theme }, { children: [jsx(Container$S, { 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));
|
|
11791
11791
|
};
|
|
11792
|
-
var templateObject_1$
|
|
11792
|
+
var templateObject_1$1d, templateObject_2$Q;
|
|
11793
11793
|
|
|
11794
11794
|
var P$1 = newStyled.p(function (_a) {
|
|
11795
11795
|
var color = _a.color;
|
|
@@ -11803,7 +11803,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
11803
11803
|
margin: '0.938rem 4.188rem',
|
|
11804
11804
|
});
|
|
11805
11805
|
});
|
|
11806
|
-
var Bar$
|
|
11806
|
+
var Bar$2 = 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 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) {
|
|
11807
11807
|
var height = _a.height;
|
|
11808
11808
|
return height || '0.5rem';
|
|
11809
11809
|
}, function (_a) {
|
|
@@ -11811,7 +11811,7 @@ var Bar$1 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTe
|
|
|
11811
11811
|
return backgroundColor;
|
|
11812
11812
|
}, function (_a) {
|
|
11813
11813
|
var percent = _a.percent;
|
|
11814
|
-
return (percent ? getBarWithBasedOnPercent(percent) : '50%');
|
|
11814
|
+
return (percent ? getBarWithBasedOnPercent$1(percent) : '50%');
|
|
11815
11815
|
}, function (_a) {
|
|
11816
11816
|
var borderRadius = _a.borderRadius;
|
|
11817
11817
|
return borderRadius || '0.25rem';
|
|
@@ -11822,7 +11822,7 @@ var Bar$1 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTe
|
|
|
11822
11822
|
var percent = _a.percent;
|
|
11823
11823
|
return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
|
|
11824
11824
|
});
|
|
11825
|
-
var Background = newStyled.div(function (_a) {
|
|
11825
|
+
var Background$1 = newStyled.div(function (_a) {
|
|
11826
11826
|
var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
|
|
11827
11827
|
return ({
|
|
11828
11828
|
height: height || '0.5rem',
|
|
@@ -11832,7 +11832,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11832
11832
|
position: 'absolute',
|
|
11833
11833
|
});
|
|
11834
11834
|
});
|
|
11835
|
-
var Container$
|
|
11835
|
+
var Container$R = newStyled.div(function (_a) {
|
|
11836
11836
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
11837
11837
|
return ({
|
|
11838
11838
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11840,13 +11840,87 @@ var Container$Q = newStyled.div(function (_a) {
|
|
|
11840
11840
|
overflow: description ? 'hidden' : '',
|
|
11841
11841
|
});
|
|
11842
11842
|
});
|
|
11843
|
-
var getBarWithBasedOnPercent = function (percent) {
|
|
11843
|
+
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
11844
11844
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
11845
11845
|
};
|
|
11846
11846
|
var ProgressBar = function (_a) {
|
|
11847
11847
|
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;
|
|
11848
11848
|
var theme = useTheme();
|
|
11849
|
-
return (jsxs$1(Container$
|
|
11849
|
+
return (jsxs$1(Container$R, __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));
|
|
11850
|
+
};
|
|
11851
|
+
var templateObject_1$1c;
|
|
11852
|
+
|
|
11853
|
+
var Bar$1 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
11854
|
+
var height = _a.height;
|
|
11855
|
+
return height || '0.5rem';
|
|
11856
|
+
}, function (_a) {
|
|
11857
|
+
var backgroundColor = _a.backgroundColor;
|
|
11858
|
+
return backgroundColor;
|
|
11859
|
+
}, function (_a) {
|
|
11860
|
+
var percent = _a.percent;
|
|
11861
|
+
return (percent ? getBarWithBasedOnPercent(percent) : '50%');
|
|
11862
|
+
}, function (_a) {
|
|
11863
|
+
var borderRadius = _a.borderRadius;
|
|
11864
|
+
return borderRadius || '0.25rem';
|
|
11865
|
+
}, function (_a) {
|
|
11866
|
+
var percent = _a.percent;
|
|
11867
|
+
return (percent ? '0' : '-50%');
|
|
11868
|
+
}, function (_a) {
|
|
11869
|
+
var percent = _a.percent;
|
|
11870
|
+
return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
|
|
11871
|
+
});
|
|
11872
|
+
var Background = newStyled.div(function (_a) {
|
|
11873
|
+
var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
|
|
11874
|
+
return ({
|
|
11875
|
+
height: height || '0.5rem',
|
|
11876
|
+
width: '100%',
|
|
11877
|
+
backgroundColor: backgroundColor,
|
|
11878
|
+
borderRadius: borderRadius || '0.25rem',
|
|
11879
|
+
});
|
|
11880
|
+
});
|
|
11881
|
+
var BarContainer$1 = newStyled.div({
|
|
11882
|
+
display: 'grid',
|
|
11883
|
+
gridTemplateColumns: '1fr 10fr 1fr',
|
|
11884
|
+
justifyContent: 'center',
|
|
11885
|
+
alignItems: 'center',
|
|
11886
|
+
width: '416px',
|
|
11887
|
+
gap: '8px',
|
|
11888
|
+
maxWidth: '100%',
|
|
11889
|
+
padding: '0 16px',
|
|
11890
|
+
position: 'relative',
|
|
11891
|
+
});
|
|
11892
|
+
var Container$Q = newStyled.div(function (_a) {
|
|
11893
|
+
var backgroundColor = _a.backgroundColor;
|
|
11894
|
+
return ({
|
|
11895
|
+
width: '475px',
|
|
11896
|
+
maxWidth: '100%',
|
|
11897
|
+
display: 'flex',
|
|
11898
|
+
gap: '13px',
|
|
11899
|
+
padding: '16px 0',
|
|
11900
|
+
flexDirection: 'column',
|
|
11901
|
+
alignItems: 'center',
|
|
11902
|
+
background: backgroundColor,
|
|
11903
|
+
});
|
|
11904
|
+
});
|
|
11905
|
+
var getBarWithBasedOnPercent = function (percent) {
|
|
11906
|
+
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
11907
|
+
};
|
|
11908
|
+
var Value = newStyled.div(function (_a) {
|
|
11909
|
+
var isBold = _a.isBold;
|
|
11910
|
+
return ({
|
|
11911
|
+
fontWeight: isBold ? 600 : 400,
|
|
11912
|
+
});
|
|
11913
|
+
});
|
|
11914
|
+
var _calculatePercentage = function (currentAmount, startingValue, endingValue) {
|
|
11915
|
+
var percentage = (currentAmount - startingValue) / (endingValue - startingValue);
|
|
11916
|
+
return percentage > 1 ? 100 : percentage * 100;
|
|
11917
|
+
};
|
|
11918
|
+
var MotivatorProgressBar = function (_a) {
|
|
11919
|
+
var fillColor = _a.fillColor, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#F7F7F7' : _b, unfilledColor = _a.unfilledColor, _c = _a.currencyCode, currencyCode = _c === void 0 ? '$' : _c, _d = _a.startingValue, startingValue = _d === void 0 ? 10 : _d, _e = _a.endingValue, endingValue = _e === void 0 ? 70 : _e, _f = _a.currentAmount, currentAmount = _f === void 0 ? 0 : _f, rewardUnlockedMessage = _a.rewardUnlockedMessage;
|
|
11920
|
+
var theme = useTheme();
|
|
11921
|
+
var isRewardUnlocked = currentAmount >= endingValue;
|
|
11922
|
+
var progress = _calculatePercentage(currentAmount, startingValue, endingValue);
|
|
11923
|
+
return (jsxs$1(Container$Q, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer$1, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, startingValue] }, 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));
|
|
11850
11924
|
};
|
|
11851
11925
|
var templateObject_1$1b;
|
|
11852
11926
|
|
|
@@ -18782,5 +18856,5 @@ var HurryUp = function (_a) {
|
|
|
18782
18856
|
};
|
|
18783
18857
|
var templateObject_1;
|
|
18784
18858
|
|
|
18785
|
-
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, 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$6 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 };
|
|
18859
|
+
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$6 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 };
|
|
18786
18860
|
//# sourceMappingURL=index.esm.js.map
|