@trafilea/afrodita-components 5.0.0-beta.194 → 5.0.0-beta.196
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 +19 -2
- package/build/index.esm.js +412 -378
- package/build/index.esm.js.map +1 -1
- package/build/index.js +412 -377
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -676,6 +676,16 @@ var ShippingEmpty = function (_a) {
|
|
|
676
676
|
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 40, viewBoxY: 40, title: "Shipping empty" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M36.5585 17.0681L38.769 19.9111C38.9306 20.1163 39.0187 20.3728 38.9967 20.6366V28.3085C38.9967 28.9607 38.4679 29.4882 37.8143 29.4882H33.9588C33.4227 31.5107 31.5721 32.9981 29.3837 32.9981C27.1952 32.9981 25.3519 31.5033 24.8085 29.4882H17.7732C17.2371 31.5107 15.3864 32.9981 13.198 32.9981C11.0095 32.9981 9.16625 31.5033 8.62281 29.4882H5.53843C4.88483 29.4882 4.35608 28.9607 4.35608 28.3085C4.35608 27.6564 4.88483 27.1288 5.53843 27.1288H8.60813C9.12219 25.0771 10.9875 23.5456 13.2053 23.5456C15.4231 23.5456 17.2885 25.0697 17.8025 27.1288H24.8011C25.3152 25.0771 27.1805 23.5456 29.3983 23.5456C31.6162 23.5456 33.4815 25.0697 33.9955 27.1288H36.6466V21.0323L34.9209 18.812H25.7044C25.0508 18.812 24.5221 18.2844 24.5221 17.6323V9.35947H5.95703C5.30343 9.35947 4.77468 8.83189 4.77468 8.17974C4.77468 7.52758 5.30343 7 5.95703 7H25.7118C26.3654 7 26.8941 7.52758 26.8941 8.17974V9.35947H31.9466C32.3946 9.35947 32.8059 9.61593 33.0041 10.0116L36.5585 17.0681ZM31.2196 11.7263H26.8941V16.4525H33.599L31.2196 11.7263ZM10.8333 28.2792C10.8333 29.5835 11.8981 30.646 13.2053 30.646C14.5125 30.646 15.5774 29.5835 15.5774 28.2792C15.5774 26.9749 14.5125 25.9124 13.2053 25.9124C11.8981 25.9124 10.8333 26.9749 10.8333 28.2792ZM27.0263 28.2792C27.0263 29.5835 28.0912 30.646 29.3983 30.646C30.7055 30.646 31.7704 29.5835 31.7704 28.2792C31.7704 26.9749 30.7055 25.9124 29.3983 25.9124C28.0912 25.9124 27.0263 26.9749 27.0263 28.2792ZM9.57019 21.1495C10.2238 21.1495 10.7525 21.6771 10.7525 22.3292C10.7525 22.9814 10.2238 23.509 9.57019 23.509H4.12111C3.46751 23.509 2.93876 22.9814 2.93876 22.3292C2.93876 21.6771 3.46751 21.1495 4.12111 21.1495H9.57019ZM13.4771 17.6763C13.4771 17.0241 12.9483 16.4965 12.2947 16.4965H2.18235C1.52875 16.4965 1 17.0241 1 17.6763C1 18.3284 1.52875 18.856 2.18235 18.856H12.2947C12.9483 18.8633 13.4771 18.3357 13.4771 17.6763ZM14.2335 14.2103H4.12111C3.46751 14.2103 2.93876 13.6827 2.93876 13.0306C2.93876 12.3784 3.46751 11.8508 4.12111 11.8508H14.2335C14.8871 11.8508 15.4158 12.3784 15.4158 13.0306C15.4158 13.6827 14.8871 14.2103 14.2335 14.2103Z", fill: fill }, void 0) }), void 0));
|
|
677
677
|
};
|
|
678
678
|
|
|
679
|
+
var Drop = function (_a) {
|
|
680
|
+
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? '#292929' : _b;
|
|
681
|
+
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 14, viewBoxY: 14, title: "Drop", testId: "drop" }, { children: jsxRuntime.jsx("path", { d: "M7.00012 14C9.7116 14 11.9178 11.7944 11.9178 9.08303C11.9178 6.42765 7.309 0.400954 7.11273 0.145787L7.00012 0L6.88751 0.14674C6.69151 0.40143 2.08252 6.42855 2.08252 9.08351C2.08257 11.7944 4.28869 14 7.00012 14Z", fill: fill }, void 0) }), void 0));
|
|
682
|
+
};
|
|
683
|
+
|
|
684
|
+
var DropEmpty = function (_a) {
|
|
685
|
+
var height = _a.height, width = _a.width, _b = _a.fill, fill = _b === void 0 ? '#292929' : _b;
|
|
686
|
+
return (jsxRuntime.jsx(IconWrapper$1, __assign$1({ width: width, height: height, viewBoxX: 14, viewBoxY: 14, title: "DropEmpty", testId: "drop-empty" }, { children: jsxRuntime.jsx("path", { d: "M4.83473 3.98127C5.69171 2.61907 6.56268 1.41655 7.00046 0.827652C7.43854 1.417 8.30908 2.61902 9.16563 3.98057C9.74824 4.90668 10.3181 5.89672 10.7406 6.81183C11.1711 7.74408 11.4178 8.53462 11.4178 9.08303C11.4178 11.5181 9.43554 13.5 7.00012 13.5C4.56474 13.5 2.58257 11.5181 2.58252 9.08351C2.58252 8.53521 2.8292 7.74474 3.25968 6.81251C3.68223 5.89741 4.25211 4.90737 4.83473 3.98127Z", stroke: fill, fill: "white" }, void 0) }), void 0));
|
|
687
|
+
};
|
|
688
|
+
|
|
679
689
|
var PDP = /*#__PURE__*/Object.freeze({
|
|
680
690
|
__proto__: null,
|
|
681
691
|
Clock: Clock,
|
|
@@ -693,7 +703,9 @@ var PDP = /*#__PURE__*/Object.freeze({
|
|
|
693
703
|
CircleNumber: CircleNumber,
|
|
694
704
|
SizeEmpty: SizeEmpty,
|
|
695
705
|
PlayMini: PlayMini,
|
|
696
|
-
ShippingEmpty: ShippingEmpty
|
|
706
|
+
ShippingEmpty: ShippingEmpty,
|
|
707
|
+
Drop: Drop,
|
|
708
|
+
DropEmpty: DropEmpty
|
|
697
709
|
});
|
|
698
710
|
|
|
699
711
|
var Facebook = function (_a) {
|
|
@@ -4095,7 +4107,7 @@ exports.InputValidationType = void 0;
|
|
|
4095
4107
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
4096
4108
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
4097
4109
|
|
|
4098
|
-
var Section = newStyled.div(templateObject_1$
|
|
4110
|
+
var Section = newStyled.div(templateObject_1$1v || (templateObject_1$1v = __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) {
|
|
4099
4111
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
4100
4112
|
});
|
|
4101
4113
|
var CardHeader = function (_a) {
|
|
@@ -4106,14 +4118,14 @@ var CardFooter = function (_a) {
|
|
|
4106
4118
|
var children = _a.children;
|
|
4107
4119
|
return (jsxRuntime.jsx(Section, __assign$1({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
4108
4120
|
};
|
|
4109
|
-
var templateObject_1$
|
|
4121
|
+
var templateObject_1$1v;
|
|
4110
4122
|
|
|
4111
|
-
var Body = newStyled.div(templateObject_1$
|
|
4123
|
+
var Body = newStyled.div(templateObject_1$1u || (templateObject_1$1u = __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"])));
|
|
4112
4124
|
var CardBody = function (_a) {
|
|
4113
4125
|
var children = _a.children;
|
|
4114
4126
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
4115
4127
|
};
|
|
4116
|
-
var templateObject_1$
|
|
4128
|
+
var templateObject_1$1u;
|
|
4117
4129
|
|
|
4118
4130
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
4119
4131
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -4258,7 +4270,7 @@ var AssetsProvider = function (_a) {
|
|
|
4258
4270
|
};
|
|
4259
4271
|
var useThemeAssets = function () { return React$2.useContext(AssetsContext); };
|
|
4260
4272
|
|
|
4261
|
-
var Container$
|
|
4273
|
+
var Container$Z = newStyled.div(templateObject_1$1t || (templateObject_1$1t = __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) {
|
|
4262
4274
|
var flex = _a.flex;
|
|
4263
4275
|
return flex &&
|
|
4264
4276
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -4273,14 +4285,14 @@ var Container$X = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __
|
|
|
4273
4285
|
var Card$2 = function (_a) {
|
|
4274
4286
|
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;
|
|
4275
4287
|
var theme = useTheme();
|
|
4276
|
-
return (jsxRuntime.jsx(Container$
|
|
4288
|
+
return (jsxRuntime.jsx(Container$Z, __assign$1({ backgroundColor: backgroundColor ? backgroundColor : theme.component.card.backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
4277
4289
|
};
|
|
4278
4290
|
var Card$3 = Object.assign(Card$2, {
|
|
4279
4291
|
Header: CardHeader,
|
|
4280
4292
|
Footer: CardFooter,
|
|
4281
4293
|
Body: CardBody,
|
|
4282
4294
|
});
|
|
4283
|
-
var templateObject_1$
|
|
4295
|
+
var templateObject_1$1t;
|
|
4284
4296
|
|
|
4285
4297
|
var Fragment = jsxRuntime.Fragment;
|
|
4286
4298
|
function jsx(type, props, key) {
|
|
@@ -4426,7 +4438,7 @@ function BaseSelectOption(_a) {
|
|
|
4426
4438
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4427
4439
|
}
|
|
4428
4440
|
|
|
4429
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4441
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1s || (templateObject_1$1s = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4430
4442
|
function BaseSelect(_a) {
|
|
4431
4443
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4432
4444
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4436,7 +4448,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4436
4448
|
Options: BaseSelectOptions,
|
|
4437
4449
|
Option: BaseSelectOption,
|
|
4438
4450
|
});
|
|
4439
|
-
var templateObject_1$
|
|
4451
|
+
var templateObject_1$1s;
|
|
4440
4452
|
|
|
4441
4453
|
var CustomButton = newStyled.button(function (_a) {
|
|
4442
4454
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4493,14 +4505,14 @@ var withLabel = function (Button, label) {
|
|
|
4493
4505
|
};
|
|
4494
4506
|
};
|
|
4495
4507
|
|
|
4496
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4497
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4508
|
+
var ErrorText = newStyled.h3(templateObject_1$1r || (templateObject_1$1r = __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; });
|
|
4509
|
+
var ErrorContainer = newStyled.div(templateObject_2$Y || (templateObject_2$Y = __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"])));
|
|
4498
4510
|
var Error$1 = function (_a) {
|
|
4499
4511
|
var error = _a.error;
|
|
4500
4512
|
var theme = useTheme();
|
|
4501
4513
|
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));
|
|
4502
4514
|
};
|
|
4503
|
-
var templateObject_1$
|
|
4515
|
+
var templateObject_1$1r, templateObject_2$Y;
|
|
4504
4516
|
|
|
4505
4517
|
var DropdownOptions = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4506
4518
|
var theme = _a.theme;
|
|
@@ -4666,7 +4678,7 @@ var CustomCheckboxStyles = {
|
|
|
4666
4678
|
},
|
|
4667
4679
|
};
|
|
4668
4680
|
|
|
4669
|
-
var Container$
|
|
4681
|
+
var Container$Y = newStyled.div(templateObject_1$1q || (templateObject_1$1q = __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"])));
|
|
4670
4682
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4671
4683
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4672
4684
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4677,7 +4689,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4677
4689
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4678
4690
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4679
4691
|
]; });
|
|
4680
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
4692
|
+
var Input$3 = newStyled.input(templateObject_2$X || (templateObject_2$X = __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) {
|
|
4681
4693
|
var disabled = _a.disabled;
|
|
4682
4694
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4683
4695
|
});
|
|
@@ -4706,9 +4718,9 @@ var Checkbox = function (_a) {
|
|
|
4706
4718
|
React$2.useEffect(function () {
|
|
4707
4719
|
mounted.current = true;
|
|
4708
4720
|
}, []);
|
|
4709
|
-
return (jsxRuntime.jsxs(Container$
|
|
4721
|
+
return (jsxRuntime.jsxs(Container$Y, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4710
4722
|
};
|
|
4711
|
-
var templateObject_1$
|
|
4723
|
+
var templateObject_1$1q, templateObject_2$X;
|
|
4712
4724
|
|
|
4713
4725
|
var CustomOption = newStyled.li(function (_a) {
|
|
4714
4726
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4755,8 +4767,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4755
4767
|
Option: BaseDropdownOption,
|
|
4756
4768
|
});
|
|
4757
4769
|
|
|
4758
|
-
var Container$
|
|
4759
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4770
|
+
var Container$X = newStyled.div(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject([""], [""])));
|
|
4771
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$W || (templateObject_2$W = __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"])));
|
|
4760
4772
|
function SimpleDropdown(_a) {
|
|
4761
4773
|
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;
|
|
4762
4774
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4786,13 +4798,13 @@ function SimpleDropdown(_a) {
|
|
|
4786
4798
|
setSelectedValue(value);
|
|
4787
4799
|
}, [value, options, initialValue]);
|
|
4788
4800
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4789
|
-
return (jsxRuntime.jsxs(Container$
|
|
4801
|
+
return (jsxRuntime.jsxs(Container$X, __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));
|
|
4790
4802
|
}
|
|
4791
|
-
var templateObject_1$
|
|
4803
|
+
var templateObject_1$1p, templateObject_2$W;
|
|
4792
4804
|
|
|
4793
|
-
var DialogDropdownWrapper = newStyled.div(templateObject_1$
|
|
4794
|
-
var DialogDropdownListContainer = newStyled.ul(templateObject_2$
|
|
4795
|
-
var DialogDropdownListItem = newStyled.li(templateObject_3$
|
|
4805
|
+
var DialogDropdownWrapper = newStyled.div(templateObject_1$1o || (templateObject_1$1o = __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; });
|
|
4806
|
+
var DialogDropdownListContainer = newStyled.ul(templateObject_2$V || (templateObject_2$V = __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; });
|
|
4807
|
+
var DialogDropdownListItem = newStyled.li(templateObject_3$J || (templateObject_3$J = __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"])));
|
|
4796
4808
|
var DialogDropdownLink = newStyled.a(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"], ["\n display: inline-block;\n text-decoration: none;\n width: 100%;\n background-color: transparent;\n border: 0;\n margin: 0;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s;\n color: var(--colors-shades-700-color);\n font-size: 1.125rem;\n font-style: inherit;\n font-variant: inherit;\n font-weight: inherit;\n line-height: inherit;\n vertical-align: inherit;\n"])));
|
|
4797
4809
|
var DropdownDialog = function (_a) {
|
|
4798
4810
|
var options = _a.options, _b = _a.position, top = _b.top, right = _b.right, style = _a.style, className = _a.className;
|
|
@@ -4801,7 +4813,7 @@ var DropdownDialog = function (_a) {
|
|
|
4801
4813
|
return (jsxRuntime.jsx(DialogDropdownListItem, { children: jsxRuntime.jsx(DialogDropdownLink, __assign$1({ href: value }, { children: label }), void 0) }, idx));
|
|
4802
4814
|
}) }), void 0) }), void 0));
|
|
4803
4815
|
};
|
|
4804
|
-
var templateObject_1$
|
|
4816
|
+
var templateObject_1$1o, templateObject_2$V, templateObject_3$J, templateObject_4$v;
|
|
4805
4817
|
|
|
4806
4818
|
var getStylesBySize$9 = function (size, theme) {
|
|
4807
4819
|
switch (size) {
|
|
@@ -4869,9 +4881,9 @@ var SelectorSecondary = function (_a) {
|
|
|
4869
4881
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4870
4882
|
// `variants` styles that are consistent through all themes.
|
|
4871
4883
|
var TAGS = {
|
|
4872
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4873
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4874
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4884
|
+
hero1: newStyled.h1(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject([""], [""]))),
|
|
4885
|
+
hero2: newStyled.h2(templateObject_2$U || (templateObject_2$U = __makeTemplateObject([""], [""]))),
|
|
4886
|
+
hero3: newStyled.h3(templateObject_3$I || (templateObject_3$I = __makeTemplateObject([""], [""]))),
|
|
4875
4887
|
display1: newStyled.h1(templateObject_4$u || (templateObject_4$u = __makeTemplateObject([""], [""]))),
|
|
4876
4888
|
display2: newStyled.h2(templateObject_5$i || (templateObject_5$i = __makeTemplateObject([""], [""]))),
|
|
4877
4889
|
heading1: newStyled.h1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject([""], [""]))),
|
|
@@ -4993,9 +5005,9 @@ var DEFAULTS = {
|
|
|
4993
5005
|
size: 'regular',
|
|
4994
5006
|
},
|
|
4995
5007
|
};
|
|
4996
|
-
var templateObject_1$
|
|
5008
|
+
var templateObject_1$1n, templateObject_2$U, templateObject_3$I, templateObject_4$u, templateObject_5$i, templateObject_6$f, templateObject_7$9, templateObject_8$6, templateObject_9$3, templateObject_10$3, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2;
|
|
4997
5009
|
|
|
4998
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
5010
|
+
var ButtonsContainer = newStyled.div(templateObject_1$1m || (templateObject_1$1m = __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) {
|
|
4999
5011
|
var inline = _a.inline;
|
|
5000
5012
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
5001
5013
|
});
|
|
@@ -5014,7 +5026,7 @@ var SizeSelector = function (_a) {
|
|
|
5014
5026
|
}, 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));
|
|
5015
5027
|
}) }), void 0)] }), void 0));
|
|
5016
5028
|
};
|
|
5017
|
-
var templateObject_1$
|
|
5029
|
+
var templateObject_1$1m;
|
|
5018
5030
|
|
|
5019
5031
|
var getStylesBySize$8 = function (size) {
|
|
5020
5032
|
switch (size) {
|
|
@@ -5041,7 +5053,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
5041
5053
|
} });
|
|
5042
5054
|
};
|
|
5043
5055
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
5044
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
5056
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$1l || (templateObject_1$1l = __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));
|
|
5045
5057
|
};
|
|
5046
5058
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
5047
5059
|
if (disabled)
|
|
@@ -5057,16 +5069,16 @@ var TextButton = function (_a) {
|
|
|
5057
5069
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
5058
5070
|
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));
|
|
5059
5071
|
};
|
|
5060
|
-
var templateObject_1$
|
|
5072
|
+
var templateObject_1$1l;
|
|
5061
5073
|
|
|
5062
|
-
var Container$
|
|
5063
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
5064
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
5074
|
+
var Container$W = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __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"])));
|
|
5075
|
+
var P$2 = newStyled.p(templateObject_2$T || (templateObject_2$T = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
5076
|
+
var PercentageSpan = newStyled.span(templateObject_3$H || (templateObject_3$H = __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"])));
|
|
5065
5077
|
var SizeFitGuide = function (_a) {
|
|
5066
5078
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
5067
|
-
return (jsxRuntime.jsxs(Container$
|
|
5079
|
+
return (jsxRuntime.jsxs(Container$W, { 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));
|
|
5068
5080
|
};
|
|
5069
|
-
var templateObject_1$
|
|
5081
|
+
var templateObject_1$1k, templateObject_2$T, templateObject_3$H;
|
|
5070
5082
|
|
|
5071
5083
|
var getStylesBySize$7 = function (size) {
|
|
5072
5084
|
switch (size) {
|
|
@@ -5096,7 +5108,7 @@ var getStylesBySize$7 = function (size) {
|
|
|
5096
5108
|
};
|
|
5097
5109
|
}
|
|
5098
5110
|
};
|
|
5099
|
-
var Container$
|
|
5111
|
+
var Container$V = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __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) {
|
|
5100
5112
|
var backgroundColor = _a.backgroundColor;
|
|
5101
5113
|
return backgroundColor;
|
|
5102
5114
|
}, function (_a) {
|
|
@@ -5118,7 +5130,7 @@ var Container$T = newStyled.div(templateObject_1$1g || (templateObject_1$1g = __
|
|
|
5118
5130
|
var size = _a.size;
|
|
5119
5131
|
return (_b = getStylesBySize$7(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5120
5132
|
});
|
|
5121
|
-
var H3$1 = newStyled.h3(templateObject_2$
|
|
5133
|
+
var H3$1 = 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) {
|
|
5122
5134
|
var textColor = _a.textColor;
|
|
5123
5135
|
return textColor;
|
|
5124
5136
|
}, function (_a) {
|
|
@@ -5133,9 +5145,9 @@ var H3$1 = newStyled.h3(templateObject_2$Q || (templateObject_2$Q = __makeTempla
|
|
|
5133
5145
|
var DiscountTag = function (_a) {
|
|
5134
5146
|
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;
|
|
5135
5147
|
var theme = useTheme();
|
|
5136
|
-
return (jsxRuntime.jsx(Container$
|
|
5148
|
+
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": "discount-container" }, { children: jsxRuntime.jsxs(H3$1, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
5137
5149
|
};
|
|
5138
|
-
var templateObject_1$
|
|
5150
|
+
var templateObject_1$1j, templateObject_2$S;
|
|
5139
5151
|
|
|
5140
5152
|
var getStylesBySize$6 = function (size) {
|
|
5141
5153
|
switch (size) {
|
|
@@ -5165,8 +5177,8 @@ var getStylesBySize$6 = function (size) {
|
|
|
5165
5177
|
};
|
|
5166
5178
|
}
|
|
5167
5179
|
};
|
|
5168
|
-
var Container$
|
|
5169
|
-
var Price = newStyled.p(templateObject_2$
|
|
5180
|
+
var Container$U = newStyled.div(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5181
|
+
var Price = newStyled.p(templateObject_2$R || (templateObject_2$R = __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) {
|
|
5170
5182
|
var weight = _a.weight;
|
|
5171
5183
|
return (weight ? weight : '400');
|
|
5172
5184
|
}, function (_a) {
|
|
@@ -5195,7 +5207,7 @@ var Price = newStyled.p(templateObject_2$P || (templateObject_2$P = __makeTempla
|
|
|
5195
5207
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5196
5208
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5197
5209
|
});
|
|
5198
|
-
var TagContainer = newStyled.p(templateObject_3$
|
|
5210
|
+
var TagContainer = newStyled.p(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5199
5211
|
var _b;
|
|
5200
5212
|
var size = _a.size;
|
|
5201
5213
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5216,11 +5228,11 @@ var PriceLabel = function (_a) {
|
|
|
5216
5228
|
weight: 700,
|
|
5217
5229
|
};
|
|
5218
5230
|
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)); };
|
|
5219
|
-
return (jsxRuntime.jsxs(Container$
|
|
5231
|
+
return (jsxRuntime.jsxs(Container$U, { 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));
|
|
5220
5232
|
};
|
|
5221
|
-
var templateObject_1$
|
|
5233
|
+
var templateObject_1$1i, templateObject_2$R, templateObject_3$G;
|
|
5222
5234
|
|
|
5223
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5235
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5224
5236
|
var PriceLabelV2 = function (_a) {
|
|
5225
5237
|
var _b;
|
|
5226
5238
|
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;
|
|
@@ -5248,9 +5260,9 @@ var PriceLabelV2 = function (_a) {
|
|
|
5248
5260
|
weight: 700,
|
|
5249
5261
|
};
|
|
5250
5262
|
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)); };
|
|
5251
|
-
return (jsxRuntime.jsxs(Container$
|
|
5263
|
+
return (jsxRuntime.jsxs(Container$U, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
5252
5264
|
};
|
|
5253
|
-
var templateObject_1$
|
|
5265
|
+
var templateObject_1$1h;
|
|
5254
5266
|
|
|
5255
5267
|
var OneColorSelector = function (_a) {
|
|
5256
5268
|
var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
@@ -5291,9 +5303,9 @@ var OutOfStock = function (_a) {
|
|
|
5291
5303
|
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));
|
|
5292
5304
|
};
|
|
5293
5305
|
|
|
5294
|
-
var CustomRadioGroup = newStyled(lt)(templateObject_1$
|
|
5295
|
-
newStyled(lt.Label)(templateObject_2$
|
|
5296
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
5306
|
+
var CustomRadioGroup = newStyled(lt)(templateObject_1$1g || (templateObject_1$1g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
5307
|
+
newStyled(lt.Label)(templateObject_2$Q || (templateObject_2$Q = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
5308
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$F || (templateObject_3$F = __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"])));
|
|
5297
5309
|
var Span = newStyled.span(templateObject_4$t || (templateObject_4$t = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
5298
5310
|
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"])));
|
|
5299
5311
|
var Label$3 = function (_a) {
|
|
@@ -5313,23 +5325,23 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
5313
5325
|
Option: Option,
|
|
5314
5326
|
OptionsContainer: OptionsContainer,
|
|
5315
5327
|
});
|
|
5316
|
-
var templateObject_1$
|
|
5328
|
+
var templateObject_1$1g, templateObject_2$Q, templateObject_3$F, templateObject_4$t, templateObject_5$h;
|
|
5317
5329
|
|
|
5318
|
-
var Container$
|
|
5330
|
+
var Container$T = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __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) {
|
|
5319
5331
|
var borderColor = _a.borderColor;
|
|
5320
5332
|
return borderColor;
|
|
5321
5333
|
}, function (_a) {
|
|
5322
5334
|
var noStock = _a.noStock;
|
|
5323
5335
|
return (noStock ? '0.4' : '1');
|
|
5324
5336
|
});
|
|
5325
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
5337
|
+
var Image$3 = newStyled.img(templateObject_2$P || (templateObject_2$P = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
5326
5338
|
var PatternSelector = function (_a) {
|
|
5327
5339
|
var url = _a.url, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
|
|
5328
5340
|
var theme = useTheme();
|
|
5329
5341
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
5330
|
-
return (jsxRuntime.jsx(Container$
|
|
5342
|
+
return (jsxRuntime.jsx(Container$T, __assign$1({ "data-testid": testId, borderColor: outerBorder, noStock: noStock }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
5331
5343
|
};
|
|
5332
|
-
var templateObject_1$
|
|
5344
|
+
var templateObject_1$1f, templateObject_2$P;
|
|
5333
5345
|
|
|
5334
5346
|
var renderOptions$1 = function (options) {
|
|
5335
5347
|
if (options.length === 0) {
|
|
@@ -5387,7 +5399,7 @@ var MultiColorPicker = function (_a) {
|
|
|
5387
5399
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
5388
5400
|
};
|
|
5389
5401
|
|
|
5390
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
5402
|
+
var Image$2 = newStyled.img(templateObject_1$1e || (templateObject_1$1e = __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) {
|
|
5391
5403
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
5392
5404
|
return borderRadiusVariant &&
|
|
5393
5405
|
"\nborder-radius: 20px;\n";
|
|
@@ -5402,7 +5414,7 @@ var ImageSmallPreview = function (_a) {
|
|
|
5402
5414
|
var theme = useTheme();
|
|
5403
5415
|
return (jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0));
|
|
5404
5416
|
};
|
|
5405
|
-
var templateObject_1$
|
|
5417
|
+
var templateObject_1$1e;
|
|
5406
5418
|
|
|
5407
5419
|
var Button$4 = newStyled.button(function () { return ({
|
|
5408
5420
|
background: 'transparent',
|
|
@@ -9646,14 +9658,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
9646
9658
|
return Slider;
|
|
9647
9659
|
}(React__default["default"].Component);
|
|
9648
9660
|
|
|
9649
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
9661
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$1d || (templateObject_1$1d = __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) {
|
|
9650
9662
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9651
9663
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9652
9664
|
}, function (_a) {
|
|
9653
9665
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
9654
9666
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
9655
9667
|
});
|
|
9656
|
-
var templateObject_1$
|
|
9668
|
+
var templateObject_1$1d;
|
|
9657
9669
|
|
|
9658
9670
|
var getStylesBySize$5 = function (size) {
|
|
9659
9671
|
// rem units
|
|
@@ -9712,22 +9724,22 @@ var SliderNavigation = function (_a) {
|
|
|
9712
9724
|
} }, { 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));
|
|
9713
9725
|
};
|
|
9714
9726
|
|
|
9715
|
-
var horizontalStyles = css(templateObject_1$
|
|
9716
|
-
var verticalStyles = css(templateObject_2$
|
|
9717
|
-
var Container$
|
|
9727
|
+
var horizontalStyles = css(templateObject_1$1c || (templateObject_1$1c = __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"])));
|
|
9728
|
+
var verticalStyles = css(templateObject_2$O || (templateObject_2$O = __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"])));
|
|
9729
|
+
var Container$S = newStyled.div(templateObject_3$E || (templateObject_3$E = __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) {
|
|
9718
9730
|
var position = _a.position;
|
|
9719
9731
|
return (position == 'horizontal' ? horizontalStyles : verticalStyles);
|
|
9720
9732
|
});
|
|
9721
9733
|
var Button$3 = newStyled.button(templateObject_4$s || (templateObject_4$s = __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"])));
|
|
9722
9734
|
var ImagePreviewList = function (_a) {
|
|
9723
9735
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position, borderRadiusVariant = _a.borderRadiusVariant, previewImgBorderColor = _a.previewImgBorderColor;
|
|
9724
|
-
return (jsxRuntime.jsx(Container$
|
|
9736
|
+
return (jsxRuntime.jsx(Container$S, __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: {
|
|
9725
9737
|
arrowWidth: 0.75,
|
|
9726
9738
|
arrowHeight: 1.25,
|
|
9727
9739
|
arrowPadding: 1.625,
|
|
9728
9740
|
}, 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));
|
|
9729
9741
|
};
|
|
9730
|
-
var templateObject_1$
|
|
9742
|
+
var templateObject_1$1c, templateObject_2$O, templateObject_3$E, templateObject_4$s;
|
|
9731
9743
|
|
|
9732
9744
|
var propTypes = {exports: {}};
|
|
9733
9745
|
|
|
@@ -11320,36 +11332,36 @@ InnerImageZoom.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
11320
11332
|
afterZoomOut: PropTypes.func
|
|
11321
11333
|
} : {};
|
|
11322
11334
|
|
|
11323
|
-
var Container$
|
|
11335
|
+
var Container$R = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __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) {
|
|
11324
11336
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
11325
11337
|
return borderRadiusVariant &&
|
|
11326
11338
|
"\n border-radius: 40px;\n ";
|
|
11327
11339
|
});
|
|
11328
|
-
var TopTagContainer$3 = newStyled.div(templateObject_2$
|
|
11329
|
-
var BottomTagContainer$3 = newStyled.div(templateObject_3$
|
|
11340
|
+
var TopTagContainer$3 = newStyled.div(templateObject_2$N || (templateObject_2$N = __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'); });
|
|
11341
|
+
var BottomTagContainer$3 = newStyled.div(templateObject_3$D || (templateObject_3$D = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
11330
11342
|
var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$r || (templateObject_4$r = __makeTemplateObject(["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"], ["\n text-transform: capitalize;\n margin-top: 12px;\n\n @media (max-width: 992px) {\n margin-top: 4px;\n }\n"])));
|
|
11331
11343
|
var ImageProductWithTags$1 = function (_a) {
|
|
11332
|
-
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;
|
|
11333
|
-
return (jsxRuntime.jsxs(Container$
|
|
11344
|
+
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;
|
|
11345
|
+
return (jsxRuntime.jsxs(Container$R, __assign$1({ "data-testid": testId, className: "stylefor".concat(position), borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: {
|
|
11334
11346
|
alt: image.alt,
|
|
11335
11347
|
style: { objectFit: 'cover', objectPosition: 'center' },
|
|
11336
|
-
}, width: position == 'horizontal' ? 360 : 530, height: position == 'horizontal' ? 480 : 720, hideHint: true }, void 0), jsxRuntime.jsx(TopTagContainer$3, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$3, { children: bottomTag }, void 0), ctaText && ctaAction && (jsxRuntime.jsx(ButtonSecondaryOutlineWrapper, { wide: true, onClick: ctaAction, text: ctaText }, void 0))] }), void 0));
|
|
11348
|
+
}, 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));
|
|
11337
11349
|
};
|
|
11338
|
-
var templateObject_1$
|
|
11350
|
+
var templateObject_1$1b, templateObject_2$N, templateObject_3$D, templateObject_4$r;
|
|
11339
11351
|
|
|
11340
|
-
var Container$
|
|
11352
|
+
var Container$Q = newStyled.div(templateObject_1$1a || (templateObject_1$1a = __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"])));
|
|
11341
11353
|
var ProductGallery = function (_a) {
|
|
11342
|
-
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;
|
|
11354
|
+
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;
|
|
11343
11355
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
11344
|
-
var
|
|
11356
|
+
var _d = React$2.useState(initialValue), selectedImage = _d[0], setSelectedImage = _d[1];
|
|
11345
11357
|
React$2.useEffect(function () {
|
|
11346
11358
|
setSelectedImage(initialValue);
|
|
11347
11359
|
}, [initialValue]);
|
|
11348
|
-
return (jsxRuntime.jsxs(Container$
|
|
11360
|
+
return (jsxRuntime.jsxs(Container$Q, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
11349
11361
|
setSelectedImage(value);
|
|
11350
|
-
}, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction }, void 0)] }, void 0));
|
|
11362
|
+
}, 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));
|
|
11351
11363
|
};
|
|
11352
|
-
var templateObject_1$
|
|
11364
|
+
var templateObject_1$1a;
|
|
11353
11365
|
|
|
11354
11366
|
/* base styles & size variants */
|
|
11355
11367
|
var StarStyles = {
|
|
@@ -11395,8 +11407,8 @@ var StarStyles = {
|
|
|
11395
11407
|
});
|
|
11396
11408
|
},
|
|
11397
11409
|
};
|
|
11398
|
-
var Container$
|
|
11399
|
-
var templateObject_1$
|
|
11410
|
+
var Container$P = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11411
|
+
var templateObject_1$19;
|
|
11400
11412
|
|
|
11401
11413
|
var StarContainer = newStyled.div(function (_a) {
|
|
11402
11414
|
var size = _a.size, theme = _a.theme;
|
|
@@ -11414,7 +11426,7 @@ var sizes = {
|
|
|
11414
11426
|
var StarList = function (_a) {
|
|
11415
11427
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
11416
11428
|
var theme = useTheme();
|
|
11417
|
-
return (jsxRuntime.jsx(Container$
|
|
11429
|
+
return (jsxRuntime.jsx(Container$P, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
11418
11430
|
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));
|
|
11419
11431
|
}) }, void 0));
|
|
11420
11432
|
};
|
|
@@ -11458,8 +11470,8 @@ var LabelStyles = {
|
|
|
11458
11470
|
});
|
|
11459
11471
|
},
|
|
11460
11472
|
};
|
|
11461
|
-
var Container$
|
|
11462
|
-
var templateObject_1$
|
|
11473
|
+
var Container$O = newStyled.a(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11474
|
+
var templateObject_1$18;
|
|
11463
11475
|
|
|
11464
11476
|
var CustomLabel = newStyled.div(function (_a) {
|
|
11465
11477
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -11497,11 +11509,11 @@ var Rating = function (_a) {
|
|
|
11497
11509
|
href: reviewsContainerId,
|
|
11498
11510
|
}
|
|
11499
11511
|
: {};
|
|
11500
|
-
return (jsxRuntime.jsxs(Container$
|
|
11512
|
+
return (jsxRuntime.jsxs(Container$O, __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));
|
|
11501
11513
|
};
|
|
11502
11514
|
|
|
11503
|
-
var Container$
|
|
11504
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
11515
|
+
var Container$N = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __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"])));
|
|
11516
|
+
var P$1 = newStyled.p(templateObject_2$M || (templateObject_2$M = __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; });
|
|
11505
11517
|
var textButtonStyles = function (theme) { return ({
|
|
11506
11518
|
border: 'none',
|
|
11507
11519
|
background: 'transparent',
|
|
@@ -11514,9 +11526,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
11514
11526
|
var FitPredictor = function (_a) {
|
|
11515
11527
|
var onClick = _a.onClick;
|
|
11516
11528
|
var theme = useTheme();
|
|
11517
|
-
return (jsxs(Container$
|
|
11529
|
+
return (jsxs(Container$N, __assign$1({ theme: theme }, { children: [jsx(Container$N, { 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));
|
|
11518
11530
|
};
|
|
11519
|
-
var templateObject_1$
|
|
11531
|
+
var templateObject_1$17, templateObject_2$M;
|
|
11520
11532
|
|
|
11521
11533
|
var H2$1 = newStyled.h2(function (_a) {
|
|
11522
11534
|
var color = _a.color;
|
|
@@ -11530,7 +11542,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
11530
11542
|
margin: '0.938rem 4.188rem',
|
|
11531
11543
|
});
|
|
11532
11544
|
});
|
|
11533
|
-
var Bar = newStyled.div(templateObject_1$
|
|
11545
|
+
var Bar = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"], ["\n @keyframes loading {\n 0% {\n transform: translateX(0);\n }\n to {\n transform: translateX(400%);\n }\n }\n\n height: 0.5rem;\n background-color: ", ";\n width: ", ";\n border-radius: 0.25rem;\n position: absolute;\n left: ", ";\n animation: ", ";\n"])), function (_a) {
|
|
11534
11546
|
var backgroundColor = _a.backgroundColor;
|
|
11535
11547
|
return backgroundColor;
|
|
11536
11548
|
}, function (_a) {
|
|
@@ -11553,7 +11565,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
11553
11565
|
position: 'absolute',
|
|
11554
11566
|
});
|
|
11555
11567
|
});
|
|
11556
|
-
var Container$
|
|
11568
|
+
var Container$M = newStyled.div(function (_a) {
|
|
11557
11569
|
var widthAuto = _a.widthAuto;
|
|
11558
11570
|
return ({
|
|
11559
11571
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -11567,9 +11579,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
11567
11579
|
var ProgressBar = function (_a) {
|
|
11568
11580
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
11569
11581
|
var theme = useTheme();
|
|
11570
|
-
return (jsxRuntime.jsxs(Container$
|
|
11582
|
+
return (jsxRuntime.jsxs(Container$M, __assign$1({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign$1({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
11571
11583
|
};
|
|
11572
|
-
var templateObject_1$
|
|
11584
|
+
var templateObject_1$16;
|
|
11573
11585
|
|
|
11574
11586
|
var getStylesBySize$4 = function (size) {
|
|
11575
11587
|
switch (size) {
|
|
@@ -11590,7 +11602,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
11590
11602
|
};
|
|
11591
11603
|
}
|
|
11592
11604
|
};
|
|
11593
|
-
var Container$
|
|
11605
|
+
var Container$L = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
11594
11606
|
var backgroundColor = _a.backgroundColor;
|
|
11595
11607
|
return backgroundColor;
|
|
11596
11608
|
}, function (_a) {
|
|
@@ -11618,9 +11630,9 @@ var Container$J = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __
|
|
|
11618
11630
|
var IconButton = function (_a) {
|
|
11619
11631
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
11620
11632
|
var theme = useTheme();
|
|
11621
|
-
return (jsxRuntime.jsx(Container$
|
|
11633
|
+
return (jsxRuntime.jsx(Container$L, __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));
|
|
11622
11634
|
};
|
|
11623
|
-
var templateObject_1$
|
|
11635
|
+
var templateObject_1$15;
|
|
11624
11636
|
|
|
11625
11637
|
var TooltipArrow = function (_a) {
|
|
11626
11638
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -11700,7 +11712,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
11700
11712
|
}
|
|
11701
11713
|
};
|
|
11702
11714
|
|
|
11703
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
11715
|
+
var Wrapper$5 = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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) {
|
|
11704
11716
|
var position = _a.position;
|
|
11705
11717
|
return getWrapperFlexDirection(position);
|
|
11706
11718
|
});
|
|
@@ -11725,14 +11737,14 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
11725
11737
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
11726
11738
|
return actual === expected ? margin : '0';
|
|
11727
11739
|
};
|
|
11728
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
11740
|
+
var ContentWrapper = newStyled.div(templateObject_2$L || (templateObject_2$L = __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) {
|
|
11729
11741
|
var borderColor = _a.borderColor;
|
|
11730
11742
|
return borderColor;
|
|
11731
11743
|
}, function (_a) {
|
|
11732
11744
|
var backgroundColor = _a.backgroundColor;
|
|
11733
11745
|
return backgroundColor;
|
|
11734
11746
|
});
|
|
11735
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
11747
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$C || (templateObject_3$C = __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) {
|
|
11736
11748
|
var position = _a.position;
|
|
11737
11749
|
return getArrowRotation(position);
|
|
11738
11750
|
}, function (_a) {
|
|
@@ -11747,12 +11759,12 @@ var TooltipText = newStyled.div(templateObject_4$q || (templateObject_4$q = __ma
|
|
|
11747
11759
|
return color;
|
|
11748
11760
|
});
|
|
11749
11761
|
var TopSection = newStyled.div(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
11750
|
-
var Title$
|
|
11762
|
+
var Title$7 = newStyled.h1(templateObject_6$e || (templateObject_6$e = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
11751
11763
|
var color = _a.color;
|
|
11752
11764
|
return color;
|
|
11753
11765
|
});
|
|
11754
11766
|
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"])));
|
|
11755
|
-
var templateObject_1$
|
|
11767
|
+
var templateObject_1$14, templateObject_2$L, templateObject_3$C, templateObject_4$q, templateObject_5$g, templateObject_6$e, templateObject_7$8;
|
|
11756
11768
|
|
|
11757
11769
|
var Tooltip = function (_a) {
|
|
11758
11770
|
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;
|
|
@@ -11773,7 +11785,7 @@ var Tooltip = function (_a) {
|
|
|
11773
11785
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
11774
11786
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
11775
11787
|
: theme.colors.pallete.secondary.color,
|
|
11776
|
-
}) }, void 0)), jsxRuntime.jsx(Title$
|
|
11788
|
+
}) }, void 0)), jsxRuntime.jsx(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsxRuntime.jsx(TooltipText, __assign$1({ color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: content.text }), void 0))] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign$1({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: theme.colors.shades.white.color, stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
11777
11789
|
};
|
|
11778
11790
|
|
|
11779
11791
|
/* base styles & variants */
|
|
@@ -11839,6 +11851,7 @@ var AccordionDetailsStyles = {
|
|
|
11839
11851
|
var StyledDisclosure = newStyled(Ye)(AccordionStyles.baseStyles, function (props) { return [AccordionStyles[props.variant](props.theme, props.disabled)]; });
|
|
11840
11852
|
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)]; });
|
|
11841
11853
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
11854
|
+
var StyledContent = newStyled.button(templateObject_1$13 || (templateObject_1$13 = __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"])));
|
|
11842
11855
|
var Accordion$1 = function (_a) {
|
|
11843
11856
|
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;
|
|
11844
11857
|
var theme = useTheme();
|
|
@@ -11847,9 +11860,10 @@ var Accordion$1 = function (_a) {
|
|
|
11847
11860
|
var openWithForce = forceOpenHandler ? forceOpenValue : open;
|
|
11848
11861
|
var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
|
|
11849
11862
|
var showPanel = openWithForce && !disabled;
|
|
11850
|
-
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 && !innerHTML
|
|
11863
|
+
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));
|
|
11851
11864
|
} }), void 0));
|
|
11852
|
-
};
|
|
11865
|
+
};
|
|
11866
|
+
var templateObject_1$13;
|
|
11853
11867
|
|
|
11854
11868
|
/* base styles & size variants */
|
|
11855
11869
|
var CustomRadioStyles = {
|
|
@@ -11914,9 +11928,9 @@ var ContainerStyles = {
|
|
|
11914
11928
|
},
|
|
11915
11929
|
};
|
|
11916
11930
|
|
|
11917
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
11918
|
-
var Container$
|
|
11919
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
11931
|
+
var Wrapper$4 = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
11932
|
+
var Container$K = newStyled.div(__assign$1({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
11933
|
+
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) {
|
|
11920
11934
|
var disabled = _a.disabled;
|
|
11921
11935
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
11922
11936
|
});
|
|
@@ -11924,7 +11938,7 @@ var CustomRadio = newStyled.div(function (props) { return [
|
|
|
11924
11938
|
CustomRadioStyles.baseStyles(props.theme, props.disabled),
|
|
11925
11939
|
CustomRadioStyles[props.size](props.theme, props.isChecked),
|
|
11926
11940
|
]; });
|
|
11927
|
-
var StyledLabel$1 = newStyled(Label$4)(templateObject_3$
|
|
11941
|
+
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) {
|
|
11928
11942
|
var theme = _a.theme;
|
|
11929
11943
|
return theme.component.radio.textSize;
|
|
11930
11944
|
}, function (_a) {
|
|
@@ -11938,9 +11952,9 @@ var RadioInput = function (_a) {
|
|
|
11938
11952
|
var value = event.currentTarget.value;
|
|
11939
11953
|
onChange({ value: value, label: label });
|
|
11940
11954
|
};
|
|
11941
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
11955
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$K, __assign$1({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(StyledLabel$1, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
11942
11956
|
};
|
|
11943
|
-
var templateObject_1$
|
|
11957
|
+
var templateObject_1$12, templateObject_2$K, templateObject_3$B;
|
|
11944
11958
|
|
|
11945
11959
|
var RadioGroupInput = function (_a) {
|
|
11946
11960
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -11954,37 +11968,37 @@ var RadioGroupInput = function (_a) {
|
|
|
11954
11968
|
}) }), void 0));
|
|
11955
11969
|
};
|
|
11956
11970
|
|
|
11957
|
-
var Wrapper$3 = newStyled.div(templateObject_1
|
|
11958
|
-
var Container$
|
|
11971
|
+
var Wrapper$3 = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject(["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"], ["\n padding: 12px 58px;\n @media (max-width: 768px) {\n padding: 0.625rem 1.5rem;\n }\n"])));
|
|
11972
|
+
var Container$J = newStyled.div(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
11959
11973
|
var Minimalistic = function (_a) {
|
|
11960
11974
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? '#E7C9B2' : _c, originalPrice = _a.originalPrice, price = _a.price, savingPrice = _a.savingPrice, getMorePayLessText = _a.getMorePayLessText, youAreSavingText = _a.youAreSavingText, getQtyForText = _a.getQtyForText, discount = _a.discount, offText = _a.offText, _d = _a.widthAuto, widthAuto = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
11961
11975
|
var theme = useTheme();
|
|
11962
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
11976
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small, testId: testId }, void 0)] }), void 0), jsxRuntime.jsxs(Container$J, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11963
11977
|
};
|
|
11964
|
-
var templateObject_1
|
|
11978
|
+
var templateObject_1$11, templateObject_2$J;
|
|
11965
11979
|
|
|
11966
|
-
var Container$
|
|
11967
|
-
var Title$
|
|
11968
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
11980
|
+
var Container$I = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
11981
|
+
var Title$6 = newStyled.h1(templateObject_2$I || (templateObject_2$I = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
11982
|
+
var Details$1 = newStyled.span(templateObject_3$A || (templateObject_3$A = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"], ["\n display: flex;\n align-items: center;\n font-weight: 400;\n font-size: 1rem;\n margin: 0;\n line-height: 1.5rem;\n justify-content: center;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
11969
11983
|
var PriceContainer$1 = newStyled.span(templateObject_4$p || (templateObject_4$p = __makeTemplateObject(["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"], ["\n margin: 0 0.313rem;\n display: flex;\n align-items: center;\n"])));
|
|
11970
11984
|
var Simple = function (_a) {
|
|
11971
11985
|
var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
|
|
11972
11986
|
var theme = useTheme();
|
|
11973
|
-
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
11987
|
+
return (jsxRuntime.jsx(Card$3, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(Title$6, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
11974
11988
|
};
|
|
11975
|
-
var templateObject_1$
|
|
11989
|
+
var templateObject_1$10, templateObject_2$I, templateObject_3$A, templateObject_4$p;
|
|
11976
11990
|
|
|
11977
11991
|
var Bundle = {
|
|
11978
11992
|
Minimalistic: Minimalistic,
|
|
11979
11993
|
Simple: Simple,
|
|
11980
11994
|
};
|
|
11981
11995
|
|
|
11982
|
-
var Container$
|
|
11996
|
+
var Container$H = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n"])));
|
|
11983
11997
|
var Tag$2 = function (_a) {
|
|
11984
11998
|
var text = _a.text, className = _a.className;
|
|
11985
|
-
return jsxRuntime.jsx(Container$
|
|
11999
|
+
return jsxRuntime.jsx(Container$H, __assign$1({ className: className }, { children: text }), void 0);
|
|
11986
12000
|
};
|
|
11987
|
-
var templateObject_1
|
|
12001
|
+
var templateObject_1$$;
|
|
11988
12002
|
|
|
11989
12003
|
var getStylesBySize$3 = function (size, styledBorder) {
|
|
11990
12004
|
switch (size) {
|
|
@@ -12087,11 +12101,11 @@ var Timer = function (_a) {
|
|
|
12087
12101
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
12088
12102
|
};
|
|
12089
12103
|
|
|
12090
|
-
var Label$2 = newStyled.span(templateObject_1$
|
|
12104
|
+
var Label$2 = newStyled.span(templateObject_1$_ || (templateObject_1$_ = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"], ["\n font-weight: 600;\n color: ", ";\n font-size: 1.125rem;\n line-height: 1.75rem;\n"])), function (_a) {
|
|
12091
12105
|
var color = _a.color;
|
|
12092
12106
|
return color;
|
|
12093
12107
|
});
|
|
12094
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
12108
|
+
var MandatoryIcon = newStyled.span(templateObject_2$H || (templateObject_2$H = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
12095
12109
|
var color = _a.color;
|
|
12096
12110
|
return color;
|
|
12097
12111
|
});
|
|
@@ -12100,7 +12114,7 @@ var InputLabel = function (_a) {
|
|
|
12100
12114
|
var theme = useTheme();
|
|
12101
12115
|
return (jsxRuntime.jsxs(Label$2, __assign$1({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
12102
12116
|
};
|
|
12103
|
-
var templateObject_1$
|
|
12117
|
+
var templateObject_1$_, templateObject_2$H;
|
|
12104
12118
|
|
|
12105
12119
|
/**
|
|
12106
12120
|
* @returns number formatted with "," and 2 decimals as string
|
|
@@ -12245,12 +12259,12 @@ var containerByStatus = function (theme, status) {
|
|
|
12245
12259
|
return theme.colors.semantic.urgent.color;
|
|
12246
12260
|
return '';
|
|
12247
12261
|
};
|
|
12248
|
-
var Container$
|
|
12262
|
+
var Container$G = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n position: relative;\n input {\n border-color: ", ";\n }\n"], ["\n position: relative;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
12249
12263
|
var theme = _a.theme, status = _a.status, hasError = _a.hasError;
|
|
12250
12264
|
return hasError ? '' : containerByStatus(theme, status);
|
|
12251
12265
|
});
|
|
12252
|
-
var StyledLabel = newStyled.label(templateObject_2$
|
|
12253
|
-
var StyledInput = newStyled.input(templateObject_3$
|
|
12266
|
+
var StyledLabel = newStyled.label(templateObject_2$G || (templateObject_2$G = __makeTemplateObject(["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n position: absolute;\n top: 10px;\n left: 16px;\n z-index: 15;\n &::after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
12267
|
+
var StyledInput = newStyled.input(templateObject_3$z || (templateObject_3$z = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n flex: 1 1 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n ", ";\n box-shadow: ", ";\n\n ", ";\n }\n\n &:focus + label,\n &:not(:invalid) + label {\n display: none;\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n\n ", ";\n"])), function (_a) {
|
|
12254
12268
|
var inlinePlaceholder = _a.inlinePlaceholder, theme = _a.theme;
|
|
12255
12269
|
return theme.component[inlinePlaceholder ? 'inputPlaceholder' : 'input'].padding;
|
|
12256
12270
|
}, function (_a) {
|
|
@@ -12311,7 +12325,7 @@ var InputWrapper = newStyled.div(templateObject_4$o || (templateObject_4$o = __m
|
|
|
12311
12325
|
});
|
|
12312
12326
|
var AnimatedPlaceholder = newStyled.span(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"], ["\n color: #8b8b8b;\n font-weight: 400;\n left: 0.9375rem;\n bottom: 0.9375rem;\n transition: all 0.2s ease;\n position: absolute;\n pointer-events: none;\n font-size: 0.875rem;\n"])));
|
|
12313
12327
|
var ClearInput = newStyled.div(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"], ["\n right: 0.75rem;\n top: 1rem;\n position: absolute;\n cursor: pointer;\n"])));
|
|
12314
|
-
var templateObject_1$
|
|
12328
|
+
var templateObject_1$Z, templateObject_2$G, templateObject_3$z, templateObject_4$o, templateObject_5$f, templateObject_6$d;
|
|
12315
12329
|
|
|
12316
12330
|
var BaseInput = function (_a) {
|
|
12317
12331
|
var value = _a.value, _b = _a.onChange, onChange = _b === void 0 ? function () { } : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _c = _a.inputType, inputType = _c === void 0 ? 'text' : _c, hideClear = _a.hideClear, innerRef = _a.innerRef, requiredPlaceholder = _a.requiredPlaceholder, rest = __rest(_a, ["value", "onChange", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "hideClear", "innerRef", "requiredPlaceholder"]);
|
|
@@ -12334,7 +12348,7 @@ var BaseInput = function (_a) {
|
|
|
12334
12348
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
12335
12349
|
}, [status]);
|
|
12336
12350
|
var hasValue = Boolean(value);
|
|
12337
|
-
return (jsxRuntime.jsxs(Container$
|
|
12351
|
+
return (jsxRuntime.jsxs(Container$G, __assign$1({ status: status, hasError: hasError }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsxRuntime.jsx(StyledInput, __assign$1({ id: requiredPlaceholder ? 'requiredPlaceholder' : undefined, hasValue: hasValue, inlinePlaceholder: inlinePlaceholder, hasError: hasError, ref: innerRef, "data-testid": "base-input", type: inputType, onChange: function (event) {
|
|
12338
12352
|
onChange(event.target.value, event);
|
|
12339
12353
|
}, onBlur: onBlur, required: Boolean(required), value: value, placeholder: inlinePlaceholder ? '' : placeholder }, rest), void 0), !!requiredPlaceholder && (jsxRuntime.jsx(StyledLabel, __assign$1({ htmlFor: "requiredPlaceholder" }, { children: requiredPlaceholder }), void 0)), inlinePlaceholder && (jsxRuntime.jsx(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), !hideClear && !rest.disabled && inlinePlaceholder && hasValue && (jsxRuntime.jsx(ClearInput, __assign$1({ onClick: function () {
|
|
12340
12354
|
onChange('', { target: { value: '' } });
|
|
@@ -12355,11 +12369,11 @@ var Button$2 = function (_a) {
|
|
|
12355
12369
|
throw new Error("Invalid button variant ".concat(variant));
|
|
12356
12370
|
};
|
|
12357
12371
|
|
|
12358
|
-
var Container$
|
|
12372
|
+
var Container$F = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __makeTemplateObject(["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"], ["\n overflow: hidden;\n\n input {\n border-radius: ", ";\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n border-right: none;\n width: 100%;\n }\n"])), function (_a) {
|
|
12359
12373
|
var theme = _a.theme;
|
|
12360
12374
|
return theme.component.inputCustom.input.borderRadius;
|
|
12361
12375
|
});
|
|
12362
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
12376
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n max-width: 50%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"], ["\n max-width: 50%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
12363
12377
|
var theme = _a.theme;
|
|
12364
12378
|
return theme.component.inputCustom.button.borderRadius;
|
|
12365
12379
|
});
|
|
@@ -12372,23 +12386,23 @@ var Custom = function (_a) {
|
|
|
12372
12386
|
text: text,
|
|
12373
12387
|
disabled: rest.disabled,
|
|
12374
12388
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
12375
|
-
return (jsxRuntime.jsx(Container$
|
|
12389
|
+
return (jsxRuntime.jsx(Container$F, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
12376
12390
|
};
|
|
12377
|
-
var templateObject_1$
|
|
12391
|
+
var templateObject_1$Y, templateObject_2$F;
|
|
12378
12392
|
|
|
12379
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
12393
|
+
var SuccessContainer = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
12380
12394
|
var size = _a.size;
|
|
12381
12395
|
return (size === 'small' ? '36px' : '');
|
|
12382
12396
|
});
|
|
12383
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
12384
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
12397
|
+
var SuccessMessage = newStyled.div(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"], ["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
12398
|
+
var SuccessText = newStyled.span(templateObject_3$y || (templateObject_3$y = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n margin-left: 0.313rem;\n"])));
|
|
12385
12399
|
var Success = function (_a) {
|
|
12386
12400
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
12387
12401
|
return (jsxRuntime.jsxs(SuccessContainer, __assign$1({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
12388
12402
|
};
|
|
12389
|
-
var templateObject_1$
|
|
12403
|
+
var templateObject_1$X, templateObject_2$E, templateObject_3$y;
|
|
12390
12404
|
|
|
12391
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
12405
|
+
var ButtonContainer = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
12392
12406
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
12393
12407
|
return status === exports.InputValidationType.Empty &&
|
|
12394
12408
|
type === 'primary' &&
|
|
@@ -12405,21 +12419,21 @@ var BasePlusButton = function (_a) {
|
|
|
12405
12419
|
}
|
|
12406
12420
|
return (jsxRuntime.jsx(BaseInput, __assign$1({ onValidation: setStatus, onChange: onChangeInput }, rest, { children: jsxRuntime.jsx(ButtonContainer, __assign$1({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
12407
12421
|
};
|
|
12408
|
-
var templateObject_1$
|
|
12422
|
+
var templateObject_1$W;
|
|
12409
12423
|
|
|
12410
|
-
var Container$
|
|
12411
|
-
var IconContainer$4 = newStyled.div(templateObject_2$
|
|
12424
|
+
var Container$E = newStyled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
12425
|
+
var IconContainer$4 = newStyled.div(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n display: flex;\n align-items: center;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
12412
12426
|
var BasePlusIcon = function (_a) {
|
|
12413
12427
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
12414
12428
|
var theme = useTheme();
|
|
12415
12429
|
var _b = React$2.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
12416
|
-
return (jsxRuntime.jsx(Container$
|
|
12430
|
+
return (jsxRuntime.jsx(Container$E, { children: jsxRuntime.jsx(BaseInput, __assign$1({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$4, __assign$1({ color: status === exports.InputValidationType.Valid
|
|
12417
12431
|
? theme.colors.shades['700'].color
|
|
12418
12432
|
: status === exports.InputValidationType.Error
|
|
12419
12433
|
? theme.colors.semantic.urgent.color
|
|
12420
12434
|
: '' }, { children: React$2.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
12421
12435
|
};
|
|
12422
|
-
var templateObject_1$
|
|
12436
|
+
var templateObject_1$V, templateObject_2$D;
|
|
12423
12437
|
|
|
12424
12438
|
var Input$1 = {
|
|
12425
12439
|
Simple: BaseInput,
|
|
@@ -12428,7 +12442,7 @@ var Input$1 = {
|
|
|
12428
12442
|
SimplePlusIcon: BasePlusIcon,
|
|
12429
12443
|
};
|
|
12430
12444
|
|
|
12431
|
-
var Container$
|
|
12445
|
+
var Container$D = newStyled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"], ["\n width: ", ";\n height: ", ";\n border: 0.063rem solid ", ";\n border-radius: 0.25rem;\n padding: 0.375rem;\n cursor: ", ";\n"])), function (_a) {
|
|
12432
12446
|
var width = _a.width;
|
|
12433
12447
|
return width;
|
|
12434
12448
|
}, function (_a) {
|
|
@@ -12444,11 +12458,11 @@ var Container$B = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
12444
12458
|
var PaymentMethod = function (_a) {
|
|
12445
12459
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
12446
12460
|
var theme = useTheme();
|
|
12447
|
-
return (jsxRuntime.jsx(Container$
|
|
12461
|
+
return (jsxRuntime.jsx(Container$D, __assign$1({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React$2.createElement(Icon) }), void 0));
|
|
12448
12462
|
};
|
|
12449
|
-
var templateObject_1$
|
|
12463
|
+
var templateObject_1$U;
|
|
12450
12464
|
|
|
12451
|
-
var Text$5 = newStyled.h3(templateObject_1$
|
|
12465
|
+
var Text$5 = newStyled.h3(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"], ["\n background-color: ", ";\n margin: 0;\n padding: 0.25rem 0.5rem;\n font-size: 0.625rem;\n font-weight: 700;\n line-height: 0.875rem;\n border-radius: 0.125rem;\n display: initial;\n color: ", ";\n"])), function (_a) {
|
|
12452
12466
|
var backgroundColor = _a.backgroundColor;
|
|
12453
12467
|
return backgroundColor;
|
|
12454
12468
|
}, function (_a) {
|
|
@@ -12460,11 +12474,11 @@ var OfferBanner = function (_a) {
|
|
|
12460
12474
|
var theme = useTheme();
|
|
12461
12475
|
return (jsxRuntime.jsx(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
12462
12476
|
};
|
|
12463
|
-
var templateObject_1$
|
|
12477
|
+
var templateObject_1$T;
|
|
12464
12478
|
|
|
12465
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
12466
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
12467
|
-
var Currency = newStyled.span(templateObject_3$
|
|
12479
|
+
var Wrapper$2 = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n"])));
|
|
12480
|
+
var GrandTotal = newStyled.h1(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"], ["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: block;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
12481
|
+
var Currency = newStyled.span(templateObject_3$x || (templateObject_3$x = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-weight: 600;\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n align-self: ", ";\n"])), function (_a) {
|
|
12468
12482
|
var theme = _a.theme;
|
|
12469
12483
|
return theme.component.total.basicTotal.currency.color;
|
|
12470
12484
|
}, function (_a) {
|
|
@@ -12477,7 +12491,7 @@ var Currency = newStyled.span(templateObject_3$w || (templateObject_3$w = __make
|
|
|
12477
12491
|
var theme = _a.theme;
|
|
12478
12492
|
return theme.component.total.basicTotal.currency.alignSelf;
|
|
12479
12493
|
});
|
|
12480
|
-
var Container$
|
|
12494
|
+
var Container$C = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.625rem;\n color: ", ";\n"])), function (props) { return props.highlightColor; });
|
|
12481
12495
|
var DiscountText = newStyled.h3(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n font-weight: 600;\n"])), function (_a) {
|
|
12482
12496
|
var theme = _a.theme;
|
|
12483
12497
|
return theme.component.total.basicTotal.savings.textFontSize;
|
|
@@ -12498,16 +12512,16 @@ var DiscountAmount = newStyled.h3(templateObject_6$c || (templateObject_6$c = __
|
|
|
12498
12512
|
var Total = function (_a) {
|
|
12499
12513
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
12500
12514
|
var theme = useTheme();
|
|
12501
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
12515
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign$1({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign$1({ color: theme.component.total.basicTotal.amount.color, "data-testid": "total-price" }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$C, __assign$1({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(DiscountText, __assign$1({ "data-testid": "saving-title" }, { children: saving.savingText }), void 0), jsxRuntime.jsx(DiscountAmount, __assign$1({ "data-testid": "saving-price" }, { children: saving.amount }), void 0)] }), void 0))] }), void 0));
|
|
12502
12516
|
};
|
|
12503
|
-
var templateObject_1$
|
|
12517
|
+
var templateObject_1$S, templateObject_2$C, templateObject_3$x, templateObject_4$n, templateObject_5$e, templateObject_6$c;
|
|
12504
12518
|
|
|
12505
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
12519
|
+
var Wrapper$1 = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
12506
12520
|
var color = _a.color;
|
|
12507
12521
|
return color;
|
|
12508
12522
|
});
|
|
12509
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
12510
|
-
var Item$2 = newStyled.h4(templateObject_3$
|
|
12523
|
+
var ItemContainer = newStyled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-bottom: 0.625rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n"])));
|
|
12524
|
+
var Item$2 = newStyled.h4(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
12511
12525
|
var theme = _a.theme;
|
|
12512
12526
|
return theme.component.subTotal.basicSubTotal.lineHeight;
|
|
12513
12527
|
}, function (_a) {
|
|
@@ -12527,27 +12541,27 @@ var Subtotal = function (_a) {
|
|
|
12527
12541
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-title" }, { children: [coupon.couponText, " ", code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign$1({ color: highlightColor, "data-testid": "discount-price" }, { children: amount }), void 0)] }, code));
|
|
12528
12542
|
})] }), void 0));
|
|
12529
12543
|
};
|
|
12530
|
-
var templateObject_1$
|
|
12544
|
+
var templateObject_1$R, templateObject_2$B, templateObject_3$w, templateObject_4$m;
|
|
12531
12545
|
|
|
12532
12546
|
var Totals = {
|
|
12533
12547
|
Total: Total,
|
|
12534
12548
|
Subtotal: Subtotal,
|
|
12535
12549
|
};
|
|
12536
12550
|
|
|
12537
|
-
var Container$
|
|
12538
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
12539
|
-
var Text$4 = newStyled.p(templateObject_3$
|
|
12551
|
+
var Container$B = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 0.938rem;\n"])), function (props) { return props.color; });
|
|
12552
|
+
var IconContainer$3 = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"], ["\n width: 1rem;\n height: 0.875rem;\n margin-right: 0.5rem;\n margin-top: 0.125rem;\n"])));
|
|
12553
|
+
var Text$4 = newStyled.p(templateObject_3$v || (templateObject_3$v = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 400;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12540
12554
|
var Details = newStyled.span(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
12541
12555
|
var Note = function (_a) {
|
|
12542
12556
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
12543
12557
|
var theme = useTheme();
|
|
12544
|
-
return (jsxRuntime.jsxs(Container$
|
|
12558
|
+
return (jsxRuntime.jsxs(Container$B, __assign$1({ color: backgroundColor ? backgroundColor : theme.component.deliveryDetails.note.backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$3, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$4, __assign$1({ color: color ? color : theme.component.deliveryDetails.note.color }, { children: [importantNoteText && (jsxRuntime.jsxs(Details, __assign$1({ color: accentColor ? accentColor : theme.component.deliveryDetails.note.accentColor }, { children: [importantNoteText, ":"] }), void 0)), ' ', text] }), void 0) }, void 0)] }), void 0));
|
|
12545
12559
|
};
|
|
12546
|
-
var templateObject_1$
|
|
12560
|
+
var templateObject_1$Q, templateObject_2$A, templateObject_3$v, templateObject_4$l;
|
|
12547
12561
|
|
|
12548
|
-
var Title$
|
|
12549
|
-
var Line = newStyled.div(templateObject_2$
|
|
12550
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
12562
|
+
var Title$5 = newStyled.h1(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"], ["\n color: ", ";\n font-size: 1.25rem;\n line-height: 1.75rem;\n font-weight: 600;\n margin: 0;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
12563
|
+
var Line = newStyled.div(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"], ["\n width: 100%;\n height: 0.063rem;\n background-color: ", ";\n margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
|
|
12564
|
+
var Row$1 = newStyled.div(templateObject_3$u || (templateObject_3$u = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), mediaQueries({
|
|
12551
12565
|
flexDirection: ['column', 'row'],
|
|
12552
12566
|
}));
|
|
12553
12567
|
var Col$1 = newStyled.div(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), mediaQueries({
|
|
@@ -12580,47 +12594,47 @@ var KeepMeUpdated = newStyled.h1(templateObject_8$5 || (templateObject_8$5 = __m
|
|
|
12580
12594
|
var DeliveryDetails = function (_a) {
|
|
12581
12595
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
12582
12596
|
var theme = useTheme();
|
|
12583
|
-
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$
|
|
12597
|
+
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$5, __assign$1({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign$1({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign$1({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$2, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign$1({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), instantOrderUpdate.keepMeUpdated && (jsxRuntime.jsxs(KeepMeUpdated, __assign$1({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
12584
12598
|
};
|
|
12585
|
-
var templateObject_1$
|
|
12599
|
+
var templateObject_1$P, templateObject_2$z, templateObject_3$u, templateObject_4$k, templateObject_5$d, templateObject_6$b, templateObject_7$7, templateObject_8$5;
|
|
12586
12600
|
|
|
12587
|
-
var Container$
|
|
12588
|
-
var Text$3 = newStyled.p(templateObject_2$
|
|
12601
|
+
var Container$A = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"], ["\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n"])));
|
|
12602
|
+
var Text$3 = newStyled.p(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 700;\n color: ", ";\n margin-right: 0.313rem;\n"])), function (props) { return props.color; });
|
|
12589
12603
|
var ScrollToTop = function (_a) {
|
|
12590
12604
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick, fill = _a.fill;
|
|
12591
12605
|
var theme = useTheme();
|
|
12592
12606
|
var fillValue = fill || theme.colors.pallete.primary.color;
|
|
12593
|
-
return (jsxRuntime.jsxs(Container$
|
|
12607
|
+
return (jsxRuntime.jsxs(Container$A, __assign$1({ onClick: onClick, "data-testid": "scrollTopContainer" }, { children: [jsxRuntime.jsx(Text$3, __assign$1({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.CircleChevronUp, { width: 1.375, height: 1.375, fill: fillValue }, void 0)] }), void 0));
|
|
12594
12608
|
};
|
|
12595
|
-
var templateObject_1$
|
|
12609
|
+
var templateObject_1$O, templateObject_2$y;
|
|
12596
12610
|
|
|
12597
12611
|
var DEFAULT_COLOR = '#dfefeb';
|
|
12598
|
-
var Container$
|
|
12612
|
+
var Container$z = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n padding: 0.75rem 0;\n"])), function (_a) {
|
|
12599
12613
|
var color = _a.color;
|
|
12600
12614
|
return color !== null && color !== void 0 ? color : DEFAULT_COLOR;
|
|
12601
12615
|
});
|
|
12602
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12616
|
+
var H1 = newStyled.h1(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n color: ", ";\n margin-left: 0.625rem;\n"])), function (props) { return props.color; });
|
|
12603
12617
|
var OrderBar = function (_a) {
|
|
12604
12618
|
var message = _a.message, color = _a.color;
|
|
12605
12619
|
var theme = useTheme();
|
|
12606
|
-
return (jsxRuntime.jsxs(Container$
|
|
12620
|
+
return (jsxRuntime.jsxs(Container$z, __assign$1({ color: color }, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1, __assign$1({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }), void 0));
|
|
12607
12621
|
};
|
|
12608
|
-
var templateObject_1$
|
|
12622
|
+
var templateObject_1$N, templateObject_2$x;
|
|
12609
12623
|
|
|
12610
|
-
var TableElement$1 = newStyled.table(templateObject_1$
|
|
12611
|
-
var TableCell$1 = newStyled.td(templateObject_2$
|
|
12612
|
-
var TableHead$1 = newStyled.th(templateObject_3$
|
|
12624
|
+
var TableElement$1 = newStyled.table(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
12625
|
+
var TableCell$1 = newStyled.td(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n padding: 0 1.25rem;\n text-align: center;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12626
|
+
var TableHead$1 = newStyled.th(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n\n &:last-child {\n border-right: none;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12613
12627
|
var TableRow$1 = newStyled.tr(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
12614
12628
|
var SizeTable = function (_a) {
|
|
12615
12629
|
var headers = _a.headers, data = _a.data;
|
|
12616
12630
|
var theme = useTheme();
|
|
12617
12631
|
return (jsxRuntime.jsxs(TableElement$1, __assign$1({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow$1, __assign$1({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow$1, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell$1, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
12618
12632
|
};
|
|
12619
|
-
var templateObject_1$
|
|
12633
|
+
var templateObject_1$M, templateObject_2$w, templateObject_3$t, templateObject_4$j;
|
|
12620
12634
|
|
|
12621
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
12622
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
12623
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
12635
|
+
var TableElement = newStyled.table(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
12636
|
+
var TableCell = newStyled.td(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n text-align: center;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n font-weight: 700;\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12637
|
+
var TableHead = newStyled.th(templateObject_3$s || (templateObject_3$s = __makeTemplateObject(["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"], ["\n border-bottom: 0.063rem solid ", ";\n border-right: 0.063rem solid ", ";\n font-weight: 700;\n line-height: normal;\n padding: 1rem;\n text-align: start;\n\n &:last-child {\n border-right: none;\n }\n\n &:first-of-type {\n text-align: center;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.borderColor; });
|
|
12624
12638
|
var TableRow = newStyled.tr(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"], ["\n &:last-child {\n td {\n border-bottom: none;\n }\n }\n\n &.background {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; });
|
|
12625
12639
|
var SizeChartTable = function (_a) {
|
|
12626
12640
|
var headers = _a.headers, data = _a.data, newSizeTableCss = _a.newSizeTableCss;
|
|
@@ -12652,21 +12666,21 @@ var SizeChartTable = function (_a) {
|
|
|
12652
12666
|
backgroundColor: getCellColor(index, cell),
|
|
12653
12667
|
}, borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }, index)); }) }, void 0)) : (jsxRuntime.jsx("tbody", { children: data === null || data === void 0 ? void 0 : data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign$1({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row === null || row === void 0 ? void 0 : row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign$1({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0))] }), void 0));
|
|
12654
12668
|
};
|
|
12655
|
-
var templateObject_1$
|
|
12669
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$s, templateObject_4$i;
|
|
12656
12670
|
|
|
12657
|
-
var Img = newStyled.img(templateObject_1$
|
|
12671
|
+
var Img = newStyled.img(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
12658
12672
|
var Image = function (_a) {
|
|
12659
12673
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, className = _a.className;
|
|
12660
12674
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
12661
12675
|
};
|
|
12662
|
-
var templateObject_1$
|
|
12676
|
+
var templateObject_1$K;
|
|
12663
12677
|
|
|
12664
|
-
var Container$
|
|
12665
|
-
var ImageContainer$4 = newStyled.div(templateObject_2$
|
|
12666
|
-
var DescriptionContainer$1 = newStyled.div(templateObject_3$
|
|
12678
|
+
var Container$y = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
12679
|
+
var ImageContainer$4 = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
12680
|
+
var DescriptionContainer$1 = newStyled.div(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
12667
12681
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
12668
12682
|
}));
|
|
12669
|
-
var Title$
|
|
12683
|
+
var Title$4 = newStyled.h2(function (_a) {
|
|
12670
12684
|
var color = _a.color;
|
|
12671
12685
|
return ({
|
|
12672
12686
|
fontWeight: 600,
|
|
@@ -12699,9 +12713,9 @@ var Quantity = newStyled.div(templateObject_5$c || (templateObject_5$c = __makeT
|
|
|
12699
12713
|
var SimpleOrderItem = function (_a) {
|
|
12700
12714
|
var title = _a.title, className = _a.className, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity, finalPriceStyle = _a.finalPriceStyle;
|
|
12701
12715
|
var theme = useTheme();
|
|
12702
|
-
return (jsxRuntime.jsxs(Container$
|
|
12716
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(ImageContainer$4, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign$1({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer$1, __assign$1({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$4, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-title" }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "product-variant-title" }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign$1({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: theme.component.pricing.priceLabel.price.size, finalPriceStyle: finalPriceStyle, originalPriceStyled: true }, void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
12703
12717
|
};
|
|
12704
|
-
var templateObject_1$
|
|
12718
|
+
var templateObject_1$J, templateObject_2$u, templateObject_3$r, templateObject_4$h, templateObject_5$c;
|
|
12705
12719
|
|
|
12706
12720
|
function formatDate(date) {
|
|
12707
12721
|
var day = date.getDate();
|
|
@@ -12710,9 +12724,9 @@ function formatDate(date) {
|
|
|
12710
12724
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
12711
12725
|
}
|
|
12712
12726
|
|
|
12713
|
-
var Container$
|
|
12714
|
-
var Heading = newStyled.div(templateObject_2$
|
|
12715
|
-
var Content$1 = newStyled.div(templateObject_3$
|
|
12727
|
+
var Container$x = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
12728
|
+
var Heading = newStyled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n font-size: 14px;\n line-height: 22px;\n text-align: right;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12729
|
+
var Content$1 = newStyled.div(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
12716
12730
|
var ReviewContainer$1 = newStyled.div(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12717
12731
|
var DateText$1 = newStyled.span(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 12px;\n line-height: 16px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
12718
12732
|
var VariantText = newStyled.div(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n\n @media (min-width: 768px) {\n font-size: 16px;\n line-height: 24px;\n }\n"])));
|
|
@@ -12731,17 +12745,17 @@ var ButtonSecondaryWrapper = newStyled(ButtonSecondary)(templateObject_18$1 || (
|
|
|
12731
12745
|
var Review$1 = function (_a) {
|
|
12732
12746
|
var reviewId = _a.reviewId, reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, images = _a.images, reviewVariant = _a.reviewVariant, onClickImage = _a.onClickImage, helpfulActionText = _a.helpfulActionText, helpfulAction = _a.helpfulAction, helpfulCount = _a.helpfulCount;
|
|
12733
12747
|
var theme = useTheme();
|
|
12734
|
-
return (jsxRuntime.jsxs(Container$
|
|
12748
|
+
return (jsxRuntime.jsxs(Container$x, { children: [jsxRuntime.jsxs(Heading, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewerName$1, __assign$1({ theme: theme }, { children: reviewerName }), void 0), jsxRuntime.jsx(DateText$1, { children: formatDate(date) }, void 0)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content$1, __assign$1({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer$1, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(ReviewTitle$1, __assign$1({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(ReviewDescription$1, { dangerouslySetInnerHTML: { __html: description } }, void 0), jsxRuntime.jsxs(HelpfulContainerDesktop, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsxs(ImagesContainer, { children: [jsxRuntime.jsxs(Images, { children: [images === null || images === void 0 ? void 0 : images.map(function (image) { return (jsxRuntime.jsx(ImageWrapper$2, __assign$1({ onClick: function () { return onClickImage && onClickImage(image.src); } }, { children: jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, height: "10rem" }, void 0) }), image.src)); }), !images || (images.length === 0 && jsxRuntime.jsx(ImageSpace, {}, void 0))] }, void 0), jsxRuntime.jsx(VariantText, { children: reviewVariant }, void 0)] }, void 0)] }), void 0), jsxRuntime.jsx(HelpfulTexti, {}, void 0), jsxRuntime.jsxs(HelpfulContainerMobile, { children: [helpfulActionText && helpfulAction && (jsxRuntime.jsx(ButtonSecondaryWrapper, { onClick: function () { return helpfulAction(reviewId); }, text: helpfulActionText, size: exports.ComponentSize.Small }, void 0)), helpfulCount && jsxRuntime.jsxs(HelpfulText, { children: [helpfulCount, " people found this helpful"] }, void 0)] }, void 0)] }, void 0));
|
|
12735
12749
|
};
|
|
12736
|
-
var templateObject_1$
|
|
12750
|
+
var templateObject_1$I, templateObject_2$t, templateObject_3$q, templateObject_4$g, templateObject_5$b, templateObject_6$a, templateObject_7$6, templateObject_8$4, templateObject_9$2, templateObject_10$2, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1;
|
|
12737
12751
|
|
|
12738
|
-
var List = newStyled.ul(templateObject_1$
|
|
12739
|
-
var Item$1 = newStyled.li(templateObject_2$
|
|
12740
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12752
|
+
var List = newStyled.ul(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12753
|
+
var Item$1 = newStyled.li(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"], ["\n width: 1.25rem;\n list-style: none;\n margin-right: 1.5rem;\n position: relative;\n line-height: 0;\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover {\n .dropdownWrapper {\n visibility: visible;\n }\n }\n"])));
|
|
12754
|
+
var DropdownWrapper = newStyled.div(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"], ["\n right: -0.938rem;\n min-width: 9.375rem;\n position: absolute;\n padding-top: 0.625rem;\n margin-top: -0.188rem;\n width: max-content;\n visibility: hidden;\n"])));
|
|
12741
12755
|
var ArrowContainer$1 = newStyled.div(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"], ["\n transform: rotate(180deg);\n display: flex;\n justify-content: flex-start;\n margin-bottom: -0.063rem;\n padding-left: 0.938rem;\n"])));
|
|
12742
12756
|
var StyledDropdown = newStyled.ul(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"], ["\n margin: 0;\n padding: 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: flex;\n flex-direction: column;\n background-color: #ffffff;\n"])), function (props) { return props.borderColor; });
|
|
12743
12757
|
var DropdownItem = newStyled.li(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"], ["\n list-style: none;\n padding: 0.813rem;\n border-bottom: 0.063rem solid ", ";\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n user-select: none;\n\n &:hover {\n background-color: ", ";\n }\n\n &:last-child {\n border-bottom: none;\n border-radius: 0 0 0.5rem 0.5rem;\n }\n\n &:first-of-type {\n border-radius: 0.5rem 0.5rem 0 0;\n }\n\n &:only-child {\n border-radius: 0.5rem;\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; }, function (props) { return props.hoverColor; });
|
|
12744
|
-
var templateObject_1$
|
|
12758
|
+
var templateObject_1$H, templateObject_2$s, templateObject_3$p, templateObject_4$f, templateObject_5$a, templateObject_6$9;
|
|
12745
12759
|
|
|
12746
12760
|
var DropdownListIcons = function (_a) {
|
|
12747
12761
|
var items = _a.items;
|
|
@@ -12754,7 +12768,7 @@ var Dropdown = function (_a) {
|
|
|
12754
12768
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign$1({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer$1, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign$1({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign$1({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
12755
12769
|
};
|
|
12756
12770
|
|
|
12757
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12771
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"], ["\n width: 12.5rem;\n height: 2.5rem;\n background-color: ", ";\n cursor: pointer;\n border: none;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.hoverBackgroundColor; });
|
|
12758
12772
|
var AmazonButton = function (_a) {
|
|
12759
12773
|
var onClick = _a.onClick;
|
|
12760
12774
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12763,11 +12777,11 @@ var PaypalButton = function (_a) {
|
|
|
12763
12777
|
var onClick = _a.onClick;
|
|
12764
12778
|
return (jsxRuntime.jsx(StyledButton, __assign$1({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12765
12779
|
};
|
|
12766
|
-
var templateObject_1$
|
|
12780
|
+
var templateObject_1$G;
|
|
12767
12781
|
|
|
12768
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12769
|
-
var Col = newStyled.div(templateObject_2$
|
|
12770
|
-
var Row = newStyled.div(templateObject_3$
|
|
12782
|
+
var Wrapper = newStyled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n width: 36.875rem;\n max-width: 100%;\n border-radius: 0.5rem;\n\n img {\n margin-right: ", ";\n }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });
|
|
12783
|
+
var Col = newStyled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12784
|
+
var Row = newStyled.div(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"], ["\n display: flex;\n align-items: center;\n width: 100%;\n margin-left: 10px;\n\n ", "};\n"])), function (props) {
|
|
12771
12785
|
return props.rightToLeft &&
|
|
12772
12786
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12773
12787
|
});
|
|
@@ -12779,7 +12793,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12779
12793
|
var theme = useTheme();
|
|
12780
12794
|
return (jsxRuntime.jsxs(Wrapper, __assign$1({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign$1({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign$1({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12781
12795
|
};
|
|
12782
|
-
var templateObject_1$
|
|
12796
|
+
var templateObject_1$F, templateObject_2$r, templateObject_3$o, templateObject_4$e, templateObject_5$9, templateObject_6$8;
|
|
12783
12797
|
|
|
12784
12798
|
var index = /*#__PURE__*/Object.freeze({
|
|
12785
12799
|
__proto__: null,
|
|
@@ -12792,7 +12806,7 @@ var Spacing = function (_a) {
|
|
|
12792
12806
|
return jsxRuntime.jsx("div", __assign$1({ style: style }, { children: children }), void 0);
|
|
12793
12807
|
};
|
|
12794
12808
|
|
|
12795
|
-
var Container$
|
|
12809
|
+
var Container$w = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
12796
12810
|
var height = _a.height;
|
|
12797
12811
|
return (height ? height : '1.5em');
|
|
12798
12812
|
}, function (_a) {
|
|
@@ -12817,9 +12831,9 @@ var Container$u = newStyled.div(templateObject_1$C || (templateObject_1$C = __ma
|
|
|
12817
12831
|
var SkeletonBox = function (_a) {
|
|
12818
12832
|
var width = _a.width, height = _a.height;
|
|
12819
12833
|
var theme = useTheme();
|
|
12820
|
-
return jsxRuntime.jsx(Container$
|
|
12834
|
+
return jsxRuntime.jsx(Container$w, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
12821
12835
|
};
|
|
12822
|
-
var templateObject_1$
|
|
12836
|
+
var templateObject_1$E;
|
|
12823
12837
|
|
|
12824
12838
|
var ImageContainer$3 = newStyled.div(function (_a) {
|
|
12825
12839
|
var width = _a.width, height = _a.height;
|
|
@@ -12829,10 +12843,10 @@ var ImageContainer$3 = newStyled.div(function (_a) {
|
|
|
12829
12843
|
height: height,
|
|
12830
12844
|
});
|
|
12831
12845
|
});
|
|
12832
|
-
var ImageHoverContainer = newStyled.img(templateObject_1$
|
|
12833
|
-
var Container$
|
|
12834
|
-
var ProdCardContainer = newStyled.div(templateObject_3$
|
|
12835
|
-
var Title$
|
|
12846
|
+
var ImageHoverContainer = newStyled.img(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"], ["\n opacity: 0;\n position: absolute;\n transition: all 0.4s ease-in-out;\n"])));
|
|
12847
|
+
var Container$v = newStyled.a(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n text-decoration: none;\n\n &:hover .hover__image {\n opacity: 1;\n }\n"])));
|
|
12848
|
+
var ProdCardContainer = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n text-decoration: none;\n"])));
|
|
12849
|
+
var Title$3 = newStyled.p(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.83rem;\n font-weight: normal;\n line-height: 1.375rem;\n min-height: 2.75rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
12836
12850
|
var getStylesBySize$1 = function (size) {
|
|
12837
12851
|
switch (size) {
|
|
12838
12852
|
case exports.ComponentSize.Medium:
|
|
@@ -12887,32 +12901,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12887
12901
|
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: exports.ComponentSize.Medium, testId: "volume-discount" }, void 0));
|
|
12888
12902
|
};
|
|
12889
12903
|
var RatingDisplay = function () { return (jsx(Rating, { size: size === exports.ComponentSize.Large ? exports.ComponentSize.Small : exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)); };
|
|
12890
|
-
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$
|
|
12904
|
+
return (jsxs(ProdCardContainer, __assign$1({ className: className, "data-testid": "product-card-container-div" }, { children: [jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, className: "picContainer", onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer$3, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$2, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), imageHover ? (jsx(ImageHoverContainer, { className: "hover__image", src: imageHover.src, alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), jsxs(Container$v, __assign$1({ as: url ? 'a' : 'div', href: url, onClick: onClick, className: "textContainer" }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$3, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceAtBottom ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(MarginTopContainer, { children: priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0) }, void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : jsx(PriceLabelDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0))] }), void 0), colorPicker.display && colorPicker.position === 'bottom' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0))] }), void 0));
|
|
12891
12905
|
};
|
|
12892
|
-
var templateObject_1$
|
|
12906
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$n, templateObject_4$d, templateObject_5$8, templateObject_6$7, templateObject_7$5;
|
|
12893
12907
|
|
|
12894
|
-
var Container$
|
|
12908
|
+
var Container$u = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
12895
12909
|
function withProductGrid(ProductItemComponent, data) {
|
|
12896
12910
|
function WithProductGrid(props) {
|
|
12897
|
-
return (jsxRuntime.jsx(Container$
|
|
12911
|
+
return (jsxRuntime.jsx(Container$u, __assign$1({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign$1({}, product, props), index)); }) }), void 0));
|
|
12898
12912
|
}
|
|
12899
12913
|
/* istanbul ignore next */
|
|
12900
12914
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12901
12915
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12902
12916
|
return WithProductGrid;
|
|
12903
12917
|
}
|
|
12904
|
-
var templateObject_1$
|
|
12918
|
+
var templateObject_1$C;
|
|
12905
12919
|
|
|
12906
12920
|
var Collection = {
|
|
12907
12921
|
ProductItemMobile: ProductItemMobile,
|
|
12908
12922
|
withProductGrid: withProductGrid,
|
|
12909
12923
|
};
|
|
12910
12924
|
|
|
12911
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12925
|
+
var Backdrop = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
12912
12926
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12913
12927
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12914
12928
|
});
|
|
12915
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12929
|
+
var Sidebar = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 30;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
12916
12930
|
var width = _a.width;
|
|
12917
12931
|
return width;
|
|
12918
12932
|
}, function (_a) {
|
|
@@ -12953,28 +12967,28 @@ var Drawer = function (_a) {
|
|
|
12953
12967
|
}, [isOpen, onClose, onOpen]);
|
|
12954
12968
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign$1({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12955
12969
|
};
|
|
12956
|
-
var templateObject_1$
|
|
12970
|
+
var templateObject_1$B, templateObject_2$p;
|
|
12957
12971
|
|
|
12958
|
-
var Container$
|
|
12972
|
+
var Container$t = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12959
12973
|
var size = _a.size;
|
|
12960
12974
|
return (size ? size : '100%');
|
|
12961
12975
|
}, function (_a) {
|
|
12962
12976
|
var size = _a.size;
|
|
12963
12977
|
return (size ? size : '100%');
|
|
12964
12978
|
});
|
|
12965
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12979
|
+
var Animation = newStyled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"], ["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"])), function (_a) {
|
|
12966
12980
|
var animationDuration = _a.animationDuration;
|
|
12967
12981
|
return animationDuration;
|
|
12968
12982
|
});
|
|
12969
12983
|
var Spinner = function (_a) {
|
|
12970
12984
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
12971
|
-
return (jsxRuntime.jsx(Container$
|
|
12985
|
+
return (jsxRuntime.jsx(Container$t, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign$1({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12972
12986
|
};
|
|
12973
|
-
var templateObject_1$
|
|
12987
|
+
var templateObject_1$A, templateObject_2$o;
|
|
12974
12988
|
|
|
12975
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12976
|
-
var LI = newStyled.li(templateObject_2$
|
|
12977
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12989
|
+
var UL = newStyled.ul(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
12990
|
+
var LI = newStyled.li(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
12991
|
+
var CloseIconContainer = newStyled.div(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
12978
12992
|
var Tags = function (_a) {
|
|
12979
12993
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12980
12994
|
var theme = useTheme();
|
|
@@ -12982,7 +12996,7 @@ var Tags = function (_a) {
|
|
|
12982
12996
|
return (jsxRuntime.jsxs(LI, __assign$1({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign$1({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12983
12997
|
}) }), void 0));
|
|
12984
12998
|
};
|
|
12985
|
-
var templateObject_1$
|
|
12999
|
+
var templateObject_1$z, templateObject_2$n, templateObject_3$m;
|
|
12986
13000
|
|
|
12987
13001
|
function FilteringDropdown(_a) {
|
|
12988
13002
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -13015,9 +13029,9 @@ function FilteringDropdown(_a) {
|
|
|
13015
13029
|
}) }, void 0)] }), void 0));
|
|
13016
13030
|
}
|
|
13017
13031
|
|
|
13018
|
-
var Container$
|
|
13019
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
13020
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
13032
|
+
var Container$s = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
13033
|
+
var IconContainer$1 = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
13034
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), mediaQueries({
|
|
13021
13035
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
13022
13036
|
}));
|
|
13023
13037
|
var PageNumber = newStyled.span(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n margin: 0 2px;\n border-bottom: ", ";\n ", ";\n background: ", ";\n"])), function (_a) {
|
|
@@ -13037,7 +13051,7 @@ var PageNumber = newStyled.span(templateObject_4$c || (templateObject_4$c = __ma
|
|
|
13037
13051
|
var background = _a.background;
|
|
13038
13052
|
return background || 'unset';
|
|
13039
13053
|
});
|
|
13040
|
-
var templateObject_1$
|
|
13054
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$l, templateObject_4$c;
|
|
13041
13055
|
|
|
13042
13056
|
var Pagination = function (_a) {
|
|
13043
13057
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showReducedPages, showReducedPages = _f === void 0 ? false : _f;
|
|
@@ -13083,7 +13097,7 @@ var Pagination = function (_a) {
|
|
|
13083
13097
|
}
|
|
13084
13098
|
return pages;
|
|
13085
13099
|
}, [from, page, showReducedPages, to]);
|
|
13086
|
-
return (jsxRuntime.jsxs(Container$
|
|
13100
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), !showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0)), showReducedPages && (jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PageNumbersContainer", theme: theme }, { children: reducedPages.map(function (reducedPage, index) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(reducedPage); }, bold: boldActive && page === reducedPage, underline: underlineActive && page === reducedPage, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: reducedPage !== -2 ? reducedPage : '...' }), index)); }) }), void 0)), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13087
13101
|
};
|
|
13088
13102
|
|
|
13089
13103
|
var PaginatorBlog = function (_a) {
|
|
@@ -13097,15 +13111,15 @@ var PaginatorBlog = function (_a) {
|
|
|
13097
13111
|
setPage(page);
|
|
13098
13112
|
onChange(page);
|
|
13099
13113
|
};
|
|
13100
|
-
return (jsxRuntime.jsxs(Container$
|
|
13114
|
+
return (jsxRuntime.jsxs(Container$s, __assign$1({ "data-testid": "PaginatorBlogContainer" }, { children: [jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "PaginatorBlogLeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: page === 1 ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign$1({ "data-testid": "PaginatorBlogPageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign$1({ onClick: function () { return handlePageChange(i + from); }, background: page === i + from ? 'black' : '', role: 'button', color: page === i + from
|
|
13101
13115
|
? theme.colors.shades['white'].color
|
|
13102
13116
|
: theme.colors.shades['700'].color, borderColor: theme.colors.shades['700'].color, theme: theme, bold: false, underline: false }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer$1, __assign$1({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "PaginatorBlogRightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: page === to ? theme.colors.shades['white'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
13103
13117
|
};
|
|
13104
13118
|
|
|
13105
|
-
var Container$
|
|
13119
|
+
var Container$r = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), mediaQueries({
|
|
13106
13120
|
borderTop: ['0.063rem solid var(--colors-shades-100-color)', 'none'],
|
|
13107
13121
|
}));
|
|
13108
|
-
var Description$
|
|
13122
|
+
var Description$2 = newStyled.div({
|
|
13109
13123
|
display: 'flex',
|
|
13110
13124
|
flexDirection: 'column',
|
|
13111
13125
|
alignItems: 'flex-start',
|
|
@@ -13119,25 +13133,25 @@ var Description$1 = newStyled.div({
|
|
|
13119
13133
|
var ProductItem = function (_a) {
|
|
13120
13134
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
13121
13135
|
var theme = useTheme();
|
|
13122
|
-
return (jsxRuntime.jsxs(Container$
|
|
13136
|
+
return (jsxRuntime.jsxs(Container$r, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$2, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
13123
13137
|
};
|
|
13124
|
-
var templateObject_1$
|
|
13138
|
+
var templateObject_1$x;
|
|
13125
13139
|
|
|
13126
|
-
var Container$
|
|
13140
|
+
var Container$q = newStyled.div({
|
|
13127
13141
|
display: 'flex',
|
|
13128
13142
|
justifyContent: 'center',
|
|
13129
13143
|
padding: '1rem',
|
|
13130
13144
|
});
|
|
13131
13145
|
var Footer = function (_a) {
|
|
13132
13146
|
var text = _a.text, onClick = _a.onClick;
|
|
13133
|
-
return (jsxRuntime.jsx(Container$
|
|
13147
|
+
return (jsxRuntime.jsx(Container$q, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
13134
13148
|
};
|
|
13135
13149
|
|
|
13136
13150
|
var Ul = newStyled.ul({
|
|
13137
13151
|
margin: '0px',
|
|
13138
13152
|
padding: '0px',
|
|
13139
13153
|
});
|
|
13140
|
-
var Li = newStyled.li(templateObject_1$
|
|
13154
|
+
var Li = newStyled.li(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"], ["\n width: 100%;\n cursor: pointer;\n list-style-type: none;\n box-sizing: border-box;\n &:hover {\n background-color: ", ";\n }\n ", ",\n"])), function (props) { return props.theme.colors.shades['100'].color; }, mediaQueries({
|
|
13141
13155
|
padding: [0, '0rem 1rem'],
|
|
13142
13156
|
borderRadius: [0, '0.5rem'],
|
|
13143
13157
|
}));
|
|
@@ -13149,20 +13163,20 @@ var Anchor = newStyled.a({
|
|
|
13149
13163
|
padding: 0,
|
|
13150
13164
|
textDecoration: 'none',
|
|
13151
13165
|
});
|
|
13152
|
-
var Container$
|
|
13166
|
+
var Container$p = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"], ["\n display: flex;\n flex-direction: column;\n margin: 0rem;\n padding: 0rem;\n position: absolute;\n width: 100%;\n background-color: white;\n box-sizing: border-box;\n z-index: 2;\n ", ",\n"])), mediaQueries({
|
|
13153
13167
|
border: ['none', '0.063rem solid var(--colors-pallete-secondary-color)'],
|
|
13154
13168
|
marginTop: ['1.25rem', '0.125rem'],
|
|
13155
13169
|
borderRadius: ['0', '0.5rem'],
|
|
13156
13170
|
}));
|
|
13157
|
-
var Header$1 = newStyled.div(templateObject_3$
|
|
13171
|
+
var Header$1 = newStyled.div(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), mediaQueries({
|
|
13158
13172
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
13159
13173
|
}));
|
|
13160
13174
|
var ResultsPanel = function (_a) {
|
|
13161
13175
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
13162
13176
|
var theme = useTheme();
|
|
13163
|
-
return (jsxRuntime.jsxs(Container$
|
|
13177
|
+
return (jsxRuntime.jsxs(Container$p, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header$1, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Anchor, __assign$1({ href: item.optionUrl }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
13164
13178
|
};
|
|
13165
|
-
var templateObject_1$
|
|
13179
|
+
var templateObject_1$w, templateObject_2$l, templateObject_3$k;
|
|
13166
13180
|
|
|
13167
13181
|
var Input = newStyled.input(function (props) { return ({
|
|
13168
13182
|
padding: props.theme.component.input.padding,
|
|
@@ -13193,7 +13207,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
13193
13207
|
},
|
|
13194
13208
|
}); });
|
|
13195
13209
|
|
|
13196
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
13210
|
+
var Button$1 = newStyled.button(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"], ["\n position: absolute;\n right: 1rem;\n background: white;\n border: none;\n align-self: center;\n padding: 0;\n ", ",\n"])), mediaQueries({
|
|
13197
13211
|
right: ['1rem', '7.75rem'],
|
|
13198
13212
|
top: ['0.75rem', '0.75rem'],
|
|
13199
13213
|
}));
|
|
@@ -13202,7 +13216,7 @@ var ClearButton = function (_a) {
|
|
|
13202
13216
|
var theme = useTheme();
|
|
13203
13217
|
return (jsxRuntime.jsx(Button$1, __assign$1({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
13204
13218
|
};
|
|
13205
|
-
var templateObject_1$
|
|
13219
|
+
var templateObject_1$v;
|
|
13206
13220
|
|
|
13207
13221
|
var useOnClickOutside = function (ref, handler) {
|
|
13208
13222
|
React$2.useEffect(function () {
|
|
@@ -13291,7 +13305,7 @@ var reducer = function (state, action) {
|
|
|
13291
13305
|
}
|
|
13292
13306
|
}
|
|
13293
13307
|
};
|
|
13294
|
-
var Container$
|
|
13308
|
+
var Container$o = newStyled.div({
|
|
13295
13309
|
position: 'relative',
|
|
13296
13310
|
display: 'flex',
|
|
13297
13311
|
});
|
|
@@ -13327,7 +13341,7 @@ var SearchBar = function (_a) {
|
|
|
13327
13341
|
onClose();
|
|
13328
13342
|
}
|
|
13329
13343
|
};
|
|
13330
|
-
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
13344
|
+
return (jsxRuntime.jsxs("form", __assign$1({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$o, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Input, { value: state.term, placeholder: placeholder, onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: id, autoComplete: autoComplete, theme: theme, "aria-label": ariaLabel, onKeyDown: function (e) {
|
|
13331
13345
|
if (e.key === 'Enter') {
|
|
13332
13346
|
e.preventDefault();
|
|
13333
13347
|
e.stopPropagation();
|
|
@@ -13336,14 +13350,14 @@ var SearchBar = function (_a) {
|
|
|
13336
13350
|
} }, void 0), jsxRuntime.jsx(SearchControl, { showSearchIcon: isBlogSearchBar, open: state.open, onClose: handleOnClose, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && !!options.length && (jsxRuntime.jsx(ResultsPanel, { testId: resultsPanelDataTestId, options: options, header: shouldDisplaySuggestion() ? 'Most popular products' : undefined, footer: allResults ? "View all results (".concat(allResults, ")") : undefined, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
13337
13351
|
};
|
|
13338
13352
|
|
|
13339
|
-
var Container$
|
|
13353
|
+
var Container$n = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 524px;\n overflow: hidden;\n"])), function (_a) {
|
|
13340
13354
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
13341
13355
|
return borderRadiusVariant &&
|
|
13342
13356
|
"\n border-radius: 40px;\n ";
|
|
13343
13357
|
});
|
|
13344
13358
|
// max-height: 31.875rem;
|
|
13345
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
13346
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
13359
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
13360
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
13347
13361
|
var settings = {
|
|
13348
13362
|
dots: true,
|
|
13349
13363
|
infinite: false,
|
|
@@ -13370,7 +13384,7 @@ var ImageProductWithTags = function (_a) {
|
|
|
13370
13384
|
}
|
|
13371
13385
|
}
|
|
13372
13386
|
}, [images, selectedValue]);
|
|
13373
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$
|
|
13387
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [customClick && (jsxRuntime.jsx("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsxRuntime.jsx(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsxRuntime.jsx(Container$n, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsxRuntime.jsx(Slider, __assign$1({}, settings, { ref: slick }, { children: images.map(function (image) {
|
|
13374
13388
|
return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer$1, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, image.key));
|
|
13375
13389
|
}) }), void 0) }), void 0)] }, void 0));
|
|
13376
13390
|
};
|
|
@@ -13407,14 +13421,14 @@ function usePreventVerticalScroll(ref, dragThreshold) {
|
|
|
13407
13421
|
};
|
|
13408
13422
|
}, [preventTouch, ref, touchStart]);
|
|
13409
13423
|
}
|
|
13410
|
-
var templateObject_1$
|
|
13424
|
+
var templateObject_1$u, templateObject_2$k, templateObject_3$j;
|
|
13411
13425
|
|
|
13412
|
-
var Container$
|
|
13426
|
+
var Container$m = newStyled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
13413
13427
|
var ProductGalleryMobile = function (_a) {
|
|
13414
13428
|
var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
|
|
13415
|
-
return (jsxRuntime.jsx(Container$
|
|
13429
|
+
return (jsxRuntime.jsx(Container$m, { children: jsxRuntime.jsx(ImageProductWithTags, { images: images, customClick: customClick, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }, void 0));
|
|
13416
13430
|
};
|
|
13417
|
-
var templateObject_1$
|
|
13431
|
+
var templateObject_1$t;
|
|
13418
13432
|
|
|
13419
13433
|
var Portal = function (_a) {
|
|
13420
13434
|
var id = _a.id, className = _a.className, children = _a.children, overflow = _a.overflow, style = _a.style;
|
|
@@ -13547,14 +13561,14 @@ var react = __toCommonJS(react_exports);
|
|
|
13547
13561
|
var visibleStyle = function (_a) {
|
|
13548
13562
|
var opened = _a.opened;
|
|
13549
13563
|
return opened
|
|
13550
|
-
? css(templateObject_1$
|
|
13564
|
+
? css(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n "], ["\n opacity: 1;\n pointer-events: all;\n "]))) : css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n "], ["\n opacity: 0;\n pointer-events: none;\n "])));
|
|
13551
13565
|
};
|
|
13552
13566
|
var transformStyle = function (_a) {
|
|
13553
13567
|
var opened = _a.opened, maxFullScreen = _a.maxFullScreen;
|
|
13554
13568
|
return opened
|
|
13555
|
-
? css(templateObject_3$
|
|
13569
|
+
? css(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)') : css(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n transform: ", ";\n "], ["\n transform: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)');
|
|
13556
13570
|
};
|
|
13557
|
-
var Container$
|
|
13571
|
+
var Container$l = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n\n ", "\n ", "\n"])), function (props) { return "".concat(props.maxFullScreen ? '0' : 'var(--radius-regular)'); }, function (props) { return "".concat(props.padding ? props.padding : '20px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, mediaQueries({
|
|
13558
13572
|
minWidth: ['90%', 'var(--component-modal-minWidth)'],
|
|
13559
13573
|
}), visibleStyle, transformStyle);
|
|
13560
13574
|
var Overlay = newStyled.div(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n\n ", "\n"])), visibleStyle);
|
|
@@ -13567,7 +13581,7 @@ var Modal = function (_a) {
|
|
|
13567
13581
|
}
|
|
13568
13582
|
close();
|
|
13569
13583
|
};
|
|
13570
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$
|
|
13584
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$l, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
13571
13585
|
};
|
|
13572
13586
|
var modalEvent = function (id, detail) {
|
|
13573
13587
|
events.dispatchCustomEvent('modal', __assign$1({ id: id }, detail));
|
|
@@ -13595,51 +13609,51 @@ var useModal = function (id) {
|
|
|
13595
13609
|
close: close,
|
|
13596
13610
|
}); }, [close, open, opened]);
|
|
13597
13611
|
};
|
|
13598
|
-
var templateObject_1$
|
|
13612
|
+
var templateObject_1$s, templateObject_2$j, templateObject_3$i, templateObject_4$b, templateObject_5$7, templateObject_6$6;
|
|
13599
13613
|
|
|
13600
|
-
var Text$2 = newStyled.span(templateObject_1$
|
|
13601
|
-
var Title$
|
|
13614
|
+
var Text$2 = newStyled.span(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13615
|
+
var Title$2 = function (_a) {
|
|
13602
13616
|
var title = _a.title;
|
|
13603
13617
|
var theme = useTheme();
|
|
13604
13618
|
return jsxRuntime.jsx(Text$2, __assign$1({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
13605
13619
|
};
|
|
13606
|
-
var templateObject_1$
|
|
13620
|
+
var templateObject_1$r;
|
|
13607
13621
|
|
|
13608
|
-
var P = newStyled.p(templateObject_1$
|
|
13622
|
+
var P = newStyled.p(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13609
13623
|
var Promo = function (_a) {
|
|
13610
13624
|
var text = _a.text;
|
|
13611
13625
|
var theme = useTheme();
|
|
13612
13626
|
return (jsxRuntime.jsx(P, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13613
13627
|
};
|
|
13614
|
-
var templateObject_1$
|
|
13628
|
+
var templateObject_1$q;
|
|
13615
13629
|
|
|
13616
|
-
var Text$1 = newStyled.span(templateObject_1$
|
|
13617
|
-
var Description = function (_a) {
|
|
13630
|
+
var Text$1 = newStyled.span(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.125rem;\n color: ", ";\n margin: 0;\n padding: 0;\n"])), function (props) { return props.color; });
|
|
13631
|
+
var Description$1 = function (_a) {
|
|
13618
13632
|
var text = _a.text;
|
|
13619
13633
|
var theme = useTheme();
|
|
13620
13634
|
return jsxRuntime.jsx(Text$1, __assign$1({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13621
13635
|
};
|
|
13622
|
-
var templateObject_1$
|
|
13636
|
+
var templateObject_1$p;
|
|
13623
13637
|
|
|
13624
|
-
var Container$
|
|
13638
|
+
var Container$k = newStyled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n width: ", ";\n height: ", ";\n justify-content: center;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return "".concat(props.size, "em"); }, function (props) { return "".concat(props.size, "em"); });
|
|
13625
13639
|
var CloseButton$1 = function (_a) {
|
|
13626
13640
|
var onClick = _a.onClick, size = _a.size;
|
|
13627
13641
|
var theme = useTheme();
|
|
13628
|
-
return (jsxRuntime.jsx(Container$
|
|
13642
|
+
return (jsxRuntime.jsx(Container$k, __assign$1({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn", size: size }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: size - 1, height: size - 1, fill: "#fff" }, void 0) }), void 0));
|
|
13629
13643
|
};
|
|
13630
|
-
var templateObject_1$
|
|
13644
|
+
var templateObject_1$o;
|
|
13631
13645
|
|
|
13632
13646
|
var CartProductItem = {
|
|
13633
|
-
Title: Title$
|
|
13647
|
+
Title: Title$2,
|
|
13634
13648
|
Tag: OfferBanner,
|
|
13635
13649
|
Promo: Promo,
|
|
13636
|
-
Description: Description,
|
|
13650
|
+
Description: Description$1,
|
|
13637
13651
|
CloseButton: CloseButton$1,
|
|
13638
13652
|
};
|
|
13639
13653
|
|
|
13640
|
-
var Container$
|
|
13641
|
-
var Item = newStyled.span(templateObject_2$
|
|
13642
|
-
var Number$1 = newStyled(Item)(templateObject_3$
|
|
13654
|
+
var Container$j = newStyled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"], ["\n padding: 0.625rem 0;\n border: 0.063rem solid ", ";\n border-radius: 0.5rem;\n display: inline-flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n max-width: 3.75rem;\n\n * {\n color: ", ";\n }\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
13655
|
+
var Item = newStyled.span(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"], ["\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n padding: 0;\n"])));
|
|
13656
|
+
var Number$1 = newStyled(Item)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"], ["\n width: 1.25rem;\n text-align: center;\n font-weight: 600;\n"])));
|
|
13643
13657
|
var IncreaseDecrease = newStyled(Item)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n color: ", ";\n"])), function (props) { return props.isMaxSelected && 'var(--colors-shades-175-color)'; });
|
|
13644
13658
|
var QuantityPicker = function (_a) {
|
|
13645
13659
|
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c, value = _a.value, _d = _a.testId, testId = _d === void 0 ? 'quantity-picker' : _d, onChange = _a.onChange;
|
|
@@ -13663,9 +13677,9 @@ var QuantityPicker = function (_a) {
|
|
|
13663
13677
|
return clamp(value);
|
|
13664
13678
|
});
|
|
13665
13679
|
}, [value, clamp]);
|
|
13666
|
-
return (jsxRuntime.jsxs(Container$
|
|
13680
|
+
return (jsxRuntime.jsxs(Container$j, __assign$1({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": testId }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign$1({ "data-testid": "".concat(testId, "-minus"), onClick: function () { return setInternal(function (value) { return clamp(value - 1); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: internal }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign$1({ isMaxSelected: value === maxValue, "data-testid": "".concat(testId, "-plus"), onClick: function () { return setInternal(function (value) { return clamp(value + 1); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13667
13681
|
};
|
|
13668
|
-
var templateObject_1$
|
|
13682
|
+
var templateObject_1$n, templateObject_2$i, templateObject_3$h, templateObject_4$a;
|
|
13669
13683
|
|
|
13670
13684
|
var htmlReactParser = {exports: {}};
|
|
13671
13685
|
|
|
@@ -17446,9 +17460,9 @@ HTMLReactParser$1.htmlToDOM;
|
|
|
17446
17460
|
HTMLReactParser$1.attributesToProps;
|
|
17447
17461
|
HTMLReactParser$1.Element;
|
|
17448
17462
|
|
|
17449
|
-
var Container$
|
|
17450
|
-
var Card$1 = newStyled.div(templateObject_2$
|
|
17451
|
-
var Tag$1 = newStyled.div(templateObject_3$
|
|
17463
|
+
var Container$i = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
17464
|
+
var Card$1 = newStyled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 20px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"])));
|
|
17465
|
+
var Tag$1 = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
17452
17466
|
var Label$1 = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
17453
17467
|
var Check$1 = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
17454
17468
|
var IconContainer = newStyled.div(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"], ["\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n [aria-checked='true'] & * {\n fill: var(--color);\n }\n"])));
|
|
@@ -17456,7 +17470,7 @@ var IconPlaceholder = newStyled.div(templateObject_7$4 || (templateObject_7$4 =
|
|
|
17456
17470
|
var DiscountContainer$1 = newStyled.div(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject(["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"], ["\n display: flex,\n flex-direction: row,\n align-items: center;\n justify-content: center;\n"])));
|
|
17457
17471
|
var PackSelector = function (_a) {
|
|
17458
17472
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17459
|
-
return (jsxRuntime.jsx(Container$
|
|
17473
|
+
return (jsxRuntime.jsx(Container$i, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17460
17474
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17461
17475
|
}) }), void 0));
|
|
17462
17476
|
};
|
|
@@ -17482,17 +17496,17 @@ var PackCard$1 = function (_a) {
|
|
|
17482
17496
|
currency: currencyCode || 'USD',
|
|
17483
17497
|
}), ' ', "each"] }), void 0)] }), void 0));
|
|
17484
17498
|
};
|
|
17485
|
-
var templateObject_1$
|
|
17499
|
+
var templateObject_1$m, templateObject_2$h, templateObject_3$g, templateObject_4$9, templateObject_5$6, templateObject_6$5, templateObject_7$4, templateObject_8$3;
|
|
17486
17500
|
|
|
17487
|
-
var Container$
|
|
17488
|
-
var Card = newStyled.div(templateObject_2$
|
|
17489
|
-
var Tag = newStyled.div(templateObject_3$
|
|
17501
|
+
var Container$h = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
17502
|
+
var Card = newStyled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n color: var(--color);\n }\n }\n"])));
|
|
17503
|
+
var Tag = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
17490
17504
|
var Label = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
17491
17505
|
var Check = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
17492
17506
|
var DiscountContainer = newStyled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: row,\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row,\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
17493
17507
|
var PackSelectorV2 = function (_a) {
|
|
17494
17508
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
17495
|
-
return (jsxRuntime.jsx(Container$
|
|
17509
|
+
return (jsxRuntime.jsx(Container$h, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
17496
17510
|
return (jsxRuntime.jsx(PackCard, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
17497
17511
|
}) }), void 0));
|
|
17498
17512
|
};
|
|
@@ -17513,23 +17527,23 @@ var PackCard = function (_a) {
|
|
|
17513
17527
|
currency: currencyCode || 'USD',
|
|
17514
17528
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
17515
17529
|
};
|
|
17516
|
-
var templateObject_1$
|
|
17530
|
+
var templateObject_1$l, templateObject_2$g, templateObject_3$f, templateObject_4$8, templateObject_5$5, templateObject_6$4;
|
|
17517
17531
|
|
|
17518
|
-
var Title = newStyled.div(templateObject_1$
|
|
17519
|
-
var H2 = newStyled.h2(templateObject_2$
|
|
17520
|
-
var ArrowContainer = newStyled.div(templateObject_3$
|
|
17521
|
-
var Container$
|
|
17532
|
+
var Title$1 = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 0.063rem solid ", ";\n user-select: none;\n cursor: pointer;\n"])), function (props) { return props.borderColor; });
|
|
17533
|
+
var H2 = newStyled.h2(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n margin: 0.75rem 0;\n"])), function (props) { return props.color; });
|
|
17534
|
+
var ArrowContainer = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n width: 1rem;\n height: 1rem;\n"], ["\n width: 1rem;\n height: 1rem;\n"])));
|
|
17535
|
+
var Container$g = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n @media (max-width: 768px) {\n display: ", ";\n }\n"], ["\n @media (max-width: 768px) {\n display: ", ";\n }\n"])), function (props) { return (props.showInMobile ? 'block' : 'none'); });
|
|
17522
17536
|
var Accordion = function (_a) {
|
|
17523
17537
|
var title = _a.title, children = _a.children, _b = _a.isOpenByDefault, isOpenByDefault = _b === void 0 ? false : _b, _c = _a.showInMobile, showInMobile = _c === void 0 ? true : _c;
|
|
17524
17538
|
var theme = useTheme();
|
|
17525
17539
|
var _d = React__default["default"].useState(isOpenByDefault), isOpen = _d[0], setIsOpen = _d[1];
|
|
17526
|
-
return (jsxRuntime.jsxs(Container$
|
|
17540
|
+
return (jsxRuntime.jsxs(Container$g, __assign$1({ "data-testid": "FiltersAccordion", showInMobile: showInMobile }, { children: [jsxRuntime.jsxs(Title$1, __assign$1({ onClick: function () { return setIsOpen(function (state) { return !state; }); }, borderColor: theme.colors.shades['100'].color, "data-testid": "accordion-title" }, { children: [jsxRuntime.jsx(H2, __assign$1({ color: theme.colors.shades['550'].color }, { children: title }), void 0), jsxRuntime.jsx(ArrowContainer, { children: isOpen ? (jsxRuntime.jsx(Icon.Arrows.ChevronUp, { fill: theme.colors.shades['700'].color }, void 0)) : (jsxRuntime.jsx(Icon.Arrows.ChevronDown, { fill: theme.colors.shades['700'].color }, void 0)) }, void 0)] }), void 0), jsxRuntime.jsx("div", __assign$1({ style: { display: isOpen ? 'block' : 'none' }, "data-testid": "accordion-children-container" }, { children: children }), void 0)] }), void 0));
|
|
17527
17541
|
};
|
|
17528
|
-
var templateObject_1$
|
|
17542
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$e, templateObject_4$7;
|
|
17529
17543
|
|
|
17530
|
-
var SectionContent = newStyled.div(templateObject_1$
|
|
17531
|
-
var Header = newStyled.div(templateObject_2$
|
|
17532
|
-
var MobileHeader = newStyled.div(templateObject_3$
|
|
17544
|
+
var SectionContent = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"], ["\n display: grid;\n grid-template-columns: repeat(", ", 1fr);\n grid-gap: 10px;\n margin: 1.25rem 0;\n"])), function (props) { return props.cols; });
|
|
17545
|
+
var Header = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1.063rem;\n"])));
|
|
17546
|
+
var MobileHeader = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 2.25rem;\n margin-top: 1.063rem;\n"])));
|
|
17533
17547
|
var MobileIconsContainer = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"], ["\n width: 1.5rem;\n height: 1.5rem;\n cursor: pointer;\n"])));
|
|
17534
17548
|
var H4 = newStyled.h4(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
17535
17549
|
var FilterLink = newStyled.a(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"], ["\n font-size: 1rem;\n font-weight: 700;\n line-height: 1.5rem;\n color: ", ";\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
@@ -17537,7 +17551,7 @@ var OptionContainer = newStyled.div(templateObject_7$3 || (templateObject_7$3 =
|
|
|
17537
17551
|
var ClearAll = newStyled.span(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n text-decoration: underline;\n cursor: pointer;\n"])), function (props) { return props.color; });
|
|
17538
17552
|
var MobileFooter = newStyled.div(templateObject_9$1 || (templateObject_9$1 = __makeTemplateObject(["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n background-color: #fff;\n padding: 0.75rem 0.938rem;\n position: sticky;\n bottom: 0;\n z-index: 1;\n margin-top: 5.625rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
17539
17553
|
var MobileClearContainer = newStyled.div(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n\n span {\n margin-left: 0.5rem;\n user-select: none;\n }\n"])));
|
|
17540
|
-
var templateObject_1$
|
|
17554
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$d, templateObject_4$6, templateObject_5$4, templateObject_6$3, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1;
|
|
17541
17555
|
|
|
17542
17556
|
var Filters = function (_a) {
|
|
17543
17557
|
var values = _a.values, onChange = _a.onChange, _b = _a.tagsColor, tagsColor = _b === void 0 ? '#fff6ef' : _b, filterByText = _a.filterByText, clearAllText = _a.clearAllText, isMobile = _a.isMobile, filtersSelectText = _a.filtersSelectText, applyText = _a.applyText, mobileApplyButtonClick = _a.mobileApplyButtonClick, mobileBackArrowClick = _a.mobileBackArrowClick, onResetValues = _a.onResetValues;
|
|
@@ -17654,20 +17668,20 @@ var FilterCheckboxColor = function (_a) {
|
|
|
17654
17668
|
return (jsxRuntime.jsx(Checkbox, { onChange: onChange, checked: checked, text: text, id: "filter[".concat(sectionIndex, ",").concat(itemIndex, "]"), size: exports.ComponentSize.Medium, variant: "color", blockUncheck: blockUncheck, backgroundColor: color }, itemIndex));
|
|
17655
17669
|
};
|
|
17656
17670
|
|
|
17657
|
-
var Container$
|
|
17658
|
-
var BackArrow = newStyled.div(templateObject_2$
|
|
17659
|
-
var BoldSpan = newStyled.span(templateObject_3$
|
|
17671
|
+
var Container$f = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding: 0 1rem 1rem;\n"])));
|
|
17672
|
+
var BackArrow = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"], ["\n transform: rotate(180deg);\n margin-right: 0.5rem;\n"])));
|
|
17673
|
+
var BoldSpan = newStyled.span(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
17660
17674
|
var NormalSpan = newStyled.span(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n white-space: pre;\n"])));
|
|
17661
17675
|
var SearchNavigationParents = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
17662
17676
|
var SearchNavigation = function (_a) {
|
|
17663
17677
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17664
|
-
return (jsxRuntime.jsxs(Container$
|
|
17678
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsxs(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsxRuntime.jsx(BackArrow, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsxRuntime.jsx(BoldSpan, { children: returnText }, void 0)] }), void 0), jsxRuntime.jsx(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17665
17679
|
return index === steps.length - 1 ? (jsxRuntime.jsx(BoldSpan, { children: step }, void 0)) : (jsxRuntime.jsx(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17666
17680
|
}) }, void 0)] }, void 0));
|
|
17667
17681
|
};
|
|
17668
|
-
var templateObject_1$
|
|
17682
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$c, templateObject_4$5, templateObject_5$3;
|
|
17669
17683
|
|
|
17670
|
-
var TabContainer = newStyled.div(templateObject_1$
|
|
17684
|
+
var TabContainer = newStyled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-content: center;\n flex-direction: column;\n flex: 1 1 0;\n font-size: ", ";\n height: ", ";\n margin: 0 auto;\n text-align: center;\n cursor: pointer;\n transition: all 0.2s;\n max-width: ", ";\n border: none;\n\n ", "\n"])), function (_a) {
|
|
17671
17685
|
var titleSize = _a.titleSize;
|
|
17672
17686
|
return titleSize;
|
|
17673
17687
|
}, function (_a) {
|
|
@@ -17684,14 +17698,14 @@ var Tab = function (_a) {
|
|
|
17684
17698
|
var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
|
|
17685
17699
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
|
|
17686
17700
|
};
|
|
17687
|
-
var templateObject_1$
|
|
17701
|
+
var templateObject_1$h;
|
|
17688
17702
|
|
|
17689
|
-
var Container$
|
|
17690
|
-
var TabList = newStyled.div(templateObject_2$
|
|
17703
|
+
var Container$e = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
17704
|
+
var TabList = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"], ["\n background-color: ", ";\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0 25px;\n"])), function (_a) {
|
|
17691
17705
|
var backgroundColor = _a.backgroundColor;
|
|
17692
17706
|
return backgroundColor;
|
|
17693
17707
|
});
|
|
17694
|
-
var TabContent = newStyled.div(templateObject_3$
|
|
17708
|
+
var TabContent = newStyled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
17695
17709
|
var TabSeparator = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"], ["\n color: var(--colors-shades-white-color);\n font-family: initial;\n font-size: 40px;\n line-height: 69px;\n padding: 0 25px;\n"])));
|
|
17696
17710
|
var Tabs = function (_a) {
|
|
17697
17711
|
var _b;
|
|
@@ -17701,11 +17715,11 @@ var Tabs = function (_a) {
|
|
|
17701
17715
|
return null;
|
|
17702
17716
|
}
|
|
17703
17717
|
var selectedContent = (_b = tabs.find(function (tab) { return tab.title === selectedTab; })) === null || _b === void 0 ? void 0 : _b.content;
|
|
17704
|
-
return (jsxRuntime.jsxs(Container$
|
|
17718
|
+
return (jsxRuntime.jsxs(Container$e, __assign$1({ "data-testid": "tabs-container" }, { children: [jsxRuntime.jsx(TabList, __assign$1({ backgroundColor: backgroundColor }, { children: tabs.map(function (tab, index) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tab, { title: tab.title, selected: selectedTab === tab.title, onClick: setSelectedTab, tabsMaxWidth: tabsMaxWidth }, tab.title), index + 1 < tabs.length && jsxRuntime.jsx(TabSeparator, { children: "|" }, void 0)] }, void 0)); }) }), void 0), jsxRuntime.jsx(TabContent, __assign$1({ "data-testid": "tab-content" }, { children: selectedContent }), void 0)] }), void 0));
|
|
17705
17719
|
};
|
|
17706
|
-
var templateObject_1$
|
|
17720
|
+
var templateObject_1$g, templateObject_2$c, templateObject_3$b, templateObject_4$4;
|
|
17707
17721
|
|
|
17708
|
-
var Container$
|
|
17722
|
+
var Container$d = newStyled.div(function (props) { return ({
|
|
17709
17723
|
height: 'auto',
|
|
17710
17724
|
textAlign: 'center',
|
|
17711
17725
|
justifyContent: 'center',
|
|
@@ -17755,12 +17769,12 @@ var IconsWithTitle = function (_a) {
|
|
|
17755
17769
|
textAlign: 'center',
|
|
17756
17770
|
lineHeight: '18px',
|
|
17757
17771
|
};
|
|
17758
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$
|
|
17772
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$d, __assign$1({ textPosition: iconTitlePosition }, { children: [jsxRuntime.jsx(IconWrapper, __assign$1({ backgroundColor: backgroundColor, style: iconStyles, iconSize: isMobile ? iconSizeMobile : iconSizeDesktop }, { children: jsxRuntime.jsx(IconComponent, { width: isMobile ? iconSizeMobile : iconSizeDesktop, height: isMobile ? iconSizeMobile : iconSizeDesktop, fill: iconColor }, void 0) }), void 0), jsxRuntime.jsx(Text$6, { variant: "heading6", weight: "demi", style: titleStyles ? titleStyles : defaultTitleStyle, dangerouslySetInnerHTML: isTitleInnerHtml ? { __html: iconTitle } : { __html: "<span>".concat(iconTitle, "</span>") } }, void 0)] }), void 0) }, void 0));
|
|
17759
17773
|
};
|
|
17760
17774
|
|
|
17761
|
-
var ImageWrapper$1 = newStyled.div(templateObject_1$
|
|
17762
|
-
var VideoOverlay = newStyled.div(templateObject_2$
|
|
17763
|
-
var FullscreenVideo = newStyled.div(templateObject_3$
|
|
17775
|
+
var ImageWrapper$1 = newStyled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n position: relative;\n display: flex;\n max-height: fit-content;\n"], ["\n position: relative;\n display: flex;\n max-height: fit-content;\n"])));
|
|
17776
|
+
var VideoOverlay = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: rgba(247, 160, 139, 0.1);\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n top: 0;\n left: 0;\n border-radius: 25px;\n color: #ffffff;\n gap: 15px;\n cursor: pointer;\n text-align: center;\n @media (max-width: 768px) {\n justify-content: end;\n gap: 10px;\n padding-bottom: 20px;\n text-align: center;\n }\n"])));
|
|
17777
|
+
var FullscreenVideo = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n z-index: 9999;\n"])));
|
|
17764
17778
|
var ImageVideo = function (_a) {
|
|
17765
17779
|
var imageLink = _a.imageLink, isVideo = _a.isVideo, isMobile = _a.isMobile;
|
|
17766
17780
|
var video = React$2.useRef(null);
|
|
@@ -17780,11 +17794,11 @@ var ImageVideo = function (_a) {
|
|
|
17780
17794
|
height: '100%',
|
|
17781
17795
|
} }, void 0)] }, void 0))] }, void 0));
|
|
17782
17796
|
};
|
|
17783
|
-
var templateObject_1$
|
|
17797
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$a;
|
|
17784
17798
|
|
|
17785
|
-
var ContainerDesktop = css(templateObject_1$
|
|
17786
|
-
var ContainerMobile = css(templateObject_2$
|
|
17787
|
-
var Container$
|
|
17799
|
+
var ContainerDesktop = css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"], ["\n flex: 0 0 50%;\n justify-content: space-around;\n height: 574px;\n"])));
|
|
17800
|
+
var ContainerMobile = css(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"], ["\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 16px;\n height: auto;\n @media (max-width: 768px) {\n max-height: fit-content;\n padding: 50px 15px;\n }\n"])));
|
|
17801
|
+
var Container$c = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"], ["\n padding: 60px 34px 40px 34px;\n display: flex;\n @media (min-width: 769px) {\n ", "\n }\n @media (max-width: 768px) {\n ", "\n }\n"])), ContainerDesktop, ContainerMobile);
|
|
17788
17802
|
var TextContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0 15px;\n gap: 24px;\n text-align: center;\n"])));
|
|
17789
17803
|
var TextWithImage = function (_a) {
|
|
17790
17804
|
var _b, _c, _d, _e;
|
|
@@ -17805,7 +17819,7 @@ var TextWithImage = function (_a) {
|
|
|
17805
17819
|
// @ts-ignore
|
|
17806
17820
|
props.isRedirectionURL ? (window.location.href = props.URLLink) : props.onButtonClick();
|
|
17807
17821
|
};
|
|
17808
|
-
return (jsxs(Container$
|
|
17822
|
+
return (jsxs(Container$c, __assign$1({ style: { backgroundColor: backgroundColor } }, { children: [isMobile && jsx(ImageTitle, {}, void 0), (imageLeftSide || isMobile) && (jsx(ImageVideo, { imageLink: (_b = props.imgVideo) === null || _b === void 0 ? void 0 : _b.imageLink, isMobile: isMobile, isVideo: (_c = props.imgVideo) === null || _c === void 0 ? void 0 : _c.isVideo }, void 0)), jsxs(TextContainer, { children: [!isMobile && jsx(ImageTitle, {}, void 0), jsx(Text$6, __assign$1({ variant: "body", weight: "regular", style: textStyle ? textStyle : { maxWidth: '450px' } }, { children: text }), void 0), children, jsx(BaseCTA, { text: buttomText, size: exports.ComponentSize.Medium, wide: isMobile && buttonWideOnMobile ? true : false, onClick: buttonAction, testId: buttomText, css: {
|
|
17809
17823
|
backgroundColor: props.btnBGColor,
|
|
17810
17824
|
color: '#ffffff',
|
|
17811
17825
|
border: props.btnBGColor,
|
|
@@ -17815,9 +17829,9 @@ var TextWithImage = function (_a) {
|
|
|
17815
17829
|
},
|
|
17816
17830
|
} }, void 0), jsx("div", { children: props.contentAfterButton }, void 0)] }, void 0), !imageLeftSide && !isMobile && (jsx(ImageVideo, { imageLink: (_d = props.imgVideo) === null || _d === void 0 ? void 0 : _d.imageLink, isMobile: isMobile, isVideo: (_e = props.imgVideo) === null || _e === void 0 ? void 0 : _e.isVideo }, void 0))] }), void 0));
|
|
17817
17831
|
};
|
|
17818
|
-
var templateObject_1$
|
|
17832
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$9, templateObject_4$3;
|
|
17819
17833
|
|
|
17820
|
-
var Container$
|
|
17834
|
+
var Container$b = newStyled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
17821
17835
|
var AccordionOptions = function (_a) {
|
|
17822
17836
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
17823
17837
|
var _b = React$2.useState({
|
|
@@ -17830,7 +17844,7 @@ var AccordionOptions = function (_a) {
|
|
|
17830
17844
|
}
|
|
17831
17845
|
return false;
|
|
17832
17846
|
};
|
|
17833
|
-
return (jsxRuntime.jsx(Container$
|
|
17847
|
+
return (jsxRuntime.jsx(Container$b, { children: accordions.map(function (accordion, index) {
|
|
17834
17848
|
var forceOpenValue = getForceOpen(index);
|
|
17835
17849
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
17836
17850
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -17841,9 +17855,9 @@ var AccordionOptions = function (_a) {
|
|
|
17841
17855
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
17842
17856
|
}) }, void 0));
|
|
17843
17857
|
};
|
|
17844
|
-
var templateObject_1$
|
|
17858
|
+
var templateObject_1$d;
|
|
17845
17859
|
|
|
17846
|
-
var Container$
|
|
17860
|
+
var Container$a = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"], ["\n ", "\n display: flex;\n flex-direction: column;\n padding: 0px 0px 5px;\n width: ", ";\n background: ", ";\n color: ", ";\n border: ", ";\n"])), function (_a) {
|
|
17847
17861
|
var alignCenter = _a.alignCenter;
|
|
17848
17862
|
return alignCenter &&
|
|
17849
17863
|
"\n justify-content: center;\n align-items: center;\n text-align: center;\n ";
|
|
@@ -17853,14 +17867,14 @@ var Container$8 = newStyled.div(templateObject_1$a || (templateObject_1$a = __ma
|
|
|
17853
17867
|
}, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) {
|
|
17854
17868
|
return props.border ? "".concat(props.border.borderWidth, " solid ").concat(props.border.borderColor) : 'none';
|
|
17855
17869
|
});
|
|
17856
|
-
var TitleText = newStyled.div(templateObject_2$
|
|
17857
|
-
var BannerText = newStyled.div(templateObject_3$
|
|
17870
|
+
var TitleText = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"], ["\n font-style: normal;\n font-weight: 700;\n line-height: 267%;\n margin: 0px 20px 0px;\n font-size: 30px;\n @media (max-width: 768px) {\n font-size: 24px;\n }\n"])));
|
|
17871
|
+
var BannerText = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"], ["\n font-style: normal;\n font-weight: 400;\n line-height: 120%;\n font-size: 20px;\n letter-spacing: -0.02em;\n margin: 0px 20px 20px;\n width: 70%;\n @media (max-width: 768px) {\n font-size: 16px;\n width: 80%;\n }\n"])));
|
|
17858
17872
|
var ShortBanner = function (_a) {
|
|
17859
17873
|
var textColor = _a.textColor, title = _a.title, bannerText = _a.bannerText, backgroundColor = _a.backgroundColor, _b = _a.alignCenter, alignCenter = _b === void 0 ? false : _b, _c = _a.widthAuto, widthAuto = _c === void 0 ? true : _c;
|
|
17860
17874
|
var theme = useTheme();
|
|
17861
|
-
return (jsxRuntime.jsxs(Container$
|
|
17875
|
+
return (jsxRuntime.jsxs(Container$a, __assign$1({ backgroundColor: backgroundColor, alignCenter: alignCenter, widthAuto: widthAuto, "data-testid": "BannerContainer", theme: theme, textColor: textColor }, { children: [jsxRuntime.jsx(TitleText, { children: title }, void 0), jsxRuntime.jsx(BannerText, { children: bannerText }, void 0)] }), void 0));
|
|
17862
17876
|
};
|
|
17863
|
-
var templateObject_1$
|
|
17877
|
+
var templateObject_1$c, templateObject_2$9, templateObject_3$8;
|
|
17864
17878
|
|
|
17865
17879
|
/* base styles & size variants */
|
|
17866
17880
|
var UserInfoTextStyles = {
|
|
@@ -17928,13 +17942,13 @@ var getStylesBySize = function (size, theme) {
|
|
|
17928
17942
|
}
|
|
17929
17943
|
};
|
|
17930
17944
|
|
|
17931
|
-
var Container$
|
|
17945
|
+
var Container$9 = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n row-gap: ", ";\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n row-gap: ", ";\n background: var(--colors-shades-white-color);\n border: 1px solid var(--colors-shades-50-color);\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n padding: ", ";\n flex-wrap: wrap;\n"])), function (props) { return (props.isMobile ? '12px' : '15px'); }, function (props) {
|
|
17932
17946
|
return props.isMobile
|
|
17933
17947
|
? props.styles.imageContainerMobileMaxWidth
|
|
17934
17948
|
: props.styles.imageContainerMaxWidth;
|
|
17935
17949
|
}, function (props) { return props.styles.imageContainerPadding; });
|
|
17936
|
-
var ImageContainer$2 = newStyled.div(templateObject_2$
|
|
17937
|
-
var ImageCard = newStyled.div(templateObject_3$
|
|
17950
|
+
var ImageContainer$2 = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"], ["\n display: flex;\n flex-direction: row;\n width: 100%;\n height: 100%;\n column-gap: 4px;\n"])));
|
|
17951
|
+
var ImageCard = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n"], ["\n display: flex;\n min-height: ", ";\n min-width: ", ";\n width: ", ";\n flex-wrap: wrap;\n"])), function (props) {
|
|
17938
17952
|
return props.isMobile ? props.styles.mobileImageMinHeight : props.styles.imageMinHeight;
|
|
17939
17953
|
}, function (props) {
|
|
17940
17954
|
return props.isMobile ? props.styles.mobileImageMinWidth : props.styles.imageMinWidth;
|
|
@@ -17952,13 +17966,13 @@ var BeforeAfterCard = function (_a) {
|
|
|
17952
17966
|
var theme = useTheme();
|
|
17953
17967
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17954
17968
|
var stylesBySize = getStylesBySize(size, theme);
|
|
17955
|
-
return (jsxRuntime.jsxs(Container$
|
|
17969
|
+
return (jsxRuntime.jsxs(Container$9, __assign$1({ "data-testid": "Container", isMobile: isMobile, styles: stylesBySize }, { children: [jsxRuntime.jsxs(ImageContainer$2, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageCard, __assign$1({ "data-testid": "ImageCard", isMobile: isMobile, styles: stylesBySize }, { children: jsxRuntime.jsx(Image, { borderRadius: imageBorderRadius, src: beforeImage, alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(ImageCard, __assign$1({ isMobile: isMobile, styles: stylesBySize }, { children: jsxRuntime.jsx(Image, { borderRadius: imageBorderRadius, src: afterImage, alt: "after", height: "100%", width: "100%" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(UserInfoText, __assign$1({ "data-testid": "UserInfoText", theme: theme, alignCenter: alignCenter, fontSize: isMobile ? stylesBySize.userInfoTextMobileFontSize : stylesBySize.userInfoTextFontSize }, { children: "".concat(name, ", ").concat(age, " | ").concat(months, " months") }), void 0)] }), void 0));
|
|
17956
17970
|
};
|
|
17957
|
-
var templateObject_1$
|
|
17971
|
+
var templateObject_1$b, templateObject_2$8, templateObject_3$7;
|
|
17958
17972
|
|
|
17959
|
-
var Container$
|
|
17960
|
-
var ImageContainer$1 = newStyled.div(templateObject_2$
|
|
17961
|
-
var StyledTitle = newStyled.div(templateObject_3$
|
|
17973
|
+
var Container$8 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"], ["\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n border-radius: 10px;\n max-width: ", ";\n width: 100%;\n height: 100%;\n flex-wrap: wrap;\n row-gap: 15px;\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
17974
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n max-width: ", ";\n height: ", ";\n"], ["\n display: flex;\n max-width: ", ";\n height: ", ";\n"])), function (props) { return (props.isMobile ? '200px' : '207px'); }, function (props) { return (props.isMobile ? '200px' : '207px'); });
|
|
17975
|
+
var StyledTitle = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n ", "\n"], ["\n display: flex;\n ", "\n"])), function (_a) {
|
|
17962
17976
|
var titlePosition = _a.titlePosition;
|
|
17963
17977
|
return titlePosition == 'center' &&
|
|
17964
17978
|
"\nalign-items:center;\njustify-content:center;\n";
|
|
@@ -17966,13 +17980,13 @@ var StyledTitle = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __ma
|
|
|
17966
17980
|
var ImageCardWithDescription = function (_a) {
|
|
17967
17981
|
var image = _a.image, title = _a.title, description = _a.description, _b = _a.titlePosition, titlePosition = _b === void 0 ? 'left' : _b;
|
|
17968
17982
|
var isMobile = useWindowDimensions({ desktop: 768, mobile: 0 }).isMobile;
|
|
17969
|
-
return (jsxRuntime.jsxs(Container$
|
|
17983
|
+
return (jsxRuntime.jsxs(Container$8, __assign$1({ "data-testid": "Container", isMobile: isMobile }, { children: [jsxRuntime.jsx(ImageContainer$1, __assign$1({ "data-testid": "ImageContainer", isMobile: isMobile }, { children: jsxRuntime.jsx(Image, { src: image, borderRadius: "40px", alt: "before", height: "100%", width: "100%" }, void 0) }), void 0), jsxRuntime.jsx(StyledTitle, __assign$1({ titlePosition: titlePosition, "data-testid": "StyledTitle" }, { children: isMobile ? (jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "demi" }, { children: title }), void 0)) : (jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading6", weight: "demi" }, { children: title }), void 0)) }), void 0), jsxRuntime.jsx(Text$6, __assign$1({ variant: "link", weight: "regular" }, { children: description }), void 0)] }), void 0));
|
|
17970
17984
|
};
|
|
17971
|
-
var templateObject_1$
|
|
17985
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$6;
|
|
17972
17986
|
|
|
17973
|
-
var Container$
|
|
17974
|
-
var CheckpointContainer = newStyled.div(templateObject_2$
|
|
17975
|
-
var CheckpointDate = newStyled.div(templateObject_3$
|
|
17987
|
+
var Container$7 = newStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
17988
|
+
var CheckpointContainer = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
17989
|
+
var CheckpointDate = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"], ["\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n padding-bottom: ", ";\n width: 60px;\n min-width: 60px;\n margin-right: 10px;\n"])), function (props) { return props.currentSpace; });
|
|
17976
17990
|
var CheckpointDateLabel = newStyled.p(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"], ["\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n font-weight: ", ";\n"])), function (props) { return (props.lastElement ? '600' : '400'); });
|
|
17977
17991
|
var CheckpointStatus = newStyled.p(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"], ["\n font-size: 14px;\n line-height: 22px;\n transform: translate(0, 22px);\n margin: 0;\n margin-left: 9px;\n color: ", ";\n font-weight: ", ";\n text-align: left;\n"])), function (props) { return (props.finishedTrack ? props.finishedTrackColor : ''); }, function (props) { return (props.finishedTrack ? '600' : '400'); });
|
|
17978
17992
|
var ActiveCheckpointTrack = newStyled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"], ["\n width: 13px;\n min-width: 13px;\n background-color: ", ";\n transform: ", ";\n position: relative;\n border-radius: ", ";\n margin-top: -1px;\n padding-bottom: ", ";\n margin-bottom: ", ";\n"])), function (props) { return props.trackColor; }, function (props) { return (props.firstElement ? 'translate(0, 22px)' : 'translate(0, 33px)'); }, function (props) {
|
|
@@ -17999,7 +18013,7 @@ var TrackingProgress = function (_a) {
|
|
|
17999
18013
|
}
|
|
18000
18014
|
return '30px';
|
|
18001
18015
|
};
|
|
18002
|
-
return (jsxRuntime.jsxs(Container$
|
|
18016
|
+
return (jsxRuntime.jsxs(Container$7, __assign$1({ "data-testid": "tracking-progress" }, { children: [checkPoints.map(function (_a, index) {
|
|
18003
18017
|
var day = _a.day, date = _a.date, statusMessage = _a.statusMessage;
|
|
18004
18018
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: day }), void 0), jsxRuntime.jsx(CheckpointDateLabel, __assign$1({ lastElement: index + 1 === checkPoints.length }, { children: date }), void 0)] }), void 0), index + 1 !== checkPoints.length && (jsxRuntime.jsx(ActiveCheckpointTrack, __assign$1({ trackColor: fillSpaces
|
|
18005
18019
|
? theme.colors.semantic.informative.color
|
|
@@ -18008,11 +18022,11 @@ var TrackingProgress = function (_a) {
|
|
|
18008
18022
|
return (jsxRuntime.jsxs(CheckpointContainer, __assign$1({ "data-testid": "empty-checkpoint-track" }, { children: [jsxRuntime.jsxs(CheckpointDate, __assign$1({ currentSpace: getCurrentSpace(index) }, { children: [jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0), jsxRuntime.jsx(CheckpointDateLabel, { lastElement: index + 1 === emptySpaces.length }, void 0)] }), void 0), index + 1 !== emptySpaces.length && (jsxRuntime.jsx(ActiveCheckpointTrack, { trackColor: theme.colors.shades['200'].color, firstElement: false, lastElement: index + 2 === emptySpaces.length }, void 0)), jsxRuntime.jsx(CheckpointStatus, { finishedTrack: false }, void 0)] }), index));
|
|
18009
18023
|
})] }), void 0));
|
|
18010
18024
|
};
|
|
18011
|
-
var templateObject_1$
|
|
18025
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$2, templateObject_8$1;
|
|
18012
18026
|
|
|
18013
|
-
var Container$
|
|
18014
|
-
var ReviewsContainer = newStyled.div(templateObject_2$
|
|
18015
|
-
var ReviewsCount = newStyled.div(templateObject_3$
|
|
18027
|
+
var Container$6 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: auto;\n"])));
|
|
18028
|
+
var ReviewsContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n\n @media (min-width: 768px) {\n flex-direction: row;\n gap: 30px;\n }\n"])));
|
|
18029
|
+
var ReviewsCount = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"], ["\n display: block;\n\n @media (min-width: 768px) {\n display: flex;\n flex-direction: column;\n }\n"])));
|
|
18016
18030
|
var ReviewsStars = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"], ["\n display: flex;\n margin-bottom: 10px;\n\n @media (min-width: 768px) {\n margin-bottom: 0;\n }\n"])));
|
|
18017
18031
|
var ReviewsTextCount = newStyled(Text$6)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"], ["\n margin-right: 5px;\n padding-top: 6px;\n line-height: 32px;\n\n @media (min-width: 768px) {\n font-size: 42px;\n line-height: 46px;\n }\n"])));
|
|
18018
18032
|
var ReviewsImages = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"], ["\n display: flex;\n flex-wrap: wrap;\n max-width: 348px;\n gap: 4px;\n justify-content: center;\n\n @media (min-width: 768px) {\n gap: 8px;\n max-width: 360px;\n }\n"])));
|
|
@@ -18024,13 +18038,13 @@ var ReviewsHeader = function (_a) {
|
|
|
18024
18038
|
var _b = _a.title, title = _b === void 0 ? 'Reviews' : _b, rating = _a.rating, reviews = _a.reviews, reviewsText = _a.reviewsText, reviewsSummary = _a.reviewsSummary, onClickReview = _a.onClickReview;
|
|
18025
18039
|
var starsNumber = 5;
|
|
18026
18040
|
var theme = useTheme();
|
|
18027
|
-
return (jsxRuntime.jsxs(Container$
|
|
18041
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Text$6, __assign$1({ variant: "heading3", weight: "bold", style: { margin: '10px 0' } }, { children: title }), void 0), jsxRuntime.jsxs(ReviewsContainer, { children: [jsxRuntime.jsxs(ReviewsCount, { children: [jsxRuntime.jsxs(ReviewsStars, { children: [jsxRuntime.jsx(ReviewsTextCount, __assign$1({ variant: "heading3", weight: "bold" }, { children: rating }), void 0), jsxRuntime.jsx(StarList, { rating: rating, size: exports.ComponentSize.Medium, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0)] }, void 0), jsxRuntime.jsxs(Text$6, __assign$1({ variant: "body", size: "small", weight: "regular", style: { marginBottom: '20px' } }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0), jsxRuntime.jsx(ReviewsImages, { children: reviewsSummary.map(function (summaryItem) { return (jsxRuntime.jsx(SummaryItem, { onClick: function () { return onClickReview(summaryItem); }, backgroundUrl: summaryItem, "data-testid": "summary-review-item" }, summaryItem)); }) }, void 0)] }, void 0)] }, void 0));
|
|
18028
18042
|
};
|
|
18029
|
-
var templateObject_1$
|
|
18043
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$4, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1;
|
|
18030
18044
|
|
|
18031
|
-
var Container$
|
|
18032
|
-
var Content = newStyled.div(templateObject_2$
|
|
18033
|
-
var StarsContent = newStyled.div(templateObject_3$
|
|
18045
|
+
var Container$5 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n @media (min-width: 768px) {\n flex-direction: row;\n }\n"])));
|
|
18046
|
+
var Content = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"], ["\n display: flex;\n flex-direction: column;\n padding: 20px;\n padding-top: 0;\n"])));
|
|
18047
|
+
var StarsContent = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n"], ["\n display: flex;\n justify-content: space-between;\n"])));
|
|
18034
18048
|
var ReviewContainer = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"], ["\n display: flex;\n flex-direction: column;\n margin-top: 15px;\n margin-bottom: 5px;\n\n @media (min-width: 768px) {\n margin-top: 10px;\n }\n"])));
|
|
18035
18049
|
var DateText = newStyled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"], ["\n font-weight: 400;\n font-size: 14px;\n line-height: 22px;\n"])));
|
|
18036
18050
|
var ReviewerName = newStyled.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"], ["\n font-weight: 600;\n margin: 0;\n font-size: 18px;\n padding: 20px;\n display: flex;\n"])));
|
|
@@ -18066,10 +18080,10 @@ var Review = function (_a) {
|
|
|
18066
18080
|
}
|
|
18067
18081
|
}
|
|
18068
18082
|
}, [opened]);
|
|
18069
|
-
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$
|
|
18083
|
+
return (jsxRuntime.jsx(Modal, __assign$1({ id: modalId, maxFullScreen: maxFullScreen, padding: "0" }, { children: jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(CloseButton, __assign$1({ onClick: close }, { children: "X" }), void 0), jsxRuntime.jsx(ImageContainer, { children: image &&
|
|
18070
18084
|
(!isVideo ? (jsxRuntime.jsx(ImageWrapper, { src: image.src, alt: image.alt }, void 0)) : (jsxRuntime.jsx(VideoWrapper, { ref: refVideo, src: image.src, width: "100%", controls: true }, void 0))) }, void 0), jsxRuntime.jsxs(DescriptionContainer, { children: [jsxRuntime.jsxs(ReviewerName, { children: [reviewerName, verified && jsxRuntime.jsx(VerifiedText, { children: "Verified Buyer" }, void 0)] }, void 0), jsxRuntime.jsxs(Content, __assign$1({ "data-testid": "review-detail-content" }, { children: [jsxRuntime.jsxs(StarsContent, { children: [jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsx(DateText, { children: formatDate(date) }, void 0)] }, void 0), jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(ReviewTitle, { children: title }, void 0), jsxRuntime.jsx(ReviewDescription, { dangerouslySetInnerHTML: { __html: description } }, void 0)] }, void 0), jsxRuntime.jsxs(HelpfulContainer, { children: [jsxRuntime.jsxs(HelpfulAction, __assign$1({ "data-testid": "helpful-action", onClick: function () { return (helpfulAction ? helpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsUp, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(HelpfulCount, { children: helpfulCount }, void 0)] }), void 0), jsxRuntime.jsxs(NotHelpfulAction, __assign$1({ "data-testid": "not-helpful-action", onClick: function () { return (notHelpfulAction ? notHelpfulAction(reviewId) : undefined); } }, { children: [jsxRuntime.jsx(Icon.Custom.ThumbsDown, { width: 1, height: 1, fill: "#000" }, void 0), jsxRuntime.jsx(NotHelpfulCount, { children: notHelpfulCount }, void 0)] }), void 0)] }, void 0)] }), void 0), productImage && productLink && (jsxRuntime.jsxs(ProductContainer, __assign$1({ onClick: function () { return (window.location.href = productLink); } }, { children: [jsxRuntime.jsx(ProductImageWrapper, { children: jsxRuntime.jsx(ProductImage, { src: productImage, alt: "productImage" }, void 0) }, void 0), jsxRuntime.jsx(ProductTitle, { children: productTitle }, void 0)] }), void 0))] }, void 0)] }, void 0) }), void 0));
|
|
18071
18085
|
};
|
|
18072
|
-
var templateObject_1$
|
|
18086
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
18073
18087
|
|
|
18074
18088
|
function _extends() {
|
|
18075
18089
|
_extends = Object.assign || function (target) {
|
|
@@ -18336,40 +18350,40 @@ function useSwipeable(options) {
|
|
|
18336
18350
|
return handlers;
|
|
18337
18351
|
}
|
|
18338
18352
|
|
|
18339
|
-
var Container$
|
|
18353
|
+
var Container$4 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"], ["\n ", "\n position: relative;\n max-height: 31.875rem;\n overflow: hidden;\n"])), function (_a) {
|
|
18340
18354
|
var borderRadiusVariant = _a.borderRadiusVariant;
|
|
18341
18355
|
return borderRadiusVariant &&
|
|
18342
18356
|
"\n border-radius: 40px;\n ";
|
|
18343
18357
|
});
|
|
18344
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
18345
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
18358
|
+
var TopTagContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n position: absolute;\n left: ", ";\n top: ", ";\n"], ["\n position: absolute;\n left: ", ";\n top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
|
|
18359
|
+
var BottomTagContainer = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
18346
18360
|
var ImageProductWithTagsMobileV2 = React$2.forwardRef(function ImageProductWithTags(_a, ref) {
|
|
18347
18361
|
var image = _a.image, topTag = _a.topTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant;
|
|
18348
|
-
return (jsxRuntime.jsxs(Container$
|
|
18362
|
+
return (jsxRuntime.jsxs(Container$4, __assign$1({ "data-testid": testId, ref: ref, borderRadiusVariant: borderRadiusVariant }, { children: [jsxRuntime.jsx(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsxRuntime.jsx(TopTagContainer, __assign$1({ borderRadiusVariant: borderRadiusVariant }, { children: topTag }), void 0), jsxRuntime.jsx(BottomTagContainer, { children: bottomTag }, void 0)] }), void 0));
|
|
18349
18363
|
});
|
|
18350
|
-
var templateObject_1$
|
|
18364
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$2;
|
|
18351
18365
|
|
|
18352
|
-
var Button = newStyled.button(templateObject_1$
|
|
18366
|
+
var Button = newStyled.button(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n z-index: 5;\n top: calc(50% - 40px);\n height: 40px !important;\n"])));
|
|
18353
18367
|
var ArrowButton = function (_a) {
|
|
18354
18368
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
18355
18369
|
return (jsxRuntime.jsx(Button, __assign$1({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
18356
18370
|
};
|
|
18357
|
-
var templateObject_1$
|
|
18371
|
+
var templateObject_1$5;
|
|
18358
18372
|
|
|
18359
|
-
var Container$
|
|
18373
|
+
var Container$3 = newStyled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"], ["\n position: absolute;\n bottom: 15px;\n display: flex;\n justify-content: center;\n width: 100%;\n svg {\n padding: 0.125rem;\n margin-left: 0.25rem;\n }\n"])));
|
|
18360
18374
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
18361
18375
|
var SlideDots = function (_a) {
|
|
18362
18376
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
18363
18377
|
var theme = useTheme();
|
|
18364
|
-
return (jsxRuntime.jsx(Container$
|
|
18378
|
+
return (jsxRuntime.jsx(Container$3, __assign$1({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
18365
18379
|
? theme.component.slideNavigation.slideDots.selectedDotColor
|
|
18366
18380
|
: theme.component.slideNavigation.slideDots.unselectedDotColor, opacity: theme.component.slideNavigation.slideDots.dotsOpacity, testId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
18367
18381
|
};
|
|
18368
|
-
var templateObject_1$
|
|
18382
|
+
var templateObject_1$4;
|
|
18369
18383
|
|
|
18370
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
18371
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
18372
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
18384
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n position: absolute;\n height: 100%;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
18385
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
18386
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
18373
18387
|
var SlideNavigation = function (_a) {
|
|
18374
18388
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, testId = _a.testId;
|
|
18375
18389
|
var theme = useTheme();
|
|
@@ -18381,9 +18395,9 @@ var SlideNavigation = function (_a) {
|
|
|
18381
18395
|
onNavigate(selectedIndex + 1);
|
|
18382
18396
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: testId }, void 0)] }, void 0));
|
|
18383
18397
|
};
|
|
18384
|
-
var templateObject_1$
|
|
18398
|
+
var templateObject_1$3, templateObject_2$2, templateObject_3$1;
|
|
18385
18399
|
|
|
18386
|
-
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
18400
|
+
var Container$2 = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"], ["\n display: flex;\n flex-direction: column;\n height: fit-content;\n position: relative;\n max-width: 450px;\n"])));
|
|
18387
18401
|
var ProductGalleryMobileV2 = function (_a) {
|
|
18388
18402
|
var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b;
|
|
18389
18403
|
var _c = React$2.useState(0), index = _c[0], setIndex = _c[1];
|
|
@@ -18405,10 +18419,31 @@ var ProductGalleryMobileV2 = function (_a) {
|
|
|
18405
18419
|
React$2.useEffect(function () {
|
|
18406
18420
|
setSelectedImage(images[index]);
|
|
18407
18421
|
}, [index, images]);
|
|
18408
|
-
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
18422
|
+
return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsx(ImageProductWithTagsMobileV2, __assign$1({}, handlers, { image: selectedImage, topTag: topTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant }), void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: setIndex, testId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
18423
|
+
};
|
|
18424
|
+
var templateObject_1$2;
|
|
18425
|
+
|
|
18426
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
18427
|
+
var DropContainer = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
18428
|
+
var DropList = function (_a) {
|
|
18429
|
+
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
18430
|
+
return (jsxRuntime.jsx(Container$1, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
18431
|
+
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
18432
|
+
}) }, void 0));
|
|
18433
|
+
};
|
|
18434
|
+
var templateObject_1$1, templateObject_2$1;
|
|
18435
|
+
|
|
18436
|
+
var DROPS_TOTAL = 5;
|
|
18437
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
18438
|
+
var Title = newStyled.p(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
18439
|
+
var Description = newStyled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
18440
|
+
var AbsorbencyLevel = function (_a) {
|
|
18441
|
+
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
18442
|
+
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(Title, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
18409
18443
|
};
|
|
18410
|
-
var templateObject_1;
|
|
18444
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
18411
18445
|
|
|
18446
|
+
exports.AbsorbencyLevel = AbsorbencyLevel;
|
|
18412
18447
|
exports.Accordion = Accordion$1;
|
|
18413
18448
|
exports.AccordionOptions = AccordionOptions;
|
|
18414
18449
|
exports.AmazonButton = AmazonButton;
|