@trafilea/afrodita-components 5.0.0-beta.234 → 5.0.0-beta.236
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/build/theme/revel.theme.js +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4168,7 +4168,7 @@ exports.InputValidationType = void 0;
|
|
|
4168
4168
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4169
4169
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4170
4170
|
|
|
4171
|
-
var Section = newStyled.div(templateObject_1$
|
|
4171
|
+
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) {
|
|
4172
4172
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4173
4173
|
});
|
|
4174
4174
|
var CardHeader = function (_a) {
|
|
@@ -4179,14 +4179,14 @@ var CardFooter = function (_a) {
|
|
|
4179
4179
|
var children = _a.children;
|
|
4180
4180
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4181
4181
|
};
|
|
4182
|
-
var templateObject_1$
|
|
4182
|
+
var templateObject_1$1C;
|
|
4183
4183
|
|
|
4184
|
-
var Body = newStyled.div(templateObject_1$
|
|
4184
|
+
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"])));
|
|
4185
4185
|
var CardBody = function (_a) {
|
|
4186
4186
|
var children = _a.children;
|
|
4187
4187
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4188
4188
|
};
|
|
4189
|
-
var templateObject_1$
|
|
4189
|
+
var templateObject_1$1B;
|
|
4190
4190
|
|
|
4191
4191
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4192
4192
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4331,7 +4331,7 @@ var AssetsProvider = function (_a) {
|
|
|
4331
4331
|
};
|
|
4332
4332
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4333
4333
|
|
|
4334
|
-
var Container$
|
|
4334
|
+
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) {
|
|
4335
4335
|
var flex = _a.flex;
|
|
4336
4336
|
return flex &&
|
|
4337
4337
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4346,14 +4346,14 @@ var Container$12 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = _
|
|
|
4346
4346
|
var Card$2 = function (_a) {
|
|
4347
4347
|
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;
|
|
4348
4348
|
var theme = useTheme();
|
|
4349
|
-
return (jsxRuntime.jsx(Container$
|
|
4349
|
+
return (jsxRuntime.jsx(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));
|
|
4350
4350
|
};
|
|
4351
4351
|
var Card$3 = Object.assign(Card$2, {
|
|
4352
4352
|
Header: CardHeader,
|
|
4353
4353
|
Footer: CardFooter,
|
|
4354
4354
|
Body: CardBody,
|
|
4355
4355
|
});
|
|
4356
|
-
var templateObject_1$
|
|
4356
|
+
var templateObject_1$1A;
|
|
4357
4357
|
|
|
4358
4358
|
var Fragment = jsxRuntime.Fragment;
|
|
4359
4359
|
function jsx(type, props, key) {
|
|
@@ -4499,7 +4499,7 @@ function BaseSelectOption(_a) {
|
|
|
4499
4499
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4500
4500
|
}
|
|
4501
4501
|
|
|
4502
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4502
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4503
4503
|
function BaseSelect(_a) {
|
|
4504
4504
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4505
4505
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4509,7 +4509,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4509
4509
|
Options: BaseSelectOptions,
|
|
4510
4510
|
Option: BaseSelectOption,
|
|
4511
4511
|
});
|
|
4512
|
-
var templateObject_1$
|
|
4512
|
+
var templateObject_1$1z;
|
|
4513
4513
|
|
|
4514
4514
|
var CustomButton = newStyled.button(function (_a) {
|
|
4515
4515
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4566,14 +4566,14 @@ var withLabel = function (Button, label) {
|
|
|
4566
4566
|
};
|
|
4567
4567
|
};
|
|
4568
4568
|
|
|
4569
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4569
|
+
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; });
|
|
4570
4570
|
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"])));
|
|
4571
4571
|
var Error$1 = function (_a) {
|
|
4572
4572
|
var error = _a.error;
|
|
4573
4573
|
var theme = useTheme();
|
|
4574
4574
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4575
4575
|
};
|
|
4576
|
-
var templateObject_1$
|
|
4576
|
+
var templateObject_1$1y, templateObject_2$11;
|
|
4577
4577
|
|
|
4578
4578
|
var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4579
4579
|
var theme = _a.theme;
|
|
@@ -4739,7 +4739,7 @@ var CustomCheckboxStyles = {
|
|
|
4739
4739
|
},
|
|
4740
4740
|
};
|
|
4741
4741
|
|
|
4742
|
-
var Container$
|
|
4742
|
+
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"])));
|
|
4743
4743
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4744
4744
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4745
4745
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4779,9 +4779,9 @@ var Checkbox = function (_a) {
|
|
|
4779
4779
|
React$2.useEffect(function () {
|
|
4780
4780
|
mounted.current = true;
|
|
4781
4781
|
}, []);
|
|
4782
|
-
return (jsxRuntime.jsxs(Container$
|
|
4782
|
+
return (jsxRuntime.jsxs(Container$12, { children: [jsxRuntime.jsx(Input$4, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4783
4783
|
};
|
|
4784
|
-
var templateObject_1$
|
|
4784
|
+
var templateObject_1$1x, templateObject_2$10;
|
|
4785
4785
|
|
|
4786
4786
|
var CustomOption = newStyled.li(function (_a) {
|
|
4787
4787
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4828,7 +4828,7 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4828
4828
|
Option: BaseDropdownOption,
|
|
4829
4829
|
});
|
|
4830
4830
|
|
|
4831
|
-
var Container$
|
|
4831
|
+
var Container$11 = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __makeTemplateObject([""], [""])));
|
|
4832
4832
|
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"])));
|
|
4833
4833
|
function SimpleDropdown(_a) {
|
|
4834
4834
|
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;
|
|
@@ -4859,11 +4859,11 @@ function SimpleDropdown(_a) {
|
|
|
4859
4859
|
setSelectedValue(value);
|
|
4860
4860
|
}, [value, options, initialValue]);
|
|
4861
4861
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4862
|
-
return (jsxRuntime.jsxs(Container$
|
|
4862
|
+
return (jsxRuntime.jsxs(Container$11, __assign$1({ as: showRequiredPlaceholder ? 'div' : React$2.Fragment }, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
4863
4863
|
}
|
|
4864
|
-
var templateObject_1$
|
|
4864
|
+
var templateObject_1$1w, templateObject_2$$;
|
|
4865
4865
|
|
|
4866
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4866
|
+
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; });
|
|
4867
4867
|
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; });
|
|
4868
4868
|
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"])));
|
|
4869
4869
|
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"])));
|
|
@@ -4874,7 +4874,7 @@ var DropdownDialog = function (_a) {
|
|
|
4874
4874
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4875
4875
|
}) }), void 0) }), void 0));
|
|
4876
4876
|
};
|
|
4877
|
-
var templateObject_1$
|
|
4877
|
+
var templateObject_1$1v, templateObject_2$_, templateObject_3$N, templateObject_4$y;
|
|
4878
4878
|
|
|
4879
4879
|
var getStylesBySize$a = function (size, theme) {
|
|
4880
4880
|
switch (size) {
|
|
@@ -4942,7 +4942,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4942
4942
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4943
4943
|
// `variants` styles that are consistent through all themes.
|
|
4944
4944
|
var TAGS = {
|
|
4945
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4945
|
+
hero1: newStyled.h1(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject([""], [""]))),
|
|
4946
4946
|
hero2: newStyled.h2(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject([""], [""]))),
|
|
4947
4947
|
hero3: newStyled.h3(templateObject_3$M || (templateObject_3$M = __makeTemplateObject([""], [""]))),
|
|
4948
4948
|
display1: newStyled.h1(templateObject_4$x || (templateObject_4$x = __makeTemplateObject([""], [""]))),
|
|
@@ -5066,9 +5066,9 @@ var DEFAULTS = {
|
|
|
5066
5066
|
size: 'regular',
|
|
5067
5067
|
},
|
|
5068
5068
|
};
|
|
5069
|
-
var templateObject_1$
|
|
5069
|
+
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;
|
|
5070
5070
|
|
|
5071
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5071
|
+
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) {
|
|
5072
5072
|
var inline = _a.inline;
|
|
5073
5073
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5074
5074
|
});
|
|
@@ -5087,7 +5087,7 @@ var SizeSelector = function (_a) {
|
|
|
5087
5087
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width, showNoStockStyles: size.noStock }, size.label));
|
|
5088
5088
|
}) }), void 0)] }), void 0));
|
|
5089
5089
|
};
|
|
5090
|
-
var templateObject_1$
|
|
5090
|
+
var templateObject_1$1t;
|
|
5091
5091
|
|
|
5092
5092
|
var getStylesBySize$9 = function (size) {
|
|
5093
5093
|
switch (size) {
|
|
@@ -5114,7 +5114,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5114
5114
|
} });
|
|
5115
5115
|
};
|
|
5116
5116
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5117
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5117
|
+
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));
|
|
5118
5118
|
};
|
|
5119
5119
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5120
5120
|
if (disabled)
|
|
@@ -5130,16 +5130,16 @@ var TextButton = function (_a) {
|
|
|
5130
5130
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5131
5131
|
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));
|
|
5132
5132
|
};
|
|
5133
|
-
var templateObject_1$
|
|
5133
|
+
var templateObject_1$1s;
|
|
5134
5134
|
|
|
5135
|
-
var Container
|
|
5135
|
+
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"])));
|
|
5136
5136
|
var P$3 = newStyled.p(templateObject_2$Y || (templateObject_2$Y = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5137
5137
|
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"])));
|
|
5138
5138
|
var SizeFitGuide = function (_a) {
|
|
5139
5139
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5140
|
-
return (jsxRuntime.jsxs(Container
|
|
5140
|
+
return (jsxRuntime.jsxs(Container$10, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5141
5141
|
};
|
|
5142
|
-
var templateObject_1$
|
|
5142
|
+
var templateObject_1$1r, templateObject_2$Y, templateObject_3$L;
|
|
5143
5143
|
|
|
5144
5144
|
var getStylesBySize$8 = function (size) {
|
|
5145
5145
|
switch (size) {
|
|
@@ -5169,7 +5169,7 @@ var getStylesBySize$8 = function (size) {
|
|
|
5169
5169
|
};
|
|
5170
5170
|
}
|
|
5171
5171
|
};
|
|
5172
|
-
var Container
|
|
5172
|
+
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) {
|
|
5173
5173
|
var backgroundColor = _a.backgroundColor;
|
|
5174
5174
|
return backgroundColor;
|
|
5175
5175
|
}, function (_a) {
|
|
@@ -5207,9 +5207,9 @@ var Now = newStyled(H3$3)(templateObject_3$K || (templateObject_3$K = __makeTemp
|
|
|
5207
5207
|
var DiscountTag = function (_a) {
|
|
5208
5208
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5209
5209
|
var theme = useTheme();
|
|
5210
|
-
return (jsxRuntime.jsxs(Container
|
|
5210
|
+
return (jsxRuntime.jsxs(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: [jsxRuntime.jsx(Now, __assign$1({ "data-testid": "vwo-discount-now", textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: "Now:" }), void 0), jsxRuntime.jsxs(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0)] }), void 0));
|
|
5211
5211
|
};
|
|
5212
|
-
var templateObject_1$
|
|
5212
|
+
var templateObject_1$1q, templateObject_2$X, templateObject_3$K;
|
|
5213
5213
|
|
|
5214
5214
|
var getStylesBySize$7 = function (size) {
|
|
5215
5215
|
switch (size) {
|
|
@@ -5239,7 +5239,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5239
5239
|
};
|
|
5240
5240
|
}
|
|
5241
5241
|
};
|
|
5242
|
-
var Container$
|
|
5242
|
+
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"])));
|
|
5243
5243
|
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) {
|
|
5244
5244
|
var weight = _a.weight;
|
|
5245
5245
|
return (weight ? weight : '400');
|
|
@@ -5290,9 +5290,9 @@ var PriceLabel = function (_a) {
|
|
|
5290
5290
|
weight: 700,
|
|
5291
5291
|
};
|
|
5292
5292
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5293
|
-
return (jsxRuntime.jsxs(Container$
|
|
5293
|
+
return (jsxRuntime.jsxs(Container$_, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
5294
5294
|
};
|
|
5295
|
-
var templateObject_1$
|
|
5295
|
+
var templateObject_1$1p, templateObject_2$W, templateObject_3$J;
|
|
5296
5296
|
|
|
5297
5297
|
var getStylesBySize$6 = function (size) {
|
|
5298
5298
|
switch (size) {
|
|
@@ -5322,7 +5322,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
5322
5322
|
};
|
|
5323
5323
|
}
|
|
5324
5324
|
};
|
|
5325
|
-
var Container$
|
|
5325
|
+
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) {
|
|
5326
5326
|
var backgroundColor = _a.backgroundColor;
|
|
5327
5327
|
return backgroundColor;
|
|
5328
5328
|
}, function (_a) {
|
|
@@ -5359,11 +5359,11 @@ var H3$2 = newStyled.h3(templateObject_2$V || (templateObject_2$V = __makeTempla
|
|
|
5359
5359
|
var ClubOfferTag = function (_a) {
|
|
5360
5360
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5361
5361
|
var theme = useTheme();
|
|
5362
|
-
return (jsxRuntime.jsx(Container$
|
|
5362
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsx(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5363
5363
|
};
|
|
5364
|
-
var templateObject_1$
|
|
5364
|
+
var templateObject_1$1o, templateObject_2$V;
|
|
5365
5365
|
|
|
5366
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5366
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5367
5367
|
var PriceLabelV2 = function (_a) {
|
|
5368
5368
|
var _b;
|
|
5369
5369
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
@@ -5392,7 +5392,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5392
5392
|
weight: 700,
|
|
5393
5393
|
};
|
|
5394
5394
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5395
|
-
return (jsxRuntime.jsxs(Container$
|
|
5395
|
+
return (jsxRuntime.jsxs(Container$_, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
|
|
5396
5396
|
borderRadius: '6px',
|
|
5397
5397
|
width: '110px',
|
|
5398
5398
|
height: '32px',
|
|
@@ -5400,7 +5400,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5400
5400
|
padding: '6px 12px 4px',
|
|
5401
5401
|
} }), void 0)) }), void 0))] }, void 0));
|
|
5402
5402
|
};
|
|
5403
|
-
var templateObject_1$
|
|
5403
|
+
var templateObject_1$1n;
|
|
5404
5404
|
|
|
5405
5405
|
var OneColorSelector = function (_a) {
|
|
5406
5406
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5441,7 +5441,7 @@ var OutOfStock = function (_a) {
|
|
|
5441
5441
|
return (jsxRuntime.jsxs("svg", __assign$1({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign$1({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
5442
5442
|
};
|
|
5443
5443
|
|
|
5444
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5444
|
+
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"])));
|
|
5445
5445
|
newStyled(lt.Label)(templateObject_2$U || (templateObject_2$U = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5446
5446
|
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"])));
|
|
5447
5447
|
var Span = newStyled.span(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
@@ -5463,9 +5463,9 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5463
5463
|
Option: Option,
|
|
5464
5464
|
OptionsContainer: OptionsContainer,
|
|
5465
5465
|
});
|
|
5466
|
-
var templateObject_1$
|
|
5466
|
+
var templateObject_1$1m, templateObject_2$U, templateObject_3$I, templateObject_4$w, templateObject_5$i;
|
|
5467
5467
|
|
|
5468
|
-
var Container$
|
|
5468
|
+
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) {
|
|
5469
5469
|
var borderColor = _a.borderColor;
|
|
5470
5470
|
return borderColor;
|
|
5471
5471
|
}, function (_a) {
|
|
@@ -5477,9 +5477,9 @@ var PatternSelector = function (_a) {
|
|
|
5477
5477
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5478
5478
|
var theme = useTheme();
|
|
5479
5479
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5480
|
-
return (jsxRuntime.jsx(Container$
|
|
5480
|
+
return (jsxRuntime.jsx(Container$Y, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5481
5481
|
};
|
|
5482
|
-
var templateObject_1$
|
|
5482
|
+
var templateObject_1$1l, templateObject_2$T;
|
|
5483
5483
|
|
|
5484
5484
|
var renderOptions$1 = function (options) {
|
|
5485
5485
|
if (options.length === 0) {
|
|
@@ -5684,7 +5684,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5684
5684
|
literal: true,
|
|
5685
5685
|
});
|
|
5686
5686
|
|
|
5687
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5687
|
+
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) {
|
|
5688
5688
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5689
5689
|
return borderRadiusVariant &&
|
|
5690
5690
|
"\nborder-radius: 20px;\n";
|
|
@@ -5699,7 +5699,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5699
5699
|
var theme = useTheme();
|
|
5700
5700
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5701
5701
|
};
|
|
5702
|
-
var templateObject_1$
|
|
5702
|
+
var templateObject_1$1k;
|
|
5703
5703
|
|
|
5704
5704
|
var Button$4 = newStyled.button(function () { return ({
|
|
5705
5705
|
background: 'transparent',
|
|
@@ -9943,14 +9943,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9943
9943
|
return Slider;
|
|
9944
9944
|
}(React__default["default"].Component);
|
|
9945
9945
|
|
|
9946
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9946
|
+
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) {
|
|
9947
9947
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9948
9948
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9949
9949
|
}, function (_a) {
|
|
9950
9950
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9951
9951
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9952
9952
|
});
|
|
9953
|
-
var templateObject_1$
|
|
9953
|
+
var templateObject_1$1j;
|
|
9954
9954
|
|
|
9955
9955
|
var getStylesBySize$5 = function (size) {
|
|
9956
9956
|
// rem units
|
|
@@ -10009,22 +10009,22 @@ var SliderNavigation = function (_a) {
|
|
|
10009
10009
|
} }, { 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));
|
|
10010
10010
|
};
|
|
10011
10011
|
|
|
10012
|
-
var horizontalStyles = css(templateObject_1$
|
|
10012
|
+
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"])));
|
|
10013
10013
|
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"])));
|
|
10014
|
-
var Container$
|
|
10014
|
+
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) {
|
|
10015
10015
|
var position = _a.position;
|
|
10016
10016
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
10017
10017
|
});
|
|
10018
10018
|
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"])));
|
|
10019
10019
|
var ImagePreviewList = function (_a) {
|
|
10020
10020
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
10021
|
-
return (jsxRuntime.jsx(Container$
|
|
10021
|
+
return (jsxRuntime.jsx(Container$X, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
10022
10022
|
arrowWidth: 0.75,
|
|
10023
10023
|
arrowHeight: 1.25,
|
|
10024
10024
|
arrowPadding: 1.625,
|
|
10025
10025
|
}, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsxRuntime.jsx(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
|
|
10026
10026
|
};
|
|
10027
|
-
var templateObject_1$
|
|
10027
|
+
var templateObject_1$1i, templateObject_2$S, templateObject_3$H, templateObject_4$v;
|
|
10028
10028
|
|
|
10029
10029
|
var propTypes = {exports: {}};
|
|
10030
10030
|
|
|
@@ -11617,7 +11617,7 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11617
11617
|
afterZoomOut: PropTypes.func
|
|
11618
11618
|
} : {};
|
|
11619
11619
|
|
|
11620
|
-
var Container$
|
|
11620
|
+
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) {
|
|
11621
11621
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11622
11622
|
return borderRadiusVariant &&
|
|
11623
11623
|
"\n border-radius: 40px;\n ";
|
|
@@ -11627,14 +11627,14 @@ var BottomTagContainer$3 = newStyled.div(templateObject_3$G || (templateObject_3
|
|
|
11627
11627
|
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"])));
|
|
11628
11628
|
var ImageProductWithTags$1 = function (_a) {
|
|
11629
11629
|
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;
|
|
11630
|
-
return (jsxRuntime.jsxs(Container$
|
|
11630
|
+
return (jsxRuntime.jsxs(Container$W, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11631
11631
|
alt: image.alt,
|
|
11632
11632
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11633
11633
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
11634
11634
|
};
|
|
11635
|
-
var templateObject_1$
|
|
11635
|
+
var templateObject_1$1h, templateObject_2$R, templateObject_3$G, templateObject_4$u;
|
|
11636
11636
|
|
|
11637
|
-
var Container$
|
|
11637
|
+
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"])));
|
|
11638
11638
|
var ProductGallery = function (_a) {
|
|
11639
11639
|
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;
|
|
11640
11640
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11642,11 +11642,11 @@ var ProductGallery = function (_a) {
|
|
|
11642
11642
|
React$2.useEffect(function () {
|
|
11643
11643
|
setSelectedImage(initialValue);
|
|
11644
11644
|
}, [initialValue]);
|
|
11645
|
-
return (jsxRuntime.jsxs(Container$
|
|
11645
|
+
return (jsxRuntime.jsxs(Container$V, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11646
11646
|
setSelectedImage(value);
|
|
11647
11647
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
11648
11648
|
};
|
|
11649
|
-
var templateObject_1$
|
|
11649
|
+
var templateObject_1$1g;
|
|
11650
11650
|
|
|
11651
11651
|
/* base styles & size variants */
|
|
11652
11652
|
var StarStyles = {
|
|
@@ -11692,8 +11692,8 @@ var StarStyles = {
|
|
|
11692
11692
|
});
|
|
11693
11693
|
},
|
|
11694
11694
|
};
|
|
11695
|
-
var Container$
|
|
11696
|
-
var templateObject_1$
|
|
11695
|
+
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"])));
|
|
11696
|
+
var templateObject_1$1f;
|
|
11697
11697
|
|
|
11698
11698
|
var StarContainer = newStyled.div(function (_a) {
|
|
11699
11699
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11711,7 +11711,7 @@ var sizes = {
|
|
|
11711
11711
|
var StarList = function (_a) {
|
|
11712
11712
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11713
11713
|
var theme = useTheme();
|
|
11714
|
-
return (jsxRuntime.jsx(Container$
|
|
11714
|
+
return (jsxRuntime.jsx(Container$U, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11715
11715
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11716
11716
|
}) }, void 0));
|
|
11717
11717
|
};
|
|
@@ -11755,8 +11755,8 @@ var LabelStyles = {
|
|
|
11755
11755
|
});
|
|
11756
11756
|
},
|
|
11757
11757
|
};
|
|
11758
|
-
var Container$
|
|
11759
|
-
var templateObject_1$
|
|
11758
|
+
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"])));
|
|
11759
|
+
var templateObject_1$1e;
|
|
11760
11760
|
|
|
11761
11761
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11762
11762
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11796,10 +11796,10 @@ var Rating = function (_a) {
|
|
|
11796
11796
|
href: reviewsContainerId,
|
|
11797
11797
|
}
|
|
11798
11798
|
: {};
|
|
11799
|
-
return (jsxRuntime.jsxs(Container$
|
|
11799
|
+
return (jsxRuntime.jsxs(Container$T, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
11800
11800
|
};
|
|
11801
11801
|
|
|
11802
|
-
var Container$
|
|
11802
|
+
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"])));
|
|
11803
11803
|
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; });
|
|
11804
11804
|
var textButtonStyles = function (theme) { return ({
|
|
11805
11805
|
border: 'none',
|
|
@@ -11813,9 +11813,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11813
11813
|
var FitPredictor = function (_a) {
|
|
11814
11814
|
var onClick = _a.onClick;
|
|
11815
11815
|
var theme = useTheme();
|
|
11816
|
-
return (jsxs(Container$
|
|
11816
|
+
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));
|
|
11817
11817
|
};
|
|
11818
|
-
var templateObject_1$
|
|
11818
|
+
var templateObject_1$1d, templateObject_2$Q;
|
|
11819
11819
|
|
|
11820
11820
|
var P$1 = newStyled.p(function (_a) {
|
|
11821
11821
|
var color = _a.color;
|
|
@@ -11829,7 +11829,7 @@ var P$1 = newStyled.p(function (_a) {
|
|
|
11829
11829
|
margin: '0.938rem 4.188rem',
|
|
11830
11830
|
});
|
|
11831
11831
|
});
|
|
11832
|
-
var Bar$
|
|
11832
|
+
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) {
|
|
11833
11833
|
var height = _a.height;
|
|
11834
11834
|
return height || '0.5rem';
|
|
11835
11835
|
}, function (_a) {
|
|
@@ -11837,7 +11837,7 @@ var Bar$1 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTe
|
|
|
11837
11837
|
return backgroundColor;
|
|
11838
11838
|
}, function (_a) {
|
|
11839
11839
|
var percent = _a.percent;
|
|
11840
|
-
return (percent ? getBarWithBasedOnPercent(percent) : '50%');
|
|
11840
|
+
return (percent ? getBarWithBasedOnPercent$1(percent) : '50%');
|
|
11841
11841
|
}, function (_a) {
|
|
11842
11842
|
var borderRadius = _a.borderRadius;
|
|
11843
11843
|
return borderRadius || '0.25rem';
|
|
@@ -11848,7 +11848,7 @@ var Bar$1 = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTe
|
|
|
11848
11848
|
var percent = _a.percent;
|
|
11849
11849
|
return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
|
|
11850
11850
|
});
|
|
11851
|
-
var Background = newStyled.div(function (_a) {
|
|
11851
|
+
var Background$1 = newStyled.div(function (_a) {
|
|
11852
11852
|
var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
|
|
11853
11853
|
return ({
|
|
11854
11854
|
height: height || '0.5rem',
|
|
@@ -11858,7 +11858,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11858
11858
|
position: 'absolute',
|
|
11859
11859
|
});
|
|
11860
11860
|
});
|
|
11861
|
-
var Container$
|
|
11861
|
+
var Container$R = newStyled.div(function (_a) {
|
|
11862
11862
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
11863
11863
|
return ({
|
|
11864
11864
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11866,13 +11866,87 @@ var Container$Q = newStyled.div(function (_a) {
|
|
|
11866
11866
|
overflow: description ? 'hidden' : '',
|
|
11867
11867
|
});
|
|
11868
11868
|
});
|
|
11869
|
-
var getBarWithBasedOnPercent = function (percent) {
|
|
11869
|
+
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
11870
11870
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
11871
11871
|
};
|
|
11872
11872
|
var ProgressBar = function (_a) {
|
|
11873
11873
|
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;
|
|
11874
11874
|
var theme = useTheme();
|
|
11875
|
-
return (jsxRuntime.jsxs(Container$
|
|
11875
|
+
return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar$2, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && (jsxRuntime.jsx(P$1, __assign$1({ "data-testid": "paragraph", color: theme.colors.pallete.secondary.color }, { children: description }), void 0))] }), void 0));
|
|
11876
|
+
};
|
|
11877
|
+
var templateObject_1$1c;
|
|
11878
|
+
|
|
11879
|
+
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) {
|
|
11880
|
+
var height = _a.height;
|
|
11881
|
+
return height || '0.5rem';
|
|
11882
|
+
}, function (_a) {
|
|
11883
|
+
var backgroundColor = _a.backgroundColor;
|
|
11884
|
+
return backgroundColor;
|
|
11885
|
+
}, function (_a) {
|
|
11886
|
+
var percent = _a.percent;
|
|
11887
|
+
return (percent ? getBarWithBasedOnPercent(percent) : '50%');
|
|
11888
|
+
}, function (_a) {
|
|
11889
|
+
var borderRadius = _a.borderRadius;
|
|
11890
|
+
return borderRadius || '0.25rem';
|
|
11891
|
+
}, function (_a) {
|
|
11892
|
+
var percent = _a.percent;
|
|
11893
|
+
return (percent ? '0' : '-50%');
|
|
11894
|
+
}, function (_a) {
|
|
11895
|
+
var percent = _a.percent;
|
|
11896
|
+
return (percent ? 'none' : 'loading 1s ease-in 0.5s infinite');
|
|
11897
|
+
});
|
|
11898
|
+
var Background = newStyled.div(function (_a) {
|
|
11899
|
+
var backgroundColor = _a.backgroundColor, height = _a.height, borderRadius = _a.borderRadius;
|
|
11900
|
+
return ({
|
|
11901
|
+
height: height || '0.5rem',
|
|
11902
|
+
width: '100%',
|
|
11903
|
+
backgroundColor: backgroundColor,
|
|
11904
|
+
borderRadius: borderRadius || '0.25rem',
|
|
11905
|
+
});
|
|
11906
|
+
});
|
|
11907
|
+
var BarContainer$1 = newStyled.div({
|
|
11908
|
+
display: 'grid',
|
|
11909
|
+
gridTemplateColumns: '1fr 10fr 1fr',
|
|
11910
|
+
justifyContent: 'center',
|
|
11911
|
+
alignItems: 'center',
|
|
11912
|
+
width: '416px',
|
|
11913
|
+
gap: '8px',
|
|
11914
|
+
maxWidth: '100%',
|
|
11915
|
+
padding: '0 16px',
|
|
11916
|
+
position: 'relative',
|
|
11917
|
+
});
|
|
11918
|
+
var Container$Q = newStyled.div(function (_a) {
|
|
11919
|
+
var backgroundColor = _a.backgroundColor;
|
|
11920
|
+
return ({
|
|
11921
|
+
width: '475px',
|
|
11922
|
+
maxWidth: '100%',
|
|
11923
|
+
display: 'flex',
|
|
11924
|
+
gap: '13px',
|
|
11925
|
+
padding: '16px 0',
|
|
11926
|
+
flexDirection: 'column',
|
|
11927
|
+
alignItems: 'center',
|
|
11928
|
+
background: backgroundColor,
|
|
11929
|
+
});
|
|
11930
|
+
});
|
|
11931
|
+
var getBarWithBasedOnPercent = function (percent) {
|
|
11932
|
+
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
11933
|
+
};
|
|
11934
|
+
var Value = newStyled.div(function (_a) {
|
|
11935
|
+
var isBold = _a.isBold;
|
|
11936
|
+
return ({
|
|
11937
|
+
fontWeight: isBold ? 600 : 400,
|
|
11938
|
+
});
|
|
11939
|
+
});
|
|
11940
|
+
var _calculatePercentage = function (currentAmount, startingValue, endingValue) {
|
|
11941
|
+
var percentage = (currentAmount - startingValue) / (endingValue - startingValue);
|
|
11942
|
+
return percentage > 1 ? 100 : percentage * 100;
|
|
11943
|
+
};
|
|
11944
|
+
var MotivatorProgressBar = function (_a) {
|
|
11945
|
+
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;
|
|
11946
|
+
var theme = useTheme();
|
|
11947
|
+
var isRewardUnlocked = currentAmount >= endingValue;
|
|
11948
|
+
var progress = _calculatePercentage(currentAmount, startingValue, endingValue);
|
|
11949
|
+
return (jsxRuntime.jsxs(Container$Q, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer$1, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, startingValue] }, void 0), jsxRuntime.jsx(Background, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (jsxRuntime.jsxs("div", { children: ["Spend ", currencyCode, Math.round((endingValue - currentAmount) * 100) / 100, " more to get", ' ', jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0))] }), void 0));
|
|
11876
11950
|
};
|
|
11877
11951
|
var templateObject_1$1b;
|
|
11878
11952
|
|
|
@@ -18844,6 +18918,7 @@ exports.Image = Image;
|
|
|
18844
18918
|
exports.ImageCardWithDescription = ImageCardWithDescription;
|
|
18845
18919
|
exports.Input = Input$1;
|
|
18846
18920
|
exports.Modal = Modal;
|
|
18921
|
+
exports.MotivatorProgressBar = MotivatorProgressBar;
|
|
18847
18922
|
exports.MultiColorPicker = MultiColorPicker;
|
|
18848
18923
|
exports.Note = Note;
|
|
18849
18924
|
exports.OfferBanner = OfferBanner;
|