@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.js
CHANGED
|
@@ -4066,7 +4066,7 @@ exports.InputValidationType = void 0;
|
|
|
4066
4066
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4067
4067
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4068
4068
|
|
|
4069
|
-
var Section = newStyled.div(templateObject_1$
|
|
4069
|
+
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) {
|
|
4070
4070
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4071
4071
|
});
|
|
4072
4072
|
var CardHeader = function (_a) {
|
|
@@ -4077,14 +4077,14 @@ var CardFooter = function (_a) {
|
|
|
4077
4077
|
var children = _a.children;
|
|
4078
4078
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4079
4079
|
};
|
|
4080
|
-
var templateObject_1$
|
|
4080
|
+
var templateObject_1$1s;
|
|
4081
4081
|
|
|
4082
|
-
var Body = newStyled.div(templateObject_1$
|
|
4082
|
+
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"])));
|
|
4083
4083
|
var CardBody = function (_a) {
|
|
4084
4084
|
var children = _a.children;
|
|
4085
4085
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4086
4086
|
};
|
|
4087
|
-
var templateObject_1$
|
|
4087
|
+
var templateObject_1$1r;
|
|
4088
4088
|
|
|
4089
4089
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4090
4090
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4229,7 +4229,7 @@ var AssetsProvider = function (_a) {
|
|
|
4229
4229
|
};
|
|
4230
4230
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4231
4231
|
|
|
4232
|
-
var Container$
|
|
4232
|
+
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) {
|
|
4233
4233
|
var flex = _a.flex;
|
|
4234
4234
|
return flex &&
|
|
4235
4235
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4244,14 +4244,14 @@ var Container$W = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __
|
|
|
4244
4244
|
var Card$2 = function (_a) {
|
|
4245
4245
|
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;
|
|
4246
4246
|
var theme = useTheme();
|
|
4247
|
-
return (jsxRuntime.jsx(Container$
|
|
4247
|
+
return (jsxRuntime.jsx(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));
|
|
4248
4248
|
};
|
|
4249
4249
|
var Card$3 = Object.assign(Card$2, {
|
|
4250
4250
|
Header: CardHeader,
|
|
4251
4251
|
Footer: CardFooter,
|
|
4252
4252
|
Body: CardBody,
|
|
4253
4253
|
});
|
|
4254
|
-
var templateObject_1$
|
|
4254
|
+
var templateObject_1$1q;
|
|
4255
4255
|
|
|
4256
4256
|
var Fragment = jsxRuntime.Fragment;
|
|
4257
4257
|
function jsx(type, props, key) {
|
|
@@ -4397,7 +4397,7 @@ function BaseSelectOption(_a) {
|
|
|
4397
4397
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4398
4398
|
}
|
|
4399
4399
|
|
|
4400
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4400
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4401
4401
|
function BaseSelect(_a) {
|
|
4402
4402
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4403
4403
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4407,7 +4407,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4407
4407
|
Options: BaseSelectOptions,
|
|
4408
4408
|
Option: BaseSelectOption,
|
|
4409
4409
|
});
|
|
4410
|
-
var templateObject_1$
|
|
4410
|
+
var templateObject_1$1p;
|
|
4411
4411
|
|
|
4412
4412
|
var CustomButton = newStyled.button(function (_a) {
|
|
4413
4413
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4464,6 +4464,15 @@ var withLabel = function (Button, label) {
|
|
|
4464
4464
|
};
|
|
4465
4465
|
};
|
|
4466
4466
|
|
|
4467
|
+
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; });
|
|
4468
|
+
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"])));
|
|
4469
|
+
var Error$1 = function (_a) {
|
|
4470
|
+
var error = _a.error;
|
|
4471
|
+
var theme = useTheme();
|
|
4472
|
+
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));
|
|
4473
|
+
};
|
|
4474
|
+
var templateObject_1$1o, templateObject_2$W;
|
|
4475
|
+
|
|
4467
4476
|
var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4468
4477
|
var theme = _a.theme;
|
|
4469
4478
|
return ({
|
|
@@ -4534,7 +4543,7 @@ var Styles = /*#__PURE__*/Object.freeze({
|
|
|
4534
4543
|
large: large
|
|
4535
4544
|
});
|
|
4536
4545
|
|
|
4537
|
-
var StyledLabel$
|
|
4546
|
+
var StyledLabel$2 = newStyled.label(baseStyles, function (props) { return [
|
|
4538
4547
|
{ color: props.disabled ? props.theme.colors.text.disabled : props.theme.colors.text.color },
|
|
4539
4548
|
Styles[props.variant](props.theme),
|
|
4540
4549
|
Styles[props.size](props.theme),
|
|
@@ -4542,7 +4551,7 @@ var StyledLabel$1 = newStyled.label(baseStyles, function (props) { return [
|
|
|
4542
4551
|
var Label$4 = function (_a) {
|
|
4543
4552
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
4544
4553
|
var theme = useTheme();
|
|
4545
|
-
return (jsxRuntime.jsx(StyledLabel$
|
|
4554
|
+
return (jsxRuntime.jsx(StyledLabel$2, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
4546
4555
|
};
|
|
4547
4556
|
|
|
4548
4557
|
/* base styles & size variants */
|
|
@@ -4628,7 +4637,7 @@ var CustomCheckboxStyles = {
|
|
|
4628
4637
|
},
|
|
4629
4638
|
};
|
|
4630
4639
|
|
|
4631
|
-
var Container$
|
|
4640
|
+
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"])));
|
|
4632
4641
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4633
4642
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4634
4643
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4668,7 +4677,7 @@ var Checkbox = function (_a) {
|
|
|
4668
4677
|
React$2.useEffect(function () {
|
|
4669
4678
|
mounted.current = true;
|
|
4670
4679
|
}, []);
|
|
4671
|
-
return (jsxRuntime.jsxs(Container$
|
|
4680
|
+
return (jsxRuntime.jsxs(Container$W, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4672
4681
|
};
|
|
4673
4682
|
var templateObject_1$1n, templateObject_2$V;
|
|
4674
4683
|
|
|
@@ -4717,15 +4726,17 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4717
4726
|
Option: BaseDropdownOption,
|
|
4718
4727
|
});
|
|
4719
4728
|
|
|
4729
|
+
var Container$V = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __makeTemplateObject([""], [""])));
|
|
4730
|
+
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"])));
|
|
4720
4731
|
function SimpleDropdown(_a) {
|
|
4721
|
-
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;
|
|
4732
|
+
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;
|
|
4722
4733
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
4723
4734
|
var selectedOptionLabel = React$2.useMemo(function () {
|
|
4724
4735
|
if (selectedValue) {
|
|
4725
4736
|
return selectedValue.label;
|
|
4726
4737
|
}
|
|
4727
|
-
return placeHolder;
|
|
4728
|
-
}, [selectedValue, placeHolder]);
|
|
4738
|
+
return showRequiredPlaceholder ? (jsxRuntime.jsx(RequiredPlaceholder, { children: placeHolder }, void 0)) : (placeHolder);
|
|
4739
|
+
}, [selectedValue, showRequiredPlaceholder, placeHolder]);
|
|
4729
4740
|
var onChangeHandler = function (value) {
|
|
4730
4741
|
if (onChange) {
|
|
4731
4742
|
onChange(value);
|
|
@@ -4746,11 +4757,12 @@ function SimpleDropdown(_a) {
|
|
|
4746
4757
|
setSelectedValue(value);
|
|
4747
4758
|
}, [value, options, initialValue]);
|
|
4748
4759
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4749
|
-
return (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:
|
|
4750
|
-
}
|
|
4760
|
+
return (jsxRuntime.jsxs(Container$V, __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));
|
|
4761
|
+
}
|
|
4762
|
+
var templateObject_1$1m, templateObject_2$U;
|
|
4751
4763
|
|
|
4752
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4753
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4764
|
+
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; });
|
|
4765
|
+
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; });
|
|
4754
4766
|
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"])));
|
|
4755
4767
|
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"])));
|
|
4756
4768
|
var DropdownDialog = function (_a) {
|
|
@@ -4760,7 +4772,7 @@ var DropdownDialog = function (_a) {
|
|
|
4760
4772
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4761
4773
|
}) }), void 0) }), void 0));
|
|
4762
4774
|
};
|
|
4763
|
-
var templateObject_1$
|
|
4775
|
+
var templateObject_1$1l, templateObject_2$T, templateObject_3$I, templateObject_4$v;
|
|
4764
4776
|
|
|
4765
4777
|
var getStylesBySize$9 = function (size, theme) {
|
|
4766
4778
|
switch (size) {
|
|
@@ -4828,12 +4840,12 @@ var SelectorSecondary = function (_a) {
|
|
|
4828
4840
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4829
4841
|
// `variants` styles that are consistent through all themes.
|
|
4830
4842
|
var TAGS = {
|
|
4831
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4832
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4843
|
+
hero1: newStyled.h1(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject([""], [""]))),
|
|
4844
|
+
hero2: newStyled.h2(templateObject_2$S || (templateObject_2$S = __makeTemplateObject([""], [""]))),
|
|
4833
4845
|
hero3: newStyled.h3(templateObject_3$H || (templateObject_3$H = __makeTemplateObject([""], [""]))),
|
|
4834
4846
|
display1: newStyled.h1(templateObject_4$u || (templateObject_4$u = __makeTemplateObject([""], [""]))),
|
|
4835
4847
|
display2: newStyled.h2(templateObject_5$i || (templateObject_5$i = __makeTemplateObject([""], [""]))),
|
|
4836
|
-
heading1: newStyled.h1(templateObject_6$
|
|
4848
|
+
heading1: newStyled.h1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject([""], [""]))),
|
|
4837
4849
|
heading2: newStyled.h2(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject([""], [""]))),
|
|
4838
4850
|
heading3: newStyled.h3(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject([""], [""]))),
|
|
4839
4851
|
heading4: newStyled.h4(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4952,9 +4964,9 @@ var DEFAULTS = {
|
|
|
4952
4964
|
size: 'regular',
|
|
4953
4965
|
},
|
|
4954
4966
|
};
|
|
4955
|
-
var templateObject_1$
|
|
4967
|
+
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;
|
|
4956
4968
|
|
|
4957
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4969
|
+
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) {
|
|
4958
4970
|
var inline = _a.inline;
|
|
4959
4971
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4960
4972
|
});
|
|
@@ -4973,7 +4985,7 @@ var SizeSelector = function (_a) {
|
|
|
4973
4985
|
}, 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));
|
|
4974
4986
|
}) }), void 0)] }), void 0));
|
|
4975
4987
|
};
|
|
4976
|
-
var templateObject_1$
|
|
4988
|
+
var templateObject_1$1j;
|
|
4977
4989
|
|
|
4978
4990
|
var getStylesBySize$8 = function (size) {
|
|
4979
4991
|
switch (size) {
|
|
@@ -5000,7 +5012,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5000
5012
|
} });
|
|
5001
5013
|
};
|
|
5002
5014
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5003
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5015
|
+
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));
|
|
5004
5016
|
};
|
|
5005
5017
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5006
5018
|
if (disabled)
|
|
@@ -5016,16 +5028,16 @@ var TextButton = function (_a) {
|
|
|
5016
5028
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5017
5029
|
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));
|
|
5018
5030
|
};
|
|
5019
|
-
var templateObject_1$
|
|
5031
|
+
var templateObject_1$1i;
|
|
5020
5032
|
|
|
5021
|
-
var Container$U = newStyled.div(templateObject_1$
|
|
5022
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
5033
|
+
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"])));
|
|
5034
|
+
var P$2 = newStyled.p(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5023
5035
|
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"])));
|
|
5024
5036
|
var SizeFitGuide = function (_a) {
|
|
5025
5037
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5026
5038
|
return (jsxRuntime.jsxs(Container$U, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$2, { children: ["Fit As Expected:", ' ', jsxRuntime.jsxs(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
5027
5039
|
};
|
|
5028
|
-
var templateObject_1$
|
|
5040
|
+
var templateObject_1$1h, templateObject_2$R, templateObject_3$G;
|
|
5029
5041
|
|
|
5030
5042
|
var getStylesBySize$7 = function (size) {
|
|
5031
5043
|
switch (size) {
|
|
@@ -5055,7 +5067,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5055
5067
|
};
|
|
5056
5068
|
}
|
|
5057
5069
|
};
|
|
5058
|
-
var Container$T = newStyled.div(templateObject_1$
|
|
5070
|
+
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) {
|
|
5059
5071
|
var backgroundColor = _a.backgroundColor;
|
|
5060
5072
|
return backgroundColor;
|
|
5061
5073
|
}, function (_a) {
|
|
@@ -5077,7 +5089,7 @@ var Container$T = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __
|
|
|
5077
5089
|
var size = _a.size;
|
|
5078
5090
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5079
5091
|
});
|
|
5080
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
5092
|
+
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) {
|
|
5081
5093
|
var textColor = _a.textColor;
|
|
5082
5094
|
return textColor;
|
|
5083
5095
|
}, function (_a) {
|
|
@@ -5094,7 +5106,7 @@ var DiscountTag = function (_a) {
|
|
|
5094
5106
|
var theme = useTheme();
|
|
5095
5107
|
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5096
5108
|
};
|
|
5097
|
-
var templateObject_1$
|
|
5109
|
+
var templateObject_1$1g, templateObject_2$Q;
|
|
5098
5110
|
|
|
5099
5111
|
var getStylesBySize$6 = function (size) {
|
|
5100
5112
|
switch (size) {
|
|
@@ -5124,8 +5136,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5124
5136
|
};
|
|
5125
5137
|
}
|
|
5126
5138
|
};
|
|
5127
|
-
var Container$S = newStyled.div(templateObject_1$
|
|
5128
|
-
var Price = newStyled.p(templateObject_2$
|
|
5139
|
+
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"])));
|
|
5140
|
+
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) {
|
|
5129
5141
|
var weight = _a.weight;
|
|
5130
5142
|
return (weight ? weight : '400');
|
|
5131
5143
|
}, function (_a) {
|
|
@@ -5177,9 +5189,9 @@ var PriceLabel = function (_a) {
|
|
|
5177
5189
|
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)); };
|
|
5178
5190
|
return (jsxRuntime.jsxs(Container$S, { 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));
|
|
5179
5191
|
};
|
|
5180
|
-
var templateObject_1$
|
|
5192
|
+
var templateObject_1$1f, templateObject_2$P, templateObject_3$F;
|
|
5181
5193
|
|
|
5182
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5194
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5183
5195
|
var PriceLabelV2 = function (_a) {
|
|
5184
5196
|
var _b;
|
|
5185
5197
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
@@ -5209,7 +5221,7 @@ var PriceLabelV2 = function (_a) {
|
|
|
5209
5221
|
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)); };
|
|
5210
5222
|
return (jsxRuntime.jsxs(Container$S, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5211
5223
|
};
|
|
5212
|
-
var templateObject_1$
|
|
5224
|
+
var templateObject_1$1e;
|
|
5213
5225
|
|
|
5214
5226
|
var OneColorSelector = function (_a) {
|
|
5215
5227
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5250,8 +5262,8 @@ var OutOfStock = function (_a) {
|
|
|
5250
5262
|
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));
|
|
5251
5263
|
};
|
|
5252
5264
|
|
|
5253
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5254
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5265
|
+
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"])));
|
|
5266
|
+
newStyled(lt.Label)(templateObject_2$O || (templateObject_2$O = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5255
5267
|
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"])));
|
|
5256
5268
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5257
5269
|
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"])));
|
|
@@ -5272,23 +5284,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5272
5284
|
Option: Option,
|
|
5273
5285
|
OptionsContainer: OptionsContainer,
|
|
5274
5286
|
});
|
|
5275
|
-
var templateObject_1$
|
|
5287
|
+
var templateObject_1$1d, templateObject_2$O, templateObject_3$E, templateObject_4$t, templateObject_5$h;
|
|
5276
5288
|
|
|
5277
|
-
var Container$R = newStyled.div(templateObject_1$
|
|
5289
|
+
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) {
|
|
5278
5290
|
var borderColor = _a.borderColor;
|
|
5279
5291
|
return borderColor;
|
|
5280
5292
|
}, function (_a) {
|
|
5281
5293
|
var noStock = _a.noStock;
|
|
5282
5294
|
return (noStock ? '0.4' : '1');
|
|
5283
5295
|
});
|
|
5284
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5296
|
+
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"])));
|
|
5285
5297
|
var PatternSelector = function (_a) {
|
|
5286
5298
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5287
5299
|
var theme = useTheme();
|
|
5288
5300
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5289
5301
|
return (jsxRuntime.jsx(Container$R, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5290
5302
|
};
|
|
5291
|
-
var templateObject_1$
|
|
5303
|
+
var templateObject_1$1c, templateObject_2$N;
|
|
5292
5304
|
|
|
5293
5305
|
var renderOptions$1 = function (options) {
|
|
5294
5306
|
if (options.length === 0) {
|
|
@@ -5346,7 +5358,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5346
5358
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
5347
5359
|
};
|
|
5348
5360
|
|
|
5349
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5361
|
+
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) {
|
|
5350
5362
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5351
5363
|
return borderRadiusVariant &&
|
|
5352
5364
|
"\nborder-radius: 20px;\n";
|
|
@@ -5361,7 +5373,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5361
5373
|
var theme = useTheme();
|
|
5362
5374
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5363
5375
|
};
|
|
5364
|
-
var templateObject_1$
|
|
5376
|
+
var templateObject_1$1b;
|
|
5365
5377
|
|
|
5366
5378
|
var Button$4 = newStyled.button(function () { return ({
|
|
5367
5379
|
background: 'transparent',
|
|
@@ -9605,14 +9617,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9605
9617
|
return Slider;
|
|
9606
9618
|
}(React__default["default"].Component);
|
|
9607
9619
|
|
|
9608
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9620
|
+
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) {
|
|
9609
9621
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9610
9622
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9611
9623
|
}, function (_a) {
|
|
9612
9624
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9613
9625
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9614
9626
|
});
|
|
9615
|
-
var templateObject_1$
|
|
9627
|
+
var templateObject_1$1a;
|
|
9616
9628
|
|
|
9617
9629
|
var getStylesBySize$5 = function (size) {
|
|
9618
9630
|
// rem units
|
|
@@ -9671,8 +9683,8 @@ var SliderNavigation = function (_a) {
|
|
|
9671
9683
|
} }, { 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));
|
|
9672
9684
|
};
|
|
9673
9685
|
|
|
9674
|
-
var horizontalStyles = css(templateObject_1$
|
|
9675
|
-
var verticalStyles = css(templateObject_2$
|
|
9686
|
+
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"])));
|
|
9687
|
+
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"])));
|
|
9676
9688
|
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) {
|
|
9677
9689
|
var position = _a.position;
|
|
9678
9690
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
@@ -9686,7 +9698,7 @@ var ImagePreviewList = function (_a) {
|
|
|
9686
9698
|
arrowPadding: 1.625,
|
|
9687
9699
|
}, 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));
|
|
9688
9700
|
};
|
|
9689
|
-
var templateObject_1$
|
|
9701
|
+
var templateObject_1$19, templateObject_2$M, templateObject_3$D, templateObject_4$s;
|
|
9690
9702
|
|
|
9691
9703
|
var propTypes = {exports: {}};
|
|
9692
9704
|
|
|
@@ -11279,12 +11291,12 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11279
11291
|
afterZoomOut: PropTypes.func
|
|
11280
11292
|
} : {};
|
|
11281
11293
|
|
|
11282
|
-
var Container$P = newStyled.div(templateObject_1$
|
|
11294
|
+
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) {
|
|
11283
11295
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11284
11296
|
return borderRadiusVariant &&
|
|
11285
11297
|
"\n border-radius: 40px;\n ";
|
|
11286
11298
|
});
|
|
11287
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11299
|
+
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'); });
|
|
11288
11300
|
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"])));
|
|
11289
11301
|
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"])));
|
|
11290
11302
|
var ImageProductWithTags$1 = function (_a) {
|
|
@@ -11294,9 +11306,9 @@ var ImageProductWithTags$1 = function (_a) {
|
|
|
11294
11306
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11295
11307
|
}, 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(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0))] }), void 0));
|
|
11296
11308
|
};
|
|
11297
|
-
var templateObject_1$
|
|
11309
|
+
var templateObject_1$18, templateObject_2$L, templateObject_3$C, templateObject_4$r;
|
|
11298
11310
|
|
|
11299
|
-
var Container$O = newStyled.div(templateObject_1$
|
|
11311
|
+
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"])));
|
|
11300
11312
|
var ProductGallery = function (_a) {
|
|
11301
11313
|
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;
|
|
11302
11314
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11308,7 +11320,7 @@ var ProductGallery = function (_a) {
|
|
|
11308
11320
|
setSelectedImage(value);
|
|
11309
11321
|
}, 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 }, void 0)] }, void 0));
|
|
11310
11322
|
};
|
|
11311
|
-
var templateObject_1$
|
|
11323
|
+
var templateObject_1$17;
|
|
11312
11324
|
|
|
11313
11325
|
/* base styles & size variants */
|
|
11314
11326
|
var StarStyles = {
|
|
@@ -11354,8 +11366,8 @@ var StarStyles = {
|
|
|
11354
11366
|
});
|
|
11355
11367
|
},
|
|
11356
11368
|
};
|
|
11357
|
-
var Container$N = newStyled.div(templateObject_1$
|
|
11358
|
-
var templateObject_1$
|
|
11369
|
+
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"])));
|
|
11370
|
+
var templateObject_1$16;
|
|
11359
11371
|
|
|
11360
11372
|
var StarContainer = newStyled.div(function (_a) {
|
|
11361
11373
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11417,8 +11429,8 @@ var LabelStyles = {
|
|
|
11417
11429
|
});
|
|
11418
11430
|
},
|
|
11419
11431
|
};
|
|
11420
|
-
var Container$M = newStyled.a(templateObject_1$
|
|
11421
|
-
var templateObject_1$
|
|
11432
|
+
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"])));
|
|
11433
|
+
var templateObject_1$15;
|
|
11422
11434
|
|
|
11423
11435
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11424
11436
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11459,8 +11471,8 @@ var Rating = function (_a) {
|
|
|
11459
11471
|
return (jsxRuntime.jsxs(Container$M, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
11460
11472
|
};
|
|
11461
11473
|
|
|
11462
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
11463
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
11474
|
+
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"])));
|
|
11475
|
+
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; });
|
|
11464
11476
|
var textButtonStyles = function (theme) { return ({
|
|
11465
11477
|
border: 'none',
|
|
11466
11478
|
background: 'transparent',
|
|
@@ -11475,7 +11487,7 @@ var FitPredictor = function (_a) {
|
|
|
11475
11487
|
var theme = useTheme();
|
|
11476
11488
|
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));
|
|
11477
11489
|
};
|
|
11478
|
-
var templateObject_1$
|
|
11490
|
+
var templateObject_1$14, templateObject_2$K;
|
|
11479
11491
|
|
|
11480
11492
|
var H2$1 = newStyled.h2(function (_a) {
|
|
11481
11493
|
var color = _a.color;
|
|
@@ -11489,7 +11501,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
11489
11501
|
margin: '0.938rem 4.188rem',
|
|
11490
11502
|
});
|
|
11491
11503
|
});
|
|
11492
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11504
|
+
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) {
|
|
11493
11505
|
var backgroundColor = _a.backgroundColor;
|
|
11494
11506
|
return backgroundColor;
|
|
11495
11507
|
}, function (_a) {
|
|
@@ -11528,7 +11540,7 @@ var ProgressBar = function (_a) {
|
|
|
11528
11540
|
var theme = useTheme();
|
|
11529
11541
|
return (jsxRuntime.jsxs(Container$K, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11530
11542
|
};
|
|
11531
|
-
var templateObject_1$
|
|
11543
|
+
var templateObject_1$13;
|
|
11532
11544
|
|
|
11533
11545
|
var getStylesBySize$4 = function (size) {
|
|
11534
11546
|
switch (size) {
|
|
@@ -11549,7 +11561,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11549
11561
|
};
|
|
11550
11562
|
}
|
|
11551
11563
|
};
|
|
11552
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
11564
|
+
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) {
|
|
11553
11565
|
var backgroundColor = _a.backgroundColor;
|
|
11554
11566
|
return backgroundColor;
|
|
11555
11567
|
}, function (_a) {
|
|
@@ -11579,7 +11591,7 @@ var IconButton = function (_a) {
|
|
|
11579
11591
|
var theme = useTheme();
|
|
11580
11592
|
return (jsxRuntime.jsx(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));
|
|
11581
11593
|
};
|
|
11582
|
-
var templateObject_1$
|
|
11594
|
+
var templateObject_1$12;
|
|
11583
11595
|
|
|
11584
11596
|
var TooltipArrow = function (_a) {
|
|
11585
11597
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11659,7 +11671,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11659
11671
|
}
|
|
11660
11672
|
};
|
|
11661
11673
|
|
|
11662
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11674
|
+
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) {
|
|
11663
11675
|
var position = _a.position;
|
|
11664
11676
|
return getWrapperFlexDirection(position);
|
|
11665
11677
|
});
|
|
@@ -11684,7 +11696,7 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11684
11696
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11685
11697
|
return actual === expected ? margin : '0';
|
|
11686
11698
|
};
|
|
11687
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11699
|
+
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) {
|
|
11688
11700
|
var borderColor = _a.borderColor;
|
|
11689
11701
|
return borderColor;
|
|
11690
11702
|
}, function (_a) {
|
|
@@ -11706,12 +11718,12 @@ var TooltipText = newStyled.div(templateObject_4$q || (templateObject_4$q = __ma
|
|
|
11706
11718
|
return color;
|
|
11707
11719
|
});
|
|
11708
11720
|
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"])));
|
|
11709
|
-
var Title$6 = newStyled.h1(templateObject_6$
|
|
11721
|
+
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) {
|
|
11710
11722
|
var color = _a.color;
|
|
11711
11723
|
return color;
|
|
11712
11724
|
});
|
|
11713
11725
|
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"])));
|
|
11714
|
-
var templateObject_1$
|
|
11726
|
+
var templateObject_1$11, templateObject_2$J, templateObject_3$B, templateObject_4$q, templateObject_5$g, templateObject_6$e, templateObject_7$8;
|
|
11715
11727
|
|
|
11716
11728
|
var Tooltip = function (_a) {
|
|
11717
11729
|
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;
|
|
@@ -11873,9 +11885,9 @@ var ContainerStyles = {
|
|
|
11873
11885
|
},
|
|
11874
11886
|
};
|
|
11875
11887
|
|
|
11876
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11888
|
+
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"])));
|
|
11877
11889
|
var Container$I = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11878
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11890
|
+
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) {
|
|
11879
11891
|
var disabled = _a.disabled;
|
|
11880
11892
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11881
11893
|
});
|
|
@@ -11883,7 +11895,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
11883
11895
|
CustomRadioStyles.baseStyles(props.theme, props.disabled),
|
|
11884
11896
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
11885
11897
|
]; });
|
|
11886
|
-
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) {
|
|
11898
|
+
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) {
|
|
11887
11899
|
var theme = _a.theme;
|
|
11888
11900
|
return theme.component.radio.textSize;
|
|
11889
11901
|
}, function (_a) {
|
|
@@ -11897,9 +11909,9 @@ var RadioInput = function (_a) {
|
|
|
11897
11909
|
var value = event.currentTarget.value;
|
|
11898
11910
|
onChange({ value: value, label: label });
|
|
11899
11911
|
};
|
|
11900
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$I, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11912
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$I, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11901
11913
|
};
|
|
11902
|
-
var templateObject_1$
|
|
11914
|
+
var templateObject_1$10, templateObject_2$I, templateObject_3$A;
|
|
11903
11915
|
|
|
11904
11916
|
var RadioGroupInput = function (_a) {
|
|
11905
11917
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11913,17 +11925,17 @@ var RadioGroupInput = function (_a) {
|
|
|
11913
11925
|
}) }), void 0));
|
|
11914
11926
|
};
|
|
11915
11927
|
|
|
11916
|
-
var Wrapper$3 = newStyled.div(templateObject_1
|
|
11917
|
-
var Container$H = newStyled.div(templateObject_2$
|
|
11928
|
+
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"])));
|
|
11929
|
+
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"])));
|
|
11918
11930
|
var Minimalistic = function (_a) {
|
|
11919
11931
|
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;
|
|
11920
11932
|
var theme = useTheme();
|
|
11921
11933
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$H, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$H, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11922
11934
|
};
|
|
11923
|
-
var templateObject_1
|
|
11935
|
+
var templateObject_1$$, templateObject_2$H;
|
|
11924
11936
|
|
|
11925
|
-
var Container$G = newStyled.div(templateObject_1
|
|
11926
|
-
var Title$5 = newStyled.h1(templateObject_2$
|
|
11937
|
+
var Container$G = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11938
|
+
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; });
|
|
11927
11939
|
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; });
|
|
11928
11940
|
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"])));
|
|
11929
11941
|
var Simple = function (_a) {
|
|
@@ -11931,19 +11943,19 @@ var Simple = function (_a) {
|
|
|
11931
11943
|
var theme = useTheme();
|
|
11932
11944
|
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$G, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11933
11945
|
};
|
|
11934
|
-
var templateObject_1
|
|
11946
|
+
var templateObject_1$_, templateObject_2$G, templateObject_3$z, templateObject_4$p;
|
|
11935
11947
|
|
|
11936
11948
|
var Bundle = {
|
|
11937
11949
|
Minimalistic: Minimalistic,
|
|
11938
11950
|
Simple: Simple,
|
|
11939
11951
|
};
|
|
11940
11952
|
|
|
11941
|
-
var Container$F = newStyled.div(templateObject_1$
|
|
11953
|
+
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"])));
|
|
11942
11954
|
var Tag$2 = function (_a) {
|
|
11943
11955
|
var text = _a.text, className = _a.className;
|
|
11944
11956
|
return jsxRuntime.jsx(Container$F, __assign$1({ className: className }, { children: text }), void 0);
|
|
11945
11957
|
};
|
|
11946
|
-
var templateObject_1$
|
|
11958
|
+
var templateObject_1$Z;
|
|
11947
11959
|
|
|
11948
11960
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11949
11961
|
switch (size) {
|
|
@@ -12046,11 +12058,11 @@ var Timer = function (_a) {
|
|
|
12046
12058
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12047
12059
|
};
|
|
12048
12060
|
|
|
12049
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
12061
|
+
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) {
|
|
12050
12062
|
var color = _a.color;
|
|
12051
12063
|
return color;
|
|
12052
12064
|
});
|
|
12053
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12065
|
+
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) {
|
|
12054
12066
|
var color = _a.color;
|
|
12055
12067
|
return color;
|
|
12056
12068
|
});
|
|
@@ -12059,7 +12071,7 @@ var InputLabel = function (_a) {
|
|
|
12059
12071
|
var theme = useTheme();
|
|
12060
12072
|
return (jsxRuntime.jsxs(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
12061
12073
|
};
|
|
12062
|
-
var templateObject_1$
|
|
12074
|
+
var templateObject_1$Y, templateObject_2$F;
|
|
12063
12075
|
|
|
12064
12076
|
/**
|
|
12065
12077
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12197,15 +12209,6 @@ var mediaQueries = index$1(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
12197
12209
|
literal: true,
|
|
12198
12210
|
});
|
|
12199
12211
|
|
|
12200
|
-
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; });
|
|
12201
|
-
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"])));
|
|
12202
|
-
var Error$1 = function (_a) {
|
|
12203
|
-
var error = _a.error;
|
|
12204
|
-
var theme = useTheme();
|
|
12205
|
-
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));
|
|
12206
|
-
};
|
|
12207
|
-
var templateObject_1$Y, templateObject_2$F;
|
|
12208
|
-
|
|
12209
12212
|
var containerByStatus = function (theme, status) {
|
|
12210
12213
|
if (status === exports.InputValidationType.Valid)
|
|
12211
12214
|
return theme.colors.shades[700].color;
|
|
@@ -12217,7 +12220,8 @@ var Container$E = newStyled.div(templateObject_1$X || (templateObject_1$X = __ma
|
|
|
12217
12220
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12218
12221
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12219
12222
|
});
|
|
12220
|
-
var
|
|
12223
|
+
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"])));
|
|
12224
|
+
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) {
|
|
12221
12225
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12222
12226
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12223
12227
|
}, function (_a) {
|
|
@@ -12272,16 +12276,16 @@ var StyledInput = newStyled.input(templateObject_2$E || (templateObject_2$E = __
|
|
|
12272
12276
|
return hasValue &&
|
|
12273
12277
|
"& ~ span {\n bottom: 1.625rem;\n font-size: 0.75rem;\n opacity: 1;\n }";
|
|
12274
12278
|
});
|
|
12275
|
-
var InputWrapper = newStyled.div(
|
|
12279
|
+
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) {
|
|
12276
12280
|
var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
|
|
12277
12281
|
return !inlinePlaceholder ? (size === 'small' ? '36px' : '40px') : '48px';
|
|
12278
12282
|
});
|
|
12279
|
-
var AnimatedPlaceholder = newStyled.span(
|
|
12280
|
-
var ClearInput = newStyled.div(
|
|
12281
|
-
var templateObject_1$X, templateObject_2$E, templateObject_3$y, templateObject_4$o, templateObject_5$f;
|
|
12283
|
+
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"])));
|
|
12284
|
+
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"])));
|
|
12285
|
+
var templateObject_1$X, templateObject_2$E, templateObject_3$y, templateObject_4$o, templateObject_5$f, templateObject_6$d;
|
|
12282
12286
|
|
|
12283
12287
|
var BaseInput = function (_a) {
|
|
12284
|
-
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"]);
|
|
12288
|
+
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"]);
|
|
12285
12289
|
var theme = useTheme();
|
|
12286
12290
|
var _d = React$2.useState(exports.InputValidationType.Empty), status = _d[0], setStatus = _d[1];
|
|
12287
12291
|
var onBlur = function (_a) {
|
|
@@ -12301,9 +12305,9 @@ var BaseInput = function (_a) {
|
|
|
12301
12305
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12302
12306
|
}, [status]);
|
|
12303
12307
|
var hasValue = Boolean(value);
|
|
12304
|
-
return (jsxRuntime.jsxs(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12308
|
+
return (jsxRuntime.jsxs(Container$E, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12305
12309
|
onChange(event.target.value, event);
|
|
12306
|
-
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
12310
|
+
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
12307
12311
|
onChange('', { target: { value: '' } });
|
|
12308
12312
|
}, "data-testid": "clear-value" }, { children: jsxRuntime.jsx(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
12309
12313
|
};
|