@trafilea/afrodita-components 5.0.0-beta.213 → 5.0.0-beta.215
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 +26 -2
- package/build/index.esm.js +305 -127
- package/build/index.esm.js.map +1 -1
- package/build/index.js +306 -126
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4138,7 +4138,7 @@ exports.InputValidationType = void 0;
|
|
|
4138
4138
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4139
4139
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4140
4140
|
|
|
4141
|
-
var Section = newStyled.div(templateObject_1$
|
|
4141
|
+
var Section = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __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) {
|
|
4142
4142
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4143
4143
|
});
|
|
4144
4144
|
var CardHeader = function (_a) {
|
|
@@ -4149,14 +4149,14 @@ var CardFooter = function (_a) {
|
|
|
4149
4149
|
var children = _a.children;
|
|
4150
4150
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4151
4151
|
};
|
|
4152
|
-
var templateObject_1$
|
|
4152
|
+
var templateObject_1$1y;
|
|
4153
4153
|
|
|
4154
|
-
var Body = newStyled.div(templateObject_1$
|
|
4154
|
+
var Body = newStyled.div(templateObject_1$1x || (templateObject_1$1x = __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"])));
|
|
4155
4155
|
var CardBody = function (_a) {
|
|
4156
4156
|
var children = _a.children;
|
|
4157
4157
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4158
4158
|
};
|
|
4159
|
-
var templateObject_1$
|
|
4159
|
+
var templateObject_1$1x;
|
|
4160
4160
|
|
|
4161
4161
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4162
4162
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4301,7 +4301,7 @@ var AssetsProvider = function (_a) {
|
|
|
4301
4301
|
};
|
|
4302
4302
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4303
4303
|
|
|
4304
|
-
var Container
|
|
4304
|
+
var Container$$ = newStyled.div(templateObject_1$1w || (templateObject_1$1w = __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) {
|
|
4305
4305
|
var flex = _a.flex;
|
|
4306
4306
|
return flex &&
|
|
4307
4307
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4316,14 +4316,14 @@ var Container$Z = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __
|
|
|
4316
4316
|
var Card$2 = function (_a) {
|
|
4317
4317
|
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;
|
|
4318
4318
|
var theme = useTheme();
|
|
4319
|
-
return (jsxRuntime.jsx(Container
|
|
4319
|
+
return (jsxRuntime.jsx(Container$$, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4320
4320
|
};
|
|
4321
4321
|
var Card$3 = Object.assign(Card$2, {
|
|
4322
4322
|
Header: CardHeader,
|
|
4323
4323
|
Footer: CardFooter,
|
|
4324
4324
|
Body: CardBody,
|
|
4325
4325
|
});
|
|
4326
|
-
var templateObject_1$
|
|
4326
|
+
var templateObject_1$1w;
|
|
4327
4327
|
|
|
4328
4328
|
var Fragment = jsxRuntime.Fragment;
|
|
4329
4329
|
function jsx(type, props, key) {
|
|
@@ -4355,7 +4355,7 @@ var BaseButton = function (_a) {
|
|
|
4355
4355
|
}, id: id }, { children: [renderLeading, children, renderTrailing] }), void 0));
|
|
4356
4356
|
};
|
|
4357
4357
|
|
|
4358
|
-
var getStylesBySize$
|
|
4358
|
+
var getStylesBySize$b = function (size, theme) {
|
|
4359
4359
|
switch (size) {
|
|
4360
4360
|
case exports.ComponentSize.Large:
|
|
4361
4361
|
return {
|
|
@@ -4382,7 +4382,7 @@ var getStylesBySize$a = function (size, theme) {
|
|
|
4382
4382
|
var BaseCTA = function (_a) {
|
|
4383
4383
|
var text = _a.text, _b = _a.wide, wide = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, props = __rest(_a, ["text", "wide", "size"]);
|
|
4384
4384
|
var theme = useTheme();
|
|
4385
|
-
var stylesBySize = getStylesBySize$
|
|
4385
|
+
var stylesBySize = getStylesBySize$b(size, theme);
|
|
4386
4386
|
return (jsx(BaseButton, __assign$1({}, props, { css: __assign$1(__assign$1({ width: wide ? '100%' : 'fit-content' }, stylesBySize), { fontWeight: theme.component.button.fontWeight, borderRadius: "".concat(theme.component.button.borderRadius), cursor: 'pointer', '&:disabled': {
|
|
4387
4387
|
backgroundColor: theme.colors.background.disabled,
|
|
4388
4388
|
color: theme.colors.text.disabled,
|
|
@@ -4469,7 +4469,7 @@ function BaseSelectOption(_a) {
|
|
|
4469
4469
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4470
4470
|
}
|
|
4471
4471
|
|
|
4472
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4472
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1v || (templateObject_1$1v = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4473
4473
|
function BaseSelect(_a) {
|
|
4474
4474
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4475
4475
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4479,7 +4479,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4479
4479
|
Options: BaseSelectOptions,
|
|
4480
4480
|
Option: BaseSelectOption,
|
|
4481
4481
|
});
|
|
4482
|
-
var templateObject_1$
|
|
4482
|
+
var templateObject_1$1v;
|
|
4483
4483
|
|
|
4484
4484
|
var CustomButton = newStyled.button(function (_a) {
|
|
4485
4485
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4536,14 +4536,14 @@ var withLabel = function (Button, label) {
|
|
|
4536
4536
|
};
|
|
4537
4537
|
};
|
|
4538
4538
|
|
|
4539
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4540
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4539
|
+
var ErrorText = newStyled.h3(templateObject_1$1u || (templateObject_1$1u = __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; });
|
|
4540
|
+
var ErrorContainer = newStyled.div(templateObject_2$_ || (templateObject_2$_ = __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"])));
|
|
4541
4541
|
var Error$1 = function (_a) {
|
|
4542
4542
|
var error = _a.error;
|
|
4543
4543
|
var theme = useTheme();
|
|
4544
4544
|
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));
|
|
4545
4545
|
};
|
|
4546
|
-
var templateObject_1$
|
|
4546
|
+
var templateObject_1$1u, templateObject_2$_;
|
|
4547
4547
|
|
|
4548
4548
|
var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4549
4549
|
var theme = _a.theme;
|
|
@@ -4615,7 +4615,7 @@ var Styles = /*#__PURE__*/Object.freeze({
|
|
|
4615
4615
|
large: large
|
|
4616
4616
|
});
|
|
4617
4617
|
|
|
4618
|
-
var StyledLabel$
|
|
4618
|
+
var StyledLabel$3 = newStyled.label(baseStyles, function (props) { return [
|
|
4619
4619
|
{ color: props.disabled ? props.theme.colors.text.disabled : props.theme.colors.text.color },
|
|
4620
4620
|
Styles[props.variant](props.theme),
|
|
4621
4621
|
Styles[props.size](props.theme),
|
|
@@ -4623,7 +4623,7 @@ var StyledLabel$2 = newStyled.label(baseStyles, function (props) { return [
|
|
|
4623
4623
|
var Label$4 = function (_a) {
|
|
4624
4624
|
var children = _a.children, rest = __rest(_a, ["children"]);
|
|
4625
4625
|
var theme = useTheme();
|
|
4626
|
-
return (jsxRuntime.jsx(StyledLabel$
|
|
4626
|
+
return (jsxRuntime.jsx(StyledLabel$3, __assign$1({}, rest, { theme: theme }, { children: children }), void 0));
|
|
4627
4627
|
};
|
|
4628
4628
|
|
|
4629
4629
|
/* base styles & size variants */
|
|
@@ -4709,7 +4709,7 @@ var CustomCheckboxStyles = {
|
|
|
4709
4709
|
},
|
|
4710
4710
|
};
|
|
4711
4711
|
|
|
4712
|
-
var Container$
|
|
4712
|
+
var Container$_ = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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"])));
|
|
4713
4713
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4714
4714
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4715
4715
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4720,7 +4720,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4720
4720
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4721
4721
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4722
4722
|
]; });
|
|
4723
|
-
var Input$
|
|
4723
|
+
var Input$4 = newStyled.input(templateObject_2$Z || (templateObject_2$Z = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
4724
4724
|
var disabled = _a.disabled;
|
|
4725
4725
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4726
4726
|
});
|
|
@@ -4749,9 +4749,9 @@ var Checkbox = function (_a) {
|
|
|
4749
4749
|
React$2.useEffect(function () {
|
|
4750
4750
|
mounted.current = true;
|
|
4751
4751
|
}, []);
|
|
4752
|
-
return (jsxRuntime.jsxs(Container$
|
|
4752
|
+
return (jsxRuntime.jsxs(Container$_, { children: [jsxRuntime.jsx(Input$4, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4753
4753
|
};
|
|
4754
|
-
var templateObject_1$
|
|
4754
|
+
var templateObject_1$1t, templateObject_2$Z;
|
|
4755
4755
|
|
|
4756
4756
|
var CustomOption = newStyled.li(function (_a) {
|
|
4757
4757
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4798,8 +4798,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4798
4798
|
Option: BaseDropdownOption,
|
|
4799
4799
|
});
|
|
4800
4800
|
|
|
4801
|
-
var Container$
|
|
4802
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4801
|
+
var Container$Z = newStyled.div(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject([""], [""])));
|
|
4802
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
4803
4803
|
function SimpleDropdown(_a) {
|
|
4804
4804
|
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;
|
|
4805
4805
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4829,13 +4829,13 @@ function SimpleDropdown(_a) {
|
|
|
4829
4829
|
setSelectedValue(value);
|
|
4830
4830
|
}, [value, options, initialValue]);
|
|
4831
4831
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4832
|
-
return (jsxRuntime.jsxs(Container$
|
|
4832
|
+
return (jsxRuntime.jsxs(Container$Z, __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));
|
|
4833
4833
|
}
|
|
4834
|
-
var templateObject_1$
|
|
4834
|
+
var templateObject_1$1s, templateObject_2$Y;
|
|
4835
4835
|
|
|
4836
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4837
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4838
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4836
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1r || (templateObject_1$1r = __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; });
|
|
4837
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$X || (templateObject_2$X = __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; });
|
|
4838
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$K || (templateObject_3$K = __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"])));
|
|
4839
4839
|
var DialogDropdownLink = newStyled.a(templateObject_4$w || (templateObject_4$w = __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"])));
|
|
4840
4840
|
var DropdownDialog = function (_a) {
|
|
4841
4841
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -4844,9 +4844,9 @@ var DropdownDialog = function (_a) {
|
|
|
4844
4844
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4845
4845
|
}) }), void 0) }), void 0));
|
|
4846
4846
|
};
|
|
4847
|
-
var templateObject_1$
|
|
4847
|
+
var templateObject_1$1r, templateObject_2$X, templateObject_3$K, templateObject_4$w;
|
|
4848
4848
|
|
|
4849
|
-
var getStylesBySize$
|
|
4849
|
+
var getStylesBySize$a = function (size, theme) {
|
|
4850
4850
|
switch (size) {
|
|
4851
4851
|
case exports.ComponentSize.Medium:
|
|
4852
4852
|
return {
|
|
@@ -4863,7 +4863,7 @@ var getStylesBySize$9 = function (size, theme) {
|
|
|
4863
4863
|
var SimpleSelector = function (_a) {
|
|
4864
4864
|
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick, id = _a.id;
|
|
4865
4865
|
var theme = useTheme();
|
|
4866
|
-
var stylesBySize = getStylesBySize$
|
|
4866
|
+
var stylesBySize = getStylesBySize$a(size, theme);
|
|
4867
4867
|
var activeStyles = active
|
|
4868
4868
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
4869
4869
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
@@ -4912,9 +4912,9 @@ var SelectorSecondary = function (_a) {
|
|
|
4912
4912
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4913
4913
|
// `variants` styles that are consistent through all themes.
|
|
4914
4914
|
var TAGS = {
|
|
4915
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4916
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4917
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4915
|
+
hero1: newStyled.h1(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject([""], [""]))),
|
|
4916
|
+
hero2: newStyled.h2(templateObject_2$W || (templateObject_2$W = __makeTemplateObject([""], [""]))),
|
|
4917
|
+
hero3: newStyled.h3(templateObject_3$J || (templateObject_3$J = __makeTemplateObject([""], [""]))),
|
|
4918
4918
|
display1: newStyled.h1(templateObject_4$v || (templateObject_4$v = __makeTemplateObject([""], [""]))),
|
|
4919
4919
|
display2: newStyled.h2(templateObject_5$i || (templateObject_5$i = __makeTemplateObject([""], [""]))),
|
|
4920
4920
|
heading1: newStyled.h1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject([""], [""]))),
|
|
@@ -5036,9 +5036,9 @@ var DEFAULTS = {
|
|
|
5036
5036
|
size: 'regular',
|
|
5037
5037
|
},
|
|
5038
5038
|
};
|
|
5039
|
-
var templateObject_1$
|
|
5039
|
+
var templateObject_1$1q, templateObject_2$W, templateObject_3$J, templateObject_4$v, 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;
|
|
5040
5040
|
|
|
5041
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5041
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __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) {
|
|
5042
5042
|
var inline = _a.inline;
|
|
5043
5043
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5044
5044
|
});
|
|
@@ -5057,9 +5057,9 @@ var SizeSelector = function (_a) {
|
|
|
5057
5057
|
}, 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));
|
|
5058
5058
|
}) }), void 0)] }), void 0));
|
|
5059
5059
|
};
|
|
5060
|
-
var templateObject_1$
|
|
5060
|
+
var templateObject_1$1p;
|
|
5061
5061
|
|
|
5062
|
-
var getStylesBySize$
|
|
5062
|
+
var getStylesBySize$9 = function (size) {
|
|
5063
5063
|
switch (size) {
|
|
5064
5064
|
case exports.ComponentSize.Large:
|
|
5065
5065
|
case exports.ComponentSize.Medium:
|
|
@@ -5077,14 +5077,14 @@ var getStylesBySize$8 = function (size) {
|
|
|
5077
5077
|
}
|
|
5078
5078
|
};
|
|
5079
5079
|
var textButtonStyles$1 = function (theme, size) {
|
|
5080
|
-
var stylesBySize = getStylesBySize$
|
|
5080
|
+
var stylesBySize = getStylesBySize$9(size);
|
|
5081
5081
|
return __assign$1(__assign$1({ border: 'none', background: 'transparent', padding: 0, color: theme.colors.shades['550'].color, alignItems: 'center', fontFamily: theme.fonts.config[0].family, lineHeight: theme.component.textButton.lineHeight, fontWeight: theme.component.textButton.fontWeight, textDecorationLine: 'underline' }, stylesBySize), { '&:disabled': {
|
|
5082
5082
|
color: theme.colors.shades['250'].color,
|
|
5083
5083
|
textDecorationLine: 'none',
|
|
5084
5084
|
} });
|
|
5085
5085
|
};
|
|
5086
5086
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5087
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5087
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1o || (templateObject_1$1o = __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));
|
|
5088
5088
|
};
|
|
5089
5089
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5090
5090
|
if (disabled)
|
|
@@ -5100,18 +5100,18 @@ var TextButton = function (_a) {
|
|
|
5100
5100
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5101
5101
|
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));
|
|
5102
5102
|
};
|
|
5103
|
-
var templateObject_1$
|
|
5103
|
+
var templateObject_1$1o;
|
|
5104
5104
|
|
|
5105
|
-
var Container$
|
|
5106
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
5107
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5105
|
+
var Container$Y = newStyled.div(templateObject_1$1n || (templateObject_1$1n = __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"])));
|
|
5106
|
+
var P$2 = newStyled.p(templateObject_2$V || (templateObject_2$V = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5107
|
+
var PercentageSpan = newStyled.span(templateObject_3$I || (templateObject_3$I = __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"])));
|
|
5108
5108
|
var SizeFitGuide = function (_a) {
|
|
5109
5109
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5110
|
-
return (jsxRuntime.jsxs(Container$
|
|
5110
|
+
return (jsxRuntime.jsxs(Container$Y, { 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));
|
|
5111
5111
|
};
|
|
5112
|
-
var templateObject_1$
|
|
5112
|
+
var templateObject_1$1n, templateObject_2$V, templateObject_3$I;
|
|
5113
5113
|
|
|
5114
|
-
var getStylesBySize$
|
|
5114
|
+
var getStylesBySize$8 = function (size) {
|
|
5115
5115
|
switch (size) {
|
|
5116
5116
|
case exports.ComponentSize.Large:
|
|
5117
5117
|
return {
|
|
@@ -5139,7 +5139,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5139
5139
|
};
|
|
5140
5140
|
}
|
|
5141
5141
|
};
|
|
5142
|
-
var Container$
|
|
5142
|
+
var Container$X = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
5143
5143
|
var backgroundColor = _a.backgroundColor;
|
|
5144
5144
|
return backgroundColor;
|
|
5145
5145
|
}, function (_a) {
|
|
@@ -5148,39 +5148,39 @@ var Container$V = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __
|
|
|
5148
5148
|
}, function (_a) {
|
|
5149
5149
|
var _b;
|
|
5150
5150
|
var size = _a.size;
|
|
5151
|
-
return (_b = getStylesBySize$
|
|
5151
|
+
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5152
5152
|
}, function (_a) {
|
|
5153
5153
|
var _b;
|
|
5154
5154
|
var size = _a.size;
|
|
5155
|
-
return (_b = getStylesBySize$
|
|
5155
|
+
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5156
5156
|
}, function (_a) {
|
|
5157
5157
|
var size = _a.size;
|
|
5158
5158
|
return (size === exports.ComponentSize.Small ? '2rem' : 'unset');
|
|
5159
5159
|
}, function (_a) {
|
|
5160
5160
|
var _b;
|
|
5161
5161
|
var size = _a.size;
|
|
5162
|
-
return (_b = getStylesBySize$
|
|
5162
|
+
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5163
5163
|
});
|
|
5164
|
-
var H3$
|
|
5164
|
+
var H3$3 = newStyled.h3(templateObject_2$U || (templateObject_2$U = __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) {
|
|
5165
5165
|
var textColor = _a.textColor;
|
|
5166
5166
|
return textColor;
|
|
5167
5167
|
}, function (_a) {
|
|
5168
5168
|
var _b;
|
|
5169
5169
|
var size = _a.size;
|
|
5170
|
-
return (_b = getStylesBySize$
|
|
5170
|
+
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5171
5171
|
}, function (_a) {
|
|
5172
5172
|
var _b;
|
|
5173
5173
|
var size = _a.size;
|
|
5174
|
-
return (_b = getStylesBySize$
|
|
5174
|
+
return (_b = getStylesBySize$8(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5175
5175
|
});
|
|
5176
5176
|
var DiscountTag = function (_a) {
|
|
5177
5177
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5178
5178
|
var theme = useTheme();
|
|
5179
|
-
return (jsxRuntime.jsx(Container$
|
|
5179
|
+
return (jsxRuntime.jsx(Container$X, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style }, { children: jsxRuntime.jsxs(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5180
5180
|
};
|
|
5181
|
-
var templateObject_1$
|
|
5181
|
+
var templateObject_1$1m, templateObject_2$U;
|
|
5182
5182
|
|
|
5183
|
-
var getStylesBySize$
|
|
5183
|
+
var getStylesBySize$7 = function (size) {
|
|
5184
5184
|
switch (size) {
|
|
5185
5185
|
case exports.ComponentSize.Large:
|
|
5186
5186
|
return {
|
|
@@ -5208,8 +5208,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5208
5208
|
};
|
|
5209
5209
|
}
|
|
5210
5210
|
};
|
|
5211
|
-
var Container$
|
|
5212
|
-
var Price = newStyled.p(templateObject_2$
|
|
5211
|
+
var Container$W = newStyled.div(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5212
|
+
var Price = newStyled.p(templateObject_2$T || (templateObject_2$T = __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) {
|
|
5213
5213
|
var weight = _a.weight;
|
|
5214
5214
|
return (weight ? weight : '400');
|
|
5215
5215
|
}, function (_a) {
|
|
@@ -5217,13 +5217,13 @@ var Price = newStyled.p(templateObject_2$R || (templateObject_2$R = __makeTempla
|
|
|
5217
5217
|
var size = _a.size, finalPriceStyled = _a.finalPriceStyled, finalPriceStyledSmall = _a.finalPriceStyledSmall;
|
|
5218
5218
|
return finalPriceStyled || finalPriceStyledSmall
|
|
5219
5219
|
? finalPriceStyledSmall
|
|
5220
|
-
? (_b = getStylesBySize$
|
|
5221
|
-
: (_c = getStylesBySize$
|
|
5222
|
-
: (_d = getStylesBySize$
|
|
5220
|
+
? (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.finalPricefontSizeSmall
|
|
5221
|
+
: (_c = getStylesBySize$7(size)) === null || _c === void 0 ? void 0 : _c.finalPricefontSize
|
|
5222
|
+
: (_d = getStylesBySize$7(size)) === null || _d === void 0 ? void 0 : _d.fontSize;
|
|
5223
5223
|
}, function (_a) {
|
|
5224
5224
|
var _b;
|
|
5225
5225
|
var size = _a.size;
|
|
5226
|
-
return (_b = getStylesBySize$
|
|
5226
|
+
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5227
5227
|
}, function (_a) {
|
|
5228
5228
|
var color = _a.color;
|
|
5229
5229
|
return color;
|
|
@@ -5233,15 +5233,15 @@ var Price = newStyled.p(templateObject_2$R || (templateObject_2$R = __makeTempla
|
|
|
5233
5233
|
}, function (_a) {
|
|
5234
5234
|
var _b;
|
|
5235
5235
|
var margin = _a.margin, size = _a.size;
|
|
5236
|
-
return (margin ? (_b = getStylesBySize$
|
|
5236
|
+
return (margin ? (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
5237
5237
|
}, function (_a) {
|
|
5238
5238
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5239
5239
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5240
5240
|
});
|
|
5241
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5241
|
+
var TagContainer = newStyled.p(templateObject_3$H || (templateObject_3$H = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5242
5242
|
var _b;
|
|
5243
5243
|
var size = _a.size;
|
|
5244
|
-
return (_b = getStylesBySize$
|
|
5244
|
+
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
5245
5245
|
});
|
|
5246
5246
|
function getTestId() {
|
|
5247
5247
|
var args = [];
|
|
@@ -5259,18 +5259,88 @@ var PriceLabel = function (_a) {
|
|
|
5259
5259
|
weight: 700,
|
|
5260
5260
|
};
|
|
5261
5261
|
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)); };
|
|
5262
|
-
return (jsxRuntime.jsxs(Container$
|
|
5262
|
+
return (jsxRuntime.jsxs(Container$W, { 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));
|
|
5263
|
+
};
|
|
5264
|
+
var templateObject_1$1l, templateObject_2$T, templateObject_3$H;
|
|
5265
|
+
|
|
5266
|
+
var getStylesBySize$6 = function (size) {
|
|
5267
|
+
switch (size) {
|
|
5268
|
+
case exports.ComponentSize.Large:
|
|
5269
|
+
return {
|
|
5270
|
+
borderRadius: '0.375rem',
|
|
5271
|
+
padding: '0 0.75rem',
|
|
5272
|
+
fontSize: '0.875rem',
|
|
5273
|
+
lineHeight: '1.125rem',
|
|
5274
|
+
height: '1.75rem',
|
|
5275
|
+
};
|
|
5276
|
+
case exports.ComponentSize.Medium:
|
|
5277
|
+
return {
|
|
5278
|
+
borderRadius: '0.25rem',
|
|
5279
|
+
padding: '0 0.5rem',
|
|
5280
|
+
fontSize: '0.75rem',
|
|
5281
|
+
lineHeight: '1rem',
|
|
5282
|
+
height: '1.375rem',
|
|
5283
|
+
};
|
|
5284
|
+
case exports.ComponentSize.Small:
|
|
5285
|
+
return {
|
|
5286
|
+
borderRadius: '0.25rem',
|
|
5287
|
+
padding: '0',
|
|
5288
|
+
fontSize: '0.625rem',
|
|
5289
|
+
lineHeight: '0.75rem',
|
|
5290
|
+
height: '2rem',
|
|
5291
|
+
};
|
|
5292
|
+
}
|
|
5263
5293
|
};
|
|
5264
|
-
var templateObject_1$
|
|
5294
|
+
var Container$V = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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) {
|
|
5295
|
+
var backgroundColor = _a.backgroundColor;
|
|
5296
|
+
return backgroundColor;
|
|
5297
|
+
}, function (_a) {
|
|
5298
|
+
var borderColor = _a.borderColor;
|
|
5299
|
+
return borderColor;
|
|
5300
|
+
}, function (_a) {
|
|
5301
|
+
var _b;
|
|
5302
|
+
var size = _a.size;
|
|
5303
|
+
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
5304
|
+
}, function (_a) {
|
|
5305
|
+
var _b;
|
|
5306
|
+
var size = _a.size;
|
|
5307
|
+
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
5308
|
+
}, function (_a) {
|
|
5309
|
+
var size = _a.size;
|
|
5310
|
+
return (size === exports.ComponentSize.Small ? '2rem' : 'unset');
|
|
5311
|
+
}, function (_a) {
|
|
5312
|
+
var _b;
|
|
5313
|
+
var size = _a.size;
|
|
5314
|
+
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5315
|
+
});
|
|
5316
|
+
var H3$2 = newStyled.h3(templateObject_2$S || (templateObject_2$S = __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) {
|
|
5317
|
+
var textColor = _a.textColor;
|
|
5318
|
+
return textColor;
|
|
5319
|
+
}, function (_a) {
|
|
5320
|
+
var _b;
|
|
5321
|
+
var size = _a.size;
|
|
5322
|
+
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
5323
|
+
}, function (_a) {
|
|
5324
|
+
var _b;
|
|
5325
|
+
var size = _a.size;
|
|
5326
|
+
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5327
|
+
});
|
|
5328
|
+
var ClubOfferTag = function (_a) {
|
|
5329
|
+
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5330
|
+
var theme = useTheme();
|
|
5331
|
+
return (jsxRuntime.jsx(Container$V, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsxRuntime.jsx(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: clubOfferText }), void 0) }), void 0));
|
|
5332
|
+
};
|
|
5333
|
+
var templateObject_1$1k, templateObject_2$S;
|
|
5265
5334
|
|
|
5266
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5335
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5267
5336
|
var PriceLabelV2 = function (_a) {
|
|
5268
5337
|
var _b;
|
|
5269
|
-
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;
|
|
5338
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
5270
5339
|
var theme = useTheme();
|
|
5271
5340
|
var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
|
|
5272
5341
|
var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
|
|
5273
5342
|
var isDiscount = discount && isDiffFinalAndOriginalPrice;
|
|
5343
|
+
var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
|
|
5274
5344
|
var supportedCurrencies = ['A$', 'CA$', '£'];
|
|
5275
5345
|
var currencySymbol = '$';
|
|
5276
5346
|
if (typeof finalPrice === 'string') {
|
|
@@ -5291,9 +5361,14 @@ var PriceLabelV2 = function (_a) {
|
|
|
5291
5361
|
weight: 700,
|
|
5292
5362
|
};
|
|
5293
5363
|
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)); };
|
|
5294
|
-
return (jsxRuntime.jsxs(Container$
|
|
5364
|
+
return (jsxRuntime.jsxs(Container$W, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Medium, style: {
|
|
5365
|
+
fontSize: '14px',
|
|
5366
|
+
letterSpacing: '0.05rem',
|
|
5367
|
+
padding: '20px 8px',
|
|
5368
|
+
borderRadius: '6px',
|
|
5369
|
+
} }), void 0)) }), void 0))] }, void 0));
|
|
5295
5370
|
};
|
|
5296
|
-
var templateObject_1$
|
|
5371
|
+
var templateObject_1$1j;
|
|
5297
5372
|
|
|
5298
5373
|
var OneColorSelector = function (_a) {
|
|
5299
5374
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5334,9 +5409,9 @@ var OutOfStock = function (_a) {
|
|
|
5334
5409
|
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));
|
|
5335
5410
|
};
|
|
5336
5411
|
|
|
5337
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5338
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5339
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5412
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5413
|
+
newStyled(lt.Label)(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5414
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$G || (templateObject_3$G = __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"])));
|
|
5340
5415
|
var Span = newStyled.span(templateObject_4$u || (templateObject_4$u = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5341
5416
|
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"])));
|
|
5342
5417
|
var Label$3 = function (_a) {
|
|
@@ -5356,23 +5431,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5356
5431
|
Option: Option,
|
|
5357
5432
|
OptionsContainer: OptionsContainer,
|
|
5358
5433
|
});
|
|
5359
|
-
var templateObject_1$
|
|
5434
|
+
var templateObject_1$1i, templateObject_2$R, templateObject_3$G, templateObject_4$u, templateObject_5$h;
|
|
5360
5435
|
|
|
5361
|
-
var Container$
|
|
5436
|
+
var Container$U = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __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) {
|
|
5362
5437
|
var borderColor = _a.borderColor;
|
|
5363
5438
|
return borderColor;
|
|
5364
5439
|
}, function (_a) {
|
|
5365
5440
|
var noStock = _a.noStock;
|
|
5366
5441
|
return (noStock ? '0.4' : '1');
|
|
5367
5442
|
});
|
|
5368
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5443
|
+
var Image$3 = newStyled.img(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5369
5444
|
var PatternSelector = function (_a) {
|
|
5370
5445
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5371
5446
|
var theme = useTheme();
|
|
5372
5447
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5373
|
-
return (jsxRuntime.jsx(Container$
|
|
5448
|
+
return (jsxRuntime.jsx(Container$U, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5374
5449
|
};
|
|
5375
|
-
var templateObject_1$
|
|
5450
|
+
var templateObject_1$1h, templateObject_2$Q;
|
|
5376
5451
|
|
|
5377
5452
|
var renderOptions$1 = function (options) {
|
|
5378
5453
|
if (options.length === 0) {
|
|
@@ -5577,7 +5652,7 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
5577
5652
|
literal: true,
|
|
5578
5653
|
});
|
|
5579
5654
|
|
|
5580
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5655
|
+
var Image$2 = newStyled.img(templateObject_1$1g || (templateObject_1$1g = __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) {
|
|
5581
5656
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5582
5657
|
return borderRadiusVariant &&
|
|
5583
5658
|
"\nborder-radius: 20px;\n";
|
|
@@ -5592,7 +5667,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5592
5667
|
var theme = useTheme();
|
|
5593
5668
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, srcSet: getSrcSet(imageUrl, 180, 360), alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5594
5669
|
};
|
|
5595
|
-
var templateObject_1$
|
|
5670
|
+
var templateObject_1$1g;
|
|
5596
5671
|
|
|
5597
5672
|
var Button$4 = newStyled.button(function () { return ({
|
|
5598
5673
|
background: 'transparent',
|
|
@@ -9836,14 +9911,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9836
9911
|
return Slider;
|
|
9837
9912
|
}(React__default["default"].Component);
|
|
9838
9913
|
|
|
9839
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9914
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1f || (templateObject_1$1f = __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) {
|
|
9840
9915
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9841
9916
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9842
9917
|
}, function (_a) {
|
|
9843
9918
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9844
9919
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9845
9920
|
});
|
|
9846
|
-
var templateObject_1$
|
|
9921
|
+
var templateObject_1$1f;
|
|
9847
9922
|
|
|
9848
9923
|
var getStylesBySize$5 = function (size) {
|
|
9849
9924
|
// rem units
|
|
@@ -9902,22 +9977,22 @@ var SliderNavigation = function (_a) {
|
|
|
9902
9977
|
} }, { 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));
|
|
9903
9978
|
};
|
|
9904
9979
|
|
|
9905
|
-
var horizontalStyles = css(templateObject_1$
|
|
9906
|
-
var verticalStyles = css(templateObject_2$
|
|
9907
|
-
var Container$
|
|
9980
|
+
var horizontalStyles = css(templateObject_1$1e || (templateObject_1$1e = __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"])));
|
|
9981
|
+
var verticalStyles = css(templateObject_2$P || (templateObject_2$P = __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"])));
|
|
9982
|
+
var Container$T = newStyled.div(templateObject_3$F || (templateObject_3$F = __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) {
|
|
9908
9983
|
var position = _a.position;
|
|
9909
9984
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9910
9985
|
});
|
|
9911
9986
|
var Button$3 = newStyled.button(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n outline: none;\n"])));
|
|
9912
9987
|
var ImagePreviewList = function (_a) {
|
|
9913
9988
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9914
|
-
return (jsxRuntime.jsx(Container$
|
|
9989
|
+
return (jsxRuntime.jsx(Container$T, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
|
|
9915
9990
|
arrowWidth: 0.75,
|
|
9916
9991
|
arrowHeight: 1.25,
|
|
9917
9992
|
arrowPadding: 1.625,
|
|
9918
9993
|
}, 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));
|
|
9919
9994
|
};
|
|
9920
|
-
var templateObject_1$
|
|
9995
|
+
var templateObject_1$1e, templateObject_2$P, templateObject_3$F, templateObject_4$t;
|
|
9921
9996
|
|
|
9922
9997
|
var propTypes = {exports: {}};
|
|
9923
9998
|
|
|
@@ -11510,24 +11585,24 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11510
11585
|
afterZoomOut: PropTypes.func
|
|
11511
11586
|
} : {};
|
|
11512
11587
|
|
|
11513
|
-
var Container$
|
|
11588
|
+
var Container$S = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
11514
11589
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11515
11590
|
return borderRadiusVariant &&
|
|
11516
11591
|
"\n border-radius: 40px;\n ";
|
|
11517
11592
|
});
|
|
11518
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11519
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11593
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$O || (templateObject_2$O = __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'); });
|
|
11594
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$E || (templateObject_3$E = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11520
11595
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
11521
11596
|
var ImageProductWithTags$1 = function (_a) {
|
|
11522
11597
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, ctaText = _a.ctaText, ctaAction = _a.ctaAction, hideCTA = _a.hideCTA;
|
|
11523
|
-
return (jsxRuntime.jsxs(Container$
|
|
11598
|
+
return (jsxRuntime.jsxs(Container$S, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11524
11599
|
alt: image.alt,
|
|
11525
11600
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11526
11601
|
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0), ctaText && ctaAction && (jsxRuntime.jsx("div", __assign$1({ style: { display: hideCTA ? 'none' : 'block' } }, { children: jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0) }), void 0))] }), void 0));
|
|
11527
11602
|
};
|
|
11528
|
-
var templateObject_1$
|
|
11603
|
+
var templateObject_1$1d, templateObject_2$O, templateObject_3$E, templateObject_4$s;
|
|
11529
11604
|
|
|
11530
|
-
var Container$
|
|
11605
|
+
var Container$R = newStyled.div(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
11531
11606
|
var ProductGallery = function (_a) {
|
|
11532
11607
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c;
|
|
11533
11608
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -11535,11 +11610,11 @@ var ProductGallery = function (_a) {
|
|
|
11535
11610
|
React$2.useEffect(function () {
|
|
11536
11611
|
setSelectedImage(initialValue);
|
|
11537
11612
|
}, [initialValue]);
|
|
11538
|
-
return (jsxRuntime.jsxs(Container$
|
|
11613
|
+
return (jsxRuntime.jsxs(Container$R, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11539
11614
|
setSelectedImage(value);
|
|
11540
11615
|
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA }, void 0)] }, void 0));
|
|
11541
11616
|
};
|
|
11542
|
-
var templateObject_1$
|
|
11617
|
+
var templateObject_1$1c;
|
|
11543
11618
|
|
|
11544
11619
|
/* base styles & size variants */
|
|
11545
11620
|
var StarStyles = {
|
|
@@ -11585,8 +11660,8 @@ var StarStyles = {
|
|
|
11585
11660
|
});
|
|
11586
11661
|
},
|
|
11587
11662
|
};
|
|
11588
|
-
var Container$
|
|
11589
|
-
var templateObject_1$
|
|
11663
|
+
var Container$Q = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11664
|
+
var templateObject_1$1b;
|
|
11590
11665
|
|
|
11591
11666
|
var StarContainer = newStyled.div(function (_a) {
|
|
11592
11667
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11604,7 +11679,7 @@ var sizes = {
|
|
|
11604
11679
|
var StarList = function (_a) {
|
|
11605
11680
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11606
11681
|
var theme = useTheme();
|
|
11607
|
-
return (jsxRuntime.jsx(Container$
|
|
11682
|
+
return (jsxRuntime.jsx(Container$Q, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11608
11683
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", size: size, theme: theme }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
11609
11684
|
}) }, void 0));
|
|
11610
11685
|
};
|
|
@@ -11648,8 +11723,8 @@ var LabelStyles = {
|
|
|
11648
11723
|
});
|
|
11649
11724
|
},
|
|
11650
11725
|
};
|
|
11651
|
-
var Container$
|
|
11652
|
-
var templateObject_1$
|
|
11726
|
+
var Container$P = newStyled.a(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11727
|
+
var templateObject_1$1a;
|
|
11653
11728
|
|
|
11654
11729
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11655
11730
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11687,11 +11762,11 @@ var Rating = function (_a) {
|
|
|
11687
11762
|
href: reviewsContainerId,
|
|
11688
11763
|
}
|
|
11689
11764
|
: {};
|
|
11690
|
-
return (jsxRuntime.jsxs(Container$
|
|
11765
|
+
return (jsxRuntime.jsxs(Container$P, __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));
|
|
11691
11766
|
};
|
|
11692
11767
|
|
|
11693
|
-
var Container$
|
|
11694
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
11768
|
+
var Container$O = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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"])));
|
|
11769
|
+
var P$1 = newStyled.p(templateObject_2$N || (templateObject_2$N = __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; });
|
|
11695
11770
|
var textButtonStyles = function (theme) { return ({
|
|
11696
11771
|
border: 'none',
|
|
11697
11772
|
background: 'transparent',
|
|
@@ -11704,9 +11779,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11704
11779
|
var FitPredictor = function (_a) {
|
|
11705
11780
|
var onClick = _a.onClick;
|
|
11706
11781
|
var theme = useTheme();
|
|
11707
|
-
return (jsxs(Container$
|
|
11782
|
+
return (jsxs(Container$O, __assign$1({ theme: theme }, { children: [jsx(Container$O, { 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));
|
|
11708
11783
|
};
|
|
11709
|
-
var templateObject_1$
|
|
11784
|
+
var templateObject_1$19, templateObject_2$N;
|
|
11710
11785
|
|
|
11711
11786
|
var H2 = newStyled.h2(function (_a) {
|
|
11712
11787
|
var color = _a.color;
|
|
@@ -11720,7 +11795,7 @@ var H2 = newStyled.h2(function (_a) {
|
|
|
11720
11795
|
margin: '0.938rem 4.188rem',
|
|
11721
11796
|
});
|
|
11722
11797
|
});
|
|
11723
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11798
|
+
var Bar = newStyled.div(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: ", ";\n background-color: ", ";\n width: ", ";\n border-radius: ", ";\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11724
11799
|
var height = _a.height;
|
|
11725
11800
|
return height || '0.5rem';
|
|
11726
11801
|
}, function (_a) {
|
|
@@ -11749,7 +11824,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11749
11824
|
position: 'absolute',
|
|
11750
11825
|
});
|
|
11751
11826
|
});
|
|
11752
|
-
var Container$
|
|
11827
|
+
var Container$N = newStyled.div(function (_a) {
|
|
11753
11828
|
var widthAuto = _a.widthAuto, description = _a.description;
|
|
11754
11829
|
return ({
|
|
11755
11830
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11763,9 +11838,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11763
11838
|
var ProgressBar = function (_a) {
|
|
11764
11839
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent, height = _a.height, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius;
|
|
11765
11840
|
var theme = useTheme();
|
|
11766
|
-
return (jsxRuntime.jsxs(Container$
|
|
11841
|
+
return (jsxRuntime.jsxs(Container$N, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto, description: description }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: backgroundColor || theme.colors.shades['100'].color, height: height, borderRadius: borderRadius, "data-testid": "PBBackground" }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent, height: height, borderRadius: borderRadius }, void 0) }), void 0), description && jsxRuntime.jsx(H2, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11767
11842
|
};
|
|
11768
|
-
var templateObject_1$
|
|
11843
|
+
var templateObject_1$18;
|
|
11769
11844
|
|
|
11770
11845
|
var getStylesBySize$4 = function (size) {
|
|
11771
11846
|
switch (size) {
|
|
@@ -11786,7 +11861,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11786
11861
|
};
|
|
11787
11862
|
}
|
|
11788
11863
|
};
|
|
11789
|
-
var Container$
|
|
11864
|
+
var Container$M = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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) {
|
|
11790
11865
|
var backgroundColor = _a.backgroundColor;
|
|
11791
11866
|
return backgroundColor;
|
|
11792
11867
|
}, function (_a) {
|
|
@@ -11814,9 +11889,9 @@ var Container$L = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __
|
|
|
11814
11889
|
var IconButton = function (_a) {
|
|
11815
11890
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11816
11891
|
var theme = useTheme();
|
|
11817
|
-
return (jsxRuntime.jsx(Container$
|
|
11892
|
+
return (jsxRuntime.jsx(Container$M, __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));
|
|
11818
11893
|
};
|
|
11819
|
-
var templateObject_1$
|
|
11894
|
+
var templateObject_1$17;
|
|
11820
11895
|
|
|
11821
11896
|
var TooltipArrow = function (_a) {
|
|
11822
11897
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11896,7 +11971,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11896
11971
|
}
|
|
11897
11972
|
};
|
|
11898
11973
|
|
|
11899
|
-
var Wrapper$
|
|
11974
|
+
var Wrapper$6 = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
11900
11975
|
var position = _a.position;
|
|
11901
11976
|
return getWrapperFlexDirection(position);
|
|
11902
11977
|
});
|
|
@@ -11921,14 +11996,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11921
11996
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11922
11997
|
return actual === expected ? margin : '0';
|
|
11923
11998
|
};
|
|
11924
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11999
|
+
var ContentWrapper = newStyled.div(templateObject_2$M || (templateObject_2$M = __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) {
|
|
11925
12000
|
var borderColor = _a.borderColor;
|
|
11926
12001
|
return borderColor;
|
|
11927
12002
|
}, function (_a) {
|
|
11928
12003
|
var backgroundColor = _a.backgroundColor;
|
|
11929
12004
|
return backgroundColor;
|
|
11930
12005
|
});
|
|
11931
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
12006
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
11932
12007
|
var position = _a.position;
|
|
11933
12008
|
return getArrowRotation(position);
|
|
11934
12009
|
}, function (_a) {
|
|
@@ -11948,7 +12023,7 @@ var Title$7 = newStyled.h1(templateObject_6$e || (templateObject_6$e = __makeTem
|
|
|
11948
12023
|
return color;
|
|
11949
12024
|
});
|
|
11950
12025
|
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"])));
|
|
11951
|
-
var templateObject_1$
|
|
12026
|
+
var templateObject_1$16, templateObject_2$M, templateObject_3$D, templateObject_4$r, templateObject_5$g, templateObject_6$e, templateObject_7$8;
|
|
11952
12027
|
|
|
11953
12028
|
var Tooltip = function (_a) {
|
|
11954
12029
|
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;
|
|
@@ -11965,7 +12040,7 @@ var Tooltip = function (_a) {
|
|
|
11965
12040
|
var ref = tooltipRef.current;
|
|
11966
12041
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
11967
12042
|
}, [tooltipRef]);
|
|
11968
|
-
return (jsxRuntime.jsxs(Wrapper$
|
|
12043
|
+
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$5, { children: React__default["default"].createElement(header.Icon, {
|
|
11969
12044
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
11970
12045
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
11971
12046
|
: theme.colors.pallete.secondary.color,
|
|
@@ -12035,7 +12110,7 @@ var AccordionDetailsStyles = {
|
|
|
12035
12110
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
12036
12111
|
var StyledButton$1 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, function (props) { return [AccordionSummaryStyles[props.variant](props.theme, props.disabled)]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
12037
12112
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
12038
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
12113
|
+
var StyledContent = newStyled.button(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n"])));
|
|
12039
12114
|
var Accordion$1 = function (_a) {
|
|
12040
12115
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
12041
12116
|
var theme = useTheme();
|
|
@@ -12047,7 +12122,110 @@ var Accordion$1 = function (_a) {
|
|
|
12047
12122
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton$1, __assign$1({ theme: theme, variant: variant, disabled: disabled, titlecolor: titleColor }, { children: [showPanel && headerOnOpen ? headerOnOpen : header, jsxRuntime.jsx(ControlIcon, { title: openWithForce ? 'close icon' : 'open icon', height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0)] }), void 0), showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
12048
12123
|
} }), void 0));
|
|
12049
12124
|
};
|
|
12050
|
-
var templateObject_1$
|
|
12125
|
+
var templateObject_1$15;
|
|
12126
|
+
|
|
12127
|
+
/* base styles & size variants */
|
|
12128
|
+
var CustomRadioStyles$1 = {
|
|
12129
|
+
baseStyles: function (theme, disabled) {
|
|
12130
|
+
return css({
|
|
12131
|
+
borderRadius: '50%',
|
|
12132
|
+
height: '100%',
|
|
12133
|
+
width: '100%',
|
|
12134
|
+
boxSizing: 'border-box',
|
|
12135
|
+
borderStyle: 'solid',
|
|
12136
|
+
background: theme.component.radio.background,
|
|
12137
|
+
borderColor: disabled ? theme.colors.border.disabled : theme.component.radio.borderColor,
|
|
12138
|
+
});
|
|
12139
|
+
},
|
|
12140
|
+
small: function (theme, active) {
|
|
12141
|
+
return css({
|
|
12142
|
+
borderWidth: active
|
|
12143
|
+
? theme.component.radio.size.small.active.borderWidth
|
|
12144
|
+
: theme.component.radio.size.small.borderWidth,
|
|
12145
|
+
});
|
|
12146
|
+
},
|
|
12147
|
+
medium: function (theme, active) {
|
|
12148
|
+
return css({
|
|
12149
|
+
borderWidth: active
|
|
12150
|
+
? theme.component.radio.size.medium.active.borderWidth
|
|
12151
|
+
: theme.component.radio.size.medium.borderWidth,
|
|
12152
|
+
});
|
|
12153
|
+
},
|
|
12154
|
+
large: function (theme, active) {
|
|
12155
|
+
return css({
|
|
12156
|
+
borderWidth: active
|
|
12157
|
+
? theme.component.radio.size.large.active.borderWidth
|
|
12158
|
+
: theme.component.radio.size.large.borderWidth,
|
|
12159
|
+
});
|
|
12160
|
+
},
|
|
12161
|
+
};
|
|
12162
|
+
/* base styles & size variants */
|
|
12163
|
+
var ContainerStyles$1 = {
|
|
12164
|
+
baseStyles: css({
|
|
12165
|
+
position: 'relative',
|
|
12166
|
+
}),
|
|
12167
|
+
small: function (theme) {
|
|
12168
|
+
return css({
|
|
12169
|
+
height: theme.component.radio.size.small.height,
|
|
12170
|
+
width: theme.component.radio.size.small.height,
|
|
12171
|
+
marginRight: theme.component.radio.size.small.margin,
|
|
12172
|
+
});
|
|
12173
|
+
},
|
|
12174
|
+
medium: function (theme) {
|
|
12175
|
+
return css({
|
|
12176
|
+
height: theme.component.radio.size.medium.height,
|
|
12177
|
+
width: theme.component.radio.size.medium.height,
|
|
12178
|
+
marginRight: theme.component.radio.size.medium.margin,
|
|
12179
|
+
});
|
|
12180
|
+
},
|
|
12181
|
+
large: function (theme) {
|
|
12182
|
+
return css({
|
|
12183
|
+
height: theme.component.radio.size.large.height,
|
|
12184
|
+
width: theme.component.radio.size.large.height,
|
|
12185
|
+
marginRight: theme.component.radio.size.large.margin,
|
|
12186
|
+
});
|
|
12187
|
+
},
|
|
12188
|
+
};
|
|
12189
|
+
|
|
12190
|
+
var Wrapper$5 = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12191
|
+
var Container$L = newStyled.div(__assign$1({}, ContainerStyles$1.baseStyles), function (props) { return [ContainerStyles$1[props.size](props.theme)]; });
|
|
12192
|
+
var Input$3 = newStyled.input(templateObject_2$L || (templateObject_2$L = __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) {
|
|
12193
|
+
var disabled = _a.disabled;
|
|
12194
|
+
return (disabled ? 'not-allowed' : 'pointer');
|
|
12195
|
+
});
|
|
12196
|
+
var CustomRadio$1 = newStyled.div(function (props) { return [
|
|
12197
|
+
CustomRadioStyles$1.baseStyles(props.theme, props.disabled),
|
|
12198
|
+
CustomRadioStyles$1[props.size](props.theme, props.isChecked),
|
|
12199
|
+
]; });
|
|
12200
|
+
var StyledLabel$2 = newStyled(Label$4)(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12201
|
+
var theme = _a.theme;
|
|
12202
|
+
return theme.component.radio.textSize;
|
|
12203
|
+
}, function (_a) {
|
|
12204
|
+
var theme = _a.theme;
|
|
12205
|
+
return theme.component.radio.lineHeight;
|
|
12206
|
+
});
|
|
12207
|
+
var RadioInput = function (_a) {
|
|
12208
|
+
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
|
|
12209
|
+
var theme = useTheme();
|
|
12210
|
+
var handleChange = function (event, label) {
|
|
12211
|
+
var value = event.currentTarget.value;
|
|
12212
|
+
onChange({ value: value, label: label });
|
|
12213
|
+
};
|
|
12214
|
+
return (jsxRuntime.jsxs(Wrapper$5, { children: [jsxRuntime.jsxs(Container$L, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$3, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsxRuntime.jsx(CustomRadio$1, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
12215
|
+
};
|
|
12216
|
+
var templateObject_1$14, templateObject_2$L, templateObject_3$C;
|
|
12217
|
+
|
|
12218
|
+
var RadioGroupInput = function (_a) {
|
|
12219
|
+
var style = _a.style, 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;
|
|
12220
|
+
var _e = React$2.useState(value), selectedInput = _e[0], setSelectedInput = _e[1];
|
|
12221
|
+
var handleChange = function (selected) {
|
|
12222
|
+
setSelectedInput(selected);
|
|
12223
|
+
onChange(selected);
|
|
12224
|
+
};
|
|
12225
|
+
return (jsxRuntime.jsx("div", __assign$1({ "data-testid": "group-container" }, { children: options.map(function (option, index) {
|
|
12226
|
+
return (jsxRuntime.jsx(RadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input", style: style }, index));
|
|
12227
|
+
}) }), void 0));
|
|
12228
|
+
};
|
|
12051
12229
|
|
|
12052
12230
|
/* base styles & size variants */
|
|
12053
12231
|
var CustomRadioStyles = {
|
|
@@ -12112,7 +12290,7 @@ var ContainerStyles = {
|
|
|
12112
12290
|
},
|
|
12113
12291
|
};
|
|
12114
12292
|
|
|
12115
|
-
var Wrapper$4 = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
12293
|
+
var Wrapper$4 = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n"])));
|
|
12116
12294
|
var Container$K = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
12117
12295
|
var Input$2 = newStyled.input(templateObject_2$K || (templateObject_2$K = __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) {
|
|
12118
12296
|
var disabled = _a.disabled;
|
|
@@ -12122,25 +12300,25 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
12122
12300
|
CustomRadioStyles.baseStyles(props.theme, props.disabled),
|
|
12123
12301
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
12124
12302
|
]; });
|
|
12125
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
12303
|
+
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$B || (templateObject_3$B = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n &[aria-checked='true'] {\n color: var(--colors-pallete-wine-color);\n }\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n &[aria-checked='true'] {\n color: var(--colors-pallete-wine-color);\n }\n"])), function (_a) {
|
|
12126
12304
|
var theme = _a.theme;
|
|
12127
12305
|
return theme.component.radio.textSize;
|
|
12128
12306
|
}, function (_a) {
|
|
12129
12307
|
var theme = _a.theme;
|
|
12130
12308
|
return theme.component.radio.lineHeight;
|
|
12131
12309
|
});
|
|
12132
|
-
var
|
|
12310
|
+
var ClubRadioInput = function (_a) {
|
|
12133
12311
|
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
|
|
12134
12312
|
var theme = useTheme();
|
|
12135
12313
|
var handleChange = function (event, label) {
|
|
12136
12314
|
var value = event.currentTarget.value;
|
|
12137
12315
|
onChange({ value: value, label: label });
|
|
12138
12316
|
};
|
|
12139
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$K, __assign$1({ theme: theme, size: size, style: style, "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, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, 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));
|
|
12317
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$K, __assign$1({ theme: theme, size: size, style: style, "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, style: style }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled, "aria-checked": checked }, { children: label }), void 0)] }, void 0));
|
|
12140
12318
|
};
|
|
12141
12319
|
var templateObject_1$13, templateObject_2$K, templateObject_3$B;
|
|
12142
12320
|
|
|
12143
|
-
var
|
|
12321
|
+
var ClubRadioGroupInput = function (_a) {
|
|
12144
12322
|
var style = _a.style, 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;
|
|
12145
12323
|
var _e = React$2.useState(value), selectedInput = _e[0], setSelectedInput = _e[1];
|
|
12146
12324
|
var handleChange = function (selected) {
|
|
@@ -12148,7 +12326,7 @@ var RadioGroupInput = function (_a) {
|
|
|
12148
12326
|
onChange(selected);
|
|
12149
12327
|
};
|
|
12150
12328
|
return (jsxRuntime.jsx("div", __assign$1({ "data-testid": "group-container" }, { children: options.map(function (option, index) {
|
|
12151
|
-
return (jsxRuntime.jsx(
|
|
12329
|
+
return (jsxRuntime.jsx(ClubRadioInput, { id: "".concat(index), name: name, value: option.value, label: option.label, onChange: function (option) { return handleChange(option); }, checked: option.value === (selectedInput === null || selectedInput === void 0 ? void 0 : selectedInput.value), size: size, disabled: disabled, "data-testid": "input", style: style }, index));
|
|
12152
12330
|
}) }), void 0));
|
|
12153
12331
|
};
|
|
12154
12332
|
|
|
@@ -18508,6 +18686,8 @@ exports.Card = Card$3;
|
|
|
18508
18686
|
exports.CartProductItem = CartProductItem;
|
|
18509
18687
|
exports.CategoryTag = CategoryTag;
|
|
18510
18688
|
exports.Checkbox = Checkbox;
|
|
18689
|
+
exports.ClubOfferTag = ClubOfferTag;
|
|
18690
|
+
exports.ClubRadioGroupInput = ClubRadioGroupInput;
|
|
18511
18691
|
exports.Collection = Collection;
|
|
18512
18692
|
exports.CrossSell = index;
|
|
18513
18693
|
exports.DeliveryDetails = DeliveryDetails;
|