@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.js
CHANGED
|
@@ -323,17 +323,29 @@ var ShoppingBag = function (_a) {
|
|
|
323
323
|
return (jsxRuntime.jsx(IconWrapper, __assign({ width: width, height: height, viewBoxX: 32, viewBoxY: 38, title: "Shopping bag" }, { children: jsxRuntime.jsx("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));
|
|
324
324
|
};
|
|
325
325
|
|
|
326
|
+
var ShoppingCart = function (_a) {
|
|
327
|
+
var width = _a.width, height = _a.height, _b = _a.fill, fill = _b === void 0 ? 'inherit' : _b;
|
|
328
|
+
return (jsxRuntime.jsx(IconWrapper, __assign({ width: width, height: height, viewBoxX: 21, viewBoxY: 21, title: "Shopping Cart" }, { children: jsxRuntime.jsx("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));
|
|
329
|
+
};
|
|
330
|
+
|
|
326
331
|
var MapMarker = function (_a) {
|
|
327
332
|
var height = _a.height, width = _a.width, fill = _a.fill;
|
|
328
333
|
return (jsxRuntime.jsx(IconWrapper, __assign({ width: width, height: height, viewBoxX: 30, viewBoxY: 40, title: "Map marker" }, { children: jsxRuntime.jsx("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));
|
|
329
334
|
};
|
|
330
335
|
|
|
336
|
+
var Hamburger = function (_a) {
|
|
337
|
+
var width = _a.width, height = _a.height, _b = _a.fill, fill = _b === void 0 ? 'inherit' : _b;
|
|
338
|
+
return (jsxRuntime.jsx(IconWrapper, __assign({ width: width, height: height, viewBoxX: 22, viewBoxY: 19, title: "Hamburguer" }, { children: jsxRuntime.jsx("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));
|
|
339
|
+
};
|
|
340
|
+
|
|
331
341
|
var Navigation = /*#__PURE__*/Object.freeze({
|
|
332
342
|
__proto__: null,
|
|
333
343
|
Search: Search,
|
|
334
344
|
User: User,
|
|
335
345
|
ShoppingBag: ShoppingBag,
|
|
336
|
-
|
|
346
|
+
ShoppingCart: ShoppingCart,
|
|
347
|
+
MapMarker: MapMarker,
|
|
348
|
+
Hamburger: Hamburger
|
|
337
349
|
});
|
|
338
350
|
|
|
339
351
|
var QuestionCircle = function (_a) {
|
|
@@ -3282,7 +3294,7 @@ exports.InputValidationType = void 0;
|
|
|
3282
3294
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3283
3295
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
3284
3296
|
|
|
3285
|
-
var Section = newStyled.div(templateObject_1
|
|
3297
|
+
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) {
|
|
3286
3298
|
return props.type === exports.CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3287
3299
|
});
|
|
3288
3300
|
var CardHeader = function (_a) {
|
|
@@ -3293,14 +3305,14 @@ var CardFooter = function (_a) {
|
|
|
3293
3305
|
var children = _a.children;
|
|
3294
3306
|
return (jsxRuntime.jsx(Section, __assign({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
3295
3307
|
};
|
|
3296
|
-
var templateObject_1
|
|
3308
|
+
var templateObject_1$15;
|
|
3297
3309
|
|
|
3298
|
-
var Body = newStyled.div(templateObject_1$
|
|
3310
|
+
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"])));
|
|
3299
3311
|
var CardBody = function (_a) {
|
|
3300
3312
|
var children = _a.children;
|
|
3301
3313
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
3302
3314
|
};
|
|
3303
|
-
var templateObject_1$
|
|
3315
|
+
var templateObject_1$14;
|
|
3304
3316
|
|
|
3305
3317
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3306
3318
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3445,7 +3457,7 @@ var AssetsProvider = function (_a) {
|
|
|
3445
3457
|
};
|
|
3446
3458
|
var useThemeAssets = function () { return React.useContext(AssetsContext); };
|
|
3447
3459
|
|
|
3448
|
-
var Container$
|
|
3460
|
+
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) {
|
|
3449
3461
|
var flex = _a.flex;
|
|
3450
3462
|
return flex &&
|
|
3451
3463
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3458,14 +3470,14 @@ var Container$C = newStyled.div(templateObject_1$Z || (templateObject_1$Z = __ma
|
|
|
3458
3470
|
var Card = function (_a) {
|
|
3459
3471
|
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;
|
|
3460
3472
|
var theme = useTheme();
|
|
3461
|
-
return (jsxRuntime.jsx(Container$
|
|
3473
|
+
return (jsxRuntime.jsx(Container$F, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer", theme: theme }, { children: children }), void 0));
|
|
3462
3474
|
};
|
|
3463
3475
|
var Card$1 = Object.assign(Card, {
|
|
3464
3476
|
Header: CardHeader,
|
|
3465
3477
|
Footer: CardFooter,
|
|
3466
3478
|
Body: CardBody,
|
|
3467
3479
|
});
|
|
3468
|
-
var templateObject_1$
|
|
3480
|
+
var templateObject_1$13;
|
|
3469
3481
|
|
|
3470
3482
|
var Fragment = jsxRuntime.Fragment;
|
|
3471
3483
|
function jsx(type, props, key) {
|
|
@@ -4209,7 +4221,7 @@ function useDescriptions() {
|
|
|
4209
4221
|
} // ---
|
|
4210
4222
|
|
|
4211
4223
|
var DEFAULT_DESCRIPTION_TAG = 'p';
|
|
4212
|
-
function Description$
|
|
4224
|
+
function Description$2(props) {
|
|
4213
4225
|
var context = useDescriptionContext();
|
|
4214
4226
|
var id = "headlessui-description-" + useId();
|
|
4215
4227
|
useIsoMorphicEffect(function () {
|
|
@@ -5928,7 +5940,7 @@ function Option$1(props) {
|
|
|
5928
5940
|
|
|
5929
5941
|
RadioGroup.Option = Option$1;
|
|
5930
5942
|
RadioGroup.Label = Label$3;
|
|
5931
|
-
RadioGroup.Description = Description$
|
|
5943
|
+
RadioGroup.Description = Description$2;
|
|
5932
5944
|
|
|
5933
5945
|
var BaseSelectButton = function (_a) {
|
|
5934
5946
|
var children = _a.children, as = _a.as;
|
|
@@ -5945,7 +5957,7 @@ function BaseSelectOption(_a) {
|
|
|
5945
5957
|
return (jsxRuntime.jsx(Listbox.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5946
5958
|
}
|
|
5947
5959
|
|
|
5948
|
-
var CustomListBox = newStyled(Listbox)(templateObject_1$
|
|
5960
|
+
var CustomListBox = newStyled(Listbox)(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5949
5961
|
function BaseSelect(_a) {
|
|
5950
5962
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5951
5963
|
return (jsxRuntime.jsx(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5955,7 +5967,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5955
5967
|
Options: BaseSelectOptions,
|
|
5956
5968
|
Option: BaseSelectOption,
|
|
5957
5969
|
});
|
|
5958
|
-
var templateObject_1$
|
|
5970
|
+
var templateObject_1$12;
|
|
5959
5971
|
|
|
5960
5972
|
var CustomButton = newStyled.button(function (_a) {
|
|
5961
5973
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -5974,6 +5986,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
5974
5986
|
color: theme.component.dropdown.color,
|
|
5975
5987
|
fill: theme.component.dropdown.fill,
|
|
5976
5988
|
width: wide ? '100%' : 'auto',
|
|
5989
|
+
height: wide ? '100%' : 'auto',
|
|
5977
5990
|
justifyContent: wide ? 'space-between' : 'center',
|
|
5978
5991
|
svg: {
|
|
5979
5992
|
marginLeft: '0.75rem',
|
|
@@ -6167,12 +6180,12 @@ var CustomCheckboxStyles = {
|
|
|
6167
6180
|
},
|
|
6168
6181
|
};
|
|
6169
6182
|
|
|
6170
|
-
var Container$
|
|
6183
|
+
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"])));
|
|
6171
6184
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
6172
6185
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6173
6186
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
6174
6187
|
]; });
|
|
6175
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
6188
|
+
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) {
|
|
6176
6189
|
var disabled = _a.disabled;
|
|
6177
6190
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
6178
6191
|
});
|
|
@@ -6196,9 +6209,9 @@ var Checkbox = function (_a) {
|
|
|
6196
6209
|
React.useEffect(function () {
|
|
6197
6210
|
mounted.current = true;
|
|
6198
6211
|
}, []);
|
|
6199
|
-
return (jsxRuntime.jsxs(Container$
|
|
6212
|
+
return (jsxRuntime.jsxs(Container$E, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$2, __assign({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
6200
6213
|
};
|
|
6201
|
-
var templateObject_1$
|
|
6214
|
+
var templateObject_1$11, templateObject_2$E;
|
|
6202
6215
|
|
|
6203
6216
|
var CustomOption = newStyled.li(function (_a) {
|
|
6204
6217
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -6232,6 +6245,7 @@ function BaseDropdown(_a) {
|
|
|
6232
6245
|
var theme = useTheme();
|
|
6233
6246
|
return (jsx(BaseSelect$1, __assign({ value: value, onChange: function (value) { return onChange(value); }, css: {
|
|
6234
6247
|
width: wide ? '100%' : 'fit-content',
|
|
6248
|
+
height: wide ? '100%' : 'fit-content',
|
|
6235
6249
|
position: 'relative',
|
|
6236
6250
|
fontSize: theme.component.dropdown.fontSize,
|
|
6237
6251
|
lineHeight: theme.component.dropdown.lineHeight,
|
|
@@ -6327,11 +6341,11 @@ var SelectorSecondary = function (_a) {
|
|
|
6327
6341
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
6328
6342
|
// `variants` styles that are consistent through all themes.
|
|
6329
6343
|
var TAGS = {
|
|
6330
|
-
hero1: newStyled.h1(templateObject_1$
|
|
6331
|
-
hero2: newStyled.h2(templateObject_2$
|
|
6332
|
-
hero3: newStyled.h3(templateObject_3$
|
|
6333
|
-
display1: newStyled.h1(templateObject_4$
|
|
6334
|
-
display2: newStyled.h2(templateObject_5$
|
|
6344
|
+
hero1: newStyled.h1(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject([""], [""]))),
|
|
6345
|
+
hero2: newStyled.h2(templateObject_2$D || (templateObject_2$D = __makeTemplateObject([""], [""]))),
|
|
6346
|
+
hero3: newStyled.h3(templateObject_3$p || (templateObject_3$p = __makeTemplateObject([""], [""]))),
|
|
6347
|
+
display1: newStyled.h1(templateObject_4$f || (templateObject_4$f = __makeTemplateObject([""], [""]))),
|
|
6348
|
+
display2: newStyled.h2(templateObject_5$8 || (templateObject_5$8 = __makeTemplateObject([""], [""]))),
|
|
6335
6349
|
heading1: newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject([""], [""]))),
|
|
6336
6350
|
heading2: newStyled.h2(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject([""], [""]))),
|
|
6337
6351
|
heading3: newStyled.h3(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject([""], [""]))),
|
|
@@ -6345,7 +6359,7 @@ var TAGS = {
|
|
|
6345
6359
|
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
6346
6360
|
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' : ''); }),
|
|
6347
6361
|
};
|
|
6348
|
-
var Text$
|
|
6362
|
+
var Text$5 = function (_a) {
|
|
6349
6363
|
var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
|
|
6350
6364
|
var theme = useTheme();
|
|
6351
6365
|
var Tag = React.useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
@@ -6450,24 +6464,27 @@ var DEFAULTS = {
|
|
|
6450
6464
|
size: 'regular',
|
|
6451
6465
|
},
|
|
6452
6466
|
};
|
|
6453
|
-
var templateObject_1$
|
|
6467
|
+
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;
|
|
6454
6468
|
|
|
6455
|
-
var ButtonsContainer = newStyled.div(templateObject_1
|
|
6469
|
+
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) {
|
|
6470
|
+
var inline = _a.inline;
|
|
6471
|
+
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
6472
|
+
});
|
|
6456
6473
|
var SizeSelector = function (_a) {
|
|
6457
6474
|
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
6458
6475
|
return (jsxs("div", __assign({ css: {
|
|
6459
6476
|
display: 'flex',
|
|
6460
6477
|
flexDirection: inline ? 'row' : 'column',
|
|
6461
6478
|
alignItems: inline ? 'center' : 'start',
|
|
6462
|
-
} }, { children: [jsxs(Text$
|
|
6479
|
+
} }, { 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) {
|
|
6463
6480
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
6464
6481
|
return (jsx(SelectorSecondary, { css: {
|
|
6465
6482
|
padding: '0.75rem 1rem 0.625rem',
|
|
6466
|
-
margin: '0.5rem',
|
|
6483
|
+
margin: '0 0.5rem 0.625rem 0',
|
|
6467
6484
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
|
|
6468
|
-
}) }, void 0)] }), void 0));
|
|
6485
|
+
}) }), void 0)] }), void 0));
|
|
6469
6486
|
};
|
|
6470
|
-
var templateObject_1
|
|
6487
|
+
var templateObject_1$$;
|
|
6471
6488
|
|
|
6472
6489
|
var getStylesBySize$7 = function (size) {
|
|
6473
6490
|
switch (size) {
|
|
@@ -6496,7 +6513,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
6496
6513
|
} });
|
|
6497
6514
|
};
|
|
6498
6515
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
6499
|
-
return Icon && (jsx("span", __assign({ css: css(templateObject_1$
|
|
6516
|
+
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));
|
|
6500
6517
|
};
|
|
6501
6518
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
6502
6519
|
if (disabled)
|
|
@@ -6512,16 +6529,16 @@ var TextButton = function (_a) {
|
|
|
6512
6529
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
6513
6530
|
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));
|
|
6514
6531
|
};
|
|
6515
|
-
var templateObject_1$
|
|
6532
|
+
var templateObject_1$_;
|
|
6516
6533
|
|
|
6517
|
-
var Container$
|
|
6518
|
-
var P$
|
|
6519
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
6534
|
+
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"])));
|
|
6535
|
+
var P$3 = newStyled.p(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6536
|
+
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"])));
|
|
6520
6537
|
var SizeFitGuide = function (_a) {
|
|
6521
6538
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6522
|
-
return (jsxRuntime.jsxs(Container$
|
|
6539
|
+
return (jsxRuntime.jsxs(Container$D, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxRuntime.jsxs(P$3, { children: [fitPercentageLabel, " ", jsxRuntime.jsxs(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6523
6540
|
};
|
|
6524
|
-
var templateObject_1$
|
|
6541
|
+
var templateObject_1$Z, templateObject_2$C, templateObject_3$o;
|
|
6525
6542
|
|
|
6526
6543
|
var getStylesBySize$6 = function (size) {
|
|
6527
6544
|
switch (size) {
|
|
@@ -6551,7 +6568,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6551
6568
|
};
|
|
6552
6569
|
}
|
|
6553
6570
|
};
|
|
6554
|
-
var Container$
|
|
6571
|
+
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) {
|
|
6555
6572
|
var backgroundColor = _a.backgroundColor;
|
|
6556
6573
|
return backgroundColor;
|
|
6557
6574
|
}, function (_a) {
|
|
@@ -6573,7 +6590,7 @@ var Container$z = newStyled.div(templateObject_1$S || (templateObject_1$S = __ma
|
|
|
6573
6590
|
var size = _a.size;
|
|
6574
6591
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
6575
6592
|
});
|
|
6576
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
6593
|
+
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) {
|
|
6577
6594
|
var textColor = _a.textColor;
|
|
6578
6595
|
return textColor;
|
|
6579
6596
|
}, function (_a) {
|
|
@@ -6588,9 +6605,9 @@ var H3$2 = newStyled.h3(templateObject_2$z || (templateObject_2$z = __makeTempla
|
|
|
6588
6605
|
var DiscountTag = function (_a) {
|
|
6589
6606
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? exports.ComponentSize.Medium : _e;
|
|
6590
6607
|
var theme = useTheme();
|
|
6591
|
-
return (jsxRuntime.jsx(Container$
|
|
6608
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(H3$2, __assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6592
6609
|
};
|
|
6593
|
-
var templateObject_1$
|
|
6610
|
+
var templateObject_1$Y, templateObject_2$B;
|
|
6594
6611
|
|
|
6595
6612
|
var getStylesBySize$5 = function (size) {
|
|
6596
6613
|
switch (size) {
|
|
@@ -6614,8 +6631,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
6614
6631
|
};
|
|
6615
6632
|
}
|
|
6616
6633
|
};
|
|
6617
|
-
var Container$
|
|
6618
|
-
var Price = newStyled.h1(templateObject_2$
|
|
6634
|
+
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"])));
|
|
6635
|
+
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) {
|
|
6619
6636
|
var weight = _a.weight;
|
|
6620
6637
|
return (weight ? weight : '400');
|
|
6621
6638
|
}, function (_a) {
|
|
@@ -6637,7 +6654,7 @@ var Price = newStyled.h1(templateObject_2$y || (templateObject_2$y = __makeTempl
|
|
|
6637
6654
|
var margin = _a.margin, size = _a.size;
|
|
6638
6655
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
6639
6656
|
});
|
|
6640
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
6657
|
+
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) {
|
|
6641
6658
|
var _b;
|
|
6642
6659
|
var size = _a.size;
|
|
6643
6660
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -6645,9 +6662,9 @@ var TagContainer = newStyled.h1(templateObject_3$l || (templateObject_3$l = __ma
|
|
|
6645
6662
|
var PriceLabel = function (_a) {
|
|
6646
6663
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6647
6664
|
var theme = useTheme();
|
|
6648
|
-
return (jsxRuntime.jsxs(Container$
|
|
6665
|
+
return (jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsx(Price, __assign({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsxRuntime.jsx(Price, __assign({ size: size, color: theme.colors.shades['400'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6649
6666
|
};
|
|
6650
|
-
var templateObject_1$
|
|
6667
|
+
var templateObject_1$X, templateObject_2$A, templateObject_3$n;
|
|
6651
6668
|
|
|
6652
6669
|
var OneColorSelector = function (_a) {
|
|
6653
6670
|
var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
@@ -6686,14 +6703,14 @@ var OutOfStock = function (_a) {
|
|
|
6686
6703
|
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6687
6704
|
};
|
|
6688
6705
|
|
|
6689
|
-
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$
|
|
6690
|
-
newStyled(RadioGroup.Label)(templateObject_2$
|
|
6691
|
-
var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$
|
|
6692
|
-
var Span = newStyled.span(templateObject_4$
|
|
6693
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6706
|
+
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"])));
|
|
6707
|
+
newStyled(RadioGroup.Label)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6708
|
+
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"])));
|
|
6709
|
+
var Span = newStyled.span(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6710
|
+
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"])));
|
|
6694
6711
|
var Label$1 = function (_a) {
|
|
6695
6712
|
var label = _a.label, values = _a.values;
|
|
6696
|
-
return (jsxRuntime.jsxs(Text$
|
|
6713
|
+
return (jsxRuntime.jsxs(Text$5, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
6697
6714
|
};
|
|
6698
6715
|
var Option = function (_a) {
|
|
6699
6716
|
var value = _a.value, children = _a.children;
|
|
@@ -6708,20 +6725,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6708
6725
|
Option: Option,
|
|
6709
6726
|
OptionsContainer: OptionsContainer,
|
|
6710
6727
|
});
|
|
6711
|
-
var templateObject_1$
|
|
6728
|
+
var templateObject_1$W, templateObject_2$z, templateObject_3$m, templateObject_4$e, templateObject_5$7;
|
|
6712
6729
|
|
|
6713
|
-
var Container$
|
|
6730
|
+
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) {
|
|
6714
6731
|
var borderColor = _a.borderColor;
|
|
6715
6732
|
return borderColor;
|
|
6716
6733
|
});
|
|
6717
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6734
|
+
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"])));
|
|
6718
6735
|
var PatternSelector = function (_a) {
|
|
6719
6736
|
var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6720
6737
|
var theme = useTheme();
|
|
6721
6738
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6722
|
-
return (jsxRuntime.jsx(Container$
|
|
6739
|
+
return (jsxRuntime.jsx(Container$A, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$2, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6723
6740
|
};
|
|
6724
|
-
var templateObject_1$
|
|
6741
|
+
var templateObject_1$V, templateObject_2$y;
|
|
6725
6742
|
|
|
6726
6743
|
var renderOptions$1 = function (options) {
|
|
6727
6744
|
if (options.length)
|
|
@@ -6773,7 +6790,7 @@ var MultiColorPicker = function (_a) {
|
|
|
6773
6790
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
6774
6791
|
};
|
|
6775
6792
|
|
|
6776
|
-
var Image$1 = newStyled.img(templateObject_1$
|
|
6793
|
+
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) {
|
|
6777
6794
|
var selected = _a.selected, theme = _a.theme;
|
|
6778
6795
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
6779
6796
|
});
|
|
@@ -6782,35 +6799,35 @@ var ImageSmallPreview = function (_a) {
|
|
|
6782
6799
|
var theme = useTheme();
|
|
6783
6800
|
return jsxRuntime.jsx(Image$1, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
6784
6801
|
};
|
|
6785
|
-
var templateObject_1$
|
|
6802
|
+
var templateObject_1$U;
|
|
6786
6803
|
|
|
6787
|
-
var Container$
|
|
6788
|
-
var Button$5 = newStyled.button(templateObject_2$
|
|
6804
|
+
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"])));
|
|
6805
|
+
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"])));
|
|
6789
6806
|
var ImagePreviewList = function (_a) {
|
|
6790
6807
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
|
|
6791
|
-
return (jsxRuntime.jsx(Container$
|
|
6808
|
+
return (jsxRuntime.jsx(Container$z, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
|
|
6792
6809
|
return (jsxRuntime.jsx(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
6793
6810
|
}) }), void 0));
|
|
6794
6811
|
};
|
|
6795
|
-
var templateObject_1$
|
|
6812
|
+
var templateObject_1$T, templateObject_2$x;
|
|
6796
6813
|
|
|
6797
|
-
var Img = newStyled.img(templateObject_1$
|
|
6814
|
+
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; });
|
|
6798
6815
|
var Image = function (_a) {
|
|
6799
6816
|
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;
|
|
6800
6817
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
6801
6818
|
};
|
|
6802
|
-
var templateObject_1$
|
|
6819
|
+
var templateObject_1$S;
|
|
6803
6820
|
|
|
6804
|
-
var Container$
|
|
6805
|
-
var TopTagContainer$1 = newStyled.div(templateObject_2$
|
|
6806
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
6821
|
+
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"])));
|
|
6822
|
+
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"])));
|
|
6823
|
+
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"])));
|
|
6807
6824
|
var ImageProductWithTags$1 = function (_a) {
|
|
6808
6825
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
6809
|
-
return (jsxRuntime.jsxs(Container$
|
|
6826
|
+
return (jsxRuntime.jsxs(Container$y, __assign({ "data-testid": dataTestId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsxRuntime.jsx(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6810
6827
|
};
|
|
6811
|
-
var templateObject_1$
|
|
6828
|
+
var templateObject_1$R, templateObject_2$w, templateObject_3$l;
|
|
6812
6829
|
|
|
6813
|
-
var Container$
|
|
6830
|
+
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"])));
|
|
6814
6831
|
var ProductGallery = function (_a) {
|
|
6815
6832
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6816
6833
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6818,11 +6835,11 @@ var ProductGallery = function (_a) {
|
|
|
6818
6835
|
React.useEffect(function () {
|
|
6819
6836
|
setSelectedImage(initialValue);
|
|
6820
6837
|
}, [initialValue]);
|
|
6821
|
-
return (jsxRuntime.jsxs(Container$
|
|
6838
|
+
return (jsxRuntime.jsxs(Container$x, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
6822
6839
|
setSelectedImage(value);
|
|
6823
6840
|
} }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
|
|
6824
6841
|
};
|
|
6825
|
-
var templateObject_1$
|
|
6842
|
+
var templateObject_1$Q;
|
|
6826
6843
|
|
|
6827
6844
|
/* base styles & size variants */
|
|
6828
6845
|
var StarStyles = {
|
|
@@ -6860,8 +6877,8 @@ var StarStyles = {
|
|
|
6860
6877
|
});
|
|
6861
6878
|
},
|
|
6862
6879
|
};
|
|
6863
|
-
var Container$
|
|
6864
|
-
var templateObject_1$
|
|
6880
|
+
var Container$w = newStyled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6881
|
+
var templateObject_1$P;
|
|
6865
6882
|
|
|
6866
6883
|
var StarContainer = newStyled.div(function (_a) {
|
|
6867
6884
|
var size = _a.size;
|
|
@@ -6870,10 +6887,16 @@ var StarContainer = newStyled.div(function (_a) {
|
|
|
6870
6887
|
StarStyles[size],
|
|
6871
6888
|
];
|
|
6872
6889
|
});
|
|
6890
|
+
var sizes = {
|
|
6891
|
+
xsmall: { width: 0.75, height: 0.75 },
|
|
6892
|
+
small: { width: 1, height: 1 },
|
|
6893
|
+
medium: { width: 1.5, height: 1.5 },
|
|
6894
|
+
large: { width: 2.5, height: 2.5 },
|
|
6895
|
+
};
|
|
6873
6896
|
var StarList = function (_a) {
|
|
6874
6897
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6875
|
-
return (jsxRuntime.jsx(Container$
|
|
6876
|
-
return (jsxRuntime.jsx(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, { fill: fill }, void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, { fill: fill }, void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, { fill: fill }, void 0)) }), index));
|
|
6898
|
+
return (jsxRuntime.jsx(Container$w, { children: __spreadArray([], new Array(starsNumber), true).map(function (_, index) {
|
|
6899
|
+
return (jsxRuntime.jsx(StarContainer, __assign({ "data-testid": "star-container", size: size }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign({}, sizes[size], { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign({}, sizes[size], { fill: fill }), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign({}, sizes[size], { fill: fill }), void 0)) }), index));
|
|
6877
6900
|
}) }, void 0));
|
|
6878
6901
|
};
|
|
6879
6902
|
|
|
@@ -6916,8 +6939,8 @@ var LabelStyles = {
|
|
|
6916
6939
|
});
|
|
6917
6940
|
},
|
|
6918
6941
|
};
|
|
6919
|
-
var Container$
|
|
6920
|
-
var templateObject_1$
|
|
6942
|
+
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"])));
|
|
6943
|
+
var templateObject_1$O;
|
|
6921
6944
|
|
|
6922
6945
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6923
6946
|
var theme = _a.theme, size = _a.size;
|
|
@@ -6930,11 +6953,11 @@ var starsNumber = 5;
|
|
|
6930
6953
|
var Rating = function (_a) {
|
|
6931
6954
|
var _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating;
|
|
6932
6955
|
var theme = useTheme();
|
|
6933
|
-
return (jsxRuntime.jsxs(Container$
|
|
6956
|
+
return (jsxRuntime.jsxs(Container$v, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
6934
6957
|
};
|
|
6935
6958
|
|
|
6936
|
-
var Container$
|
|
6937
|
-
var P$
|
|
6959
|
+
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"])));
|
|
6960
|
+
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; });
|
|
6938
6961
|
var textButtonStyles = function (theme) { return ({
|
|
6939
6962
|
border: 'none',
|
|
6940
6963
|
background: 'transparent',
|
|
@@ -6947,9 +6970,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
6947
6970
|
var FitPredictor = function (_a) {
|
|
6948
6971
|
var onClick = _a.onClick;
|
|
6949
6972
|
var theme = useTheme();
|
|
6950
|
-
return (jsxs(Container$
|
|
6973
|
+
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));
|
|
6951
6974
|
};
|
|
6952
|
-
var templateObject_1$
|
|
6975
|
+
var templateObject_1$N, templateObject_2$v;
|
|
6953
6976
|
|
|
6954
6977
|
var H2$1 = newStyled.h2(function (_a) {
|
|
6955
6978
|
var color = _a.color;
|
|
@@ -6963,7 +6986,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
6963
6986
|
margin: '0.938rem 4.188rem',
|
|
6964
6987
|
});
|
|
6965
6988
|
});
|
|
6966
|
-
var Bar = newStyled.div(templateObject_1$
|
|
6989
|
+
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) {
|
|
6967
6990
|
var backgroundColor = _a.backgroundColor;
|
|
6968
6991
|
return backgroundColor;
|
|
6969
6992
|
}, function (_a) {
|
|
@@ -6986,7 +7009,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
6986
7009
|
position: 'absolute',
|
|
6987
7010
|
});
|
|
6988
7011
|
});
|
|
6989
|
-
var Container$
|
|
7012
|
+
var Container$t = newStyled.div(function (_a) {
|
|
6990
7013
|
var widthAuto = _a.widthAuto;
|
|
6991
7014
|
return ({
|
|
6992
7015
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -7000,9 +7023,9 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
7000
7023
|
var ProgressBar = function (_a) {
|
|
7001
7024
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
7002
7025
|
var theme = useTheme();
|
|
7003
|
-
return (jsxRuntime.jsxs(Container$
|
|
7026
|
+
return (jsxRuntime.jsxs(Container$t, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
7004
7027
|
};
|
|
7005
|
-
var templateObject_1$
|
|
7028
|
+
var templateObject_1$M;
|
|
7006
7029
|
|
|
7007
7030
|
var getStylesBySize$4 = function (size) {
|
|
7008
7031
|
switch (size) {
|
|
@@ -7023,7 +7046,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
7023
7046
|
};
|
|
7024
7047
|
}
|
|
7025
7048
|
};
|
|
7026
|
-
var Container$
|
|
7049
|
+
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) {
|
|
7027
7050
|
var backgroundColor = _a.backgroundColor;
|
|
7028
7051
|
return backgroundColor;
|
|
7029
7052
|
}, function (_a) {
|
|
@@ -7051,9 +7074,9 @@ var Container$p = newStyled.div(templateObject_1$F || (templateObject_1$F = __ma
|
|
|
7051
7074
|
var IconButton = function (_a) {
|
|
7052
7075
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
7053
7076
|
var theme = useTheme();
|
|
7054
|
-
return (jsxRuntime.jsx(Container$
|
|
7077
|
+
return (jsxRuntime.jsx(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));
|
|
7055
7078
|
};
|
|
7056
|
-
var templateObject_1$
|
|
7079
|
+
var templateObject_1$L;
|
|
7057
7080
|
|
|
7058
7081
|
var TooltipArrow = function (_a) {
|
|
7059
7082
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -7133,7 +7156,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
7133
7156
|
}
|
|
7134
7157
|
};
|
|
7135
7158
|
|
|
7136
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7159
|
+
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) {
|
|
7137
7160
|
var position = _a.position;
|
|
7138
7161
|
return getWrapperFlexDirection(position);
|
|
7139
7162
|
});
|
|
@@ -7157,11 +7180,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
7157
7180
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
7158
7181
|
return actual === expected ? margin : '0';
|
|
7159
7182
|
};
|
|
7160
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
7183
|
+
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) {
|
|
7161
7184
|
var borderColor = _a.borderColor;
|
|
7162
7185
|
return borderColor;
|
|
7163
7186
|
});
|
|
7164
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
7187
|
+
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) {
|
|
7165
7188
|
var position = _a.position;
|
|
7166
7189
|
return getArrowRotation(position);
|
|
7167
7190
|
}, function (_a) {
|
|
@@ -7171,17 +7194,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$i || (templateObject_
|
|
|
7171
7194
|
var position = _a.position;
|
|
7172
7195
|
return getArrowContainerMargin(position);
|
|
7173
7196
|
});
|
|
7174
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
7197
|
+
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) {
|
|
7175
7198
|
var color = _a.color;
|
|
7176
7199
|
return color;
|
|
7177
7200
|
});
|
|
7178
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
7179
|
-
var Title$
|
|
7201
|
+
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"])));
|
|
7202
|
+
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) {
|
|
7180
7203
|
var color = _a.color;
|
|
7181
7204
|
return color;
|
|
7182
7205
|
});
|
|
7183
7206
|
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"])));
|
|
7184
|
-
var templateObject_1$
|
|
7207
|
+
var templateObject_1$K, templateObject_2$u, templateObject_3$k, templateObject_4$d, templateObject_5$6, templateObject_6$4, templateObject_7$2;
|
|
7185
7208
|
|
|
7186
7209
|
var Tooltip = function (_a) {
|
|
7187
7210
|
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;
|
|
@@ -7198,7 +7221,7 @@ var Tooltip = function (_a) {
|
|
|
7198
7221
|
var ref = tooltipRef.current;
|
|
7199
7222
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
7200
7223
|
}, [tooltipRef]);
|
|
7201
|
-
return (jsxRuntime.jsxs(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: React__default["default"].createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsxRuntime.jsx(Title$
|
|
7224
|
+
return (jsxRuntime.jsxs(Wrapper$5, __assign({ position: position, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign({ ref: childrenRef }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign({ position: position, align: align, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container" }, { children: [jsxRuntime.jsxs(ContentWrapper, __assign({ borderColor: theme.colors.shades['200'].color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign({ "data-testid": "TooltipHeader" }, { children: [jsxRuntime.jsx(IconContainer$4, { children: React__default["default"].createElement(header.Icon, { fill: theme.colors.pallete.secondary.color }) }, void 0), jsxRuntime.jsx(Title$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), jsxRuntime.jsx(TooltipText, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "TooltipText" }, { children: text }), void 0)] }), void 0), jsxRuntime.jsx(TooltipArrowContainer, __assign({ position: position, "data-testid": "TooltipArrow" }, { children: jsxRuntime.jsx(TooltipArrow, { width: 1.25, height: 0.75, fill: "#ffffff", stroke: theme.colors.shades['10'].color }, void 0) }), void 0)] }), void 0)] }), void 0));
|
|
7202
7225
|
};
|
|
7203
7226
|
|
|
7204
7227
|
/* base styles & variants */
|
|
@@ -7332,9 +7355,9 @@ var ContainerStyles = {
|
|
|
7332
7355
|
},
|
|
7333
7356
|
};
|
|
7334
7357
|
|
|
7335
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7336
|
-
var Container$
|
|
7337
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
7358
|
+
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"])));
|
|
7359
|
+
var Container$r = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7360
|
+
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) {
|
|
7338
7361
|
var disabled = _a.disabled;
|
|
7339
7362
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
7340
7363
|
});
|
|
@@ -7349,9 +7372,9 @@ var RadioInput = function (_a) {
|
|
|
7349
7372
|
var value = event.currentTarget.value;
|
|
7350
7373
|
onChange({ value: value, label: label });
|
|
7351
7374
|
};
|
|
7352
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
7375
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$r, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
7353
7376
|
};
|
|
7354
|
-
var templateObject_1$
|
|
7377
|
+
var templateObject_1$J, templateObject_2$t;
|
|
7355
7378
|
|
|
7356
7379
|
var RadioGroupInput = function (_a) {
|
|
7357
7380
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -7365,9 +7388,9 @@ var RadioGroupInput = function (_a) {
|
|
|
7365
7388
|
}) }), void 0));
|
|
7366
7389
|
};
|
|
7367
7390
|
|
|
7368
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
7369
|
-
var Container$
|
|
7370
|
-
var Text$
|
|
7391
|
+
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"])));
|
|
7392
|
+
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"])));
|
|
7393
|
+
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) {
|
|
7371
7394
|
var color = _a.color;
|
|
7372
7395
|
return color;
|
|
7373
7396
|
}, function (_a) {
|
|
@@ -7380,32 +7403,32 @@ var Text$2 = newStyled.h4(templateObject_3$h || (templateObject_3$h = __makeTemp
|
|
|
7380
7403
|
var Minimalistic = function (_a) {
|
|
7381
7404
|
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;
|
|
7382
7405
|
var theme = useTheme();
|
|
7383
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$
|
|
7406
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$q, __assign({ "data-testid": "TopSection" }, { children: [jsxRuntime.jsx(Text$4, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: exports.ComponentSize.Small }, void 0)] }), void 0), jsxRuntime.jsxs(Container$q, __assign({ "data-testid": "BottomSection" }, { children: [jsxRuntime.jsxs(Text$4, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxRuntime.jsxs(Text$4, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7384
7407
|
};
|
|
7385
|
-
var templateObject_1$
|
|
7408
|
+
var templateObject_1$I, templateObject_2$s, templateObject_3$j;
|
|
7386
7409
|
|
|
7387
|
-
var Container$
|
|
7388
|
-
var Title$
|
|
7389
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
7390
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
7410
|
+
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"])));
|
|
7411
|
+
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; });
|
|
7412
|
+
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; });
|
|
7413
|
+
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"])));
|
|
7391
7414
|
var Simple = function (_a) {
|
|
7392
7415
|
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;
|
|
7393
7416
|
var theme = useTheme();
|
|
7394
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
7417
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$p, { children: [jsxRuntime.jsx(Title$3, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7395
7418
|
};
|
|
7396
|
-
var templateObject_1$
|
|
7419
|
+
var templateObject_1$H, templateObject_2$r, templateObject_3$i, templateObject_4$c;
|
|
7397
7420
|
|
|
7398
7421
|
var Bundle = {
|
|
7399
7422
|
Minimalistic: Minimalistic,
|
|
7400
7423
|
Simple: Simple,
|
|
7401
7424
|
};
|
|
7402
7425
|
|
|
7403
|
-
var Container$
|
|
7426
|
+
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"])));
|
|
7404
7427
|
var Tag = function (_a) {
|
|
7405
7428
|
var text = _a.text, className = _a.className;
|
|
7406
|
-
return jsxRuntime.jsx(Container$
|
|
7429
|
+
return jsxRuntime.jsx(Container$o, __assign({ className: className }, { children: text }), void 0);
|
|
7407
7430
|
};
|
|
7408
|
-
var templateObject_1$
|
|
7431
|
+
var templateObject_1$G;
|
|
7409
7432
|
|
|
7410
7433
|
var getStylesBySize$3 = function (size) {
|
|
7411
7434
|
switch (size) {
|
|
@@ -7506,11 +7529,11 @@ var Timer = function (_a) {
|
|
|
7506
7529
|
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
|
|
7507
7530
|
};
|
|
7508
7531
|
|
|
7509
|
-
var Label = newStyled.span(templateObject_1$
|
|
7532
|
+
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) {
|
|
7510
7533
|
var color = _a.color;
|
|
7511
7534
|
return color;
|
|
7512
7535
|
});
|
|
7513
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
7536
|
+
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) {
|
|
7514
7537
|
var color = _a.color;
|
|
7515
7538
|
return color;
|
|
7516
7539
|
});
|
|
@@ -7519,7 +7542,7 @@ var InputLabel = function (_a) {
|
|
|
7519
7542
|
var theme = useTheme();
|
|
7520
7543
|
return (jsxRuntime.jsxs(Label, __assign({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
7521
7544
|
};
|
|
7522
|
-
var templateObject_1$
|
|
7545
|
+
var templateObject_1$F, templateObject_2$q;
|
|
7523
7546
|
|
|
7524
7547
|
var isEmpty = function (value) {
|
|
7525
7548
|
return value.length === 0;
|
|
@@ -7529,20 +7552,20 @@ var sliceString = function (str, maxLength) {
|
|
|
7529
7552
|
return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
|
|
7530
7553
|
};
|
|
7531
7554
|
|
|
7532
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
7533
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
7555
|
+
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; });
|
|
7556
|
+
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"])));
|
|
7534
7557
|
var Error$1 = function (_a) {
|
|
7535
7558
|
var error = _a.error;
|
|
7536
7559
|
var theme = useTheme();
|
|
7537
7560
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
7538
7561
|
};
|
|
7539
|
-
var templateObject_1$
|
|
7562
|
+
var templateObject_1$E, templateObject_2$p;
|
|
7540
7563
|
|
|
7541
|
-
var Container$
|
|
7564
|
+
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) {
|
|
7542
7565
|
var color = _a.color;
|
|
7543
7566
|
return color;
|
|
7544
7567
|
});
|
|
7545
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
7568
|
+
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) {
|
|
7546
7569
|
var padding = _a.padding;
|
|
7547
7570
|
return padding;
|
|
7548
7571
|
}, function (_a) {
|
|
@@ -7585,11 +7608,11 @@ var StyledInput = newStyled.input(templateObject_2$m || (templateObject_2$m = __
|
|
|
7585
7608
|
var disabledColor = _a.disabledColor;
|
|
7586
7609
|
return disabledColor;
|
|
7587
7610
|
});
|
|
7588
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
7611
|
+
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) {
|
|
7589
7612
|
var size = _a.size;
|
|
7590
7613
|
return (size === 'small' ? '36px' : '44px');
|
|
7591
7614
|
});
|
|
7592
|
-
var templateObject_1$
|
|
7615
|
+
var templateObject_1$D, templateObject_2$o, templateObject_3$h;
|
|
7593
7616
|
|
|
7594
7617
|
var BaseInput = function (_a) {
|
|
7595
7618
|
var _b;
|
|
@@ -7642,7 +7665,7 @@ var BaseInput = function (_a) {
|
|
|
7642
7665
|
highlight: theme.colors.border.highlight,
|
|
7643
7666
|
boxShadow: theme.component.input.boxShadow,
|
|
7644
7667
|
};
|
|
7645
|
-
return (jsxRuntime.jsxs(Container$
|
|
7668
|
+
return (jsxRuntime.jsxs(Container$n, __assign({ color: status === exports.InputValidationType.Valid
|
|
7646
7669
|
? theme.colors.shades['700'].color
|
|
7647
7670
|
: status === exports.InputValidationType.Error
|
|
7648
7671
|
? theme.colors.semantic.urgent.color
|
|
@@ -7663,11 +7686,11 @@ var Button$4 = function (_a) {
|
|
|
7663
7686
|
throw new Error("Invalid button variant ".concat(variant));
|
|
7664
7687
|
};
|
|
7665
7688
|
|
|
7666
|
-
var Container$
|
|
7689
|
+
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) {
|
|
7667
7690
|
var theme = _a.theme;
|
|
7668
7691
|
return theme.component.inputCustom.input.borderRadius;
|
|
7669
7692
|
});
|
|
7670
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
7693
|
+
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) {
|
|
7671
7694
|
var theme = _a.theme;
|
|
7672
7695
|
return theme.component.inputCustom.button.borderRadius;
|
|
7673
7696
|
});
|
|
@@ -7680,23 +7703,23 @@ var Custom = function (_a) {
|
|
|
7680
7703
|
text: text,
|
|
7681
7704
|
disabled: rest.disabled,
|
|
7682
7705
|
}); }, [variant, onClick, text, rest.disabled]);
|
|
7683
|
-
return (jsxRuntime.jsx(Container$
|
|
7706
|
+
return (jsxRuntime.jsx(Container$m, __assign({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$4, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7684
7707
|
};
|
|
7685
|
-
var templateObject_1$
|
|
7708
|
+
var templateObject_1$C, templateObject_2$n;
|
|
7686
7709
|
|
|
7687
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
7710
|
+
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) {
|
|
7688
7711
|
var size = _a.size;
|
|
7689
7712
|
return (size === 'small' ? '36px' : '');
|
|
7690
7713
|
});
|
|
7691
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
7692
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
7714
|
+
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"])));
|
|
7715
|
+
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"])));
|
|
7693
7716
|
var Success = function (_a) {
|
|
7694
7717
|
var children = _a.children, successText = _a.successText, size = _a.size;
|
|
7695
7718
|
return (jsxRuntime.jsxs(SuccessContainer, __assign({ size: size }, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
|
|
7696
7719
|
};
|
|
7697
|
-
var templateObject_1$
|
|
7720
|
+
var templateObject_1$B, templateObject_2$m, templateObject_3$g;
|
|
7698
7721
|
|
|
7699
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
7722
|
+
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) {
|
|
7700
7723
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
7701
7724
|
return status === exports.InputValidationType.Empty &&
|
|
7702
7725
|
type === 'primary' &&
|
|
@@ -7713,21 +7736,21 @@ var BasePlusButton = function (_a) {
|
|
|
7713
7736
|
}
|
|
7714
7737
|
return (jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus, onChange: onChangeInput }, { children: jsxRuntime.jsx(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
7715
7738
|
};
|
|
7716
|
-
var templateObject_1$
|
|
7739
|
+
var templateObject_1$A;
|
|
7717
7740
|
|
|
7718
|
-
var Container$
|
|
7719
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
7741
|
+
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"])));
|
|
7742
|
+
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; });
|
|
7720
7743
|
var BasePlusIcon = function (_a) {
|
|
7721
7744
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7722
7745
|
var theme = useTheme();
|
|
7723
7746
|
var _b = React.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7724
|
-
return (jsxRuntime.jsx(Container$
|
|
7747
|
+
return (jsxRuntime.jsx(Container$l, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$3, __assign({ color: status === exports.InputValidationType.Valid
|
|
7725
7748
|
? theme.colors.shades['700'].color
|
|
7726
7749
|
: status === exports.InputValidationType.Error
|
|
7727
7750
|
? theme.colors.semantic.urgent.color
|
|
7728
7751
|
: '' }, { children: React.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
7729
7752
|
};
|
|
7730
|
-
var templateObject_1$
|
|
7753
|
+
var templateObject_1$z, templateObject_2$l;
|
|
7731
7754
|
|
|
7732
7755
|
var Input$1 = {
|
|
7733
7756
|
Simple: BaseInput,
|
|
@@ -7736,7 +7759,7 @@ var Input$1 = {
|
|
|
7736
7759
|
SimplePlusIcon: BasePlusIcon,
|
|
7737
7760
|
};
|
|
7738
7761
|
|
|
7739
|
-
var Container$
|
|
7762
|
+
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) {
|
|
7740
7763
|
var width = _a.width;
|
|
7741
7764
|
return width;
|
|
7742
7765
|
}, function (_a) {
|
|
@@ -7752,11 +7775,11 @@ var Container$h = newStyled.div(templateObject_1$s || (templateObject_1$s = __ma
|
|
|
7752
7775
|
var PaymentMethod = function (_a) {
|
|
7753
7776
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7754
7777
|
var theme = useTheme();
|
|
7755
|
-
return (jsxRuntime.jsx(Container$
|
|
7778
|
+
return (jsxRuntime.jsx(Container$k, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React.createElement(Icon) }), void 0));
|
|
7756
7779
|
};
|
|
7757
|
-
var templateObject_1$
|
|
7780
|
+
var templateObject_1$y;
|
|
7758
7781
|
|
|
7759
|
-
var Text$
|
|
7782
|
+
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) {
|
|
7760
7783
|
var backgroundColor = _a.backgroundColor;
|
|
7761
7784
|
return backgroundColor;
|
|
7762
7785
|
}, function (_a) {
|
|
@@ -7766,56 +7789,56 @@ var Text$1 = newStyled.h3(templateObject_1$r || (templateObject_1$r = __makeTemp
|
|
|
7766
7789
|
var OfferBanner = function (_a) {
|
|
7767
7790
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
7768
7791
|
var theme = useTheme();
|
|
7769
|
-
return (jsxRuntime.jsx(Text$
|
|
7792
|
+
return (jsxRuntime.jsx(Text$3, __assign({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
7770
7793
|
};
|
|
7771
|
-
var templateObject_1$
|
|
7794
|
+
var templateObject_1$x;
|
|
7772
7795
|
|
|
7773
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
7774
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
7775
|
-
var Currency = newStyled.span(templateObject_3$
|
|
7776
|
-
var Container$
|
|
7777
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
7796
|
+
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"])));
|
|
7797
|
+
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; });
|
|
7798
|
+
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"])));
|
|
7799
|
+
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; });
|
|
7800
|
+
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"])));
|
|
7778
7801
|
var Total = function (_a) {
|
|
7779
7802
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7780
7803
|
var theme = useTheme();
|
|
7781
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
7804
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$j, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, { children: saving.savingText }, void 0), jsxRuntime.jsx(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7782
7805
|
};
|
|
7783
|
-
var templateObject_1$
|
|
7806
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$f, templateObject_4$b, templateObject_5$5;
|
|
7784
7807
|
|
|
7785
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
7808
|
+
var Wrapper$1 = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7786
7809
|
var color = _a.color;
|
|
7787
7810
|
return color;
|
|
7788
7811
|
});
|
|
7789
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
7790
|
-
var Item$
|
|
7791
|
-
var CouponItem = newStyled(Item$
|
|
7812
|
+
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"])));
|
|
7813
|
+
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"])));
|
|
7814
|
+
var CouponItem = newStyled(Item$2)(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7792
7815
|
var color = _a.color;
|
|
7793
7816
|
return color;
|
|
7794
7817
|
});
|
|
7795
7818
|
var Subtotal = function (_a) {
|
|
7796
7819
|
var subtotal = _a.subtotal, shipping = _a.shipping, taxes = _a.taxes, coupon = _a.coupon, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7797
7820
|
var theme = useTheme();
|
|
7798
|
-
return (jsxRuntime.jsxs(Wrapper$1, __assign({ color: theme.colors.shades['700'].color, "data-testid": "subtotal-wrapper" }, { children: [jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsx(Item$
|
|
7821
|
+
return (jsxRuntime.jsxs(Wrapper$1, __assign({ color: theme.colors.shades['700'].color, "data-testid": "subtotal-wrapper" }, { children: [jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsx(Item$2, { children: subtotal.label }, void 0), jsxRuntime.jsx(Item$2, { children: subtotal.value }, void 0)] }, void 0), jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsx(Item$2, { children: shipping.label }, void 0), jsxRuntime.jsx(Item$2, { children: shipping.value }, void 0)] }, void 0), jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsx(Item$2, { children: taxes.label }, void 0), jsxRuntime.jsx(Item$2, { children: taxes.value }, void 0)] }, void 0), coupon &&
|
|
7799
7822
|
coupon.coupons.map(function (c, i) {
|
|
7800
7823
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
7801
7824
|
})] }), void 0));
|
|
7802
7825
|
};
|
|
7803
|
-
var templateObject_1$
|
|
7826
|
+
var templateObject_1$v, templateObject_2$j, templateObject_3$e, templateObject_4$a;
|
|
7804
7827
|
|
|
7805
7828
|
var Totals = {
|
|
7806
7829
|
Total: Total,
|
|
7807
7830
|
Subtotal: Subtotal,
|
|
7808
7831
|
};
|
|
7809
7832
|
|
|
7810
|
-
var Container$
|
|
7811
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
7812
|
-
var Text = newStyled.p(templateObject_3$
|
|
7813
|
-
var Details = newStyled.span(templateObject_4$
|
|
7833
|
+
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; });
|
|
7834
|
+
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"])));
|
|
7835
|
+
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; });
|
|
7836
|
+
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; });
|
|
7814
7837
|
var Note = function (_a) {
|
|
7815
7838
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7816
|
-
return (jsxRuntime.jsxs(Container$
|
|
7839
|
+
return (jsxRuntime.jsxs(Container$i, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text$2, __assign({ color: color }, { children: [jsxRuntime.jsxs(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7817
7840
|
};
|
|
7818
|
-
var templateObject_1$
|
|
7841
|
+
var templateObject_1$u, templateObject_2$i, templateObject_3$d, templateObject_4$9;
|
|
7819
7842
|
|
|
7820
7843
|
/* eslint-disable no-param-reassign */
|
|
7821
7844
|
var index$2 = function (breakpoints) {
|
|
@@ -7905,14 +7928,14 @@ var mediaQueries = function (_a) {
|
|
|
7905
7928
|
], { literal: true });
|
|
7906
7929
|
};
|
|
7907
7930
|
|
|
7908
|
-
var Title$
|
|
7909
|
-
var Line = newStyled.div(templateObject_2$
|
|
7910
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7931
|
+
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; });
|
|
7932
|
+
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; });
|
|
7933
|
+
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) {
|
|
7911
7934
|
return mediaQueries(props)({
|
|
7912
7935
|
flexDirection: ['column', 'row'],
|
|
7913
7936
|
});
|
|
7914
7937
|
});
|
|
7915
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
7938
|
+
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) {
|
|
7916
7939
|
return mediaQueries(props)({
|
|
7917
7940
|
margin: ['0', '0 1.25rem'],
|
|
7918
7941
|
marginBottom: ['1.875rem', '0'],
|
|
@@ -7921,7 +7944,7 @@ var Col$1 = newStyled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemp
|
|
|
7921
7944
|
width: ['100%', 'inherit'],
|
|
7922
7945
|
});
|
|
7923
7946
|
});
|
|
7924
|
-
var IconContainer$1 = newStyled.div(templateObject_5$
|
|
7947
|
+
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) {
|
|
7925
7948
|
return mediaQueries(props)({
|
|
7926
7949
|
marginBottom: ['1.875rem', '0'],
|
|
7927
7950
|
width: ['auto', '1.375rem'],
|
|
@@ -7940,47 +7963,48 @@ var KeepMeUpdated = newStyled.h1(templateObject_8 || (templateObject_8 = __makeT
|
|
|
7940
7963
|
var DeliveryDetails = function (_a) {
|
|
7941
7964
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7942
7965
|
var theme = useTheme();
|
|
7943
|
-
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$
|
|
7966
|
+
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$2, __assign({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxRuntime.jsxs(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
7944
7967
|
};
|
|
7945
|
-
var templateObject_1$
|
|
7968
|
+
var templateObject_1$t, templateObject_2$h, templateObject_3$c, templateObject_4$8, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7946
7969
|
|
|
7947
|
-
var Container$
|
|
7948
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
7970
|
+
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"])));
|
|
7971
|
+
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; });
|
|
7949
7972
|
var ScrollToTop = function (_a) {
|
|
7950
7973
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7951
7974
|
var theme = useTheme();
|
|
7952
|
-
return (jsxRuntime.jsxs(Container$
|
|
7975
|
+
return (jsxRuntime.jsxs(Container$h, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(H1$2, __assign({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
7953
7976
|
};
|
|
7954
|
-
var templateObject_1$
|
|
7977
|
+
var templateObject_1$s, templateObject_2$g;
|
|
7955
7978
|
|
|
7956
|
-
var Container$
|
|
7957
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
7979
|
+
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"])));
|
|
7980
|
+
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; });
|
|
7958
7981
|
var OrderBar = function (_a) {
|
|
7959
7982
|
var message = _a.message;
|
|
7960
7983
|
var theme = useTheme();
|
|
7961
|
-
return (jsxRuntime.jsxs(Container$
|
|
7984
|
+
return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1$1, __assign({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
7962
7985
|
};
|
|
7963
|
-
var templateObject_1$
|
|
7986
|
+
var templateObject_1$r, templateObject_2$f;
|
|
7964
7987
|
|
|
7965
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
7966
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
7967
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
7968
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
7988
|
+
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; });
|
|
7989
|
+
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; });
|
|
7990
|
+
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; });
|
|
7991
|
+
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; });
|
|
7969
7992
|
var SizeTable = function (_a) {
|
|
7970
7993
|
var headers = _a.headers, data = _a.data;
|
|
7971
7994
|
var theme = useTheme();
|
|
7972
7995
|
return (jsxRuntime.jsxs(TableElement, __assign({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
7973
7996
|
};
|
|
7974
|
-
var templateObject_1$
|
|
7997
|
+
var templateObject_1$q, templateObject_2$e, templateObject_3$b, templateObject_4$7;
|
|
7975
7998
|
|
|
7976
|
-
var Container$
|
|
7977
|
-
var
|
|
7999
|
+
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"])));
|
|
8000
|
+
var ImageContainer$1 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
8001
|
+
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) {
|
|
7978
8002
|
var theme = _a.theme;
|
|
7979
8003
|
return mediaQueries({ theme: theme })({
|
|
7980
8004
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
7981
8005
|
});
|
|
7982
8006
|
});
|
|
7983
|
-
var Title = newStyled.h2(function (_a) {
|
|
8007
|
+
var Title$1 = newStyled.h2(function (_a) {
|
|
7984
8008
|
var color = _a.color;
|
|
7985
8009
|
return ({
|
|
7986
8010
|
fontWeight: 600,
|
|
@@ -8000,7 +8024,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
8000
8024
|
margin: '0.063rem 0',
|
|
8001
8025
|
});
|
|
8002
8026
|
});
|
|
8003
|
-
var PriceContainer = newStyled.div(
|
|
8027
|
+
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) {
|
|
8004
8028
|
var withTag = _a.withTag, theme = _a.theme;
|
|
8005
8029
|
return withTag
|
|
8006
8030
|
? mediaQueries({ theme: theme })({
|
|
@@ -8009,12 +8033,13 @@ var PriceContainer = newStyled.div(templateObject_3$8 || (templateObject_3$8 = _
|
|
|
8009
8033
|
})
|
|
8010
8034
|
: 'justify-content: end';
|
|
8011
8035
|
});
|
|
8036
|
+
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"])));
|
|
8012
8037
|
var SimpleOrderItem = function (_a) {
|
|
8013
|
-
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag;
|
|
8038
|
+
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag, quantity = _a.quantity;
|
|
8014
8039
|
var theme = useTheme();
|
|
8015
|
-
return (jsxRuntime.jsxs(Container$
|
|
8040
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsxs(ImageContainer$1, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), quantity ? jsxRuntime.jsx(Quantity, __assign({ "data-testid": "order-item-quantity" }, { children: quantity }), void 0) : null] }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title$1, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: exports.ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
8016
8041
|
};
|
|
8017
|
-
var templateObject_1$
|
|
8042
|
+
var templateObject_1$p, templateObject_2$d, templateObject_3$a, templateObject_4$6, templateObject_5$3;
|
|
8018
8043
|
|
|
8019
8044
|
function formatDate(date) {
|
|
8020
8045
|
var day = date.getDate();
|
|
@@ -8023,21 +8048,21 @@ function formatDate(date) {
|
|
|
8023
8048
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
8024
8049
|
}
|
|
8025
8050
|
|
|
8026
|
-
var Container$
|
|
8027
|
-
var Heading = newStyled.div(templateObject_2$
|
|
8051
|
+
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"])));
|
|
8052
|
+
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) {
|
|
8028
8053
|
var theme = _a.theme;
|
|
8029
8054
|
return mediaQueries({ theme: theme })({
|
|
8030
8055
|
fontSize: ['14px', '16px'],
|
|
8031
8056
|
lineHeight: ['22px', '24px'],
|
|
8032
8057
|
});
|
|
8033
8058
|
});
|
|
8034
|
-
var Content = newStyled.div(templateObject_3$
|
|
8059
|
+
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) {
|
|
8035
8060
|
var theme = _a.theme;
|
|
8036
8061
|
return mediaQueries({ theme: theme })({
|
|
8037
8062
|
flexDirection: ['column', 'row'],
|
|
8038
8063
|
});
|
|
8039
8064
|
});
|
|
8040
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
8065
|
+
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) {
|
|
8041
8066
|
var theme = _a.theme;
|
|
8042
8067
|
return mediaQueries({ theme: theme })({
|
|
8043
8068
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
@@ -8057,13 +8082,13 @@ var H3$1 = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTempla
|
|
|
8057
8082
|
lineHeight: ['22px', '24px'],
|
|
8058
8083
|
});
|
|
8059
8084
|
});
|
|
8060
|
-
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"])));
|
|
8085
|
+
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"])));
|
|
8061
8086
|
var Review = function (_a) {
|
|
8062
8087
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
8063
8088
|
var theme = useTheme();
|
|
8064
|
-
return (jsxRuntime.jsxs(Container$
|
|
8089
|
+
return (jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsxs(Heading, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(P$1, { children: description }, void 0)] }), void 0), jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
8065
8090
|
};
|
|
8066
|
-
var templateObject_1$
|
|
8091
|
+
var templateObject_1$o, templateObject_2$c, templateObject_3$9, templateObject_4$5, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
8067
8092
|
|
|
8068
8093
|
var Button$3 = newStyled.button(function () { return ({
|
|
8069
8094
|
background: 'transparent',
|
|
@@ -12306,14 +12331,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12306
12331
|
return Slider;
|
|
12307
12332
|
}(React__default["default"].Component);
|
|
12308
12333
|
|
|
12309
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12334
|
+
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) {
|
|
12310
12335
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12311
12336
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12312
12337
|
}, function (_a) {
|
|
12313
12338
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12314
12339
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12315
12340
|
});
|
|
12316
|
-
var templateObject_1$
|
|
12341
|
+
var templateObject_1$n;
|
|
12317
12342
|
|
|
12318
12343
|
var getStylesBySize$1 = function (size) {
|
|
12319
12344
|
// rem units
|
|
@@ -12372,18 +12397,18 @@ var SliderNavigation = function (_a) {
|
|
|
12372
12397
|
} }, { 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));
|
|
12373
12398
|
};
|
|
12374
12399
|
|
|
12375
|
-
var List = newStyled.ul(templateObject_1$
|
|
12376
|
-
var Item = newStyled.li(templateObject_2$
|
|
12377
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12378
|
-
var ArrowContainer = newStyled.div(templateObject_4$
|
|
12400
|
+
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"])));
|
|
12401
|
+
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"])));
|
|
12402
|
+
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"])));
|
|
12403
|
+
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"])));
|
|
12379
12404
|
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; });
|
|
12380
12405
|
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; });
|
|
12381
|
-
var templateObject_1$
|
|
12406
|
+
var templateObject_1$m, templateObject_2$b, templateObject_3$8, templateObject_4$4, templateObject_5$1, templateObject_6$1;
|
|
12382
12407
|
|
|
12383
12408
|
var DropdownListIcons = function (_a) {
|
|
12384
12409
|
var items = _a.items;
|
|
12385
12410
|
var theme = useTheme();
|
|
12386
|
-
return (jsxRuntime.jsx(List, __assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxRuntime.jsxs(Item, { children: [React.createElement(item.Icon, { fill: theme.colors.shades['700'].color }), jsxRuntime.jsx(Dropdown, { items: item.items }, void 0)] }, index)); }) }), void 0));
|
|
12411
|
+
return (jsxRuntime.jsx(List, __assign({ "data-testid": "Icons-list" }, { children: items.map(function (item, index) { return (jsxRuntime.jsxs(Item$1, { children: [React.createElement(item.Icon, { fill: theme.colors.shades['700'].color }), jsxRuntime.jsx(Dropdown, { items: item.items }, void 0)] }, index)); }) }), void 0));
|
|
12387
12412
|
};
|
|
12388
12413
|
var Dropdown = function (_a) {
|
|
12389
12414
|
var items = _a.items;
|
|
@@ -12391,7 +12416,7 @@ var Dropdown = function (_a) {
|
|
|
12391
12416
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(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));
|
|
12392
12417
|
};
|
|
12393
12418
|
|
|
12394
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12419
|
+
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; });
|
|
12395
12420
|
var AmazonButton = function (_a) {
|
|
12396
12421
|
var onClick = _a.onClick;
|
|
12397
12422
|
return (jsxRuntime.jsx(StyledButton, __assign({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12400,15 +12425,15 @@ var PaypalButton = function (_a) {
|
|
|
12400
12425
|
var onClick = _a.onClick;
|
|
12401
12426
|
return (jsxRuntime.jsx(StyledButton, __assign({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12402
12427
|
};
|
|
12403
|
-
var templateObject_1$
|
|
12428
|
+
var templateObject_1$l;
|
|
12404
12429
|
|
|
12405
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12406
|
-
var Col = newStyled.div(templateObject_2$
|
|
12407
|
-
var Row = newStyled.div(templateObject_3$
|
|
12430
|
+
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'); });
|
|
12431
|
+
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"])));
|
|
12432
|
+
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) {
|
|
12408
12433
|
return props.rightToLeft &&
|
|
12409
12434
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12410
12435
|
});
|
|
12411
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12436
|
+
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; });
|
|
12412
12437
|
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; });
|
|
12413
12438
|
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; });
|
|
12414
12439
|
var CrossSellCheckbox = function (_a) {
|
|
@@ -12416,7 +12441,7 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12416
12441
|
var theme = useTheme();
|
|
12417
12442
|
return (jsxRuntime.jsxs(Wrapper, __assign({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12418
12443
|
};
|
|
12419
|
-
var templateObject_1$
|
|
12444
|
+
var templateObject_1$k, templateObject_2$a, templateObject_3$7, templateObject_4$3, templateObject_5, templateObject_6;
|
|
12420
12445
|
|
|
12421
12446
|
var index = /*#__PURE__*/Object.freeze({
|
|
12422
12447
|
__proto__: null,
|
|
@@ -12431,8 +12456,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12431
12456
|
height: height,
|
|
12432
12457
|
});
|
|
12433
12458
|
});
|
|
12434
|
-
var Container$
|
|
12435
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12459
|
+
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"])));
|
|
12460
|
+
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; });
|
|
12436
12461
|
var getStylesBySize = function (size) {
|
|
12437
12462
|
switch (size) {
|
|
12438
12463
|
case exports.ComponentSize.Medium:
|
|
@@ -12457,32 +12482,32 @@ var ProductItemMobile = function (_a) {
|
|
|
12457
12482
|
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;
|
|
12458
12483
|
var theme = useTheme();
|
|
12459
12484
|
var styles = getStylesBySize(size);
|
|
12460
|
-
return (jsxs(Container$
|
|
12485
|
+
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: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.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: exports.ComponentSize.Small }, void 0), jsx(Rating, { size: exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
|
|
12461
12486
|
};
|
|
12462
|
-
var templateObject_1$
|
|
12487
|
+
var templateObject_1$j, templateObject_2$9;
|
|
12463
12488
|
|
|
12464
|
-
var Container$
|
|
12489
|
+
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"])));
|
|
12465
12490
|
function withProductGrid(ProductItemComponent, data) {
|
|
12466
12491
|
function WithProductGrid(props) {
|
|
12467
|
-
return (jsxRuntime.jsx(Container$
|
|
12492
|
+
return (jsxRuntime.jsx(Container$c, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
|
|
12468
12493
|
}
|
|
12469
12494
|
/* istanbul ignore next */
|
|
12470
12495
|
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12471
12496
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12472
12497
|
return WithProductGrid;
|
|
12473
12498
|
}
|
|
12474
|
-
var templateObject_1$
|
|
12499
|
+
var templateObject_1$i;
|
|
12475
12500
|
|
|
12476
12501
|
var Collection = {
|
|
12477
12502
|
ProductItemMobile: ProductItemMobile,
|
|
12478
12503
|
withProductGrid: withProductGrid,
|
|
12479
12504
|
};
|
|
12480
12505
|
|
|
12481
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12506
|
+
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) {
|
|
12482
12507
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12483
12508
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12484
12509
|
});
|
|
12485
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12510
|
+
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) {
|
|
12486
12511
|
var width = _a.width;
|
|
12487
12512
|
return width;
|
|
12488
12513
|
}, function (_a) {
|
|
@@ -12523,28 +12548,28 @@ var Drawer = function (_a) {
|
|
|
12523
12548
|
}, [isOpen, onClose, onOpen]);
|
|
12524
12549
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12525
12550
|
};
|
|
12526
|
-
var templateObject_1$
|
|
12551
|
+
var templateObject_1$h, templateObject_2$8;
|
|
12527
12552
|
|
|
12528
|
-
var Container$
|
|
12553
|
+
var Container$b = newStyled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12529
12554
|
var size = _a.size;
|
|
12530
12555
|
return (size ? size : '100%');
|
|
12531
12556
|
}, function (_a) {
|
|
12532
12557
|
var size = _a.size;
|
|
12533
12558
|
return (size ? size : '100%');
|
|
12534
12559
|
});
|
|
12535
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12560
|
+
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) {
|
|
12536
12561
|
var animationDuration = _a.animationDuration;
|
|
12537
12562
|
return animationDuration;
|
|
12538
12563
|
});
|
|
12539
12564
|
var Spinner = function (_a) {
|
|
12540
12565
|
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;
|
|
12541
|
-
return (jsxRuntime.jsx(Container$
|
|
12566
|
+
return (jsxRuntime.jsx(Container$b, __assign({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12542
12567
|
};
|
|
12543
|
-
var templateObject_1$
|
|
12568
|
+
var templateObject_1$g, templateObject_2$7;
|
|
12544
12569
|
|
|
12545
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12546
|
-
var LI = newStyled.li(templateObject_2$
|
|
12547
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12570
|
+
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"])));
|
|
12571
|
+
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; });
|
|
12572
|
+
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"])));
|
|
12548
12573
|
var Tags = function (_a) {
|
|
12549
12574
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12550
12575
|
var theme = useTheme();
|
|
@@ -12552,7 +12577,7 @@ var Tags = function (_a) {
|
|
|
12552
12577
|
return (jsxRuntime.jsxs(LI, __assign({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12553
12578
|
}) }), void 0));
|
|
12554
12579
|
};
|
|
12555
|
-
var templateObject_1$
|
|
12580
|
+
var templateObject_1$f, templateObject_2$6, templateObject_3$6;
|
|
12556
12581
|
|
|
12557
12582
|
function FilteringDropdown(_a) {
|
|
12558
12583
|
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;
|
|
@@ -12585,15 +12610,15 @@ function FilteringDropdown(_a) {
|
|
|
12585
12610
|
}) }, void 0)] }), void 0));
|
|
12586
12611
|
}
|
|
12587
12612
|
|
|
12588
|
-
var Container$
|
|
12589
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
12590
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12613
|
+
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"])));
|
|
12614
|
+
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"])));
|
|
12615
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), function (_a) {
|
|
12591
12616
|
var theme = _a.theme;
|
|
12592
12617
|
return mediaQueries({ theme: theme })({
|
|
12593
12618
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12594
12619
|
});
|
|
12595
12620
|
});
|
|
12596
|
-
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) {
|
|
12621
|
+
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) {
|
|
12597
12622
|
var bold = _a.bold;
|
|
12598
12623
|
return (bold ? '700' : '500');
|
|
12599
12624
|
}, function (_a) {
|
|
@@ -12610,7 +12635,7 @@ var PageNumber = newStyled.span(templateObject_4 || (templateObject_4 = __makeTe
|
|
|
12610
12635
|
width: ['1.25rem', '1.875rem'],
|
|
12611
12636
|
});
|
|
12612
12637
|
});
|
|
12613
|
-
var templateObject_1$
|
|
12638
|
+
var templateObject_1$e, templateObject_2$5, templateObject_3$5, templateObject_4$2;
|
|
12614
12639
|
|
|
12615
12640
|
var Pagination = function (_a) {
|
|
12616
12641
|
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;
|
|
@@ -12623,15 +12648,15 @@ var Pagination = function (_a) {
|
|
|
12623
12648
|
setPage(page);
|
|
12624
12649
|
onChange(page);
|
|
12625
12650
|
};
|
|
12626
|
-
return (jsxRuntime.jsxs(Container$
|
|
12651
|
+
return (jsxRuntime.jsxs(Container$a, __assign({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer, __assign({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(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), jsxRuntime.jsx(IconContainer, __assign({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12627
12652
|
};
|
|
12628
12653
|
|
|
12629
|
-
var Container$
|
|
12654
|
+
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) {
|
|
12630
12655
|
return mediaQueries(props)({
|
|
12631
12656
|
borderTop: ["0.063rem solid ".concat(props.theme.colors.shades['100'].color), 'none'],
|
|
12632
12657
|
});
|
|
12633
12658
|
});
|
|
12634
|
-
var Description = newStyled.div({
|
|
12659
|
+
var Description$1 = newStyled.div({
|
|
12635
12660
|
display: 'flex',
|
|
12636
12661
|
flexDirection: 'column',
|
|
12637
12662
|
alignItems: 'flex-start',
|
|
@@ -12645,25 +12670,25 @@ var Description = newStyled.div({
|
|
|
12645
12670
|
var ProductItem = function (_a) {
|
|
12646
12671
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12647
12672
|
var theme = useTheme();
|
|
12648
|
-
return (jsxRuntime.jsxs(Container$
|
|
12673
|
+
return (jsxRuntime.jsxs(Container$9, __assign({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$1, { children: [jsxRuntime.jsx(Text$5, __assign({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12649
12674
|
};
|
|
12650
|
-
var templateObject_1$
|
|
12675
|
+
var templateObject_1$d;
|
|
12651
12676
|
|
|
12652
|
-
var Container$
|
|
12677
|
+
var Container$8 = newStyled.div({
|
|
12653
12678
|
display: 'flex',
|
|
12654
12679
|
justifyContent: 'center',
|
|
12655
12680
|
padding: '1rem',
|
|
12656
12681
|
});
|
|
12657
12682
|
var Footer = function (_a) {
|
|
12658
12683
|
var text = _a.text, onClick = _a.onClick;
|
|
12659
|
-
return (jsxRuntime.jsx(Container$
|
|
12684
|
+
return (jsxRuntime.jsx(Container$8, { children: jsxRuntime.jsx(Text$5, __assign({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12660
12685
|
};
|
|
12661
12686
|
|
|
12662
12687
|
var Ul = newStyled.ul({
|
|
12663
12688
|
margin: '0px',
|
|
12664
12689
|
padding: '0px',
|
|
12665
12690
|
});
|
|
12666
|
-
var Li = newStyled.li(templateObject_1$
|
|
12691
|
+
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) {
|
|
12667
12692
|
return mediaQueries(props)({
|
|
12668
12693
|
padding: [0, '0rem 1rem'],
|
|
12669
12694
|
borderRadius: [0, '0.5rem'],
|
|
@@ -12676,13 +12701,13 @@ var Button$2 = newStyled.button({
|
|
|
12676
12701
|
cursor: 'pointer',
|
|
12677
12702
|
padding: 0,
|
|
12678
12703
|
});
|
|
12679
|
-
var Container$
|
|
12704
|
+
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) {
|
|
12680
12705
|
return mediaQueries(props)({
|
|
12681
12706
|
border: ['none', "0.063rem solid ".concat(props.theme.colors.pallete.secondary.color)],
|
|
12682
12707
|
marginTop: ['1.25rem', '0.125rem'],
|
|
12683
12708
|
});
|
|
12684
12709
|
});
|
|
12685
|
-
var Header = newStyled.div(templateObject_3$
|
|
12710
|
+
var Header = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n ", ",\n"], ["\n ", ",\n"])), function (props) {
|
|
12686
12711
|
return mediaQueries(props)({
|
|
12687
12712
|
margin: ['0rem 0rem 1rem 0rem', '1rem'],
|
|
12688
12713
|
});
|
|
@@ -12690,9 +12715,9 @@ var Header = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTem
|
|
|
12690
12715
|
var ResultsPanel = function (_a) {
|
|
12691
12716
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, dataTestId = _a.dataTestId;
|
|
12692
12717
|
var theme = useTheme();
|
|
12693
|
-
return (jsxRuntime.jsxs(Container$
|
|
12718
|
+
return (jsxRuntime.jsxs(Container$7, __assign({ "data-testid": dataTestId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign({ theme: theme }, { children: jsxRuntime.jsx(Text$5, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12694
12719
|
};
|
|
12695
|
-
var templateObject_1$
|
|
12720
|
+
var templateObject_1$c, templateObject_2$4, templateObject_3$4;
|
|
12696
12721
|
|
|
12697
12722
|
var Input = newStyled.input(function (props) { return ({
|
|
12698
12723
|
padding: props.theme.component.input.padding,
|
|
@@ -12723,7 +12748,7 @@ var Input = newStyled.input(function (props) { return ({
|
|
|
12723
12748
|
},
|
|
12724
12749
|
}); });
|
|
12725
12750
|
|
|
12726
|
-
var Button$1 = newStyled.button(templateObject_1$
|
|
12751
|
+
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) {
|
|
12727
12752
|
return mediaQueries(props)({
|
|
12728
12753
|
right: ['1rem', '-3.75rem'],
|
|
12729
12754
|
});
|
|
@@ -12733,7 +12758,7 @@ var ClearButton = function (_a) {
|
|
|
12733
12758
|
var theme = useTheme();
|
|
12734
12759
|
return (jsxRuntime.jsx(Button$1, __assign({ onClick: onClick, theme: theme }, { children: jsxRuntime.jsx(Icon.Actions.Close, { height: 1.25, width: 1.25 }, void 0) }), void 0));
|
|
12735
12760
|
};
|
|
12736
|
-
var templateObject_1$
|
|
12761
|
+
var templateObject_1$b;
|
|
12737
12762
|
|
|
12738
12763
|
var useOnClickOutside = function (ref, handler) {
|
|
12739
12764
|
React.useEffect(function () {
|
|
@@ -12820,7 +12845,7 @@ var reducer = function (state, action) {
|
|
|
12820
12845
|
}
|
|
12821
12846
|
}
|
|
12822
12847
|
};
|
|
12823
|
-
var Container$
|
|
12848
|
+
var Container$6 = newStyled.div({
|
|
12824
12849
|
position: 'relative',
|
|
12825
12850
|
display: 'flex',
|
|
12826
12851
|
});
|
|
@@ -12838,42 +12863,42 @@ var SearchBar = function (_a) {
|
|
|
12838
12863
|
return function () { return clearTimeout(id); };
|
|
12839
12864
|
}, [onChange, state.term]);
|
|
12840
12865
|
var options = resultOptions && resultOptions.length > 0 ? resultOptions : suggestions;
|
|
12841
|
-
return (jsxRuntime.jsxs("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$
|
|
12866
|
+
return (jsxRuntime.jsxs("form", __assign({ role: "search", onSubmit: function (e) { return e.preventDefault(); }, ref: ref, style: { position: 'relative' } }, { children: [jsxRuntime.jsxs(Container$6, __assign({ theme: theme }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(SearchControl, { open: state.open, onClear: function () { return dispatch({ type: 'CLEAR', payload: {} }); }, onSearch: function () { return onSearch(state.term); } }, void 0)] }), void 0), state.open && (jsxRuntime.jsx(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) {
|
|
12842
12867
|
onSearch(value.title);
|
|
12843
12868
|
dispatch({ type: 'UPDATE_OPTION', payload: { selectedOption: value } });
|
|
12844
12869
|
}, onViewAll: function () { return onSearch(state.term); } }, void 0))] }), void 0));
|
|
12845
12870
|
};
|
|
12846
12871
|
|
|
12847
|
-
var Container$
|
|
12848
|
-
var TopTagContainer = newStyled.div(templateObject_2$
|
|
12849
|
-
var BottomTagContainer = newStyled.div(templateObject_3$
|
|
12872
|
+
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"])));
|
|
12873
|
+
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"])));
|
|
12874
|
+
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"])));
|
|
12850
12875
|
var ImageProductWithTags = function (_a) {
|
|
12851
12876
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
12852
|
-
return (jsxRuntime.jsxs(Container$
|
|
12877
|
+
return (jsxRuntime.jsxs(Container$5, __assign({ "data-testid": dataTestId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center top", width: "100%", height: "510px" }, void 0), jsxRuntime.jsx(TopTagContainer, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
12853
12878
|
};
|
|
12854
|
-
var templateObject_1$
|
|
12879
|
+
var templateObject_1$a, templateObject_2$3, templateObject_3$3;
|
|
12855
12880
|
|
|
12856
|
-
var Button = newStyled.button(templateObject_1$
|
|
12881
|
+
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"])));
|
|
12857
12882
|
var ArrowButton = function (_a) {
|
|
12858
12883
|
var Icon = _a.Icon, onClick = _a.onClick, className = _a.className;
|
|
12859
12884
|
return (jsxRuntime.jsx(Button, __assign({ className: className, type: "button", onClick: onClick }, { children: Icon }), void 0));
|
|
12860
12885
|
};
|
|
12861
|
-
var templateObject_1$
|
|
12886
|
+
var templateObject_1$9;
|
|
12862
12887
|
|
|
12863
|
-
var Container$
|
|
12888
|
+
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"])));
|
|
12864
12889
|
var range = function (limit) { return __spreadArray([], new Array(limit), true).map(function (_, index) { return index; }); };
|
|
12865
12890
|
var SlideDots = function (_a) {
|
|
12866
12891
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, containerDataTestId = _a.containerDataTestId;
|
|
12867
12892
|
var theme = useTheme();
|
|
12868
|
-
return (jsxRuntime.jsx(Container$
|
|
12893
|
+
return (jsxRuntime.jsx(Container$4, __assign({ "data-testid": containerDataTestId }, { children: range(quantity).map(function (index) { return (jsxRuntime.jsx(Icon.SlideDots.SlideDot, { height: 0.75, width: 0.75, fill: index === selectedIndex
|
|
12869
12894
|
? theme.colors.shades.white.color
|
|
12870
12895
|
: theme.colors.shades['700'].color, opacity: 0.6, dataTestId: "slide-dot-".concat(index) }, index)); }) }), void 0));
|
|
12871
12896
|
};
|
|
12872
|
-
var templateObject_1$
|
|
12897
|
+
var templateObject_1$8;
|
|
12873
12898
|
|
|
12874
|
-
var NavigationButton = newStyled(ArrowButton)(templateObject_1$
|
|
12875
|
-
var RightButton = newStyled(NavigationButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12876
|
-
var LeftButton = newStyled(NavigationButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12899
|
+
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"])));
|
|
12900
|
+
var RightButton = newStyled(NavigationButton)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n right: 0;\n"], ["\n right: 0;\n"])));
|
|
12901
|
+
var LeftButton = newStyled(NavigationButton)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n left: 0;\n"], ["\n left: 0;\n"])));
|
|
12877
12902
|
var SlideNavigation = function (_a) {
|
|
12878
12903
|
var quantity = _a.quantity, selectedIndex = _a.selectedIndex, onNavigate = _a.onNavigate, dataTestId = _a.dataTestId;
|
|
12879
12904
|
var theme = useTheme();
|
|
@@ -12885,9 +12910,9 @@ var SlideNavigation = function (_a) {
|
|
|
12885
12910
|
onNavigate(selectedIndex + 1);
|
|
12886
12911
|
} }, void 0)), jsxRuntime.jsx(SlideDots, { quantity: quantity, selectedIndex: selectedIndex, containerDataTestId: dataTestId }, void 0)] }, void 0));
|
|
12887
12912
|
};
|
|
12888
|
-
var templateObject_1$
|
|
12913
|
+
var templateObject_1$7, templateObject_2$2, templateObject_3$2;
|
|
12889
12914
|
|
|
12890
|
-
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"])));
|
|
12915
|
+
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"])));
|
|
12891
12916
|
var ProductGalleryMobile = function (_a) {
|
|
12892
12917
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, slideDotsDataTestId = _a.slideDotsDataTestId;
|
|
12893
12918
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -12895,9 +12920,9 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12895
12920
|
React.useEffect(function () {
|
|
12896
12921
|
setSelectedImage(initialValue);
|
|
12897
12922
|
}, [initialValue]);
|
|
12898
|
-
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, dataTestId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12923
|
+
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0), jsxRuntime.jsx(SlideNavigation, { quantity: images.length, selectedIndex: images.indexOf(selectedImage), onNavigate: function (index) { return setSelectedImage(images[index]); }, dataTestId: slideDotsDataTestId }, void 0)] }, void 0));
|
|
12899
12924
|
};
|
|
12900
|
-
var templateObject_1;
|
|
12925
|
+
var templateObject_1$6;
|
|
12901
12926
|
|
|
12902
12927
|
var Portal = function (_a) {
|
|
12903
12928
|
var id = _a.id, className = _a.className, children = _a.children;
|
|
@@ -12928,6 +12953,95 @@ var Portal = function (_a) {
|
|
|
12928
12953
|
return reactDom.createPortal(children, container.current, id);
|
|
12929
12954
|
};
|
|
12930
12955
|
|
|
12956
|
+
var visibleStyle = function (_a) {
|
|
12957
|
+
var opened = _a.opened;
|
|
12958
|
+
return opened
|
|
12959
|
+
? 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 "])));
|
|
12960
|
+
};
|
|
12961
|
+
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);
|
|
12962
|
+
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);
|
|
12963
|
+
var Modal = function (_a) {
|
|
12964
|
+
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b;
|
|
12965
|
+
var _c = React.useState(false), opened = _c[0], setOpened = _c[1];
|
|
12966
|
+
React.useEffect(function () {
|
|
12967
|
+
var onModal = function (e) {
|
|
12968
|
+
if (e.detail.id !== id) {
|
|
12969
|
+
return;
|
|
12970
|
+
}
|
|
12971
|
+
setOpened(e.detail.type === 'open');
|
|
12972
|
+
};
|
|
12973
|
+
window.addEventListener('modal', onModal);
|
|
12974
|
+
return function () {
|
|
12975
|
+
window.removeEventListener('modal', onModal);
|
|
12976
|
+
};
|
|
12977
|
+
}, [id]);
|
|
12978
|
+
var onDismiss = function () {
|
|
12979
|
+
if (!dismissable) {
|
|
12980
|
+
return;
|
|
12981
|
+
}
|
|
12982
|
+
setOpened(false);
|
|
12983
|
+
};
|
|
12984
|
+
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));
|
|
12985
|
+
};
|
|
12986
|
+
var modalEvent = function (id, detail) {
|
|
12987
|
+
window.dispatchEvent(new CustomEvent('modal', {
|
|
12988
|
+
detail: __assign(__assign({}, detail), { id: id }),
|
|
12989
|
+
}));
|
|
12990
|
+
};
|
|
12991
|
+
var templateObject_1$5, templateObject_2$1, templateObject_3$1, templateObject_4$1;
|
|
12992
|
+
|
|
12993
|
+
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; });
|
|
12994
|
+
var Title = function (_a) {
|
|
12995
|
+
var title = _a.title;
|
|
12996
|
+
var theme = useTheme();
|
|
12997
|
+
return jsxRuntime.jsx(Text$1, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0);
|
|
12998
|
+
};
|
|
12999
|
+
var templateObject_1$4;
|
|
13000
|
+
|
|
13001
|
+
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; });
|
|
13002
|
+
var Promo = function (_a) {
|
|
13003
|
+
var text = _a.text;
|
|
13004
|
+
var theme = useTheme();
|
|
13005
|
+
return (jsxRuntime.jsx(P, __assign({ color: theme.colors.shades['700'].color, "data-testid": "CartProductItemPromo" }, { children: text }), void 0));
|
|
13006
|
+
};
|
|
13007
|
+
var templateObject_1$3;
|
|
13008
|
+
|
|
13009
|
+
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; });
|
|
13010
|
+
var Description = function (_a) {
|
|
13011
|
+
var text = _a.text;
|
|
13012
|
+
var theme = useTheme();
|
|
13013
|
+
return jsxRuntime.jsx(Text, __assign({ color: theme.colors.shades['400'].color }, { children: text }), void 0);
|
|
13014
|
+
};
|
|
13015
|
+
var templateObject_1$2;
|
|
13016
|
+
|
|
13017
|
+
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; });
|
|
13018
|
+
var CloseButton = function (_a) {
|
|
13019
|
+
var onClick = _a.onClick;
|
|
13020
|
+
var theme = useTheme();
|
|
13021
|
+
return (jsxRuntime.jsx(Container$1, __assign({ backgroundColor: theme.colors.shades['700'].color, onClick: onClick, "data-testid": "CartProductItemCloseBtn" }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: 0.313, height: 0.313, fill: "#fff" }, void 0) }), void 0));
|
|
13022
|
+
};
|
|
13023
|
+
var templateObject_1$1;
|
|
13024
|
+
|
|
13025
|
+
var CartProductItem = {
|
|
13026
|
+
Title: Title,
|
|
13027
|
+
Tag: OfferBanner,
|
|
13028
|
+
Promo: Promo,
|
|
13029
|
+
Description: Description,
|
|
13030
|
+
CloseButton: CloseButton,
|
|
13031
|
+
};
|
|
13032
|
+
|
|
13033
|
+
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; });
|
|
13034
|
+
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"])));
|
|
13035
|
+
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"])));
|
|
13036
|
+
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"])));
|
|
13037
|
+
var QuantityPicker = function (_a) {
|
|
13038
|
+
var _b = _a.initialValue, initialValue = _b === void 0 ? 0 : _b, _c = _a.maxValue, maxValue = _c === void 0 ? 99 : _c;
|
|
13039
|
+
var theme = useTheme();
|
|
13040
|
+
var _d = React__default["default"].useState(initialValue), value = _d[0], setValue = _d[1];
|
|
13041
|
+
return (jsxRuntime.jsxs(Container, __assign({ borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['700'].color, "data-testid": "QuantityPickerContainer" }, { children: [jsxRuntime.jsx(IncreaseDecrease, __assign({ onClick: function () { return setValue(function (val) { return (val > initialValue ? val - 1 : val); }); } }, { children: "-" }), void 0), jsxRuntime.jsx(Number$1, { children: value }, void 0), jsxRuntime.jsx(IncreaseDecrease, __assign({ onClick: function () { return setValue(function (val) { return (val < maxValue ? val + 1 : val); }); } }, { children: "+" }), void 0)] }), void 0));
|
|
13042
|
+
};
|
|
13043
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
13044
|
+
|
|
12931
13045
|
exports.Accordion = Accordion;
|
|
12932
13046
|
exports.AmazonButton = AmazonButton;
|
|
12933
13047
|
exports.AssetsProvider = AssetsProvider;
|
|
@@ -12936,6 +13050,7 @@ exports.ButtonPrimary = ButtonPrimary;
|
|
|
12936
13050
|
exports.ButtonSecondary = ButtonSecondary;
|
|
12937
13051
|
exports.ButtonSecondaryOutline = ButtonSecondaryOutline;
|
|
12938
13052
|
exports.Card = Card$1;
|
|
13053
|
+
exports.CartProductItem = CartProductItem;
|
|
12939
13054
|
exports.CategoryTag = CategoryTag;
|
|
12940
13055
|
exports.Checkbox = Checkbox;
|
|
12941
13056
|
exports.Collection = Collection;
|
|
@@ -12951,9 +13066,11 @@ exports.Icon = Icon;
|
|
|
12951
13066
|
exports.IconButton = IconButton;
|
|
12952
13067
|
exports.Image = Image;
|
|
12953
13068
|
exports.Input = Input$1;
|
|
13069
|
+
exports.Modal = Modal;
|
|
12954
13070
|
exports.MultiColorPicker = MultiColorPicker;
|
|
12955
13071
|
exports.OfferBanner = OfferBanner;
|
|
12956
13072
|
exports.OrderBar = OrderBar;
|
|
13073
|
+
exports.Overlay = Overlay;
|
|
12957
13074
|
exports.Pagination = Pagination;
|
|
12958
13075
|
exports.PaymentMethod = PaymentMethod;
|
|
12959
13076
|
exports.PaypalButton = PaypalButton;
|
|
@@ -12962,6 +13079,7 @@ exports.PriceLabel = PriceLabel;
|
|
|
12962
13079
|
exports.ProductGallery = ProductGallery;
|
|
12963
13080
|
exports.ProductGalleryMobile = ProductGalleryMobile;
|
|
12964
13081
|
exports.ProgressBar = ProgressBar;
|
|
13082
|
+
exports.QuantityPicker = QuantityPicker;
|
|
12965
13083
|
exports.RadioGroupInput = RadioGroupInput;
|
|
12966
13084
|
exports.RadioInput = RadioInput;
|
|
12967
13085
|
exports.Rating = Rating;
|
|
@@ -12978,13 +13096,14 @@ exports.SizeTable = SizeTable;
|
|
|
12978
13096
|
exports.SliderNavigation = SliderNavigation;
|
|
12979
13097
|
exports.Spinner = Spinner;
|
|
12980
13098
|
exports.StarList = StarList;
|
|
12981
|
-
exports.Text = Text$
|
|
13099
|
+
exports.Text = Text$5;
|
|
12982
13100
|
exports.TextButton = TextButton;
|
|
12983
13101
|
exports.ThemeProvider = ThemeProvider;
|
|
12984
13102
|
exports.ThemeVariables = ThemeVariables;
|
|
12985
13103
|
exports.Timer = Timer;
|
|
12986
13104
|
exports.Tooltip = Tooltip;
|
|
12987
13105
|
exports.Totals = Totals;
|
|
13106
|
+
exports.modalEvent = modalEvent;
|
|
12988
13107
|
exports.useOnClickOutside = useOnClickOutside;
|
|
12989
13108
|
exports.useTheme = useTheme;
|
|
12990
13109
|
exports.useThemeAssets = useThemeAssets;
|