@trafilea/afrodita-components 4.0.2-beta.13 → 4.0.2-beta.17
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 +66 -3
- package/build/index.esm.js +386 -272
- package/build/index.esm.js.map +1 -1
- package/build/index.js +391 -272
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.js +7 -7
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -315,17 +315,29 @@ var ShoppingBag = function (_a) {
|
|
|
315
315
|
return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 32, viewBoxY: 38, title: "Shopping bag" }, { children: jsx$1("path", { d: "M25.1429 9.5C25.1429 4.26164 21.0414 0 16 0C10.9586 0 6.85714 4.26164 6.85714 9.5H0V32.0625C0 35.3417 2.55836 38 5.71429 38H26.2857C29.4416 38 32 35.3417 32 32.0625V9.5H25.1429ZM16 3.5625C19.1509 3.5625 21.7143 6.22606 21.7143 9.5H10.2857C10.2857 6.22606 12.8491 3.5625 16 3.5625ZM28.5714 32.0625C28.5714 33.3721 27.5461 34.4375 26.2857 34.4375H5.71429C4.45393 34.4375 3.42857 33.3721 3.42857 32.0625V13.0625H6.85714V16.0312C6.85714 17.015 7.62464 17.8125 8.57143 17.8125C9.51822 17.8125 10.2857 17.015 10.2857 16.0312V13.0625H21.7143V16.0312C21.7143 17.015 22.4818 17.8125 23.4286 17.8125C24.3754 17.8125 25.1429 17.015 25.1429 16.0312V13.0625H28.5714V32.0625Z", fill: fill }, void 0) }), void 0));
|
|
316
316
|
};
|
|
317
317
|
|
|
318
|
+
var ShoppingCart = function (_a) {
|
|
319
|
+
var width = _a.width, height = _a.height, _b = _a.fill, fill = _b === void 0 ? 'inherit' : _b;
|
|
320
|
+
return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 21, viewBoxY: 21, title: "Shopping Cart" }, { children: jsx$1("path", { d: "M20.1247 3.23755H5.26021L4.94207 1.53861C4.86172 1.10961 4.5018 0.800049 4.08333 0.800049H0.4375C0.195891 0.800049 0 1.00468 0 1.25708V2.17114C0 2.42354 0.195891 2.62817 0.4375 2.62817H3.36292L5.9002 16.1754C5.49777 16.6134 5.25 17.2075 5.25 17.8625C5.25 19.2087 6.29468 20.3 7.58333 20.3C8.87199 20.3 9.91666 19.2087 9.91666 17.8625C9.91712 17.4346 9.80916 17.0141 9.60374 16.6438H14.8963C14.6909 17.0141 14.5829 17.4346 14.5834 17.8625C14.5834 19.2087 15.628 20.3 16.9167 20.3C18.2054 20.3 19.25 19.2087 19.25 17.8625C19.25 17.1718 18.9746 16.5487 18.5327 16.1052L18.5704 15.924C18.689 15.3542 18.2736 14.8157 17.7154 14.8157H7.42875L7.0864 12.9875H18.4762C18.8878 12.9875 19.2438 12.6879 19.3312 12.2676L20.9797 4.34577C21.0982 3.77605 20.6828 3.23755 20.1247 3.23755ZM7.58333 18.7766C7.10084 18.7766 6.70833 18.3666 6.70833 17.8625C6.70833 17.3585 7.10084 16.9485 7.58333 16.9485C8.06582 16.9485 8.45833 17.3585 8.45833 17.8625C8.45833 18.3666 8.06582 18.7766 7.58333 18.7766ZM16.9167 18.7766C16.4342 18.7766 16.0417 18.3666 16.0417 17.8625C16.0417 17.3585 16.4342 16.9485 16.9167 16.9485C17.3992 16.9485 17.7917 17.3585 17.7917 17.8625C17.7917 18.3666 17.3992 18.7766 16.9167 18.7766ZM17.7712 11.1594H6.74406L5.60255 5.06567H19.0392L17.7712 11.1594Z", fill: fill }, void 0) }), void 0));
|
|
321
|
+
};
|
|
322
|
+
|
|
318
323
|
var MapMarker = function (_a) {
|
|
319
324
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
320
325
|
return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 30, viewBoxY: 40, title: "Map marker" }, { children: jsx$1("path", { d: "M15 7.5C10.8645 7.5 7.5 10.8645 7.5 15C7.5 19.1355 10.8645 22.5 15 22.5C19.1355 22.5 22.5 19.1355 22.5 15C22.5 10.8645 19.1355 7.5 15 7.5ZM15 20C12.243 20 10 17.757 10 15C10 12.243 12.243 10 15 10C17.757 10 20 12.243 20 15C20 17.757 17.757 20 15 20ZM15 0C6.7157 0 0 6.7157 0 15C0 21.0479 2.10703 22.7368 13.4584 39.193C14.2033 40.2689 15.7966 40.2691 16.5416 39.193C27.893 22.7368 30 21.0479 30 15C30 6.7157 23.2843 0 15 0ZM15 37.0259C4.11758 21.2881 2.5 20.0386 2.5 15C2.5 11.6611 3.80023 8.52211 6.16117 6.16117C8.52211 3.80023 11.6611 2.5 15 2.5C18.3389 2.5 21.4779 3.80023 23.8388 6.16117C26.1998 8.52211 27.5 11.6611 27.5 15C27.5 20.0383 25.8834 21.2867 15 37.0259Z", fill: fill }, void 0) }), void 0));
|
|
321
326
|
};
|
|
322
327
|
|
|
328
|
+
var Hamburger = function (_a) {
|
|
329
|
+
var width = _a.width, height = _a.height, _b = _a.fill, fill = _b === void 0 ? 'inherit' : _b;
|
|
330
|
+
return (jsx$1(IconWrapper, __assign({ width: width, height: height, viewBoxX: 22, viewBoxY: 19, title: "Hamburguer" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.25 3C0.559644 3 0 2.44036 0 1.75C0 1.05964 0.559644 0.5 1.25 0.5H20.75C21.4404 0.5 22 1.05964 22 1.75C22 2.44036 21.4404 3 20.75 3H1.25ZM1.25 11C0.559644 11 0 10.4404 0 9.75C0 9.05964 0.559644 8.5 1.25 8.5H10.75C11.4404 8.5 12 9.05964 12 9.75C12 10.4404 11.4404 11 10.75 11H1.25ZM0 17.75C0 18.4404 0.559644 19 1.25 19H16.75C17.4404 19 18 18.4404 18 17.75C18 17.0596 17.4404 16.5 16.75 16.5H1.25C0.559644 16.5 0 17.0596 0 17.75Z", fill: fill }, void 0) }), void 0));
|
|
331
|
+
};
|
|
332
|
+
|
|
323
333
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
324
334
|
__proto__: null,
|
|
325
335
|
Search: Search,
|
|
326
336
|
User: User,
|
|
327
337
|
ShoppingBag: ShoppingBag,
|
|
328
|
-
|
|
338
|
+
ShoppingCart: ShoppingCart,
|
|
339
|
+
MapMarker: MapMarker,
|
|
340
|
+
Hamburger: Hamburger
|
|
329
341
|
});
|
|
330
342
|
|
|
331
343
|
var QuestionCircle = function (_a) {
|
|
@@ -3274,7 +3286,7 @@ var InputValidationType;
|
|
|
3274
3286
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3275
3287
|
})(InputValidationType || (InputValidationType = {}));
|
|
3276
3288
|
|
|
3277
|
-
var Section = newStyled.div(templateObject_1
|
|
3289
|
+
var Section = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
|
|
3278
3290
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3279
3291
|
});
|
|
3280
3292
|
var CardHeader = function (_a) {
|
|
@@ -3285,14 +3297,14 @@ var CardFooter = function (_a) {
|
|
|
3285
3297
|
var children = _a.children;
|
|
3286
3298
|
return (jsx$1(Section, __assign({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
3287
3299
|
};
|
|
3288
|
-
var templateObject_1
|
|
3300
|
+
var templateObject_1$15;
|
|
3289
3301
|
|
|
3290
|
-
var Body = newStyled.div(templateObject_1$
|
|
3302
|
+
var Body = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __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"])));
|
|
3291
3303
|
var CardBody = function (_a) {
|
|
3292
3304
|
var children = _a.children;
|
|
3293
3305
|
return jsx$1(Body, { children: children }, void 0);
|
|
3294
3306
|
};
|
|
3295
|
-
var templateObject_1$
|
|
3307
|
+
var templateObject_1$14;
|
|
3296
3308
|
|
|
3297
3309
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3298
3310
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3437,7 +3449,7 @@ var AssetsProvider = function (_a) {
|
|
|
3437
3449
|
};
|
|
3438
3450
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3439
3451
|
|
|
3440
|
-
var Container$
|
|
3452
|
+
var Container$F = newStyled.div(templateObject_1$13 || (templateObject_1$13 = __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) {
|
|
3441
3453
|
var flex = _a.flex;
|
|
3442
3454
|
return flex &&
|
|
3443
3455
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3450,14 +3462,14 @@ var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
|
|
|
3450
3462
|
var Card = function (_a) {
|
|
3451
3463
|
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;
|
|
3452
3464
|
var theme = useTheme();
|
|
3453
|
-
return (jsx$1(Container$
|
|
3465
|
+
return (jsx$1(Container$F, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3454
3466
|
};
|
|
3455
3467
|
var Card$1 = Object.assign(Card, {
|
|
3456
3468
|
Header: CardHeader,
|
|
3457
3469
|
Footer: CardFooter,
|
|
3458
3470
|
Body: CardBody,
|
|
3459
3471
|
});
|
|
3460
|
-
var templateObject_1$
|
|
3472
|
+
var templateObject_1$13;
|
|
3461
3473
|
|
|
3462
3474
|
var Fragment = Fragment$1;
|
|
3463
3475
|
function jsx(type, props, key) {
|
|
@@ -4201,7 +4213,7 @@ function useDescriptions() {
|
|
|
4201
4213
|
} // ---
|
|
4202
4214
|
|
|
4203
4215
|
var DEFAULT_DESCRIPTION_TAG = 'p';
|
|
4204
|
-
function Description$
|
|
4216
|
+
function Description$2(props) {
|
|
4205
4217
|
var context = useDescriptionContext();
|
|
4206
4218
|
var id = "headlessui-description-" + useId();
|
|
4207
4219
|
useIsoMorphicEffect(function () {
|
|
@@ -5920,7 +5932,7 @@ function Option$1(props) {
|
|
|
5920
5932
|
|
|
5921
5933
|
RadioGroup.Option = Option$1;
|
|
5922
5934
|
RadioGroup.Label = Label$3;
|
|
5923
|
-
RadioGroup.Description = Description$
|
|
5935
|
+
RadioGroup.Description = Description$2;
|
|
5924
5936
|
|
|
5925
5937
|
var BaseSelectButton = function (_a) {
|
|
5926
5938
|
var children = _a.children, as = _a.as;
|
|
@@ -5937,7 +5949,7 @@ function BaseSelectOption(_a) {
|
|
|
5937
5949
|
return (jsx$1(Listbox.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5938
5950
|
}
|
|
5939
5951
|
|
|
5940
|
-
var CustomListBox = newStyled(Listbox)(templateObject_1$
|
|
5952
|
+
var CustomListBox = newStyled(Listbox)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5941
5953
|
function BaseSelect(_a) {
|
|
5942
5954
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5943
5955
|
return (jsx$1(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5947,7 +5959,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5947
5959
|
Options: BaseSelectOptions,
|
|
5948
5960
|
Option: BaseSelectOption,
|
|
5949
5961
|
});
|
|
5950
|
-
var templateObject_1$
|
|
5962
|
+
var templateObject_1$12;
|
|
5951
5963
|
|
|
5952
5964
|
var CustomButton = newStyled.button(function (_a) {
|
|
5953
5965
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5966,6 +5978,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5966
5978
|
color: theme.component.dropdown.color,
|
|
5967
5979
|
fill: theme.component.dropdown.fill,
|
|
5968
5980
|
width: wide ? '100%' : 'auto',
|
|
5981
|
+
height: wide ? '100%' : 'auto',
|
|
5969
5982
|
justifyContent: wide ? 'space-between' : 'center',
|
|
5970
5983
|
svg: {
|
|
5971
5984
|
marginLeft: '0.75rem',
|
|
@@ -6159,12 +6172,12 @@ var CustomCheckboxStyles = {
|
|
|
6159
6172
|
},
|
|
6160
6173
|
};
|
|
6161
6174
|
|
|
6162
|
-
var Container$
|
|
6175
|
+
var Container$E = newStyled.div(templateObject_1$11 || (templateObject_1$11 = __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"])));
|
|
6163
6176
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
6164
6177
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6165
6178
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
6166
6179
|
]; });
|
|
6167
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
6180
|
+
var Input$3 = newStyled.input(templateObject_2$E || (templateObject_2$E = __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) {
|
|
6168
6181
|
var disabled = _a.disabled;
|
|
6169
6182
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
6170
6183
|
});
|
|
@@ -6188,9 +6201,9 @@ var Checkbox = function (_a) {
|
|
|
6188
6201
|
useEffect(function () {
|
|
6189
6202
|
mounted.current = true;
|
|
6190
6203
|
}, []);
|
|
6191
|
-
return (jsxs$1(Container$
|
|
6204
|
+
return (jsxs$1(Container$E, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$2, __assign({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
6192
6205
|
};
|
|
6193
|
-
var templateObject_1$
|
|
6206
|
+
var templateObject_1$11, templateObject_2$E;
|
|
6194
6207
|
|
|
6195
6208
|
var CustomOption = newStyled.li(function (_a) {
|
|
6196
6209
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -6224,6 +6237,7 @@ function BaseDropdown(_a) {
|
|
|
6224
6237
|
var theme = useTheme();
|
|
6225
6238
|
return (jsx(BaseSelect$1, __assign({ value: value, onChange: function (value) { return onChange(value); }, css: {
|
|
6226
6239
|
width: wide ? '100%' : 'fit-content',
|
|
6240
|
+
height: wide ? '100%' : 'fit-content',
|
|
6227
6241
|
position: 'relative',
|
|
6228
6242
|
fontSize: theme.component.dropdown.fontSize,
|
|
6229
6243
|
lineHeight: theme.component.dropdown.lineHeight,
|
|
@@ -6319,11 +6333,11 @@ var SelectorSecondary = function (_a) {
|
|
|
6319
6333
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
6320
6334
|
// `variants` styles that are consistent through all themes.
|
|
6321
6335
|
var TAGS = {
|
|
6322
|
-
hero1: newStyled.h1(templateObject_1$
|
|
6323
|
-
hero2: newStyled.h2(templateObject_2$
|
|
6324
|
-
hero3: newStyled.h3(templateObject_3$
|
|
6325
|
-
display1: newStyled.h1(templateObject_4$
|
|
6326
|
-
display2: newStyled.h2(templateObject_5$
|
|
6336
|
+
hero1: newStyled.h1(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject([""], [""]))),
|
|
6337
|
+
hero2: newStyled.h2(templateObject_2$D || (templateObject_2$D = __makeTemplateObject([""], [""]))),
|
|
6338
|
+
hero3: newStyled.h3(templateObject_3$p || (templateObject_3$p = __makeTemplateObject([""], [""]))),
|
|
6339
|
+
display1: newStyled.h1(templateObject_4$f || (templateObject_4$f = __makeTemplateObject([""], [""]))),
|
|
6340
|
+
display2: newStyled.h2(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject([""], [""]))),
|
|
6327
6341
|
heading1: newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject([""], [""]))),
|
|
6328
6342
|
heading2: newStyled.h2(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject([""], [""]))),
|
|
6329
6343
|
heading3: newStyled.h3(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject([""], [""]))),
|
|
@@ -6337,7 +6351,7 @@ var TAGS = {
|
|
|
6337
6351
|
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
6338
6352
|
tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
6339
6353
|
};
|
|
6340
|
-
var Text$
|
|
6354
|
+
var Text$5 = function (_a) {
|
|
6341
6355
|
var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
|
|
6342
6356
|
var theme = useTheme();
|
|
6343
6357
|
var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
@@ -6442,24 +6456,27 @@ var DEFAULTS = {
|
|
|
6442
6456
|
size: 'regular',
|
|
6443
6457
|
},
|
|
6444
6458
|
};
|
|
6445
|
-
var templateObject_1$
|
|
6459
|
+
var templateObject_1$10, templateObject_2$D, templateObject_3$p, templateObject_4$f, templateObject_5$8, templateObject_6$5, templateObject_7$3, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
6446
6460
|
|
|
6447
|
-
var ButtonsContainer = newStyled.div(templateObject_1
|
|
6461
|
+
var ButtonsContainer = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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) {
|
|
6462
|
+
var inline = _a.inline;
|
|
6463
|
+
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
6464
|
+
});
|
|
6448
6465
|
var SizeSelector = function (_a) {
|
|
6449
6466
|
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
6450
6467
|
return (jsxs("div", __assign({ css: {
|
|
6451
6468
|
display: 'flex',
|
|
6452
6469
|
flexDirection: inline ? 'row' : 'column',
|
|
6453
6470
|
alignItems: inline ? 'center' : 'start',
|
|
6454
|
-
} }, { children: [jsxs(Text$
|
|
6471
|
+
} }, { children: [jsxs(Text$5, __assign({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$5, __assign({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), jsx(ButtonsContainer, __assign({ inline: inline }, { children: sizes.map(function (size) {
|
|
6455
6472
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
6456
6473
|
return (jsx(SelectorSecondary, { css: {
|
|
6457
6474
|
padding: '0.75rem 1rem 0.625rem',
|
|
6458
|
-
margin: '0.5rem',
|
|
6475
|
+
margin: '0 0.5rem 0.625rem 0',
|
|
6459
6476
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
|
|
6460
|
-
}) }, void 0)] }), void 0));
|
|
6477
|
+
}) }), void 0)] }), void 0));
|
|
6461
6478
|
};
|
|
6462
|
-
var templateObject_1
|
|
6479
|
+
var templateObject_1$$;
|
|
6463
6480
|
|
|
6464
6481
|
var getStylesBySize$7 = function (size) {
|
|
6465
6482
|
switch (size) {
|
|
@@ -6488,7 +6505,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
6488
6505
|
} });
|
|
6489
6506
|
};
|
|
6490
6507
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
6491
|
-
return Icon && (jsx("span", __assign({ css: css(templateObject_1$
|
|
6508
|
+
return Icon && (jsx("span", __assign({ css: css(templateObject_1$_ || (templateObject_1$_ = __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));
|
|
6492
6509
|
};
|
|
6493
6510
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
6494
6511
|
if (disabled)
|
|
@@ -6504,16 +6521,16 @@ var TextButton = function (_a) {
|
|
|
6504
6521
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
6505
6522
|
return (jsx(BaseButton, __assign({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size) }, { children: text }), void 0));
|
|
6506
6523
|
};
|
|
6507
|
-
var templateObject_1$
|
|
6524
|
+
var templateObject_1$_;
|
|
6508
6525
|
|
|
6509
|
-
var Container$
|
|
6510
|
-
var P$
|
|
6511
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
6526
|
+
var Container$D = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
6527
|
+
var P$3 = newStyled.p(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6528
|
+
var PercentageSpan = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
6512
6529
|
var SizeFitGuide = function (_a) {
|
|
6513
6530
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6514
|
-
return (jsxs$1(Container$
|
|
6531
|
+
return (jsxs$1(Container$D, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$3, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6515
6532
|
};
|
|
6516
|
-
var templateObject_1$
|
|
6533
|
+
var templateObject_1$Z, templateObject_2$C, templateObject_3$o;
|
|
6517
6534
|
|
|
6518
6535
|
var getStylesBySize$6 = function (size) {
|
|
6519
6536
|
switch (size) {
|
|
@@ -6543,7 +6560,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6543
6560
|
};
|
|
6544
6561
|
}
|
|
6545
6562
|
};
|
|
6546
|
-
var Container$
|
|
6563
|
+
var Container$C = newStyled.div(templateObject_1$Y || (templateObject_1$Y = __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) {
|
|
6547
6564
|
var backgroundColor = _a.backgroundColor;
|
|
6548
6565
|
return backgroundColor;
|
|
6549
6566
|
}, function (_a) {
|
|
@@ -6565,7 +6582,7 @@ var Container$z = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
6565
6582
|
var size = _a.size;
|
|
6566
6583
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
6567
6584
|
});
|
|
6568
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
6585
|
+
var H3$2 = newStyled.h3(templateObject_2$B || (templateObject_2$B = __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) {
|
|
6569
6586
|
var textColor = _a.textColor;
|
|
6570
6587
|
return textColor;
|
|
6571
6588
|
}, function (_a) {
|
|
@@ -6580,9 +6597,9 @@ var H3$2 = newStyled.h3(templateObject_2$z || (templateObject_2$z = __makeTempla
|
|
|
6580
6597
|
var DiscountTag = function (_a) {
|
|
6581
6598
|
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 ? ComponentSize.Medium : _e;
|
|
6582
6599
|
var theme = useTheme();
|
|
6583
|
-
return (jsx$1(Container$
|
|
6600
|
+
return (jsx$1(Container$C, __assign({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6584
6601
|
};
|
|
6585
|
-
var templateObject_1$
|
|
6602
|
+
var templateObject_1$Y, templateObject_2$B;
|
|
6586
6603
|
|
|
6587
6604
|
var getStylesBySize$5 = function (size) {
|
|
6588
6605
|
switch (size) {
|
|
@@ -6606,8 +6623,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
6606
6623
|
};
|
|
6607
6624
|
}
|
|
6608
6625
|
};
|
|
6609
|
-
var Container$
|
|
6610
|
-
var Price = newStyled.h1(templateObject_2$
|
|
6626
|
+
var Container$B = newStyled.div(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6627
|
+
var Price = newStyled.h1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
6611
6628
|
var weight = _a.weight;
|
|
6612
6629
|
return (weight ? weight : '400');
|
|
6613
6630
|
}, function (_a) {
|
|
@@ -6629,7 +6646,7 @@ var Price = newStyled.h1(templateObject_2$y || (templateObject_2$y = __makeTempl
|
|
|
6629
6646
|
var margin = _a.margin, size = _a.size;
|
|
6630
6647
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
6631
6648
|
});
|
|
6632
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
6649
|
+
var TagContainer = newStyled.h1(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
6633
6650
|
var _b;
|
|
6634
6651
|
var size = _a.size;
|
|
6635
6652
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -6637,9 +6654,9 @@ var TagContainer = newStyled.h1(templateObject_3$l || (templateObject_3$l = __ma
|
|
|
6637
6654
|
var PriceLabel = function (_a) {
|
|
6638
6655
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6639
6656
|
var theme = useTheme();
|
|
6640
|
-
return (jsxs$1(Container$
|
|
6657
|
+
return (jsxs$1(Container$B, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.colors.shades['400'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6641
6658
|
};
|
|
6642
|
-
var templateObject_1$
|
|
6659
|
+
var templateObject_1$X, templateObject_2$A, templateObject_3$n;
|
|
6643
6660
|
|
|
6644
6661
|
var OneColorSelector = function (_a) {
|
|
6645
6662
|
var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
@@ -6678,14 +6695,14 @@ var OutOfStock = function (_a) {
|
|
|
6678
6695
|
return (jsxs$1("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6679
6696
|
};
|
|
6680
6697
|
|
|
6681
|
-
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$
|
|
6682
|
-
newStyled(RadioGroup.Label)(templateObject_2$
|
|
6683
|
-
var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$
|
|
6684
|
-
var Span = newStyled.span(templateObject_4$
|
|
6685
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6698
|
+
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6699
|
+
newStyled(RadioGroup.Label)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6700
|
+
var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$m || (templateObject_3$m = __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"])));
|
|
6701
|
+
var Span = newStyled.span(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6702
|
+
var OptionsContainer = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __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"])));
|
|
6686
6703
|
var Label$1 = function (_a) {
|
|
6687
6704
|
var label = _a.label, values = _a.values;
|
|
6688
|
-
return (jsxs$1(Text$
|
|
6705
|
+
return (jsxs$1(Text$5, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
6689
6706
|
};
|
|
6690
6707
|
var Option = function (_a) {
|
|
6691
6708
|
var value = _a.value, children = _a.children;
|
|
@@ -6700,20 +6717,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6700
6717
|
Option: Option,
|
|
6701
6718
|
OptionsContainer: OptionsContainer,
|
|
6702
6719
|
});
|
|
6703
|
-
var templateObject_1$
|
|
6720
|
+
var templateObject_1$W, templateObject_2$z, templateObject_3$m, templateObject_4$e, templateObject_5$7;
|
|
6704
6721
|
|
|
6705
|
-
var Container$
|
|
6722
|
+
var Container$A = newStyled.div(templateObject_1$V || (templateObject_1$V = __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"], ["\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"])), function (_a) {
|
|
6706
6723
|
var borderColor = _a.borderColor;
|
|
6707
6724
|
return borderColor;
|
|
6708
6725
|
});
|
|
6709
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6726
|
+
var Image$2 = newStyled.img(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6710
6727
|
var PatternSelector = function (_a) {
|
|
6711
6728
|
var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6712
6729
|
var theme = useTheme();
|
|
6713
6730
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6714
|
-
return (jsx$1(Container$
|
|
6731
|
+
return (jsx$1(Container$A, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6715
6732
|
};
|
|
6716
|
-
var templateObject_1$
|
|
6733
|
+
var templateObject_1$V, templateObject_2$y;
|
|
6717
6734
|
|
|
6718
6735
|
var renderOptions$1 = function (options) {
|
|
6719
6736
|
if (options.length)
|
|
@@ -6765,7 +6782,7 @@ var MultiColorPicker = function (_a) {
|
|
|
6765
6782
|
return (jsxs$1(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
6766
6783
|
};
|
|
6767
6784
|
|
|
6768
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
6785
|
+
var Image$1 = newStyled.img(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"], ["\n width: 4.063rem;\n height: 5.375rem;\n box-sizing: border-box;\n cursor: pointer;\n border: ", ";\n"])), function (_a) {
|
|
6769
6786
|
var selected = _a.selected, theme = _a.theme;
|
|
6770
6787
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
6771
6788
|
});
|
|
@@ -6774,35 +6791,35 @@ var ImageSmallPreview = function (_a) {
|
|
|
6774
6791
|
var theme = useTheme();
|
|
6775
6792
|
return jsx$1(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
6776
6793
|
};
|
|
6777
|
-
var templateObject_1$
|
|
6794
|
+
var templateObject_1$U;
|
|
6778
6795
|
|
|
6779
|
-
var Container$
|
|
6780
|
-
var Button$5 = newStyled.button(templateObject_2$
|
|
6796
|
+
var Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"], ["\n grid-row-gap: 20px;\n display: grid;\n max-height: 45rem;\n height: min-content;\n overflow: auto;\n align-items: flex-start;\n"])));
|
|
6797
|
+
var Button$5 = newStyled.button(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"], ["\n padding: 0;\n border: none;\n text-decoration: none;\n background: transparent;\n"])));
|
|
6781
6798
|
var ImagePreviewList = function (_a) {
|
|
6782
6799
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
|
|
6783
|
-
return (jsx$1(Container$
|
|
6800
|
+
return (jsx$1(Container$z, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
|
|
6784
6801
|
return (jsx$1(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
6785
6802
|
}) }), void 0));
|
|
6786
6803
|
};
|
|
6787
|
-
var templateObject_1$
|
|
6804
|
+
var templateObject_1$T, templateObject_2$x;
|
|
6788
6805
|
|
|
6789
|
-
var Img = newStyled.img(templateObject_1$
|
|
6806
|
+
var Img = newStyled.img(templateObject_1$S || (templateObject_1$S = __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; });
|
|
6790
6807
|
var Image = function (_a) {
|
|
6791
6808
|
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;
|
|
6792
6809
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
6793
6810
|
};
|
|
6794
|
-
var templateObject_1$
|
|
6811
|
+
var templateObject_1$S;
|
|
6795
6812
|
|
|
6796
|
-
var Container$
|
|
6797
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
6798
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
6813
|
+
var Container$y = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n position: relative;\n height: 45rem;\n"], ["\n position: relative;\n height: 45rem;\n"])));
|
|
6814
|
+
var TopTagContainer$1 = newStyled.div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
6815
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
6799
6816
|
var ImageProductWithTags$1 = function (_a) {
|
|
6800
6817
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
6801
|
-
return (jsxs$1(Container$
|
|
6818
|
+
return (jsxs$1(Container$y, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6802
6819
|
};
|
|
6803
|
-
var templateObject_1$
|
|
6820
|
+
var templateObject_1$R, templateObject_2$w, templateObject_3$l;
|
|
6804
6821
|
|
|
6805
|
-
var Container$
|
|
6822
|
+
var Container$x = newStyled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
6806
6823
|
var ProductGallery = function (_a) {
|
|
6807
6824
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6808
6825
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6810,11 +6827,11 @@ var ProductGallery = function (_a) {
|
|
|
6810
6827
|
useEffect(function () {
|
|
6811
6828
|
setSelectedImage(initialValue);
|
|
6812
6829
|
}, [initialValue]);
|
|
6813
|
-
return (jsxs$1(Container$
|
|
6830
|
+
return (jsxs$1(Container$x, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
6814
6831
|
setSelectedImage(value);
|
|
6815
6832
|
} }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
|
|
6816
6833
|
};
|
|
6817
|
-
var templateObject_1$
|
|
6834
|
+
var templateObject_1$Q;
|
|
6818
6835
|
|
|
6819
6836
|
/* base styles & size variants */
|
|
6820
6837
|
var StarStyles = {
|
|
@@ -6852,8 +6869,8 @@ var StarStyles = {
|
|
|
6852
6869
|
});
|
|
6853
6870
|
},
|
|
6854
6871
|
};
|
|
6855
|
-
var Container$
|
|
6856
|
-
var templateObject_1$
|
|
6872
|
+
var Container$w = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6873
|
+
var templateObject_1$P;
|
|
6857
6874
|
|
|
6858
6875
|
var StarContainer = newStyled.div(function (_a) {
|
|
6859
6876
|
var size = _a.size;
|
|
@@ -6862,10 +6879,16 @@ var StarContainer = newStyled.div(function (_a) {
|
|
|
6862
6879
|
StarStyles[size],
|
|
6863
6880
|
];
|
|
6864
6881
|
});
|
|
6882
|
+
var sizes = {
|
|
6883
|
+
xsmall: { width: 0.75, height: 0.75 },
|
|
6884
|
+
small: { width: 1, height: 1 },
|
|
6885
|
+
medium: { width: 1.5, height: 1.5 },
|
|
6886
|
+
large: { width: 2.5, height: 2.5 },
|
|
6887
|
+
};
|
|
6865
6888
|
var StarList = function (_a) {
|
|
6866
6889
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6867
|
-
return (jsx$1(Container$
|
|
6868
|
-
return (jsx$1(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, { fill: fill }, void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, { fill: fill }, void 0)) : (jsx$1(Icon.PDP.StarEmpty, { fill: fill }, void 0)) }), index));
|
|
6890
|
+
return (jsx$1(Container$w, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6891
|
+
return (jsx$1(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign({}, sizes[size], { fill: fill }), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
6869
6892
|
}) }, void 0));
|
|
6870
6893
|
};
|
|
6871
6894
|
|
|
@@ -6908,8 +6931,8 @@ var LabelStyles = {
|
|
|
6908
6931
|
});
|
|
6909
6932
|
},
|
|
6910
6933
|
};
|
|
6911
|
-
var Container$
|
|
6912
|
-
var templateObject_1$
|
|
6934
|
+
var Container$v = newStyled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6935
|
+
var templateObject_1$O;
|
|
6913
6936
|
|
|
6914
6937
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6915
6938
|
var theme = _a.theme, size = _a.size;
|
|
@@ -6922,11 +6945,11 @@ var starsNumber = 5;
|
|
|
6922
6945
|
var Rating = function (_a) {
|
|
6923
6946
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating;
|
|
6924
6947
|
var theme = useTheme();
|
|
6925
|
-
return (jsxs$1(Container$
|
|
6948
|
+
return (jsxs$1(Container$v, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxs$1(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
6926
6949
|
};
|
|
6927
6950
|
|
|
6928
|
-
var Container$
|
|
6929
|
-
var P$
|
|
6951
|
+
var Container$u = newStyled.div(templateObject_1$N || (templateObject_1$N = __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"])));
|
|
6952
|
+
var P$2 = newStyled.p(templateObject_2$v || (templateObject_2$v = __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; });
|
|
6930
6953
|
var textButtonStyles = function (theme) { return ({
|
|
6931
6954
|
border: 'none',
|
|
6932
6955
|
background: 'transparent',
|
|
@@ -6939,9 +6962,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
6939
6962
|
var FitPredictor = function (_a) {
|
|
6940
6963
|
var onClick = _a.onClick;
|
|
6941
6964
|
var theme = useTheme();
|
|
6942
|
-
return (jsxs(Container$
|
|
6965
|
+
return (jsxs(Container$u, __assign({ theme: theme }, { children: [jsx(Container$u, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$2, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
6943
6966
|
};
|
|
6944
|
-
var templateObject_1$
|
|
6967
|
+
var templateObject_1$N, templateObject_2$v;
|
|
6945
6968
|
|
|
6946
6969
|
var H2$1 = newStyled.h2(function (_a) {
|
|
6947
6970
|
var color = _a.color;
|
|
@@ -6955,7 +6978,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
6955
6978
|
margin: '0.938rem 4.188rem',
|
|
6956
6979
|
});
|
|
6957
6980
|
});
|
|
6958
|
-
var Bar = newStyled.div(templateObject_1$
|
|
6981
|
+
var Bar = newStyled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
6959
6982
|
var backgroundColor = _a.backgroundColor;
|
|
6960
6983
|
return backgroundColor;
|
|
6961
6984
|
}, function (_a) {
|
|
@@ -6978,7 +7001,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
6978
7001
|
position: 'absolute',
|
|
6979
7002
|
});
|
|
6980
7003
|
});
|
|
6981
|
-
var Container$
|
|
7004
|
+
var Container$t = newStyled.div(function (_a) {
|
|
6982
7005
|
var widthAuto = _a.widthAuto;
|
|
6983
7006
|
return ({
|
|
6984
7007
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -6992,9 +7015,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
6992
7015
|
var ProgressBar = function (_a) {
|
|
6993
7016
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
6994
7017
|
var theme = useTheme();
|
|
6995
|
-
return (jsxs$1(Container$
|
|
7018
|
+
return (jsxs$1(Container$t, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
6996
7019
|
};
|
|
6997
|
-
var templateObject_1$
|
|
7020
|
+
var templateObject_1$M;
|
|
6998
7021
|
|
|
6999
7022
|
var getStylesBySize$4 = function (size) {
|
|
7000
7023
|
switch (size) {
|
|
@@ -7015,7 +7038,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
7015
7038
|
};
|
|
7016
7039
|
}
|
|
7017
7040
|
};
|
|
7018
|
-
var Container$
|
|
7041
|
+
var Container$s = newStyled.div(templateObject_1$L || (templateObject_1$L = __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) {
|
|
7019
7042
|
var backgroundColor = _a.backgroundColor;
|
|
7020
7043
|
return backgroundColor;
|
|
7021
7044
|
}, function (_a) {
|
|
@@ -7043,9 +7066,9 @@ var Container$p = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
7043
7066
|
var IconButton = function (_a) {
|
|
7044
7067
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
7045
7068
|
var theme = useTheme();
|
|
7046
|
-
return (jsx$1(Container$
|
|
7069
|
+
return (jsx$1(Container$s, __assign({ 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));
|
|
7047
7070
|
};
|
|
7048
|
-
var templateObject_1$
|
|
7071
|
+
var templateObject_1$L;
|
|
7049
7072
|
|
|
7050
7073
|
var TooltipArrow = function (_a) {
|
|
7051
7074
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -7125,7 +7148,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
7125
7148
|
}
|
|
7126
7149
|
};
|
|
7127
7150
|
|
|
7128
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7151
|
+
var Wrapper$5 = newStyled.div(templateObject_1$K || (templateObject_1$K = __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) {
|
|
7129
7152
|
var position = _a.position;
|
|
7130
7153
|
return getWrapperFlexDirection(position);
|
|
7131
7154
|
});
|
|
@@ -7149,11 +7172,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
7149
7172
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
7150
7173
|
return actual === expected ? margin : '0';
|
|
7151
7174
|
};
|
|
7152
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
7175
|
+
var ContentWrapper = newStyled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #fff;\n"])), function (_a) {
|
|
7153
7176
|
var borderColor = _a.borderColor;
|
|
7154
7177
|
return borderColor;
|
|
7155
7178
|
});
|
|
7156
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
7179
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __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) {
|
|
7157
7180
|
var position = _a.position;
|
|
7158
7181
|
return getArrowRotation(position);
|
|
7159
7182
|
}, function (_a) {
|
|
@@ -7163,17 +7186,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$i || (templateObject_
|
|
|
7163
7186
|
var position = _a.position;
|
|
7164
7187
|
return getArrowContainerMargin(position);
|
|
7165
7188
|
});
|
|
7166
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
7189
|
+
var TooltipText = newStyled.div(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
7167
7190
|
var color = _a.color;
|
|
7168
7191
|
return color;
|
|
7169
7192
|
});
|
|
7170
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
7171
|
-
var Title$
|
|
7193
|
+
var TopSection = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __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"])));
|
|
7194
|
+
var Title$4 = newStyled.h1(templateObject_6$4 || (templateObject_6$4 = __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) {
|
|
7172
7195
|
var color = _a.color;
|
|
7173
7196
|
return color;
|
|
7174
7197
|
});
|
|
7175
7198
|
var IconContainer$4 = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __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"])));
|
|
7176
|
-
var templateObject_1$
|
|
7199
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$k, templateObject_4$d, templateObject_5$6, templateObject_6$4, templateObject_7$2;
|
|
7177
7200
|
|
|
7178
7201
|
var Tooltip = function (_a) {
|
|
7179
7202
|
var children = _a.children, position = _a.position, text = _a.text, _b = _a.align, align = _b === void 0 ? 'center' : _b, onClick = _a.onClick, header = _a.header;
|
|
@@ -7190,7 +7213,7 @@ var Tooltip = function (_a) {
|
|
|
7190
7213
|
var ref = tooltipRef.current;
|
|
7191
7214
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
7192
7215
|
}, [tooltipRef]);
|
|
7193
|
-
return (jsxs$1(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxs$1(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$4, { children: React.createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsx$1(Title$
|
|
7216
|
+
return (jsxs$1(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsx$1("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxs$1(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxs$1(ContentWrapper, __assign({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxs$1(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsx$1(IconContainer$4, { children: React.createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsx$1(Title$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsx$1(TooltipText, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsx$1(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsx$1(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
7194
7217
|
};
|
|
7195
7218
|
|
|
7196
7219
|
/* base styles & variants */
|
|
@@ -7324,9 +7347,9 @@ var ContainerStyles = {
|
|
|
7324
7347
|
},
|
|
7325
7348
|
};
|
|
7326
7349
|
|
|
7327
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7328
|
-
var Container$
|
|
7329
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
7350
|
+
var Wrapper$4 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
7351
|
+
var Container$r = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7352
|
+
var Input$2 = newStyled.input(templateObject_2$t || (templateObject_2$t = __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) {
|
|
7330
7353
|
var disabled = _a.disabled;
|
|
7331
7354
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
7332
7355
|
});
|
|
@@ -7341,9 +7364,9 @@ var RadioInput = function (_a) {
|
|
|
7341
7364
|
var value = event.currentTarget.value;
|
|
7342
7365
|
onChange({ value: value, label: label });
|
|
7343
7366
|
};
|
|
7344
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
7367
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$r, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
7345
7368
|
};
|
|
7346
|
-
var templateObject_1$
|
|
7369
|
+
var templateObject_1$J, templateObject_2$t;
|
|
7347
7370
|
|
|
7348
7371
|
var RadioGroupInput = function (_a) {
|
|
7349
7372
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -7357,9 +7380,9 @@ var RadioGroupInput = function (_a) {
|
|
|
7357
7380
|
}) }), void 0));
|
|
7358
7381
|
};
|
|
7359
7382
|
|
|
7360
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
7361
|
-
var Container$
|
|
7362
|
-
var Text$
|
|
7383
|
+
var Wrapper$3 = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7384
|
+
var Container$q = newStyled.div(templateObject_2$s || (templateObject_2$s = __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"])));
|
|
7385
|
+
var Text$4 = newStyled.h4(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n color: ", ";\n font-weight: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
7363
7386
|
var color = _a.color;
|
|
7364
7387
|
return color;
|
|
7365
7388
|
}, function (_a) {
|
|
@@ -7372,32 +7395,32 @@ var Text$2 = newStyled.h4(templateObject_3$h || (templateObject_3$h = __makeTemp
|
|
|
7372
7395
|
var Minimalistic = function (_a) {
|
|
7373
7396
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FCFAF7' : _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;
|
|
7374
7397
|
var theme = useTheme();
|
|
7375
|
-
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
7398
|
+
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$q, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$4, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$q, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$4, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7376
7399
|
};
|
|
7377
|
-
var templateObject_1$
|
|
7400
|
+
var templateObject_1$I, templateObject_2$s, templateObject_3$j;
|
|
7378
7401
|
|
|
7379
|
-
var Container$
|
|
7380
|
-
var Title$
|
|
7381
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
7382
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
7402
|
+
var Container$p = newStyled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7403
|
+
var Title$3 = newStyled.h1(templateObject_2$r || (templateObject_2$r = __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; });
|
|
7404
|
+
var Details$1 = newStyled.span(templateObject_3$i || (templateObject_3$i = __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; });
|
|
7405
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$c || (templateObject_4$c = __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"])));
|
|
7383
7406
|
var Simple = function (_a) {
|
|
7384
7407
|
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;
|
|
7385
7408
|
var theme = useTheme();
|
|
7386
|
-
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
7409
|
+
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$p, { children: [jsx$1(Title$3, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7387
7410
|
};
|
|
7388
|
-
var templateObject_1$
|
|
7411
|
+
var templateObject_1$H, templateObject_2$r, templateObject_3$i, templateObject_4$c;
|
|
7389
7412
|
|
|
7390
7413
|
var Bundle = {
|
|
7391
7414
|
Minimalistic: Minimalistic,
|
|
7392
7415
|
Simple: Simple,
|
|
7393
7416
|
};
|
|
7394
7417
|
|
|
7395
|
-
var Container$
|
|
7418
|
+
var Container$o = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
7396
7419
|
var Tag = function (_a) {
|
|
7397
7420
|
var text = _a.text, className = _a.className;
|
|
7398
|
-
return jsx$1(Container$
|
|
7421
|
+
return jsx$1(Container$o, __assign({ className: className }, { children: text }), void 0);
|
|
7399
7422
|
};
|
|
7400
|
-
var templateObject_1$
|
|
7423
|
+
var templateObject_1$G;
|
|
7401
7424
|
|
|
7402
7425
|
var getStylesBySize$3 = function (size) {
|
|
7403
7426
|
switch (size) {
|
|
@@ -7498,11 +7521,11 @@ var Timer = function (_a) {
|
|
|
7498
7521
|
return (jsxs$1("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
|
|
7499
7522
|
};
|
|
7500
7523
|
|
|
7501
|
-
var Label = newStyled.span(templateObject_1$
|
|
7524
|
+
var Label = newStyled.span(templateObject_1$F || (templateObject_1$F = __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) {
|
|
7502
7525
|
var color = _a.color;
|
|
7503
7526
|
return color;
|
|
7504
7527
|
});
|
|
7505
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
7528
|
+
var MandatoryIcon = newStyled.span(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
7506
7529
|
var color = _a.color;
|
|
7507
7530
|
return color;
|
|
7508
7531
|
});
|
|
@@ -7511,7 +7534,7 @@ var InputLabel = function (_a) {
|
|
|
7511
7534
|
var theme = useTheme();
|
|
7512
7535
|
return (jsxs$1(Label, __assign({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
7513
7536
|
};
|
|
7514
|
-
var templateObject_1$
|
|
7537
|
+
var templateObject_1$F, templateObject_2$q;
|
|
7515
7538
|
|
|
7516
7539
|
var isEmpty = function (value) {
|
|
7517
7540
|
return value.length === 0;
|
|
@@ -7521,20 +7544,20 @@ var sliceString = function (str, maxLength) {
|
|
|
7521
7544
|
return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
|
|
7522
7545
|
};
|
|
7523
7546
|
|
|
7524
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
7525
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
7547
|
+
var ErrorText = newStyled.h3(templateObject_1$E || (templateObject_1$E = __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; });
|
|
7548
|
+
var ErrorContainer = newStyled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 0.25rem;\n"])));
|
|
7526
7549
|
var Error$1 = function (_a) {
|
|
7527
7550
|
var error = _a.error;
|
|
7528
7551
|
var theme = useTheme();
|
|
7529
7552
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
7530
7553
|
};
|
|
7531
|
-
var templateObject_1$
|
|
7554
|
+
var templateObject_1$E, templateObject_2$p;
|
|
7532
7555
|
|
|
7533
|
-
var Container$
|
|
7556
|
+
var Container$n = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n"], ["\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
7534
7557
|
var color = _a.color;
|
|
7535
7558
|
return color;
|
|
7536
7559
|
});
|
|
7537
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
7560
|
+
var StyledInput = newStyled.input(templateObject_2$o || (templateObject_2$o = __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 box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\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 box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
7538
7561
|
var padding = _a.padding;
|
|
7539
7562
|
return padding;
|
|
7540
7563
|
}, function (_a) {
|
|
@@ -7577,11 +7600,11 @@ var StyledInput = newStyled.input(templateObject_2$m || (templateObject_2$m = __
|
|
|
7577
7600
|
var disabledColor = _a.disabledColor;
|
|
7578
7601
|
return disabledColor;
|
|
7579
7602
|
});
|
|
7580
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
7603
|
+
var InputWrapper = newStyled.div(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n height: ", ";\n"])), function (_a) {
|
|
7581
7604
|
var size = _a.size;
|
|
7582
7605
|
return (size === 'small' ? '36px' : '44px');
|
|
7583
7606
|
});
|
|
7584
|
-
var templateObject_1$
|
|
7607
|
+
var templateObject_1$D, templateObject_2$o, templateObject_3$h;
|
|
7585
7608
|
|
|
7586
7609
|
var BaseInput = function (_a) {
|
|
7587
7610
|
var _b;
|
|
@@ -7634,7 +7657,7 @@ var BaseInput = function (_a) {
|
|
|
7634
7657
|
highlight: theme.colors.border.highlight,
|
|
7635
7658
|
boxShadow: theme.component.input.boxShadow,
|
|
7636
7659
|
};
|
|
7637
|
-
return (jsxs$1(Container$
|
|
7660
|
+
return (jsxs$1(Container$n, __assign({ color: status === InputValidationType.Valid
|
|
7638
7661
|
? theme.colors.shades['700'].color
|
|
7639
7662
|
: status === InputValidationType.Error
|
|
7640
7663
|
? theme.colors.semantic.urgent.color
|
|
@@ -7655,11 +7678,11 @@ var Button$4 = function (_a) {
|
|
|
7655
7678
|
throw new Error("Invalid button variant ".concat(variant));
|
|
7656
7679
|
};
|
|
7657
7680
|
|
|
7658
|
-
var Container$
|
|
7681
|
+
var Container$m = newStyled.div(templateObject_1$C || (templateObject_1$C = __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 }\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 }\n"])), function (_a) {
|
|
7659
7682
|
var theme = _a.theme;
|
|
7660
7683
|
return theme.component.inputCustom.input.borderRadius;
|
|
7661
7684
|
});
|
|
7662
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
7685
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$n || (templateObject_2$n = __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) {
|
|
7663
7686
|
var theme = _a.theme;
|
|
7664
7687
|
return theme.component.inputCustom.button.borderRadius;
|
|
7665
7688
|
});
|
|
@@ -7672,23 +7695,23 @@ var Custom = function (_a) {
|
|
|
7672
7695
|
text: text,
|
|
7673
7696
|
disabled: rest.disabled,
|
|
7674
7697
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
7675
|
-
return (jsx$1(Container$
|
|
7698
|
+
return (jsx$1(Container$m, __assign({ theme: theme }, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, __assign({ theme: theme }, { children: jsx$1(Button$4, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7676
7699
|
};
|
|
7677
|
-
var templateObject_1$
|
|
7700
|
+
var templateObject_1$C, templateObject_2$n;
|
|
7678
7701
|
|
|
7679
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
7702
|
+
var SuccessContainer = newStyled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n height: ", ";\n display: flex;\n"], ["\n height: ", ";\n display: flex;\n"])), function (_a) {
|
|
7680
7703
|
var size = _a.size;
|
|
7681
7704
|
return (size === 'small' ? '36px' : '');
|
|
7682
7705
|
});
|
|
7683
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
7684
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
7706
|
+
var SuccessMessage = newStyled.div(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
7707
|
+
var SuccessText = newStyled.span(templateObject_3$g || (templateObject_3$g = __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"])));
|
|
7685
7708
|
var Success = function (_a) {
|
|
7686
7709
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
7687
7710
|
return (jsxs$1(SuccessContainer, __assign({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
7688
7711
|
};
|
|
7689
|
-
var templateObject_1$
|
|
7712
|
+
var templateObject_1$B, templateObject_2$m, templateObject_3$g;
|
|
7690
7713
|
|
|
7691
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
7714
|
+
var ButtonContainer = newStyled.div(templateObject_1$A || (templateObject_1$A = __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) {
|
|
7692
7715
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
7693
7716
|
return status === InputValidationType.Empty &&
|
|
7694
7717
|
type === 'primary' &&
|
|
@@ -7705,21 +7728,21 @@ var BasePlusButton = function (_a) {
|
|
|
7705
7728
|
}
|
|
7706
7729
|
return (jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus, onChange: onChangeInput }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
7707
7730
|
};
|
|
7708
|
-
var templateObject_1$
|
|
7731
|
+
var templateObject_1$A;
|
|
7709
7732
|
|
|
7710
|
-
var Container$
|
|
7711
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
7733
|
+
var Container$l = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
7734
|
+
var IconContainer$3 = newStyled.div(templateObject_2$l || (templateObject_2$l = __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; });
|
|
7712
7735
|
var BasePlusIcon = function (_a) {
|
|
7713
7736
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7714
7737
|
var theme = useTheme();
|
|
7715
7738
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7716
|
-
return (jsx$1(Container$
|
|
7739
|
+
return (jsx$1(Container$l, { children: jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$3, __assign({ color: status === InputValidationType.Valid
|
|
7717
7740
|
? theme.colors.shades['700'].color
|
|
7718
7741
|
: status === InputValidationType.Error
|
|
7719
7742
|
? theme.colors.semantic.urgent.color
|
|
7720
7743
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
7721
7744
|
};
|
|
7722
|
-
var templateObject_1$
|
|
7745
|
+
var templateObject_1$z, templateObject_2$l;
|
|
7723
7746
|
|
|
7724
7747
|
var Input$1 = {
|
|
7725
7748
|
Simple: BaseInput,
|
|
@@ -7728,7 +7751,7 @@ var Input$1 = {
|
|
|
7728
7751
|
SimplePlusIcon: BasePlusIcon,
|
|
7729
7752
|
};
|
|
7730
7753
|
|
|
7731
|
-
var Container$
|
|
7754
|
+
var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __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) {
|
|
7732
7755
|
var width = _a.width;
|
|
7733
7756
|
return width;
|
|
7734
7757
|
}, function (_a) {
|
|
@@ -7744,11 +7767,11 @@ var Container$h = newStyled.div(templateObject_1$s || (templateObject_1$s = __ma
|
|
|
7744
7767
|
var PaymentMethod = function (_a) {
|
|
7745
7768
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7746
7769
|
var theme = useTheme();
|
|
7747
|
-
return (jsx$1(Container$
|
|
7770
|
+
return (jsx$1(Container$k, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
7748
7771
|
};
|
|
7749
|
-
var templateObject_1$
|
|
7772
|
+
var templateObject_1$y;
|
|
7750
7773
|
|
|
7751
|
-
var Text$
|
|
7774
|
+
var Text$3 = newStyled.h3(templateObject_1$x || (templateObject_1$x = __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) {
|
|
7752
7775
|
var backgroundColor = _a.backgroundColor;
|
|
7753
7776
|
return backgroundColor;
|
|
7754
7777
|
}, function (_a) {
|
|
@@ -7758,56 +7781,56 @@ var Text$1 = newStyled.h3(templateObject_1$r || (templateObject_1$r = __makeTemp
|
|
|
7758
7781
|
var OfferBanner = function (_a) {
|
|
7759
7782
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
7760
7783
|
var theme = useTheme();
|
|
7761
|
-
return (jsx$1(Text$
|
|
7784
|
+
return (jsx$1(Text$3, __assign({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
7762
7785
|
};
|
|
7763
|
-
var templateObject_1$
|
|
7786
|
+
var templateObject_1$x;
|
|
7764
7787
|
|
|
7765
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
7766
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
7767
|
-
var Currency = newStyled.span(templateObject_3$
|
|
7768
|
-
var Container$
|
|
7769
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
7788
|
+
var Wrapper$2 = newStyled.div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
7789
|
+
var GrandTotal = newStyled.h1(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n margin: 0;\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: ", ";\n display: flex;\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: flex;\n align-items: center;\n"])), function (props) { return props.color; });
|
|
7790
|
+
var Currency = newStyled.span(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n margin-right: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
7791
|
+
var Container$j = newStyled.div(templateObject_4$b || (templateObject_4$b = __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; });
|
|
7792
|
+
var Discount = newStyled.h3(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 600;\n"])));
|
|
7770
7793
|
var Total = function (_a) {
|
|
7771
7794
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7772
7795
|
var theme = useTheme();
|
|
7773
|
-
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
7796
|
+
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$j, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7774
7797
|
};
|
|
7775
|
-
var templateObject_1$
|
|
7798
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$f, templateObject_4$b, templateObject_5$5;
|
|
7776
7799
|
|
|
7777
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
7800
|
+
var Wrapper$1 = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7778
7801
|
var color = _a.color;
|
|
7779
7802
|
return color;
|
|
7780
7803
|
});
|
|
7781
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
7782
|
-
var Item$
|
|
7783
|
-
var CouponItem = newStyled(Item$
|
|
7804
|
+
var ItemContainer = newStyled.div(templateObject_2$j || (templateObject_2$j = __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"])));
|
|
7805
|
+
var Item$2 = newStyled.h4(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"], ["\n margin: 0;\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 600;\n"])));
|
|
7806
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7784
7807
|
var color = _a.color;
|
|
7785
7808
|
return color;
|
|
7786
7809
|
});
|
|
7787
7810
|
var Subtotal = function (_a) {
|
|
7788
7811
|
var subtotal = _a.subtotal, shipping = _a.shipping, taxes = _a.taxes, coupon = _a.coupon, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7789
7812
|
var theme = useTheme();
|
|
7790
|
-
return (jsxs$1(Wrapper$1, __assign({ color: theme.colors.shades['700'].color, "data-testid": "subtotal-wrapper" }, { children: [jsxs$1(ItemContainer, { children: [jsx$1(Item$
|
|
7813
|
+
return (jsxs$1(Wrapper$1, __assign({ color: theme.colors.shades['700'].color, "data-testid": "subtotal-wrapper" }, { children: [jsxs$1(ItemContainer, { children: [jsx$1(Item$2, { children: subtotal.label }, void 0), jsx$1(Item$2, { children: subtotal.value }, void 0)] }, void 0), jsxs$1(ItemContainer, { children: [jsx$1(Item$2, { children: shipping.label }, void 0), jsx$1(Item$2, { children: shipping.value }, void 0)] }, void 0), jsxs$1(ItemContainer, { children: [jsx$1(Item$2, { children: taxes.label }, void 0), jsx$1(Item$2, { children: taxes.value }, void 0)] }, void 0), coupon &&
|
|
7791
7814
|
coupon.coupons.map(function (c, i) {
|
|
7792
7815
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
7793
7816
|
})] }), void 0));
|
|
7794
7817
|
};
|
|
7795
|
-
var templateObject_1$
|
|
7818
|
+
var templateObject_1$v, templateObject_2$j, templateObject_3$e, templateObject_4$a;
|
|
7796
7819
|
|
|
7797
7820
|
var Totals = {
|
|
7798
7821
|
Total: Total,
|
|
7799
7822
|
Subtotal: Subtotal,
|
|
7800
7823
|
};
|
|
7801
7824
|
|
|
7802
|
-
var Container$
|
|
7803
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
7804
|
-
var Text = newStyled.p(templateObject_3$
|
|
7805
|
-
var Details = newStyled.span(templateObject_4$
|
|
7825
|
+
var Container$i = newStyled.div(templateObject_1$u || (templateObject_1$u = __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; });
|
|
7826
|
+
var IconContainer$2 = newStyled.div(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
7827
|
+
var Text$2 = newStyled.p(templateObject_3$d || (templateObject_3$d = __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; });
|
|
7828
|
+
var Details = newStyled.span(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7806
7829
|
var Note = function (_a) {
|
|
7807
7830
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7808
|
-
return (jsxs$1(Container$
|
|
7831
|
+
return (jsxs$1(Container$i, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$2, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$2, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7809
7832
|
};
|
|
7810
|
-
var templateObject_1$
|
|
7833
|
+
var templateObject_1$u, templateObject_2$i, templateObject_3$d, templateObject_4$9;
|
|
7811
7834
|
|
|
7812
7835
|
/* eslint-disable no-param-reassign */
|
|
7813
7836
|
var index$2 = function (breakpoints) {
|
|
@@ -7897,14 +7920,14 @@ var mediaQueries = function (_a) {
|
|
|
7897
7920
|
], { literal: true });
|
|
7898
7921
|
};
|
|
7899
7922
|
|
|
7900
|
-
var Title$
|
|
7901
|
-
var Line = newStyled.div(templateObject_2$
|
|
7902
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7923
|
+
var Title$2 = newStyled.h1(templateObject_1$t || (templateObject_1$t = __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; });
|
|
7924
|
+
var Line = newStyled.div(templateObject_2$h || (templateObject_2$h = __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; });
|
|
7925
|
+
var Row$1 = newStyled.div(templateObject_3$c || (templateObject_3$c = __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"])), function (props) {
|
|
7903
7926
|
return mediaQueries(props)({
|
|
7904
7927
|
flexDirection: ['column', 'row'],
|
|
7905
7928
|
});
|
|
7906
7929
|
});
|
|
7907
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
7930
|
+
var Col$1 = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __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"])), function (props) {
|
|
7908
7931
|
return mediaQueries(props)({
|
|
7909
7932
|
margin: ['0', '0 1.25rem'],
|
|
7910
7933
|
marginBottom: ['1.875rem', '0'],
|
|
@@ -7913,7 +7936,7 @@ var Col$1 = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemp
|
|
|
7913
7936
|
width: ['100%', 'inherit'],
|
|
7914
7937
|
});
|
|
7915
7938
|
});
|
|
7916
|
-
var IconContainer$1 = newStyled.div(templateObject_5$
|
|
7939
|
+
var IconContainer$1 = newStyled.div(templateObject_5$4 || (templateObject_5$4 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"])), function (props) {
|
|
7917
7940
|
return mediaQueries(props)({
|
|
7918
7941
|
marginBottom: ['1.875rem', '0'],
|
|
7919
7942
|
width: ['auto', '1.375rem'],
|
|
@@ -7932,47 +7955,48 @@ var KeepMeUpdated = newStyled.h1(templateObject_8 || (templateObject_8 = __makeT
|
|
|
7932
7955
|
var DeliveryDetails = function (_a) {
|
|
7933
7956
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7934
7957
|
var theme = useTheme();
|
|
7935
|
-
return (jsxs$1("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$
|
|
7958
|
+
return (jsxs$1("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$2, __assign({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign({}, note), void 0), jsxs$1(Row$1, __assign({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign({ theme: theme }, { children: [jsx$1(IconContainer$1, __assign({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign({ theme: theme }, { children: [jsx$1(IconContainer$1, __assign({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign({ theme: theme }, { children: [jsx$1(IconContainer$1, __assign({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
7936
7959
|
};
|
|
7937
|
-
var templateObject_1$
|
|
7960
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$c, templateObject_4$8, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7938
7961
|
|
|
7939
|
-
var Container$
|
|
7940
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
7962
|
+
var Container$h = newStyled.div(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
7963
|
+
var H1$2 = newStyled.h1(templateObject_2$g || (templateObject_2$g = __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; });
|
|
7941
7964
|
var ScrollToTop = function (_a) {
|
|
7942
7965
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7943
7966
|
var theme = useTheme();
|
|
7944
|
-
return (jsxs$1(Container$
|
|
7967
|
+
return (jsxs$1(Container$h, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$2, __assign({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
7945
7968
|
};
|
|
7946
|
-
var templateObject_1$
|
|
7969
|
+
var templateObject_1$s, templateObject_2$g;
|
|
7947
7970
|
|
|
7948
|
-
var Container$
|
|
7949
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
7971
|
+
var Container$g = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #dfefeb;\n padding: 0.75rem 0;\n"])));
|
|
7972
|
+
var H1$1 = newStyled.h1(templateObject_2$f || (templateObject_2$f = __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; });
|
|
7950
7973
|
var OrderBar = function (_a) {
|
|
7951
7974
|
var message = _a.message;
|
|
7952
7975
|
var theme = useTheme();
|
|
7953
|
-
return (jsxs$1(Container$
|
|
7976
|
+
return (jsxs$1(Container$g, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1$1, __assign({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
7954
7977
|
};
|
|
7955
|
-
var templateObject_1$
|
|
7978
|
+
var templateObject_1$r, templateObject_2$f;
|
|
7956
7979
|
|
|
7957
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
7958
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
7959
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
7960
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
7980
|
+
var TableElement = newStyled.table(templateObject_1$q || (templateObject_1$q = __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; });
|
|
7981
|
+
var TableCell = newStyled.td(templateObject_2$e || (templateObject_2$e = __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; });
|
|
7982
|
+
var TableHead = newStyled.th(templateObject_3$b || (templateObject_3$b = __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; });
|
|
7983
|
+
var TableRow = newStyled.tr(templateObject_4$7 || (templateObject_4$7 = __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; });
|
|
7961
7984
|
var SizeTable = function (_a) {
|
|
7962
7985
|
var headers = _a.headers, data = _a.data;
|
|
7963
7986
|
var theme = useTheme();
|
|
7964
7987
|
return (jsxs$1(TableElement, __assign({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
7965
7988
|
};
|
|
7966
|
-
var templateObject_1$
|
|
7989
|
+
var templateObject_1$q, templateObject_2$e, templateObject_3$b, templateObject_4$7;
|
|
7967
7990
|
|
|
7968
|
-
var Container$
|
|
7969
|
-
var
|
|
7991
|
+
var Container$f = newStyled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
7992
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
7993
|
+
var DescriptionContainer = newStyled.div(templateObject_3$a || (templateObject_3$a = __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"])), function (_a) {
|
|
7970
7994
|
var theme = _a.theme;
|
|
7971
7995
|
return mediaQueries({ theme: theme })({
|
|
7972
7996
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
7973
7997
|
});
|
|
7974
7998
|
});
|
|
7975
|
-
var Title = newStyled.h2(function (_a) {
|
|
7999
|
+
var Title$1 = newStyled.h2(function (_a) {
|
|
7976
8000
|
var color = _a.color;
|
|
7977
8001
|
return ({
|
|
7978
8002
|
fontWeight: 600,
|
|
@@ -7992,7 +8016,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
7992
8016
|
margin: '0.063rem 0',
|
|
7993
8017
|
});
|
|
7994
8018
|
});
|
|
7995
|
-
var PriceContainer = newStyled.div(
|
|
8019
|
+
var PriceContainer = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
7996
8020
|
var withTag = _a.withTag, theme = _a.theme;
|
|
7997
8021
|
return withTag
|
|
7998
8022
|
? mediaQueries({ theme: theme })({
|
|
@@ -8001,12 +8025,13 @@ var PriceContainer = newStyled.div(templateObject_3$8 || (templateObject_3$8 = _
|
|
|
8001
8025
|
})
|
|
8002
8026
|
: 'justify-content: end';
|
|
8003
8027
|
});
|
|
8028
|
+
var Quantity = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translate(30%, -30%);\n border-radius: 50%;\n width: 1.4rem;\n height: 1.4rem;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--colors-shades-450-color);\n color: var(--colors-shades-450-contrast);\n font-size: 0.8rem;\n"])));
|
|
8004
8029
|
var SimpleOrderItem = function (_a) {
|
|
8005
|
-
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag;
|
|
8030
|
+
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
8006
8031
|
var theme = useTheme();
|
|
8007
|
-
return (jsxs$1(Container$
|
|
8032
|
+
return (jsxs$1(Container$f, { children: [jsxs$1(ImageContainer$1, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsx$1(Quantity, __assign({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title$1, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
8008
8033
|
};
|
|
8009
|
-
var templateObject_1$
|
|
8034
|
+
var templateObject_1$p, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$3;
|
|
8010
8035
|
|
|
8011
8036
|
function formatDate(date) {
|
|
8012
8037
|
var day = date.getDate();
|
|
@@ -8015,21 +8040,21 @@ function formatDate(date) {
|
|
|
8015
8040
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
8016
8041
|
}
|
|
8017
8042
|
|
|
8018
|
-
var Container$
|
|
8019
|
-
var Heading = newStyled.div(templateObject_2$
|
|
8043
|
+
var Container$e = newStyled.div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
8044
|
+
var Heading = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), function (_a) {
|
|
8020
8045
|
var theme = _a.theme;
|
|
8021
8046
|
return mediaQueries({ theme: theme })({
|
|
8022
8047
|
fontSize: ['14px', '16px'],
|
|
8023
8048
|
lineHeight: ['22px', '24px'],
|
|
8024
8049
|
});
|
|
8025
8050
|
});
|
|
8026
|
-
var Content = newStyled.div(templateObject_3$
|
|
8051
|
+
var Content = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n ", ";\n"])), function (_a) {
|
|
8027
8052
|
var theme = _a.theme;
|
|
8028
8053
|
return mediaQueries({ theme: theme })({
|
|
8029
8054
|
flexDirection: ['column', 'row'],
|
|
8030
8055
|
});
|
|
8031
8056
|
});
|
|
8032
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
8057
|
+
var ReviewContainer = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), function (_a) {
|
|
8033
8058
|
var theme = _a.theme;
|
|
8034
8059
|
return mediaQueries({ theme: theme })({
|
|
8035
8060
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
@@ -8049,13 +8074,13 @@ var H3$1 = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTempla
|
|
|
8049
8074
|
lineHeight: ['22px', '24px'],
|
|
8050
8075
|
});
|
|
8051
8076
|
});
|
|
8052
|
-
var P = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"], ["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"])));
|
|
8077
|
+
var P$1 = newStyled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"], ["\n font-weight: normal;\n font-size: 16px;\n line-height: 24px;\n margin: 0;\n"])));
|
|
8053
8078
|
var Review = function (_a) {
|
|
8054
8079
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
8055
8080
|
var theme = useTheme();
|
|
8056
|
-
return (jsxs$1(Container$
|
|
8081
|
+
return (jsxs$1(Container$e, { children: [jsxs$1(Heading, __assign({ theme: theme }, { children: [jsx$1(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign({ theme: theme }, { children: [jsx$1(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsx$1(P$1, { children: description }, void 0)] }), void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
8057
8082
|
};
|
|
8058
|
-
var templateObject_1$
|
|
8083
|
+
var templateObject_1$o, templateObject_2$c, templateObject_3$9, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
8059
8084
|
|
|
8060
8085
|
var Button$3 = newStyled.button(function () { return ({
|
|
8061
8086
|
background: 'transparent',
|
|
@@ -12298,14 +12323,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12298
12323
|
return Slider;
|
|
12299
12324
|
}(React.Component);
|
|
12300
12325
|
|
|
12301
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12326
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$n || (templateObject_1$n = __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) {
|
|
12302
12327
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12303
12328
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12304
12329
|
}, function (_a) {
|
|
12305
12330
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12306
12331
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12307
12332
|
});
|
|
12308
|
-
var templateObject_1$
|
|
12333
|
+
var templateObject_1$n;
|
|
12309
12334
|
|
|
12310
12335
|
var getStylesBySize$1 = function (size) {
|
|
12311
12336
|
// rem units
|
|
@@ -12364,18 +12389,18 @@ var SliderNavigation = function (_a) {
|
|
|
12364
12389
|
} }, { children: jsx(StyledSlider, __assign({}, settings, { arrowPadding: arrows && arrows.arrowPadding, dotListMarginTop: dotListMarginTop, arrowPaddingOffset: arrows ? arrows.arrowWidth : 0, dotsSpacing: styles.dotsSpacing }, { children: children }), void 0) }), void 0));
|
|
12365
12390
|
};
|
|
12366
12391
|
|
|
12367
|
-
var List = newStyled.ul(templateObject_1$
|
|
12368
|
-
var Item = newStyled.li(templateObject_2$
|
|
12369
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12370
|
-
var ArrowContainer = newStyled.div(templateObject_4$
|
|
12392
|
+
var List = newStyled.ul(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12393
|
+
var Item$1 = newStyled.li(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
12394
|
+
var DropdownWrapper = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __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"])));
|
|
12395
|
+
var ArrowContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __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"])));
|
|
12371
12396
|
var StyledDropdown = newStyled.ul(templateObject_5$1 || (templateObject_5$1 = __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; });
|
|
12372
12397
|
var DropdownItem = newStyled.li(templateObject_6$1 || (templateObject_6$1 = __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; });
|
|
12373
|
-
var templateObject_1$
|
|
12398
|
+
var templateObject_1$m, templateObject_2$b, templateObject_3$8, templateObject_4$4, templateObject_5$1, templateObject_6$1;
|
|
12374
12399
|
|
|
12375
12400
|
var DropdownListIcons = function (_a) {
|
|
12376
12401
|
var items = _a.items;
|
|
12377
12402
|
var theme = useTheme();
|
|
12378
|
-
return (jsx$1(List, __assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxs$1(Item, { children: [createElement(item.Icon, { fill: theme.colors.shades['700'].color }), jsx$1(Dropdown, { items: item.items }, void 0)] }, index)); }) }), void 0));
|
|
12403
|
+
return (jsx$1(List, __assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxs$1(Item$1, { children: [createElement(item.Icon, { fill: theme.colors.shades['700'].color }), jsx$1(Dropdown, { items: item.items }, void 0)] }, index)); }) }), void 0));
|
|
12379
12404
|
};
|
|
12380
12405
|
var Dropdown = function (_a) {
|
|
12381
12406
|
var items = _a.items;
|
|
@@ -12383,7 +12408,7 @@ var Dropdown = function (_a) {
|
|
|
12383
12408
|
return (jsxs$1(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign({ 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));
|
|
12384
12409
|
};
|
|
12385
12410
|
|
|
12386
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12411
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$l || (templateObject_1$l = __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; });
|
|
12387
12412
|
var AmazonButton = function (_a) {
|
|
12388
12413
|
var onClick = _a.onClick;
|
|
12389
12414
|
return (jsx$1(StyledButton, __assign({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12392,15 +12417,15 @@ var PaypalButton = function (_a) {
|
|
|
12392
12417
|
var onClick = _a.onClick;
|
|
12393
12418
|
return (jsx$1(StyledButton, __assign({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12394
12419
|
};
|
|
12395
|
-
var templateObject_1$
|
|
12420
|
+
var templateObject_1$l;
|
|
12396
12421
|
|
|
12397
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12398
|
-
var Col = newStyled.div(templateObject_2$
|
|
12399
|
-
var Row = newStyled.div(templateObject_3$
|
|
12422
|
+
var Wrapper = newStyled.div(templateObject_1$k || (templateObject_1$k = __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'); });
|
|
12423
|
+
var Col = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12424
|
+
var Row = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __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) {
|
|
12400
12425
|
return props.rightToLeft &&
|
|
12401
12426
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12402
12427
|
});
|
|
12403
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12428
|
+
var H5 = newStyled.h5(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12404
12429
|
var H3 = newStyled.h3(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12405
12430
|
var FreeShipping = newStyled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12406
12431
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -12408,7 +12433,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12408
12433
|
var theme = useTheme();
|
|
12409
12434
|
return (jsxs$1(Wrapper, __assign({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12410
12435
|
};
|
|
12411
|
-
var templateObject_1$
|
|
12436
|
+
var templateObject_1$k, templateObject_2$a, templateObject_3$7, templateObject_4$3, templateObject_5, templateObject_6;
|
|
12412
12437
|
|
|
12413
12438
|
var index = /*#__PURE__*/Object.freeze({
|
|
12414
12439
|
__proto__: null,
|
|
@@ -12423,8 +12448,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12423
12448
|
height: height,
|
|
12424
12449
|
});
|
|
12425
12450
|
});
|
|
12426
|
-
var Container$
|
|
12427
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12451
|
+
var Container$d = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: min-content;\n"])));
|
|
12452
|
+
var H1 = newStyled.h1(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\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; });
|
|
12428
12453
|
var getStylesBySize = function (size) {
|
|
12429
12454
|
switch (size) {
|
|
12430
12455
|
case ComponentSize.Medium:
|
|
@@ -12449,32 +12474,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12449
12474
|
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, tags = _a.tags, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b;
|
|
12450
12475
|
var theme = useTheme();
|
|
12451
12476
|
var styles = getStylesBySize(size);
|
|
12452
|
-
return (jsxs(Container$
|
|
12477
|
+
return (jsxs(Container$d, { children: [tags ? (jsxs(ImageContainer, __assign({ 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(SeasonOfferTag, { text: tags.seasonOfferTagText, size: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, 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)), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
|
|
12453
12478
|
};
|
|
12454
|
-
var templateObject_1$
|
|
12479
|
+
var templateObject_1$j, templateObject_2$9;
|
|
12455
12480
|
|
|
12456
|
-
var Container$
|
|
12481
|
+
var Container$c = newStyled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
12457
12482
|
function withProductGrid(ProductItemComponent, data) {
|
|
12458
12483
|
function WithProductGrid(props) {
|
|
12459
|
-
return (jsx$1(Container$
|
|
12484
|
+
return (jsx$1(Container$c, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
|
|
12460
12485
|
}
|
|
12461
12486
|
/* istanbul ignore next */
|
|
12462
12487
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12463
12488
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12464
12489
|
return WithProductGrid;
|
|
12465
12490
|
}
|
|
12466
|
-
var templateObject_1$
|
|
12491
|
+
var templateObject_1$i;
|
|
12467
12492
|
|
|
12468
12493
|
var Collection = {
|
|
12469
12494
|
ProductItemMobile: ProductItemMobile,
|
|
12470
12495
|
withProductGrid: withProductGrid,
|
|
12471
12496
|
};
|
|
12472
12497
|
|
|
12473
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12498
|
+
var Backdrop = newStyled.div(templateObject_1$h || (templateObject_1$h = __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) {
|
|
12474
12499
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12475
12500
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12476
12501
|
});
|
|
12477
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12502
|
+
var Sidebar = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 3;\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: 3;\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) {
|
|
12478
12503
|
var width = _a.width;
|
|
12479
12504
|
return width;
|
|
12480
12505
|
}, function (_a) {
|
|
@@ -12515,28 +12540,28 @@ var Drawer = function (_a) {
|
|
|
12515
12540
|
}, [isOpen, onClose, onOpen]);
|
|
12516
12541
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12517
12542
|
};
|
|
12518
|
-
var templateObject_1$
|
|
12543
|
+
var templateObject_1$h, templateObject_2$8;
|
|
12519
12544
|
|
|
12520
|
-
var Container$
|
|
12545
|
+
var Container$b = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12521
12546
|
var size = _a.size;
|
|
12522
12547
|
return (size ? size : '100%');
|
|
12523
12548
|
}, function (_a) {
|
|
12524
12549
|
var size = _a.size;
|
|
12525
12550
|
return (size ? size : '100%');
|
|
12526
12551
|
});
|
|
12527
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12552
|
+
var Animation = newStyled.div(templateObject_2$7 || (templateObject_2$7 = __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) {
|
|
12528
12553
|
var animationDuration = _a.animationDuration;
|
|
12529
12554
|
return animationDuration;
|
|
12530
12555
|
});
|
|
12531
12556
|
var Spinner = function (_a) {
|
|
12532
12557
|
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;
|
|
12533
|
-
return (jsx$1(Container$
|
|
12558
|
+
return (jsx$1(Container$b, __assign({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12534
12559
|
};
|
|
12535
|
-
var templateObject_1$
|
|
12560
|
+
var templateObject_1$g, templateObject_2$7;
|
|
12536
12561
|
|
|
12537
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12538
|
-
var LI = newStyled.li(templateObject_2$
|
|
12539
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12562
|
+
var UL = newStyled.ul(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
12563
|
+
var LI = newStyled.li(templateObject_2$6 || (templateObject_2$6 = __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; });
|
|
12564
|
+
var CloseIconContainer = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
12540
12565
|
var Tags = function (_a) {
|
|
12541
12566
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12542
12567
|
var theme = useTheme();
|
|
@@ -12544,7 +12569,7 @@ var Tags = function (_a) {
|
|
|
12544
12569
|
return (jsxs$1(LI, __assign({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12545
12570
|
}) }), void 0));
|
|
12546
12571
|
};
|
|
12547
|
-
var templateObject_1$
|
|
12572
|
+
var templateObject_1$f, templateObject_2$6, templateObject_3$6;
|
|
12548
12573
|
|
|
12549
12574
|
function FilteringDropdown(_a) {
|
|
12550
12575
|
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;
|
|
@@ -12577,15 +12602,15 @@ function FilteringDropdown(_a) {
|
|
|
12577
12602
|
}) }, void 0)] }), void 0));
|
|
12578
12603
|
}
|
|
12579
12604
|
|
|
12580
|
-
var Container$
|
|
12581
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
12582
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12605
|
+
var Container$a = newStyled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
12606
|
+
var IconContainer = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __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"])));
|
|
12607
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), function (_a) {
|
|
12583
12608
|
var theme = _a.theme;
|
|
12584
12609
|
return mediaQueries({ theme: theme })({
|
|
12585
12610
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12586
12611
|
});
|
|
12587
12612
|
});
|
|
12588
|
-
var PageNumber = newStyled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"])), function (_a) {
|
|
12613
|
+
var PageNumber = newStyled.span(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"])), function (_a) {
|
|
12589
12614
|
var bold = _a.bold;
|
|
12590
12615
|
return (bold ? '700' : '500');
|
|
12591
12616
|
}, function (_a) {
|
|
@@ -12602,7 +12627,7 @@ var PageNumber = newStyled.span(templateObject_4 || (templateObject_4 = __makeTe
|
|
|
12602
12627
|
width: ['1.25rem', '1.875rem'],
|
|
12603
12628
|
});
|
|
12604
12629
|
});
|
|
12605
|
-
var templateObject_1$
|
|
12630
|
+
var templateObject_1$e, templateObject_2$5, templateObject_3$5, templateObject_4$2;
|
|
12606
12631
|
|
|
12607
12632
|
var Pagination = function (_a) {
|
|
12608
12633
|
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;
|
|
@@ -12615,15 +12640,15 @@ var Pagination = function (_a) {
|
|
|
12615
12640
|
setPage(page);
|
|
12616
12641
|
onChange(page);
|
|
12617
12642
|
};
|
|
12618
|
-
return (jsxs$1(Container$
|
|
12643
|
+
return (jsxs$1(Container$a, __assign({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer, __assign({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign({ 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), jsx$1(IconContainer, __assign({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12619
12644
|
};
|
|
12620
12645
|
|
|
12621
|
-
var Container$
|
|
12646
|
+
var Container$9 = newStyled.div(templateObject_1$d || (templateObject_1$d = __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"])), function (props) {
|
|
12622
12647
|
return mediaQueries(props)({
|
|
12623
12648
|
borderTop: ["0.063rem solid ".concat(props.theme.colors.shades['100'].color), 'none'],
|
|
12624
12649
|
});
|
|
12625
12650
|
});
|
|
12626
|
-
var Description = newStyled.div({
|
|
12651
|
+
var Description$1 = newStyled.div({
|
|
12627
12652
|
display: 'flex',
|
|
12628
12653
|
flexDirection: 'column',
|
|
12629
12654
|
alignItems: 'flex-start',
|
|
@@ -12637,25 +12662,25 @@ var Description = newStyled.div({
|
|
|
12637
12662
|
var ProductItem = function (_a) {
|
|
12638
12663
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12639
12664
|
var theme = useTheme();
|
|
12640
|
-
return (jsxs$1(Container$
|
|
12665
|
+
return (jsxs$1(Container$9, __assign({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$5, __assign({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12641
12666
|
};
|
|
12642
|
-
var templateObject_1$
|
|
12667
|
+
var templateObject_1$d;
|
|
12643
12668
|
|
|
12644
|
-
var Container$
|
|
12669
|
+
var Container$8 = newStyled.div({
|
|
12645
12670
|
display: 'flex',
|
|
12646
12671
|
justifyContent: 'center',
|
|
12647
12672
|
padding: '1rem',
|
|
12648
12673
|
});
|
|
12649
12674
|
var Footer = function (_a) {
|
|
12650
12675
|
var text = _a.text, onClick = _a.onClick;
|
|
12651
|
-
return (jsx$1(Container$
|
|
12676
|
+
return (jsx$1(Container$8, { children: jsx$1(Text$5, __assign({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12652
12677
|
};
|
|
12653
12678
|
|
|
12654
12679
|
var Ul = newStyled.ul({
|
|
12655
12680
|
margin: '0px',
|
|
12656
12681
|
padding: '0px',
|
|
12657
12682
|
});
|
|
12658
|
-
var Li = newStyled.li(templateObject_1$
|
|
12683
|
+
var Li = newStyled.li(templateObject_1$c || (templateObject_1$c = __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; }, function (props) {
|
|
12659
12684
|
return mediaQueries(props)({
|
|
12660
12685
|
padding: [0, '0rem 1rem'],
|
|
12661
12686
|
borderRadius: [0, '0.5rem'],
|
|
@@ -12668,13 +12693,13 @@ var Button$2 = newStyled.button({
|
|
|
12668
12693
|
cursor: 'pointer',
|
|
12669
12694
|
padding: 0,
|
|
12670
12695
|
});
|
|
12671
|
-
var Container$
|
|
12696
|
+
var Container$7 = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __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 border-radius: 0.5rem;\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 border-radius: 0.5rem;\n ", ",\n"])), function (props) {
|
|
12672
12697
|
return mediaQueries(props)({
|
|
12673
12698
|
border: ['none', "0.063rem solid ".concat(props.theme.colors.pallete.secondary.color)],
|
|
12674
12699
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12675
12700
|
});
|
|
12676
12701
|
});
|
|
12677
|
-
var Header = newStyled.div(templateObject_3$
|
|
12702
|
+
var Header = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), function (props) {
|
|
12678
12703
|
return mediaQueries(props)({
|
|
12679
12704
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
12680
12705
|
});
|
|
@@ -12682,9 +12707,9 @@ var Header = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTem
|
|
|
12682
12707
|
var ResultsPanel = function (_a) {
|
|
12683
12708
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, dataTestId = _a.dataTestId;
|
|
12684
12709
|
var theme = useTheme();
|
|
12685
|
-
return (jsxs$1(Container$
|
|
12710
|
+
return (jsxs$1(Container$7, __assign({ "data-testid": dataTestId, theme: theme }, { children: [header && (jsx$1(Header, __assign({ theme: theme }, { children: jsx$1(Text$5, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign({ theme: theme }, { children: jsx$1(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12686
12711
|
};
|
|
12687
|
-
var templateObject_1$
|
|
12712
|
+
var templateObject_1$c, templateObject_2$4, templateObject_3$4;
|
|
12688
12713
|
|
|
12689
12714
|
var Input = newStyled.input(function (props) { return ({
|
|
12690
12715
|
padding: props.theme.component.input.padding,
|
|
@@ -12715,7 +12740,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
12715
12740
|
},
|
|
12716
12741
|
}); });
|
|
12717
12742
|
|
|
12718
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
12743
|
+
var Button$1 = newStyled.button(templateObject_1$b || (templateObject_1$b = __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"])), function (props) {
|
|
12719
12744
|
return mediaQueries(props)({
|
|
12720
12745
|
right: ['1rem', '-3.75rem'],
|
|
12721
12746
|
});
|
|
@@ -12725,7 +12750,7 @@ var ClearButton = function (_a) {
|
|
|
12725
12750
|
var theme = useTheme();
|
|
12726
12751
|
return (jsx$1(Button$1, __assign({ onClick: onClick, theme: theme }, { children: jsx$1(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
12727
12752
|
};
|
|
12728
|
-
var templateObject_1$
|
|
12753
|
+
var templateObject_1$b;
|
|
12729
12754
|
|
|
12730
12755
|
var useOnClickOutside = function (ref, handler) {
|
|
12731
12756
|
useEffect(function () {
|
|
@@ -12812,7 +12837,7 @@ var reducer = function (state, action) {
|
|
|
12812
12837
|
}
|
|
12813
12838
|
}
|
|
12814
12839
|
};
|
|
12815
|
-
var Container$
|
|
12840
|
+
var Container$6 = newStyled.div({
|
|
12816
12841
|
position: 'relative',
|
|
12817
12842
|
display: 'flex',
|
|
12818
12843
|
});
|
|
@@ -12830,42 +12855,42 @@ var SearchBar = function (_a) {
|
|
|
12830
12855
|
return function () { return clearTimeout(id); };
|
|
12831
12856
|
}, [onChange, state.term]);
|
|
12832
12857
|
var options = resultOptions && resultOptions.length > 0 ? resultOptions : suggestions;
|
|
12833
|
-
return (jsxs$1("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$
|
|
12858
|
+
return (jsxs$1("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxs$1(Container$6, __assign({ theme: theme }, { children: [jsx$1(Input, { value: state.term, placeholder: "Search for products", onChange: function (e) { return dispatch({ type: 'UPDATE_TERM', payload: { term: e.target.value } }); }, onFocus: function () { return dispatch({ type: 'TOGGLE_PANEL', payload: { open: true } }); }, id: "search", autoComplete: "off", theme: theme, "aria-label": "Search for products" }, void 0), jsx$1(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsx$1(ResultsPanel, { dataTestId: resultsPanelDataTestId, options: options, header: resultOptions.length === 0 ? 'Most popular products' : undefined, footer: resultOptions.length > 0 ? "View all results (".concat(resultOptions.length, ")") : undefined, onClick: function (value) {
|
|
12834
12859
|
onSearch(value.title);
|
|
12835
12860
|
dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
|
|
12836
12861
|
}, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
12837
12862
|
};
|
|
12838
12863
|
|
|
12839
|
-
var Container$
|
|
12840
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
12841
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
12864
|
+
var Container$5 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n position: relative;\n max-height: 31.875rem;\n"], ["\n position: relative;\n max-height: 31.875rem;\n"])));
|
|
12865
|
+
var TopTagContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
12866
|
+
var BottomTagContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
12842
12867
|
var ImageProductWithTags = function (_a) {
|
|
12843
12868
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
12844
|
-
return (jsxs$1(Container$
|
|
12869
|
+
return (jsxs$1(Container$5, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
12845
12870
|
};
|
|
12846
|
-
var templateObject_1$
|
|
12871
|
+
var templateObject_1$a, templateObject_2$3, templateObject_3$3;
|
|
12847
12872
|
|
|
12848
|
-
var Button = newStyled.button(templateObject_1$
|
|
12873
|
+
var Button = newStyled.button(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n"], ["\n background: transparent;\n border: none;\n padding: 0.188rem 0.625rem;\n"])));
|
|
12849
12874
|
var ArrowButton = function (_a) {
|
|
12850
12875
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
12851
12876
|
return (jsx$1(Button, __assign({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
12852
12877
|
};
|
|
12853
|
-
var templateObject_1$
|
|
12878
|
+
var templateObject_1$9;
|
|
12854
12879
|
|
|
12855
|
-
var Container$
|
|
12880
|
+
var Container$4 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
12856
12881
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
12857
12882
|
var SlideDots = function (_a) {
|
|
12858
12883
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
12859
12884
|
var theme = useTheme();
|
|
12860
|
-
return (jsx$1(Container$
|
|
12885
|
+
return (jsx$1(Container$4, __assign({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsx$1(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
12861
12886
|
? theme.colors.shades.white.color
|
|
12862
12887
|
: theme.colors.shades['700'].color, opacity: 0.6, dataTestId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12863
12888
|
};
|
|
12864
|
-
var templateObject_1$
|
|
12889
|
+
var templateObject_1$8;
|
|
12865
12890
|
|
|
12866
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
12867
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12868
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12891
|
+
var NavigationButton = newStyled(ArrowButton)(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
12892
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12893
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12869
12894
|
var SlideNavigation = function (_a) {
|
|
12870
12895
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, dataTestId = _a.dataTestId;
|
|
12871
12896
|
var theme = useTheme();
|
|
@@ -12877,9 +12902,9 @@ var SlideNavigation = function (_a) {
|
|
|
12877
12902
|
onNavigate(selectedIndex + 1);
|
|
12878
12903
|
} }, void 0)), jsx$1(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: dataTestId }, void 0)] }, void 0));
|
|
12879
12904
|
};
|
|
12880
|
-
var templateObject_1$
|
|
12905
|
+
var templateObject_1$7, templateObject_2$2, templateObject_3$2;
|
|
12881
12906
|
|
|
12882
|
-
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"])));
|
|
12907
|
+
var Container$3 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
12883
12908
|
var ProductGalleryMobile = function (_a) {
|
|
12884
12909
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
12885
12910
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -12887,9 +12912,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12887
12912
|
useEffect(function () {
|
|
12888
12913
|
setSelectedImage(initialValue);
|
|
12889
12914
|
}, [initialValue]);
|
|
12890
|
-
return (jsxs$1(Container, { children: [jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, dataTestId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12915
|
+
return (jsxs$1(Container$3, { children: [jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0), jsx$1(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, dataTestId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12891
12916
|
};
|
|
12892
|
-
var templateObject_1;
|
|
12917
|
+
var templateObject_1$6;
|
|
12893
12918
|
|
|
12894
12919
|
var Portal = function (_a) {
|
|
12895
12920
|
var id = _a.id, className = _a.className, children = _a.children;
|
|
@@ -12920,5 +12945,94 @@ var Portal = function (_a) {
|
|
|
12920
12945
|
return createPortal(children, container.current, id);
|
|
12921
12946
|
};
|
|
12922
12947
|
|
|
12923
|
-
|
|
12948
|
+
var visibleStyle = function (_a) {
|
|
12949
|
+
var opened = _a.opened;
|
|
12950
|
+
return opened
|
|
12951
|
+
? css(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n opacity: 1;\n pointer-events: all;\n transform: translate(-50%, -50%);\n "], ["\n opacity: 1;\n pointer-events: all;\n transform: translate(-50%, -50%);\n "]))) : css(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, -40%);\n "], ["\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, -40%);\n "])));
|
|
12952
|
+
};
|
|
12953
|
+
var Container$2 = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: var(--radius-regular);\n padding: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n min-width: var(--component-modal-minWidth);\n transition: transform 0.3s, opacity 0.3s;\n\n ", ";\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: var(--radius-regular);\n padding: 20px;\n position: fixed;\n left: 50%;\n top: 50%;\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n min-width: var(--component-modal-minWidth);\n transition: transform 0.3s, opacity 0.3s;\n\n ", ";\n"])), visibleStyle);
|
|
12954
|
+
var Overlay = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __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: transform 0.3s, opacity 0.3s;\n\n ", "\n\n transform: none;\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: transform 0.3s, opacity 0.3s;\n\n ", "\n\n transform: none;\n"])), visibleStyle);
|
|
12955
|
+
var Modal = function (_a) {
|
|
12956
|
+
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b;
|
|
12957
|
+
var _c = useState(false), opened = _c[0], setOpened = _c[1];
|
|
12958
|
+
useEffect(function () {
|
|
12959
|
+
var onModal = function (e) {
|
|
12960
|
+
if (e.detail.id !== id) {
|
|
12961
|
+
return;
|
|
12962
|
+
}
|
|
12963
|
+
setOpened(e.detail.type === 'open');
|
|
12964
|
+
};
|
|
12965
|
+
window.addEventListener('modal', onModal);
|
|
12966
|
+
return function () {
|
|
12967
|
+
window.removeEventListener('modal', onModal);
|
|
12968
|
+
};
|
|
12969
|
+
}, [id]);
|
|
12970
|
+
var onDismiss = function () {
|
|
12971
|
+
if (!dismissable) {
|
|
12972
|
+
return;
|
|
12973
|
+
}
|
|
12974
|
+
setOpened(false);
|
|
12975
|
+
};
|
|
12976
|
+
return (jsxs(Portal, __assign({ id: id }, { children: [jsx(Container$2, __assign({ opened: opened }, { children: children }), void 0), jsx(Overlay, { opened: opened, onClick: onDismiss }, void 0)] }), void 0));
|
|
12977
|
+
};
|
|
12978
|
+
var modalEvent = function (id, detail) {
|
|
12979
|
+
window.dispatchEvent(new CustomEvent('modal', {
|
|
12980
|
+
detail: __assign(__assign({}, detail), { id: id }),
|
|
12981
|
+
}));
|
|
12982
|
+
};
|
|
12983
|
+
var templateObject_1$5, templateObject_2$1, templateObject_3$1, templateObject_4$1;
|
|
12984
|
+
|
|
12985
|
+
var Text$1 = newStyled.span(templateObject_1$4 || (templateObject_1$4 = __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; });
|
|
12986
|
+
var Title = function (_a) {
|
|
12987
|
+
var title = _a.title;
|
|
12988
|
+
var theme = useTheme();
|
|
12989
|
+
return jsx$1(Text$1, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
12990
|
+
};
|
|
12991
|
+
var templateObject_1$4;
|
|
12992
|
+
|
|
12993
|
+
var P = newStyled.p(templateObject_1$3 || (templateObject_1$3 = __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; });
|
|
12994
|
+
var Promo = function (_a) {
|
|
12995
|
+
var text = _a.text;
|
|
12996
|
+
var theme = useTheme();
|
|
12997
|
+
return (jsx$1(P, __assign({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
12998
|
+
};
|
|
12999
|
+
var templateObject_1$3;
|
|
13000
|
+
|
|
13001
|
+
var Text = newStyled.span(templateObject_1$2 || (templateObject_1$2 = __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; });
|
|
13002
|
+
var Description = function (_a) {
|
|
13003
|
+
var text = _a.text;
|
|
13004
|
+
var theme = useTheme();
|
|
13005
|
+
return jsx$1(Text, __assign({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13006
|
+
};
|
|
13007
|
+
var templateObject_1$2;
|
|
13008
|
+
|
|
13009
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n"], ["\n margin: 0;\n padding: 0.25rem;\n background-color: ", ";\n display: inline-flex;\n border-radius: 50%;\n cursor: pointer;\n"])), function (props) { return props.backgroundColor; });
|
|
13010
|
+
var CloseButton = function (_a) {
|
|
13011
|
+
var onClick = _a.onClick;
|
|
13012
|
+
var theme = useTheme();
|
|
13013
|
+
return (jsx$1(Container$1, __assign({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn" }, { children: jsx$1(Icon.Actions.Close, { width: 0.313, height: 0.313, fill: "#fff" }, void 0) }), void 0));
|
|
13014
|
+
};
|
|
13015
|
+
var templateObject_1$1;
|
|
13016
|
+
|
|
13017
|
+
var CartProductItem = {
|
|
13018
|
+
Title: Title,
|
|
13019
|
+
Tag: OfferBanner,
|
|
13020
|
+
Promo: Promo,
|
|
13021
|
+
Description: Description,
|
|
13022
|
+
CloseButton: CloseButton,
|
|
13023
|
+
};
|
|
13024
|
+
|
|
13025
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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; });
|
|
13026
|
+
var Item = newStyled.span(templateObject_2 || (templateObject_2 = __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"])));
|
|
13027
|
+
var Number$1 = newStyled(Item)(templateObject_3 || (templateObject_3 = __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"])));
|
|
13028
|
+
var IncreaseDecrease = newStyled(Item)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"], ["\n cursor: pointer;\n user-select: none;\n padding: 0 0.313rem;\n font-weight: 400;\n"])));
|
|
13029
|
+
var QuantityPicker = function (_a) {
|
|
13030
|
+
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c;
|
|
13031
|
+
var theme = useTheme();
|
|
13032
|
+
var _d = React.useState(initialValue), value = _d[0], setValue = _d[1];
|
|
13033
|
+
return (jsxs$1(Container, __assign({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": "QuantityPickerContainer" }, { children: [jsx$1(IncreaseDecrease, __assign({ onClick: function () { return setValue(function (val) { return (val > initialValue ? val - 1 : val); }); } }, { children: "-" }), void 0), jsx$1(Number$1, { children: value }, void 0), jsx$1(IncreaseDecrease, __assign({ onClick: function () { return setValue(function (val) { return (val < maxValue ? val + 1 : val); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13034
|
+
};
|
|
13035
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
13036
|
+
|
|
13037
|
+
export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, modalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
12924
13038
|
//# sourceMappingURL=index.esm.js.map
|