@trafilea/afrodita-components 5.0.0-beta.192 → 5.0.0-beta.193
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +5 -2
- package/build/index.esm.js +110 -106
- package/build/index.esm.js.map +1 -1
- package/build/index.js +110 -106
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4040,7 +4040,7 @@ var InputValidationType;
|
|
|
4040
4040
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4041
4041
|
})(InputValidationType || (InputValidationType = {}));
|
|
4042
4042
|
|
|
4043
|
-
var Section = newStyled.div(templateObject_1$
|
|
4043
|
+
var Section = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __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) {
|
|
4044
4044
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4045
4045
|
});
|
|
4046
4046
|
var CardHeader = function (_a) {
|
|
@@ -4051,14 +4051,14 @@ var CardFooter = function (_a) {
|
|
|
4051
4051
|
var children = _a.children;
|
|
4052
4052
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
4053
4053
|
};
|
|
4054
|
-
var templateObject_1$
|
|
4054
|
+
var templateObject_1$1s;
|
|
4055
4055
|
|
|
4056
|
-
var Body = newStyled.div(templateObject_1$
|
|
4056
|
+
var Body = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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"])));
|
|
4057
4057
|
var CardBody = function (_a) {
|
|
4058
4058
|
var children = _a.children;
|
|
4059
4059
|
return jsx$1(Body, { children: children }, void 0);
|
|
4060
4060
|
};
|
|
4061
|
-
var templateObject_1$
|
|
4061
|
+
var templateObject_1$1r;
|
|
4062
4062
|
|
|
4063
4063
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4064
4064
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4203,7 +4203,7 @@ var AssetsProvider = function (_a) {
|
|
|
4203
4203
|
};
|
|
4204
4204
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
4205
4205
|
|
|
4206
|
-
var Container$
|
|
4206
|
+
var Container$X = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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) {
|
|
4207
4207
|
var flex = _a.flex;
|
|
4208
4208
|
return flex &&
|
|
4209
4209
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4218,14 +4218,14 @@ var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __
|
|
|
4218
4218
|
var Card$2 = function (_a) {
|
|
4219
4219
|
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;
|
|
4220
4220
|
var theme = useTheme();
|
|
4221
|
-
return (jsx$1(Container$
|
|
4221
|
+
return (jsx$1(Container$X, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4222
4222
|
};
|
|
4223
4223
|
var Card$3 = Object.assign(Card$2, {
|
|
4224
4224
|
Header: CardHeader,
|
|
4225
4225
|
Footer: CardFooter,
|
|
4226
4226
|
Body: CardBody,
|
|
4227
4227
|
});
|
|
4228
|
-
var templateObject_1$
|
|
4228
|
+
var templateObject_1$1q;
|
|
4229
4229
|
|
|
4230
4230
|
var Fragment = Fragment$1;
|
|
4231
4231
|
function jsx(type, props, key) {
|
|
@@ -4371,7 +4371,7 @@ function BaseSelectOption(_a) {
|
|
|
4371
4371
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4372
4372
|
}
|
|
4373
4373
|
|
|
4374
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4374
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4375
4375
|
function BaseSelect(_a) {
|
|
4376
4376
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4377
4377
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4381,7 +4381,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4381
4381
|
Options: BaseSelectOptions,
|
|
4382
4382
|
Option: BaseSelectOption,
|
|
4383
4383
|
});
|
|
4384
|
-
var templateObject_1$
|
|
4384
|
+
var templateObject_1$1p;
|
|
4385
4385
|
|
|
4386
4386
|
var CustomButton = newStyled.button(function (_a) {
|
|
4387
4387
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4438,6 +4438,15 @@ var withLabel = function (Button, label) {
|
|
|
4438
4438
|
};
|
|
4439
4439
|
};
|
|
4440
4440
|
|
|
4441
|
+
var ErrorText = newStyled.h3(templateObject_1$1o || (templateObject_1$1o = __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; });
|
|
4442
|
+
var ErrorContainer = newStyled.div(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
4443
|
+
var Error$1 = function (_a) {
|
|
4444
|
+
var error = _a.error;
|
|
4445
|
+
var theme = useTheme();
|
|
4446
|
+
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));
|
|
4447
|
+
};
|
|
4448
|
+
var templateObject_1$1o, templateObject_2$W;
|
|
4449
|
+
|
|
4441
4450
|
var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4442
4451
|
var theme = _a.theme;
|
|
4443
4452
|
return ({
|
|
@@ -4508,7 +4517,7 @@ var Styles = /*#__PURE__*/Object.freeze({
|
|
|
4508
4517
|
large: large
|
|
4509
4518
|
});
|
|
4510
4519
|
|
|
4511
|
-
var StyledLabel$
|
|
4520
|
+
var StyledLabel$2 = newStyled.label(baseStyles, function (props) { return [
|
|
4512
4521
|
{ color: props.disabled ? props.theme.colors.text.disabled : props.theme.colors.text.color },
|
|
4513
4522
|
Styles[props.variant](props.theme),
|
|
4514
4523
|
Styles[props.size](props.theme),
|
|
@@ -4516,7 +4525,7 @@ var StyledLabel$1 = newStyled.label(baseStyles, function (props) { return [
|
|
|
4516
4525
|
var Label$4 = function (_a) {
|
|
4517
4526
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
4518
4527
|
var theme = useTheme();
|
|
4519
|
-
return (jsx$1(StyledLabel$
|
|
4528
|
+
return (jsx$1(StyledLabel$2, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
4520
4529
|
};
|
|
4521
4530
|
|
|
4522
4531
|
/* base styles & size variants */
|
|
@@ -4602,7 +4611,7 @@ var CustomCheckboxStyles = {
|
|
|
4602
4611
|
},
|
|
4603
4612
|
};
|
|
4604
4613
|
|
|
4605
|
-
var Container$
|
|
4614
|
+
var Container$W = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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"])));
|
|
4606
4615
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4607
4616
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4608
4617
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4642,7 +4651,7 @@ var Checkbox = function (_a) {
|
|
|
4642
4651
|
useEffect(function () {
|
|
4643
4652
|
mounted.current = true;
|
|
4644
4653
|
}, []);
|
|
4645
|
-
return (jsxs$1(Container$
|
|
4654
|
+
return (jsxs$1(Container$W, { children: [jsx$1(Input$3, { 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));
|
|
4646
4655
|
};
|
|
4647
4656
|
var templateObject_1$1n, templateObject_2$V;
|
|
4648
4657
|
|
|
@@ -4691,15 +4700,17 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4691
4700
|
Option: BaseDropdownOption,
|
|
4692
4701
|
});
|
|
4693
4702
|
|
|
4703
|
+
var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject([""], [""])));
|
|
4704
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$U || (templateObject_2$U = __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"])));
|
|
4694
4705
|
function SimpleDropdown(_a) {
|
|
4695
|
-
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;
|
|
4706
|
+
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;
|
|
4696
4707
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
4697
4708
|
var selectedOptionLabel = useMemo(function () {
|
|
4698
4709
|
if (selectedValue) {
|
|
4699
4710
|
return selectedValue.label;
|
|
4700
4711
|
}
|
|
4701
|
-
return placeHolder;
|
|
4702
|
-
}, [selectedValue, placeHolder]);
|
|
4712
|
+
return showRequiredPlaceholder ? (jsx$1(RequiredPlaceholder, { children: placeHolder }, void 0)) : (placeHolder);
|
|
4713
|
+
}, [selectedValue, showRequiredPlaceholder, placeHolder]);
|
|
4703
4714
|
var onChangeHandler = function (value) {
|
|
4704
4715
|
if (onChange) {
|
|
4705
4716
|
onChange(value);
|
|
@@ -4720,11 +4731,12 @@ function SimpleDropdown(_a) {
|
|
|
4720
4731
|
setSelectedValue(value);
|
|
4721
4732
|
}, [value, options, initialValue]);
|
|
4722
4733
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4723
|
-
return (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:
|
|
4724
|
-
}
|
|
4734
|
+
return (jsxs$1(Container$V, __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));
|
|
4735
|
+
}
|
|
4736
|
+
var templateObject_1$1m, templateObject_2$U;
|
|
4725
4737
|
|
|
4726
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4727
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4738
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __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; });
|
|
4739
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$T || (templateObject_2$T = __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; });
|
|
4728
4740
|
var DialogDropdownListItem = newStyled.li(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
4729
4741
|
var DialogDropdownLink = newStyled.a(templateObject_4$v || (templateObject_4$v = __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"])));
|
|
4730
4742
|
var DropdownDialog = function (_a) {
|
|
@@ -4734,7 +4746,7 @@ var DropdownDialog = function (_a) {
|
|
|
4734
4746
|
return (jsx$1(DialogDropdownListItem, { children: jsx$1(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4735
4747
|
}) }), void 0) }), void 0));
|
|
4736
4748
|
};
|
|
4737
|
-
var templateObject_1$
|
|
4749
|
+
var templateObject_1$1l, templateObject_2$T, templateObject_3$I, templateObject_4$v;
|
|
4738
4750
|
|
|
4739
4751
|
var getStylesBySize$9 = function (size, theme) {
|
|
4740
4752
|
switch (size) {
|
|
@@ -4802,12 +4814,12 @@ var SelectorSecondary = function (_a) {
|
|
|
4802
4814
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4803
4815
|
// `variants` styles that are consistent through all themes.
|
|
4804
4816
|
var TAGS = {
|
|
4805
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4806
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4817
|
+
hero1: newStyled.h1(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject([""], [""]))),
|
|
4818
|
+
hero2: newStyled.h2(templateObject_2$S || (templateObject_2$S = __makeTemplateObject([""], [""]))),
|
|
4807
4819
|
hero3: newStyled.h3(templateObject_3$H || (templateObject_3$H = __makeTemplateObject([""], [""]))),
|
|
4808
4820
|
display1: newStyled.h1(templateObject_4$u || (templateObject_4$u = __makeTemplateObject([""], [""]))),
|
|
4809
4821
|
display2: newStyled.h2(templateObject_5$i || (templateObject_5$i = __makeTemplateObject([""], [""]))),
|
|
4810
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4822
|
+
heading1: newStyled.h1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject([""], [""]))),
|
|
4811
4823
|
heading2: newStyled.h2(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject([""], [""]))),
|
|
4812
4824
|
heading3: newStyled.h3(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject([""], [""]))),
|
|
4813
4825
|
heading4: newStyled.h4(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4926,9 +4938,9 @@ var DEFAULTS = {
|
|
|
4926
4938
|
size: 'regular',
|
|
4927
4939
|
},
|
|
4928
4940
|
};
|
|
4929
|
-
var templateObject_1$
|
|
4941
|
+
var templateObject_1$1k, templateObject_2$S, templateObject_3$H, templateObject_4$u, templateObject_5$i, templateObject_6$f, templateObject_7$9, templateObject_8$6, templateObject_9$3, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2;
|
|
4930
4942
|
|
|
4931
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4943
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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) {
|
|
4932
4944
|
var inline = _a.inline;
|
|
4933
4945
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4934
4946
|
});
|
|
@@ -4947,7 +4959,7 @@ var SizeSelector = function (_a) {
|
|
|
4947
4959
|
}, 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));
|
|
4948
4960
|
}) }), void 0)] }), void 0));
|
|
4949
4961
|
};
|
|
4950
|
-
var templateObject_1$
|
|
4962
|
+
var templateObject_1$1j;
|
|
4951
4963
|
|
|
4952
4964
|
var getStylesBySize$8 = function (size) {
|
|
4953
4965
|
switch (size) {
|
|
@@ -4974,7 +4986,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4974
4986
|
} });
|
|
4975
4987
|
};
|
|
4976
4988
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4977
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4989
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1i || (templateObject_1$1i = __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));
|
|
4978
4990
|
};
|
|
4979
4991
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4980
4992
|
if (disabled)
|
|
@@ -4990,16 +5002,16 @@ var TextButton = function (_a) {
|
|
|
4990
5002
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4991
5003
|
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));
|
|
4992
5004
|
};
|
|
4993
|
-
var templateObject_1$
|
|
5005
|
+
var templateObject_1$1i;
|
|
4994
5006
|
|
|
4995
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
4996
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
5007
|
+
var Container$U = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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"])));
|
|
5008
|
+
var P$2 = newStyled.p(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4997
5009
|
var PercentageSpan = newStyled.span(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
4998
5010
|
var SizeFitGuide = function (_a) {
|
|
4999
5011
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5000
5012
|
return (jsxs$1(Container$U, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$2, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5001
5013
|
};
|
|
5002
|
-
var templateObject_1$
|
|
5014
|
+
var templateObject_1$1h, templateObject_2$R, templateObject_3$G;
|
|
5003
5015
|
|
|
5004
5016
|
var getStylesBySize$7 = function (size) {
|
|
5005
5017
|
switch (size) {
|
|
@@ -5029,7 +5041,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5029
5041
|
};
|
|
5030
5042
|
}
|
|
5031
5043
|
};
|
|
5032
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
5044
|
+
var Container$T = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __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) {
|
|
5033
5045
|
var backgroundColor = _a.backgroundColor;
|
|
5034
5046
|
return backgroundColor;
|
|
5035
5047
|
}, function (_a) {
|
|
@@ -5051,7 +5063,7 @@ var Container$T = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __
|
|
|
5051
5063
|
var size = _a.size;
|
|
5052
5064
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5053
5065
|
});
|
|
5054
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
5066
|
+
var H3$1 = newStyled.h3(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5055
5067
|
var textColor = _a.textColor;
|
|
5056
5068
|
return textColor;
|
|
5057
5069
|
}, function (_a) {
|
|
@@ -5068,7 +5080,7 @@ var DiscountTag = function (_a) {
|
|
|
5068
5080
|
var theme = useTheme();
|
|
5069
5081
|
return (jsx$1(Container$T, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5070
5082
|
};
|
|
5071
|
-
var templateObject_1$
|
|
5083
|
+
var templateObject_1$1g, templateObject_2$Q;
|
|
5072
5084
|
|
|
5073
5085
|
var getStylesBySize$6 = function (size) {
|
|
5074
5086
|
switch (size) {
|
|
@@ -5098,8 +5110,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5098
5110
|
};
|
|
5099
5111
|
}
|
|
5100
5112
|
};
|
|
5101
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
5102
|
-
var Price = newStyled.p(templateObject_2$
|
|
5113
|
+
var Container$S = 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"])));
|
|
5114
|
+
var Price = newStyled.p(templateObject_2$P || (templateObject_2$P = __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) {
|
|
5103
5115
|
var weight = _a.weight;
|
|
5104
5116
|
return (weight ? weight : '400');
|
|
5105
5117
|
}, function (_a) {
|
|
@@ -5151,9 +5163,9 @@ var PriceLabel = function (_a) {
|
|
|
5151
5163
|
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)); };
|
|
5152
5164
|
return (jsxs$1(Container$S, { 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));
|
|
5153
5165
|
};
|
|
5154
|
-
var templateObject_1$
|
|
5166
|
+
var templateObject_1$1f, templateObject_2$P, templateObject_3$F;
|
|
5155
5167
|
|
|
5156
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5168
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5157
5169
|
var PriceLabelV2 = function (_a) {
|
|
5158
5170
|
var _b;
|
|
5159
5171
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
@@ -5183,7 +5195,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5183
5195
|
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)); };
|
|
5184
5196
|
return (jsxs$1(Container$S, { 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))] }, void 0));
|
|
5185
5197
|
};
|
|
5186
|
-
var templateObject_1$
|
|
5198
|
+
var templateObject_1$1e;
|
|
5187
5199
|
|
|
5188
5200
|
var OneColorSelector = function (_a) {
|
|
5189
5201
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5224,8 +5236,8 @@ var OutOfStock = function (_a) {
|
|
|
5224
5236
|
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));
|
|
5225
5237
|
};
|
|
5226
5238
|
|
|
5227
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5228
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5239
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5240
|
+
newStyled(lt.Label)(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5229
5241
|
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$E || (templateObject_3$E = __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"])));
|
|
5230
5242
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5231
5243
|
var OptionsContainer = newStyled.div(templateObject_5$h || (templateObject_5$h = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
@@ -5246,23 +5258,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5246
5258
|
Option: Option,
|
|
5247
5259
|
OptionsContainer: OptionsContainer,
|
|
5248
5260
|
});
|
|
5249
|
-
var templateObject_1$
|
|
5261
|
+
var templateObject_1$1d, templateObject_2$O, templateObject_3$E, templateObject_4$t, templateObject_5$h;
|
|
5250
5262
|
|
|
5251
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
5263
|
+
var Container$R = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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) {
|
|
5252
5264
|
var borderColor = _a.borderColor;
|
|
5253
5265
|
return borderColor;
|
|
5254
5266
|
}, function (_a) {
|
|
5255
5267
|
var noStock = _a.noStock;
|
|
5256
5268
|
return (noStock ? '0.4' : '1');
|
|
5257
5269
|
});
|
|
5258
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5270
|
+
var Image$3 = newStyled.img(templateObject_2$N || (templateObject_2$N = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5259
5271
|
var PatternSelector = function (_a) {
|
|
5260
5272
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5261
5273
|
var theme = useTheme();
|
|
5262
5274
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5263
5275
|
return (jsx$1(Container$R, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5264
5276
|
};
|
|
5265
|
-
var templateObject_1$
|
|
5277
|
+
var templateObject_1$1c, templateObject_2$N;
|
|
5266
5278
|
|
|
5267
5279
|
var renderOptions$1 = function (options) {
|
|
5268
5280
|
if (options.length === 0) {
|
|
@@ -5320,7 +5332,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5320
5332
|
return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
5321
5333
|
};
|
|
5322
5334
|
|
|
5323
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5335
|
+
var Image$2 = newStyled.img(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
5324
5336
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5325
5337
|
return borderRadiusVariant &&
|
|
5326
5338
|
"\nborder-radius: 20px;\n";
|
|
@@ -5335,7 +5347,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5335
5347
|
var theme = useTheme();
|
|
5336
5348
|
return (jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5337
5349
|
};
|
|
5338
|
-
var templateObject_1$
|
|
5350
|
+
var templateObject_1$1b;
|
|
5339
5351
|
|
|
5340
5352
|
var Button$4 = newStyled.button(function () { return ({
|
|
5341
5353
|
background: 'transparent',
|
|
@@ -9579,14 +9591,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9579
9591
|
return Slider;
|
|
9580
9592
|
}(React__default.Component);
|
|
9581
9593
|
|
|
9582
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9594
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1a || (templateObject_1$1a = __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) {
|
|
9583
9595
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9584
9596
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9585
9597
|
}, function (_a) {
|
|
9586
9598
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9587
9599
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9588
9600
|
});
|
|
9589
|
-
var templateObject_1$
|
|
9601
|
+
var templateObject_1$1a;
|
|
9590
9602
|
|
|
9591
9603
|
var getStylesBySize$5 = function (size) {
|
|
9592
9604
|
// rem units
|
|
@@ -9645,8 +9657,8 @@ var SliderNavigation = function (_a) {
|
|
|
9645
9657
|
} }, { 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));
|
|
9646
9658
|
};
|
|
9647
9659
|
|
|
9648
|
-
var horizontalStyles = css(templateObject_1$
|
|
9649
|
-
var verticalStyles = css(templateObject_2$
|
|
9660
|
+
var horizontalStyles = css(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
9661
|
+
var verticalStyles = css(templateObject_2$M || (templateObject_2$M = __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"])));
|
|
9650
9662
|
var Container$Q = newStyled.div(templateObject_3$D || (templateObject_3$D = __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) {
|
|
9651
9663
|
var position = _a.position;
|
|
9652
9664
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
@@ -9660,7 +9672,7 @@ var ImagePreviewList = function (_a) {
|
|
|
9660
9672
|
arrowPadding: 1.625,
|
|
9661
9673
|
}, 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));
|
|
9662
9674
|
};
|
|
9663
|
-
var templateObject_1$
|
|
9675
|
+
var templateObject_1$19, templateObject_2$M, templateObject_3$D, templateObject_4$s;
|
|
9664
9676
|
|
|
9665
9677
|
var propTypes = {exports: {}};
|
|
9666
9678
|
|
|
@@ -11253,12 +11265,12 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11253
11265
|
afterZoomOut: PropTypes.func
|
|
11254
11266
|
} : {};
|
|
11255
11267
|
|
|
11256
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
11268
|
+
var Container$P = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __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) {
|
|
11257
11269
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11258
11270
|
return borderRadiusVariant &&
|
|
11259
11271
|
"\n border-radius: 40px;\n ";
|
|
11260
11272
|
});
|
|
11261
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11273
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$L || (templateObject_2$L = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
|
|
11262
11274
|
var BottomTagContainer$3 = newStyled.div(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11263
11275
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$r || (templateObject_4$r = __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"])));
|
|
11264
11276
|
var ImageProductWithTags$1 = function (_a) {
|
|
@@ -11268,9 +11280,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11268
11280
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11269
11281
|
}, 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(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0))] }), void 0));
|
|
11270
11282
|
};
|
|
11271
|
-
var templateObject_1$
|
|
11283
|
+
var templateObject_1$18, templateObject_2$L, templateObject_3$C, templateObject_4$r;
|
|
11272
11284
|
|
|
11273
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
11285
|
+
var Container$O = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
11274
11286
|
var ProductGallery = function (_a) {
|
|
11275
11287
|
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;
|
|
11276
11288
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11282,7 +11294,7 @@ var ProductGallery = function (_a) {
|
|
|
11282
11294
|
setSelectedImage(value);
|
|
11283
11295
|
}, 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 }, void 0)] }, void 0));
|
|
11284
11296
|
};
|
|
11285
|
-
var templateObject_1$
|
|
11297
|
+
var templateObject_1$17;
|
|
11286
11298
|
|
|
11287
11299
|
/* base styles & size variants */
|
|
11288
11300
|
var StarStyles = {
|
|
@@ -11328,8 +11340,8 @@ var StarStyles = {
|
|
|
11328
11340
|
});
|
|
11329
11341
|
},
|
|
11330
11342
|
};
|
|
11331
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
11332
|
-
var templateObject_1$
|
|
11343
|
+
var Container$N = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11344
|
+
var templateObject_1$16;
|
|
11333
11345
|
|
|
11334
11346
|
var StarContainer = newStyled.div(function (_a) {
|
|
11335
11347
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11391,8 +11403,8 @@ var LabelStyles = {
|
|
|
11391
11403
|
});
|
|
11392
11404
|
},
|
|
11393
11405
|
};
|
|
11394
|
-
var Container$M = newStyled.a(templateObject_1$
|
|
11395
|
-
var templateObject_1$
|
|
11406
|
+
var Container$M = newStyled.a(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11407
|
+
var templateObject_1$15;
|
|
11396
11408
|
|
|
11397
11409
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11398
11410
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11433,8 +11445,8 @@ var Rating = function (_a) {
|
|
|
11433
11445
|
return (jsxs$1(Container$M, __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, " ", reviewsText] }), void 0)] }), void 0));
|
|
11434
11446
|
};
|
|
11435
11447
|
|
|
11436
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
11437
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
11448
|
+
var Container$L = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
11449
|
+
var P$1 = newStyled.p(templateObject_2$K || (templateObject_2$K = __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; });
|
|
11438
11450
|
var textButtonStyles = function (theme) { return ({
|
|
11439
11451
|
border: 'none',
|
|
11440
11452
|
background: 'transparent',
|
|
@@ -11449,7 +11461,7 @@ var FitPredictor = function (_a) {
|
|
|
11449
11461
|
var theme = useTheme();
|
|
11450
11462
|
return (jsxs(Container$L, __assign$1({ theme: theme }, { children: [jsx(Container$L, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$1, __assign$1({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign$1({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
11451
11463
|
};
|
|
11452
|
-
var templateObject_1$
|
|
11464
|
+
var templateObject_1$14, templateObject_2$K;
|
|
11453
11465
|
|
|
11454
11466
|
var H2$1 = newStyled.h2(function (_a) {
|
|
11455
11467
|
var color = _a.color;
|
|
@@ -11463,7 +11475,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
11463
11475
|
margin: '0.938rem 4.188rem',
|
|
11464
11476
|
});
|
|
11465
11477
|
});
|
|
11466
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11478
|
+
var Bar = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11467
11479
|
var backgroundColor = _a.backgroundColor;
|
|
11468
11480
|
return backgroundColor;
|
|
11469
11481
|
}, function (_a) {
|
|
@@ -11502,7 +11514,7 @@ var ProgressBar = function (_a) {
|
|
|
11502
11514
|
var theme = useTheme();
|
|
11503
11515
|
return (jsxs$1(Container$K, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11504
11516
|
};
|
|
11505
|
-
var templateObject_1$
|
|
11517
|
+
var templateObject_1$13;
|
|
11506
11518
|
|
|
11507
11519
|
var getStylesBySize$4 = function (size) {
|
|
11508
11520
|
switch (size) {
|
|
@@ -11523,7 +11535,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11523
11535
|
};
|
|
11524
11536
|
}
|
|
11525
11537
|
};
|
|
11526
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
11538
|
+
var Container$J = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"], ["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: background-color 0.1s ease;\n\n svg {\n margin: ", ";\n }\n\n &:hover {\n background-color: ", ";\n cursor: pointer;\n }\n\n &.disabled {\n background-color: ", ";\n cursor: not-allowed;\n\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
|
|
11527
11539
|
var backgroundColor = _a.backgroundColor;
|
|
11528
11540
|
return backgroundColor;
|
|
11529
11541
|
}, function (_a) {
|
|
@@ -11553,7 +11565,7 @@ var IconButton = function (_a) {
|
|
|
11553
11565
|
var theme = useTheme();
|
|
11554
11566
|
return (jsx$1(Container$J, __assign$1({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
11555
11567
|
};
|
|
11556
|
-
var templateObject_1$
|
|
11568
|
+
var templateObject_1$12;
|
|
11557
11569
|
|
|
11558
11570
|
var TooltipArrow = function (_a) {
|
|
11559
11571
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11633,7 +11645,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11633
11645
|
}
|
|
11634
11646
|
};
|
|
11635
11647
|
|
|
11636
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11648
|
+
var Wrapper$5 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: visible;\n opacity: 1;\n }\n }\n"])), function (_a) {
|
|
11637
11649
|
var position = _a.position;
|
|
11638
11650
|
return getWrapperFlexDirection(position);
|
|
11639
11651
|
});
|
|
@@ -11658,7 +11670,7 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11658
11670
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11659
11671
|
return actual === expected ? margin : '0';
|
|
11660
11672
|
};
|
|
11661
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11673
|
+
var ContentWrapper = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n"])), function (_a) {
|
|
11662
11674
|
var borderColor = _a.borderColor;
|
|
11663
11675
|
return borderColor;
|
|
11664
11676
|
}, function (_a) {
|
|
@@ -11680,12 +11692,12 @@ var TooltipText = newStyled.div(templateObject_4$q || (templateObject_4$q = __ma
|
|
|
11680
11692
|
return color;
|
|
11681
11693
|
});
|
|
11682
11694
|
var TopSection = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
11683
|
-
var Title$6 = newStyled.h1(templateObject_6$
|
|
11695
|
+
var Title$6 = newStyled.h1(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
11684
11696
|
var color = _a.color;
|
|
11685
11697
|
return color;
|
|
11686
11698
|
});
|
|
11687
11699
|
var IconContainer$5 = newStyled.div(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
11688
|
-
var templateObject_1$
|
|
11700
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$B, templateObject_4$q, templateObject_5$g, templateObject_6$e, templateObject_7$8;
|
|
11689
11701
|
|
|
11690
11702
|
var Tooltip = function (_a) {
|
|
11691
11703
|
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, _b = _a.align, align = _b === void 0 ? 'center' : _b, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header;
|
|
@@ -11847,9 +11859,9 @@ var ContainerStyles = {
|
|
|
11847
11859
|
},
|
|
11848
11860
|
};
|
|
11849
11861
|
|
|
11850
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11862
|
+
var Wrapper$4 = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11851
11863
|
var Container$I = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11852
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11864
|
+
var Input$2 = newStyled.input(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
11853
11865
|
var disabled = _a.disabled;
|
|
11854
11866
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11855
11867
|
});
|
|
@@ -11857,7 +11869,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
11857
11869
|
CustomRadioStyles.baseStyles(props.theme, props.disabled),
|
|
11858
11870
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
11859
11871
|
]; });
|
|
11860
|
-
var StyledLabel = newStyled(Label$4)(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
11872
|
+
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
11861
11873
|
var theme = _a.theme;
|
|
11862
11874
|
return theme.component.radio.textSize;
|
|
11863
11875
|
}, function (_a) {
|
|
@@ -11871,9 +11883,9 @@ var RadioInput = function (_a) {
|
|
|
11871
11883
|
var value = event.currentTarget.value;
|
|
11872
11884
|
onChange({ value: value, label: label });
|
|
11873
11885
|
};
|
|
11874
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$I, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11886
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$I, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11875
11887
|
};
|
|
11876
|
-
var templateObject_1$
|
|
11888
|
+
var templateObject_1$10, templateObject_2$I, templateObject_3$A;
|
|
11877
11889
|
|
|
11878
11890
|
var RadioGroupInput = function (_a) {
|
|
11879
11891
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11887,17 +11899,17 @@ var RadioGroupInput = function (_a) {
|
|
|
11887
11899
|
}) }), void 0));
|
|
11888
11900
|
};
|
|
11889
11901
|
|
|
11890
|
-
var Wrapper$3 = newStyled.div(templateObject_1
|
|
11891
|
-
var Container$H = newStyled.div(templateObject_2$
|
|
11902
|
+
var Wrapper$3 = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
11903
|
+
var Container$H = newStyled.div(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
11892
11904
|
var Minimalistic = function (_a) {
|
|
11893
11905
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
11894
11906
|
var theme = useTheme();
|
|
11895
11907
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$H, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxs$1(Container$H, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11896
11908
|
};
|
|
11897
|
-
var templateObject_1
|
|
11909
|
+
var templateObject_1$$, templateObject_2$H;
|
|
11898
11910
|
|
|
11899
|
-
var Container$G = newStyled.div(templateObject_1
|
|
11900
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11911
|
+
var Container$G = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11912
|
+
var Title$5 = newStyled.h1(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
11901
11913
|
var Details$1 = newStyled.span(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
11902
11914
|
var PriceContainer$1 = newStyled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
11903
11915
|
var Simple = function (_a) {
|
|
@@ -11905,19 +11917,19 @@ var Simple = function (_a) {
|
|
|
11905
11917
|
var theme = useTheme();
|
|
11906
11918
|
return (jsx$1(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$G, { children: [jsx$1(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11907
11919
|
};
|
|
11908
|
-
var templateObject_1
|
|
11920
|
+
var templateObject_1$_, templateObject_2$G, templateObject_3$z, templateObject_4$p;
|
|
11909
11921
|
|
|
11910
11922
|
var Bundle = {
|
|
11911
11923
|
Minimalistic: Minimalistic,
|
|
11912
11924
|
Simple: Simple,
|
|
11913
11925
|
};
|
|
11914
11926
|
|
|
11915
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
11927
|
+
var Container$F = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
11916
11928
|
var Tag$2 = function (_a) {
|
|
11917
11929
|
var text = _a.text, className = _a.className;
|
|
11918
11930
|
return jsx$1(Container$F, __assign$1({ className: className }, { children: text }), void 0);
|
|
11919
11931
|
};
|
|
11920
|
-
var templateObject_1$
|
|
11932
|
+
var templateObject_1$Z;
|
|
11921
11933
|
|
|
11922
11934
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11923
11935
|
switch (size) {
|
|
@@ -12020,11 +12032,11 @@ var Timer = function (_a) {
|
|
|
12020
12032
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12021
12033
|
};
|
|
12022
12034
|
|
|
12023
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
12035
|
+
var Label$2 = newStyled.span(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
12024
12036
|
var color = _a.color;
|
|
12025
12037
|
return color;
|
|
12026
12038
|
});
|
|
12027
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12039
|
+
var MandatoryIcon = newStyled.span(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
12028
12040
|
var color = _a.color;
|
|
12029
12041
|
return color;
|
|
12030
12042
|
});
|
|
@@ -12033,7 +12045,7 @@ var InputLabel = function (_a) {
|
|
|
12033
12045
|
var theme = useTheme();
|
|
12034
12046
|
return (jsxs$1(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
12035
12047
|
};
|
|
12036
|
-
var templateObject_1$
|
|
12048
|
+
var templateObject_1$Y, templateObject_2$F;
|
|
12037
12049
|
|
|
12038
12050
|
/**
|
|
12039
12051
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12171,15 +12183,6 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12171
12183
|
literal: true,
|
|
12172
12184
|
});
|
|
12173
12185
|
|
|
12174
|
-
var ErrorText = newStyled.h3(templateObject_1$Y || (templateObject_1$Y = __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; });
|
|
12175
|
-
var ErrorContainer = newStyled.div(templateObject_2$F || (templateObject_2$F = __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"])));
|
|
12176
|
-
var Error$1 = function (_a) {
|
|
12177
|
-
var error = _a.error;
|
|
12178
|
-
var theme = useTheme();
|
|
12179
|
-
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));
|
|
12180
|
-
};
|
|
12181
|
-
var templateObject_1$Y, templateObject_2$F;
|
|
12182
|
-
|
|
12183
12186
|
var containerByStatus = function (theme, status) {
|
|
12184
12187
|
if (status === InputValidationType.Valid)
|
|
12185
12188
|
return theme.colors.shades[700].color;
|
|
@@ -12191,7 +12194,8 @@ var Container$E = newStyled.div(templateObject_1$X || (templateObject_1$X = __ma
|
|
|
12191
12194
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12192
12195
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12193
12196
|
});
|
|
12194
|
-
var
|
|
12197
|
+
var StyledLabel = newStyled.label(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
12198
|
+
var StyledInput = newStyled.input(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
12195
12199
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12196
12200
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12197
12201
|
}, function (_a) {
|
|
@@ -12246,16 +12250,16 @@ var StyledInput = newStyled.input(templateObject_2$E || (templateObject_2$E = __
|
|
|
12246
12250
|
return hasValue &&
|
|
12247
12251
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12248
12252
|
});
|
|
12249
|
-
var InputWrapper = newStyled.div(
|
|
12253
|
+
var InputWrapper = newStyled.div(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
12250
12254
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12251
12255
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12252
12256
|
});
|
|
12253
|
-
var AnimatedPlaceholder = newStyled.span(
|
|
12254
|
-
var ClearInput = newStyled.div(
|
|
12255
|
-
var templateObject_1$X, templateObject_2$E, templateObject_3$y, templateObject_4$o, templateObject_5$f;
|
|
12257
|
+
var AnimatedPlaceholder = newStyled.span(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
12258
|
+
var ClearInput = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
12259
|
+
var templateObject_1$X, templateObject_2$E, templateObject_3$y, templateObject_4$o, templateObject_5$f, templateObject_6$d;
|
|
12256
12260
|
|
|
12257
12261
|
var BaseInput = function (_a) {
|
|
12258
|
-
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef"]);
|
|
12262
|
+
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
12259
12263
|
var theme = useTheme();
|
|
12260
12264
|
var _d = useState(InputValidationType.Empty), status = _d[0], setStatus = _d[1];
|
|
12261
12265
|
var onBlur = function (_a) {
|
|
@@ -12275,9 +12279,9 @@ var BaseInput = function (_a) {
|
|
|
12275
12279
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12276
12280
|
}, [status]);
|
|
12277
12281
|
var hasValue = Boolean(value);
|
|
12278
|
-
return (jsxs$1(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12282
|
+
return (jsxs$1(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12279
12283
|
onChange(event.target.value, event);
|
|
12280
|
-
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
12284
|
+
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsx$1(StyledLabel, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
|
|
12281
12285
|
onChange('', { target: { value: '' } });
|
|
12282
12286
|
}, "data-testid": "clear-value" }, { children: jsx$1(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
|
|
12283
12287
|
};
|