@trafilea/afrodita-components 2.3.1 → 2.3.2
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/dts/components/collection/index.d.ts +5 -0
- package/build/dts/components/collection/product/mobile/ProductItemMobile.d.ts +1 -1
- package/build/dts/components/collection/product/mobile/ProductItemMobile.stories.d.ts +1 -1
- package/build/dts/components/collection/product/types.d.ts +1 -0
- package/build/dts/components/index.d.ts +2 -1
- package/build/index.d.ts +28 -1
- package/build/index.esm.js +265 -210
- package/build/index.esm.js.map +1 -1
- package/build/index.js +265 -209
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3508,7 +3508,7 @@ exports.InputValidationType = void 0;
|
|
|
3508
3508
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3509
3509
|
})(exports.InputValidationType || (exports.InputValidationType = {}));
|
|
3510
3510
|
|
|
3511
|
-
var Section = newStyled.div(templateObject_1$
|
|
3511
|
+
var Section = newStyled.div(templateObject_1$M || (templateObject_1$M = __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) {
|
|
3512
3512
|
return props.type === exports.CardSectionType.Header ? '0.5rem 1.5rem 0' : '0 1.5rem 0.5rem';
|
|
3513
3513
|
});
|
|
3514
3514
|
var CardHeader = function (_a) {
|
|
@@ -3519,16 +3519,16 @@ var CardFooter = function (_a) {
|
|
|
3519
3519
|
var children = _a.children;
|
|
3520
3520
|
return (jsxRuntime.jsx(Section, __assign({ type: exports.CardSectionType.Footer }, { children: children }), void 0));
|
|
3521
3521
|
};
|
|
3522
|
-
var templateObject_1$
|
|
3522
|
+
var templateObject_1$M;
|
|
3523
3523
|
|
|
3524
|
-
var Body = newStyled.div(templateObject_1$
|
|
3524
|
+
var Body = newStyled.div(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
3525
3525
|
var CardBody = function (_a) {
|
|
3526
3526
|
var children = _a.children;
|
|
3527
3527
|
return jsxRuntime.jsx(Body, { children: children }, void 0);
|
|
3528
3528
|
};
|
|
3529
|
-
var templateObject_1$
|
|
3529
|
+
var templateObject_1$L;
|
|
3530
3530
|
|
|
3531
|
-
var Container$
|
|
3531
|
+
var Container$t = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n"])), function (_a) {
|
|
3532
3532
|
var flex = _a.flex;
|
|
3533
3533
|
return flex &&
|
|
3534
3534
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3540,14 +3540,14 @@ var Container$r = newStyled.div(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
3540
3540
|
});
|
|
3541
3541
|
var Card = function (_a) {
|
|
3542
3542
|
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;
|
|
3543
|
-
return (jsxRuntime.jsx(Container$
|
|
3543
|
+
return (jsxRuntime.jsx(Container$t, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer" }, { children: children }), void 0));
|
|
3544
3544
|
};
|
|
3545
3545
|
var Card$1 = Object.assign(Card, {
|
|
3546
3546
|
Header: CardHeader,
|
|
3547
3547
|
Footer: CardFooter,
|
|
3548
3548
|
Body: CardBody,
|
|
3549
3549
|
});
|
|
3550
|
-
var templateObject_1$
|
|
3550
|
+
var templateObject_1$K;
|
|
3551
3551
|
|
|
3552
3552
|
function jsx(type, props, key) {
|
|
3553
3553
|
if (!hasOwnProperty$1.call(props, 'css')) {
|
|
@@ -3577,7 +3577,7 @@ var BaseButton = function (_a) {
|
|
|
3577
3577
|
} }, { children: [renderLeading, children, renderTrailing] }), void 0));
|
|
3578
3578
|
};
|
|
3579
3579
|
|
|
3580
|
-
var getStylesBySize$
|
|
3580
|
+
var getStylesBySize$d = function (size) {
|
|
3581
3581
|
switch (size) {
|
|
3582
3582
|
case exports.ComponentSize.Large:
|
|
3583
3583
|
return {
|
|
@@ -3604,7 +3604,7 @@ var getStylesBySize$c = function (size) {
|
|
|
3604
3604
|
var BaseCTA = function (_a) {
|
|
3605
3605
|
var text = _a.text, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d, type = _a.type, className = _a.className;
|
|
3606
3606
|
var theme = useTheme();
|
|
3607
|
-
var stylesBySize = getStylesBySize$
|
|
3607
|
+
var stylesBySize = getStylesBySize$d(size);
|
|
3608
3608
|
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : '' }, stylesBySize), { fontWeight: 600, '&:hover': {
|
|
3609
3609
|
color: theme.shades.white,
|
|
3610
3610
|
cursor: 'pointer',
|
|
@@ -5988,7 +5988,7 @@ function BaseSelectOption(_a) {
|
|
|
5988
5988
|
return (jsxRuntime.jsx(Listbox.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5989
5989
|
}
|
|
5990
5990
|
|
|
5991
|
-
var CustomListBox = newStyled(Listbox)(templateObject_1$
|
|
5991
|
+
var CustomListBox = newStyled(Listbox)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5992
5992
|
function BaseSelect(_a) {
|
|
5993
5993
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5994
5994
|
return (jsxRuntime.jsx(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5998,7 +5998,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5998
5998
|
Options: BaseSelectOptions,
|
|
5999
5999
|
Option: BaseSelectOption,
|
|
6000
6000
|
});
|
|
6001
|
-
var templateObject_1$
|
|
6001
|
+
var templateObject_1$J;
|
|
6002
6002
|
|
|
6003
6003
|
var CustomButton = newStyled.button(function (_a) {
|
|
6004
6004
|
var theme = _a.theme, wide = _a.wide;
|
|
@@ -6135,7 +6135,7 @@ function SimpleDropdown(_a) {
|
|
|
6135
6135
|
return (jsxRuntime.jsxs(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide }, { children: selectedOptionLabel() }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
6136
6136
|
}
|
|
6137
6137
|
|
|
6138
|
-
var getStylesBySize$
|
|
6138
|
+
var getStylesBySize$c = function (size) {
|
|
6139
6139
|
switch (size) {
|
|
6140
6140
|
case exports.ComponentSize.Medium:
|
|
6141
6141
|
return {
|
|
@@ -6151,7 +6151,7 @@ var getStylesBySize$b = function (size) {
|
|
|
6151
6151
|
var SimpleSelector = function (_a) {
|
|
6152
6152
|
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, onClick = _a.onClick;
|
|
6153
6153
|
var theme = useTheme();
|
|
6154
|
-
var stylesBySize = getStylesBySize$
|
|
6154
|
+
var stylesBySize = getStylesBySize$c(size);
|
|
6155
6155
|
var activeStyles = active ? { fontWeight: 600 } : { fontWeight: 0 };
|
|
6156
6156
|
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: "button", css: __assign(__assign(__assign({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: '0.75rem', cursor: 'pointer', '&:hover': {
|
|
6157
6157
|
fontWeight: 600,
|
|
@@ -6177,8 +6177,8 @@ var SelectorSecondary = function (_a) {
|
|
|
6177
6177
|
} }) }, void 0));
|
|
6178
6178
|
};
|
|
6179
6179
|
|
|
6180
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
6181
|
-
var SizeParagraph = newStyled.p(templateObject_2$
|
|
6180
|
+
var ButtonsContainer = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n"])));
|
|
6181
|
+
var SizeParagraph = newStyled.p(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n margin: 0 0 0.63rem 0;\n font-size: 0.88rem;\n"], ["\n margin: 0 0 0.63rem 0;\n font-size: 0.88rem;\n"])));
|
|
6182
6182
|
var getInitialValue$2 = function (options, selectedValue) {
|
|
6183
6183
|
if (selectedValue && selectedValue.disabled !== true && options.includes(selectedValue))
|
|
6184
6184
|
return selectedValue;
|
|
@@ -6203,9 +6203,9 @@ var SizeSelector = function (_a) {
|
|
|
6203
6203
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChangeHandler(size); } }, size.label));
|
|
6204
6204
|
}) }, void 0)] }, void 0));
|
|
6205
6205
|
};
|
|
6206
|
-
var templateObject_1$
|
|
6206
|
+
var templateObject_1$I, templateObject_2$v;
|
|
6207
6207
|
|
|
6208
|
-
var getStylesBySize$
|
|
6208
|
+
var getStylesBySize$b = function (size) {
|
|
6209
6209
|
switch (size) {
|
|
6210
6210
|
case exports.ComponentSize.Large:
|
|
6211
6211
|
case exports.ComponentSize.Medium:
|
|
@@ -6223,7 +6223,7 @@ var getStylesBySize$a = function (size) {
|
|
|
6223
6223
|
}
|
|
6224
6224
|
};
|
|
6225
6225
|
var textButtonStyles$1 = function (theme, size) {
|
|
6226
|
-
var stylesBySize = getStylesBySize$
|
|
6226
|
+
var stylesBySize = getStylesBySize$b(size);
|
|
6227
6227
|
return __assign(__assign({ border: 'none', background: 'transparent', padding: 0, color: theme.shades.gray550, alignItems: 'center', fontWeight: 600 }, stylesBySize), { '&:hover': {
|
|
6228
6228
|
textDecorationLine: 'underline',
|
|
6229
6229
|
}, '&:disabled': {
|
|
@@ -6232,7 +6232,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
6232
6232
|
} });
|
|
6233
6233
|
};
|
|
6234
6234
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
6235
|
-
return Icon && (jsx("span", __assign({ css: css(templateObject_1$
|
|
6235
|
+
return Icon && (jsx("span", __assign({ css: css(templateObject_1$H || (templateObject_1$H = __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));
|
|
6236
6236
|
};
|
|
6237
6237
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
6238
6238
|
if (disabled)
|
|
@@ -6248,18 +6248,18 @@ var TextButton = function (_a) {
|
|
|
6248
6248
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
6249
6249
|
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));
|
|
6250
6250
|
};
|
|
6251
|
-
var templateObject_1$
|
|
6251
|
+
var templateObject_1$H;
|
|
6252
6252
|
|
|
6253
|
-
var Container$
|
|
6254
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
6253
|
+
var Container$s = newStyled.div(templateObject_1$G || (templateObject_1$G = __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"])));
|
|
6254
|
+
var P$2 = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6255
6255
|
var PercentageSpan = newStyled.span(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
6256
6256
|
var SizeFitGuide = function (_a) {
|
|
6257
6257
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6258
|
-
return (jsxRuntime.jsxs(Container$
|
|
6258
|
+
return (jsxRuntime.jsxs(Container$s, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxRuntime.jsxs(P$2, { children: [fitPercentageLabel, " ", jsxRuntime.jsxs(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6259
6259
|
};
|
|
6260
|
-
var templateObject_1$
|
|
6260
|
+
var templateObject_1$G, templateObject_2$u, templateObject_3$j;
|
|
6261
6261
|
|
|
6262
|
-
var getStylesBySize$
|
|
6262
|
+
var getStylesBySize$a = function (size) {
|
|
6263
6263
|
switch (size) {
|
|
6264
6264
|
case exports.ComponentSize.Large:
|
|
6265
6265
|
return {
|
|
@@ -6287,7 +6287,7 @@ var getStylesBySize$9 = function (size) {
|
|
|
6287
6287
|
};
|
|
6288
6288
|
}
|
|
6289
6289
|
};
|
|
6290
|
-
var Container$
|
|
6290
|
+
var Container$r = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
6291
6291
|
var backgroundColor = _a.backgroundColor;
|
|
6292
6292
|
return backgroundColor;
|
|
6293
6293
|
}, function (_a) {
|
|
@@ -6296,39 +6296,39 @@ var Container$p = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
6296
6296
|
}, function (_a) {
|
|
6297
6297
|
var _b;
|
|
6298
6298
|
var size = _a.size;
|
|
6299
|
-
return (_b = getStylesBySize$
|
|
6299
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
6300
6300
|
}, function (_a) {
|
|
6301
6301
|
var _b;
|
|
6302
6302
|
var size = _a.size;
|
|
6303
|
-
return (_b = getStylesBySize$
|
|
6303
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
6304
6304
|
}, function (_a) {
|
|
6305
6305
|
var size = _a.size;
|
|
6306
6306
|
return (size === exports.ComponentSize.Small ? '2rem' : 'unset');
|
|
6307
6307
|
}, function (_a) {
|
|
6308
6308
|
var _b;
|
|
6309
6309
|
var size = _a.size;
|
|
6310
|
-
return (_b = getStylesBySize$
|
|
6310
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
6311
6311
|
});
|
|
6312
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
6312
|
+
var H3$2 = newStyled.h3(templateObject_2$t || (templateObject_2$t = __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) {
|
|
6313
6313
|
var textColor = _a.textColor;
|
|
6314
6314
|
return textColor;
|
|
6315
6315
|
}, function (_a) {
|
|
6316
6316
|
var _b;
|
|
6317
6317
|
var size = _a.size;
|
|
6318
|
-
return (_b = getStylesBySize$
|
|
6318
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
6319
6319
|
}, function (_a) {
|
|
6320
6320
|
var _b;
|
|
6321
6321
|
var size = _a.size;
|
|
6322
|
-
return (_b = getStylesBySize$
|
|
6322
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
6323
6323
|
});
|
|
6324
6324
|
var DiscountTag = function (_a) {
|
|
6325
6325
|
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;
|
|
6326
6326
|
var theme = useTheme();
|
|
6327
|
-
return (jsxRuntime.jsx(Container$
|
|
6327
|
+
return (jsxRuntime.jsx(Container$r, __assign({ backgroundColor: disabled ? theme.shades.gray050 : backgroundColor, borderColor: disabled ? theme.shades.gray050 : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$2, __assign({ textColor: disabled ? theme.shades.gray250 : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6328
6328
|
};
|
|
6329
|
-
var templateObject_1$
|
|
6329
|
+
var templateObject_1$F, templateObject_2$t;
|
|
6330
6330
|
|
|
6331
|
-
var getStylesBySize$
|
|
6331
|
+
var getStylesBySize$9 = function (size) {
|
|
6332
6332
|
switch (size) {
|
|
6333
6333
|
case exports.ComponentSize.Large:
|
|
6334
6334
|
return {
|
|
@@ -6350,18 +6350,18 @@ var getStylesBySize$8 = function (size) {
|
|
|
6350
6350
|
};
|
|
6351
6351
|
}
|
|
6352
6352
|
};
|
|
6353
|
-
var Container$
|
|
6354
|
-
var Price = newStyled.h1(templateObject_2$
|
|
6353
|
+
var Container$q = newStyled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6354
|
+
var Price = newStyled.h1(templateObject_2$s || (templateObject_2$s = __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) {
|
|
6355
6355
|
var weight = _a.weight;
|
|
6356
6356
|
return (weight ? weight : '400');
|
|
6357
6357
|
}, function (_a) {
|
|
6358
6358
|
var _b;
|
|
6359
6359
|
var size = _a.size;
|
|
6360
|
-
return (_b = getStylesBySize$
|
|
6360
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
6361
6361
|
}, function (_a) {
|
|
6362
6362
|
var _b;
|
|
6363
6363
|
var size = _a.size;
|
|
6364
|
-
return (_b = getStylesBySize$
|
|
6364
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
6365
6365
|
}, function (_a) {
|
|
6366
6366
|
var color = _a.color;
|
|
6367
6367
|
return color;
|
|
@@ -6371,19 +6371,19 @@ var Price = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTempl
|
|
|
6371
6371
|
}, function (_a) {
|
|
6372
6372
|
var _b;
|
|
6373
6373
|
var margin = _a.margin, size = _a.size;
|
|
6374
|
-
return (margin ? (_b = getStylesBySize$
|
|
6374
|
+
return (margin ? (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
6375
6375
|
});
|
|
6376
6376
|
var TagContainer = newStyled.h1(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
6377
6377
|
var _b;
|
|
6378
6378
|
var size = _a.size;
|
|
6379
|
-
return (_b = getStylesBySize$
|
|
6379
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
6380
6380
|
});
|
|
6381
6381
|
var PriceLabel = function (_a) {
|
|
6382
6382
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6383
6383
|
var theme = useTheme();
|
|
6384
|
-
return (jsxRuntime.jsxs(Container$
|
|
6384
|
+
return (jsxRuntime.jsxs(Container$q, { children: [jsxRuntime.jsx(Price, __assign({ size: size, color: color || theme.palette.secondary.default, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsxRuntime.jsx(Price, __assign({ size: size, color: theme.shades.gray400, 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));
|
|
6385
6385
|
};
|
|
6386
|
-
var templateObject_1$
|
|
6386
|
+
var templateObject_1$E, templateObject_2$s, templateObject_3$i;
|
|
6387
6387
|
|
|
6388
6388
|
var OneColorSelector = function (_a) {
|
|
6389
6389
|
var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
@@ -6422,8 +6422,8 @@ var OutOfStock = function (_a) {
|
|
|
6422
6422
|
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.shades.gray300 }, 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.shades.gray300, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6423
6423
|
};
|
|
6424
6424
|
|
|
6425
|
-
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$
|
|
6426
|
-
var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$
|
|
6425
|
+
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6426
|
+
var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6427
6427
|
var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n margin-right: 1rem;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 1rem;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
6428
6428
|
var Span = newStyled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6429
6429
|
var OptionsContainer = newStyled.div(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n"])));
|
|
@@ -6444,20 +6444,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6444
6444
|
Option: Option,
|
|
6445
6445
|
OptionsContainer: OptionsContainer,
|
|
6446
6446
|
});
|
|
6447
|
-
var templateObject_1$
|
|
6447
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$h, templateObject_4$d, templateObject_5$7;
|
|
6448
6448
|
|
|
6449
|
-
var Container$
|
|
6449
|
+
var Container$p = newStyled.div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
6450
6450
|
var borderColor = _a.borderColor;
|
|
6451
6451
|
return borderColor;
|
|
6452
6452
|
});
|
|
6453
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
6453
|
+
var Image$3 = newStyled.img(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6454
6454
|
var PatternSelector = function (_a) {
|
|
6455
6455
|
var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6456
6456
|
var theme = useTheme();
|
|
6457
6457
|
var outerBorder = selected ? theme.shades.gray550 : 'transparent';
|
|
6458
|
-
return (jsxRuntime.jsx(Container$
|
|
6458
|
+
return (jsxRuntime.jsx(Container$p, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6459
6459
|
};
|
|
6460
|
-
var templateObject_1$
|
|
6460
|
+
var templateObject_1$C, templateObject_2$q;
|
|
6461
6461
|
|
|
6462
6462
|
var renderOptions$1 = function (options) {
|
|
6463
6463
|
if (options.length)
|
|
@@ -6523,7 +6523,7 @@ var MultiColorPicker = function (_a) {
|
|
|
6523
6523
|
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));
|
|
6524
6524
|
};
|
|
6525
6525
|
|
|
6526
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
6526
|
+
var Image$2 = newStyled.img(templateObject_1$B || (templateObject_1$B = __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) {
|
|
6527
6527
|
var selected = _a.selected, theme = _a.theme;
|
|
6528
6528
|
return selected ? "0.063rem solid " + theme.shades.gray700 : 'inherit';
|
|
6529
6529
|
});
|
|
@@ -6532,29 +6532,29 @@ var ImageSmallPreview = function (_a) {
|
|
|
6532
6532
|
var theme = useTheme();
|
|
6533
6533
|
return jsxRuntime.jsx(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
6534
6534
|
};
|
|
6535
|
-
var templateObject_1$
|
|
6535
|
+
var templateObject_1$B;
|
|
6536
6536
|
|
|
6537
|
-
var Container$
|
|
6538
|
-
var Button$3 = newStyled.button(templateObject_2$
|
|
6537
|
+
var Container$o = newStyled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding-right: 1.25rem;\n overflow: auto;\n"], ["\n display: flex;\n flex-direction: column;\n padding-right: 1.25rem;\n overflow: auto;\n"])));
|
|
6538
|
+
var Button$3 = newStyled.button(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
6539
6539
|
var ImagePreviewList = function (_a) {
|
|
6540
6540
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
|
|
6541
|
-
return (jsx(Container$
|
|
6541
|
+
return (jsx(Container$o, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
|
|
6542
6542
|
return (jsx(Button$3, __assign({ onClick: function () { return onClick(item); } }, { children: jsx(ImageSmallPreview, { css: { marginBottom: '1.25rem' }, imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
|
|
6543
6543
|
}) }), void 0));
|
|
6544
6544
|
};
|
|
6545
|
-
var templateObject_1$
|
|
6545
|
+
var templateObject_1$A, templateObject_2$p;
|
|
6546
6546
|
|
|
6547
|
-
var Container$
|
|
6548
|
-
var Image$1 = newStyled.img(templateObject_2$
|
|
6547
|
+
var Container$n = newStyled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n position: relative;\n max-height: 45rem;\n max-width: 33.125rem;\n"], ["\n position: relative;\n max-height: 45rem;\n max-width: 33.125rem;\n"])));
|
|
6548
|
+
var Image$1 = newStyled.img(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
|
|
6549
6549
|
var TopTagContainer = newStyled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
6550
6550
|
var BottomTagContainer = newStyled.div(templateObject_4$c || (templateObject_4$c = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
6551
6551
|
var ImageProductWithTags = function (_a) {
|
|
6552
6552
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
6553
|
-
return (jsxRuntime.jsxs(Container$
|
|
6553
|
+
return (jsxRuntime.jsxs(Container$n, __assign({ "data-testid": dataTestId }, { children: [jsxRuntime.jsx(Image$1, { src: image.imageUrl, alt: image.alt }, void 0), jsxRuntime.jsx(TopTagContainer, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6554
6554
|
};
|
|
6555
|
-
var templateObject_1$
|
|
6555
|
+
var templateObject_1$z, templateObject_2$o, templateObject_3$g, templateObject_4$c;
|
|
6556
6556
|
|
|
6557
|
-
var Container$
|
|
6557
|
+
var Container$m = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: fit-content;\n max-height: 45rem;\n"], ["\n display: flex;\n flex-direction: row;\n width: fit-content;\n max-height: 45rem;\n"])));
|
|
6558
6558
|
var ProductGallery = function (_a) {
|
|
6559
6559
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6560
6560
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6562,13 +6562,13 @@ var ProductGallery = function (_a) {
|
|
|
6562
6562
|
React.useEffect(function () {
|
|
6563
6563
|
setSelectedImage(initialValue);
|
|
6564
6564
|
}, [initialValue]);
|
|
6565
|
-
return (jsxRuntime.jsxs(Container$
|
|
6565
|
+
return (jsxRuntime.jsxs(Container$m, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
6566
6566
|
setSelectedImage(value);
|
|
6567
6567
|
} }, void 0), jsxRuntime.jsx(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
|
|
6568
6568
|
};
|
|
6569
|
-
var templateObject_1$
|
|
6569
|
+
var templateObject_1$y;
|
|
6570
6570
|
|
|
6571
|
-
var getStylesBySize$
|
|
6571
|
+
var getStylesBySize$8 = function (size) {
|
|
6572
6572
|
switch (size) {
|
|
6573
6573
|
case exports.ComponentSize.Large:
|
|
6574
6574
|
return {
|
|
@@ -6600,13 +6600,13 @@ var StarList = function (_a) {
|
|
|
6600
6600
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b;
|
|
6601
6601
|
return (jsx("div", __assign({ style: { display: 'flex' } }, { children: __spreadArray([], new Array(starsNumber)).map(function (_, index) {
|
|
6602
6602
|
return (jsx("div", __assign({ "data-testid": "star-container", css: {
|
|
6603
|
-
marginRight: getStylesBySize$
|
|
6603
|
+
marginRight: getStylesBySize$8(size).marginRight,
|
|
6604
6604
|
display: 'flex',
|
|
6605
|
-
} }, { children: index < Math.floor(rating) ? (jsx(Icon.PDP.Star, __assign({}, getStylesBySize$
|
|
6605
|
+
} }, { children: index < Math.floor(rating) ? (jsx(Icon.PDP.Star, __assign({}, getStylesBySize$8(size), { fill: fill }), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx(Icon.PDP.StarHalf, __assign({}, getStylesBySize$8(size), { fill: fill }), void 0)) : (jsx(Icon.PDP.StarEmpty, __assign({}, getStylesBySize$8(size), { fill: fill }), void 0)) }), index));
|
|
6606
6606
|
}) }), void 0));
|
|
6607
6607
|
};
|
|
6608
6608
|
|
|
6609
|
-
var getStylesBySize$
|
|
6609
|
+
var getStylesBySize$7 = function (size) {
|
|
6610
6610
|
switch (size) {
|
|
6611
6611
|
case exports.ComponentSize.Large:
|
|
6612
6612
|
return {
|
|
@@ -6646,14 +6646,14 @@ var Rating = function (_a) {
|
|
|
6646
6646
|
fontStyle: 'normal',
|
|
6647
6647
|
fontWeight: 'normal',
|
|
6648
6648
|
color: theme.palette.secondary.default,
|
|
6649
|
-
fontSize: getStylesBySize$
|
|
6650
|
-
lineHeight: getStylesBySize$
|
|
6651
|
-
marginLeft: getStylesBySize$
|
|
6649
|
+
fontSize: getStylesBySize$7(size).fontSize,
|
|
6650
|
+
lineHeight: getStylesBySize$7(size).lineHeight,
|
|
6651
|
+
marginLeft: getStylesBySize$7(size).marginLeft,
|
|
6652
6652
|
} }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
6653
6653
|
};
|
|
6654
6654
|
|
|
6655
|
-
var Container$
|
|
6656
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
6655
|
+
var Container$l = newStyled.div(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
6656
|
+
var P$1 = newStyled.p(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.shades.gray550; });
|
|
6657
6657
|
var textButtonStyles = function (theme) { return ({
|
|
6658
6658
|
border: 'none',
|
|
6659
6659
|
background: 'transparent',
|
|
@@ -6666,9 +6666,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
6666
6666
|
var FitPredictor = function (_a) {
|
|
6667
6667
|
var onClick = _a.onClick;
|
|
6668
6668
|
var theme = useTheme();
|
|
6669
|
-
return (jsxs(Container$
|
|
6669
|
+
return (jsxs(Container$l, __assign({ theme: theme }, { children: [jsx(Container$l, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.shades.gray550 }, void 0) }, void 0), jsx(P$1, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
6670
6670
|
};
|
|
6671
|
-
var templateObject_1$
|
|
6671
|
+
var templateObject_1$x, templateObject_2$n;
|
|
6672
6672
|
|
|
6673
6673
|
var H2$1 = newStyled.h2(function (_a) {
|
|
6674
6674
|
var color = _a.color;
|
|
@@ -6682,7 +6682,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
6682
6682
|
margin: '0.938rem 4.188rem',
|
|
6683
6683
|
});
|
|
6684
6684
|
});
|
|
6685
|
-
var Bar = newStyled.div(templateObject_1$
|
|
6685
|
+
var Bar = newStyled.div(templateObject_1$w || (templateObject_1$w = __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) {
|
|
6686
6686
|
var backgroundColor = _a.backgroundColor;
|
|
6687
6687
|
return backgroundColor;
|
|
6688
6688
|
}, function (_a) {
|
|
@@ -6705,7 +6705,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
6705
6705
|
position: 'absolute',
|
|
6706
6706
|
});
|
|
6707
6707
|
});
|
|
6708
|
-
var Container$
|
|
6708
|
+
var Container$k = newStyled.div(function (_a) {
|
|
6709
6709
|
var widthAuto = _a.widthAuto;
|
|
6710
6710
|
return ({
|
|
6711
6711
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -6719,11 +6719,11 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
6719
6719
|
var ProgressBar = function (_a) {
|
|
6720
6720
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
6721
6721
|
var theme = useTheme();
|
|
6722
|
-
return (jsxRuntime.jsxs(Container$
|
|
6722
|
+
return (jsxRuntime.jsxs(Container$k, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign({ backgroundColor: theme.shades.gray100 }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign({ color: theme.palette.secondary.default }, { children: description }), void 0)] }), void 0));
|
|
6723
6723
|
};
|
|
6724
|
-
var templateObject_1$
|
|
6724
|
+
var templateObject_1$w;
|
|
6725
6725
|
|
|
6726
|
-
var getStylesBySize$
|
|
6726
|
+
var getStylesBySize$6 = function (size) {
|
|
6727
6727
|
switch (size) {
|
|
6728
6728
|
case exports.ComponentSize.Large:
|
|
6729
6729
|
return {
|
|
@@ -6742,21 +6742,21 @@ var getStylesBySize$5 = function (size) {
|
|
|
6742
6742
|
};
|
|
6743
6743
|
}
|
|
6744
6744
|
};
|
|
6745
|
-
var Container$
|
|
6745
|
+
var Container$j = newStyled.div(templateObject_1$v || (templateObject_1$v = __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) {
|
|
6746
6746
|
var backgroundColor = _a.backgroundColor;
|
|
6747
6747
|
return backgroundColor;
|
|
6748
6748
|
}, function (_a) {
|
|
6749
6749
|
var _b;
|
|
6750
6750
|
var size = _a.size;
|
|
6751
|
-
return (_b = getStylesBySize$
|
|
6751
|
+
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
|
|
6752
6752
|
}, function (_a) {
|
|
6753
6753
|
var _b;
|
|
6754
6754
|
var size = _a.size;
|
|
6755
|
-
return (_b = getStylesBySize$
|
|
6755
|
+
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
|
|
6756
6756
|
}, function (_a) {
|
|
6757
6757
|
var _b;
|
|
6758
6758
|
var size = _a.size;
|
|
6759
|
-
return (_b = getStylesBySize$
|
|
6759
|
+
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
6760
6760
|
}, function (_a) {
|
|
6761
6761
|
var hoverBackgroundColor = _a.hoverBackgroundColor;
|
|
6762
6762
|
return hoverBackgroundColor;
|
|
@@ -6770,9 +6770,9 @@ var Container$h = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
|
|
|
6770
6770
|
var IconButton = function (_a) {
|
|
6771
6771
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? exports.ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
6772
6772
|
var theme = useTheme();
|
|
6773
|
-
return (jsxRuntime.jsx(Container$
|
|
6773
|
+
return (jsxRuntime.jsx(Container$j, __assign({ className: disabled ? 'disabled' : '', backgroundColor: theme.palette.primary.default, hoverBackgroundColor: theme.palette.secondary.default, disabledColor: theme.shades.gray050, disabledIconColor: theme.shades.gray200, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
6774
6774
|
};
|
|
6775
|
-
var templateObject_1$
|
|
6775
|
+
var templateObject_1$v;
|
|
6776
6776
|
|
|
6777
6777
|
var TooltipArrow = function (_a) {
|
|
6778
6778
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -6852,7 +6852,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6852
6852
|
}
|
|
6853
6853
|
};
|
|
6854
6854
|
|
|
6855
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6855
|
+
var Wrapper$5 = newStyled.div(templateObject_1$u || (templateObject_1$u = __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) {
|
|
6856
6856
|
var position = _a.position;
|
|
6857
6857
|
return getWrapperFlexDirection(position);
|
|
6858
6858
|
});
|
|
@@ -6876,7 +6876,7 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
6876
6876
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6877
6877
|
return actual === expected ? margin : '0';
|
|
6878
6878
|
};
|
|
6879
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
6879
|
+
var ContentWrapper = newStyled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: #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) {
|
|
6880
6880
|
var borderColor = _a.borderColor;
|
|
6881
6881
|
return borderColor;
|
|
6882
6882
|
});
|
|
@@ -6900,7 +6900,7 @@ var Title$3 = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTem
|
|
|
6900
6900
|
return color;
|
|
6901
6901
|
});
|
|
6902
6902
|
var IconContainer$3 = 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"])));
|
|
6903
|
-
var templateObject_1$
|
|
6903
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
6904
6904
|
|
|
6905
6905
|
var Tooltip = function (_a) {
|
|
6906
6906
|
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;
|
|
@@ -6965,7 +6965,7 @@ var AccordionControlButton = function (_a) {
|
|
|
6965
6965
|
}, disabled: disabled, className: className }, { children: [children, controlIcon] }), void 0));
|
|
6966
6966
|
};
|
|
6967
6967
|
|
|
6968
|
-
var Container$
|
|
6968
|
+
var Container$i = newStyled(Accordion$1)(function (props) { return ({
|
|
6969
6969
|
border: "1px solid " + props.theme.shades.gray100,
|
|
6970
6970
|
padding: '1.25rem 2rem',
|
|
6971
6971
|
}); });
|
|
@@ -6987,14 +6987,14 @@ var Panel$1 = newStyled(Accordion$1.Panel)(function () { return ({
|
|
|
6987
6987
|
var AccordionBox = function (_a) {
|
|
6988
6988
|
var title = _a.title, text = _a.text, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
6989
6989
|
var theme = useTheme();
|
|
6990
|
-
return (jsxRuntime.jsx(Container$
|
|
6990
|
+
return (jsxRuntime.jsx(Container$i, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
|
|
6991
6991
|
var open = _a.open;
|
|
6992
6992
|
var showPanel = open && !disabled;
|
|
6993
6993
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button$2, __assign({ disabled: disabled, open: open, openIcon: jsxRuntime.jsx(Icon.PDP.Plus, { width: 1.5, height: 1.5, title: "plus icon", fill: theme.shades.gray700 }, void 0), closeIcon: jsxRuntime.jsx(Icon.PDP.Minus, { width: 1.5, height: 1.5, title: "minus icon", fill: theme.shades.gray700 }, void 0) }, { children: title }), void 0), showPanel && jsxRuntime.jsx(Panel$1, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
|
|
6994
6994
|
} }), void 0));
|
|
6995
6995
|
};
|
|
6996
6996
|
|
|
6997
|
-
var Container$
|
|
6997
|
+
var Container$h = newStyled(Accordion$1)(function (props) { return ({
|
|
6998
6998
|
borderTop: "1px solid " + props.theme.shades.gray100,
|
|
6999
6999
|
padding: '0.625rem 0',
|
|
7000
7000
|
}); });
|
|
@@ -7011,14 +7011,14 @@ var Panel = newStyled(Accordion$1.Panel)(function () { return ({
|
|
|
7011
7011
|
var AccordionIcon = function (_a) {
|
|
7012
7012
|
var title = _a.title, text = _a.text, leadingIcon = _a.leadingIcon, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
7013
7013
|
var theme = useTheme();
|
|
7014
|
-
return (jsxRuntime.jsx(Container$
|
|
7014
|
+
return (jsxRuntime.jsx(Container$h, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
|
|
7015
7015
|
var open = _a.open;
|
|
7016
7016
|
var showPanel = open && !disabled;
|
|
7017
7017
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button$1, __assign({ open: open, openIcon: jsxRuntime.jsx(Icon.PDP.Plus, { width: 1, height: 1, title: "plus icon", fill: theme.shades.gray700 }, void 0), closeIcon: jsxRuntime.jsx(Icon.PDP.Minus, { width: 1, height: 1, title: "minus icon", fill: theme.shades.gray700 }, void 0), disabled: disabled }, { children: jsxRuntime.jsxs("span", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [leadingIcon, title] }), void 0) }), void 0), showPanel && jsxRuntime.jsx(Panel, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
|
|
7018
7018
|
} }), void 0));
|
|
7019
7019
|
};
|
|
7020
7020
|
|
|
7021
|
-
var getStylesBySize$
|
|
7021
|
+
var getStylesBySize$5 = function (size) {
|
|
7022
7022
|
switch (size) {
|
|
7023
7023
|
case exports.ComponentSize.Large:
|
|
7024
7024
|
return {
|
|
@@ -7073,37 +7073,37 @@ var getStylesBySize$4 = function (size) {
|
|
|
7073
7073
|
};
|
|
7074
7074
|
}
|
|
7075
7075
|
};
|
|
7076
|
-
var Container$
|
|
7077
|
-
var CustomCheckbox = newStyled.div(templateObject_2$
|
|
7076
|
+
var Container$g = newStyled.div(templateObject_1$t || (templateObject_1$t = __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"])));
|
|
7077
|
+
var CustomCheckbox = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n border: 0.094rem solid ", ";\n width: ", ";\n height: ", ";\n border-radius: ", ";\n margin-right: ", ";\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: ", ";\n height: ", ";\n }\n"], ["\n border: 0.094rem solid ", ";\n width: ", ";\n height: ", ";\n border-radius: ", ";\n margin-right: ", ";\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
7078
7078
|
var color = _a.color;
|
|
7079
7079
|
return color;
|
|
7080
7080
|
}, function (_a) {
|
|
7081
7081
|
var _b, _c;
|
|
7082
7082
|
var size = _a.size;
|
|
7083
|
-
return (_c = (_b = getStylesBySize$
|
|
7083
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.width;
|
|
7084
7084
|
}, function (_a) {
|
|
7085
7085
|
var _b, _c;
|
|
7086
7086
|
var size = _a.size;
|
|
7087
|
-
return (_c = (_b = getStylesBySize$
|
|
7087
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.height;
|
|
7088
7088
|
}, function (_a) {
|
|
7089
7089
|
var _b, _c;
|
|
7090
7090
|
var size = _a.size;
|
|
7091
|
-
return (_c = (_b = getStylesBySize$
|
|
7091
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.borderRadius;
|
|
7092
7092
|
}, function (_a) {
|
|
7093
7093
|
var _b, _c;
|
|
7094
7094
|
var size = _a.size;
|
|
7095
|
-
return (_c = (_b = getStylesBySize$
|
|
7095
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.marginRight;
|
|
7096
7096
|
}, function (_a) {
|
|
7097
7097
|
var isChecked = _a.isChecked, color = _a.color;
|
|
7098
7098
|
return (isChecked ? color : '#fff');
|
|
7099
7099
|
}, function (_a) {
|
|
7100
7100
|
var _b, _c;
|
|
7101
7101
|
var size = _a.size;
|
|
7102
|
-
return (_c = (_b = getStylesBySize$
|
|
7102
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.width;
|
|
7103
7103
|
}, function (_a) {
|
|
7104
7104
|
var _b, _c;
|
|
7105
7105
|
var size = _a.size;
|
|
7106
|
-
return (_c = (_b = getStylesBySize$
|
|
7106
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.height;
|
|
7107
7107
|
});
|
|
7108
7108
|
var Input$2 = newStyled.input(templateObject_3$e || (templateObject_3$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) {
|
|
7109
7109
|
var disabled = _a.disabled;
|
|
@@ -7112,11 +7112,11 @@ var Input$2 = newStyled.input(templateObject_3$e || (templateObject_3$e = __make
|
|
|
7112
7112
|
var Text$4 = newStyled.label(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n"], ["\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n"])), function (_a) {
|
|
7113
7113
|
var _b, _c;
|
|
7114
7114
|
var size = _a.size;
|
|
7115
|
-
return (_c = (_b = getStylesBySize$
|
|
7115
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
7116
7116
|
}, function (_a) {
|
|
7117
7117
|
var _b, _c;
|
|
7118
7118
|
var size = _a.size;
|
|
7119
|
-
return (_c = (_b = getStylesBySize$
|
|
7119
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.lineHeight;
|
|
7120
7120
|
}, function (_a) {
|
|
7121
7121
|
var color = _a.color;
|
|
7122
7122
|
return color;
|
|
@@ -7134,11 +7134,11 @@ var Checkbox = function (_a) {
|
|
|
7134
7134
|
return !checked;
|
|
7135
7135
|
});
|
|
7136
7136
|
};
|
|
7137
|
-
return (jsxRuntime.jsxs(Container$
|
|
7137
|
+
return (jsxRuntime.jsxs(Container$g, __assign({ disabled: disabled }, { children: [jsxRuntime.jsx(Input$2, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: disabled ? function () { } : handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.shades.gray250 : theme.shades.gray700, "data-testid": "checkbox" }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Text$4, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.shades.gray250 : theme.shades.gray700, "data-testid": "checkbox-text", htmlFor: id }, { children: text }), void 0)] }), void 0));
|
|
7138
7138
|
};
|
|
7139
|
-
var templateObject_1$
|
|
7139
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$e, templateObject_4$a;
|
|
7140
7140
|
|
|
7141
|
-
var getStylesBySize$
|
|
7141
|
+
var getStylesBySize$4 = function (size) {
|
|
7142
7142
|
switch (size) {
|
|
7143
7143
|
case exports.ComponentSize.Large:
|
|
7144
7144
|
return {
|
|
@@ -7181,15 +7181,15 @@ var getStylesBySize$3 = function (size) {
|
|
|
7181
7181
|
};
|
|
7182
7182
|
}
|
|
7183
7183
|
};
|
|
7184
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7185
|
-
var Container$
|
|
7184
|
+
var Wrapper$4 = newStyled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
7185
|
+
var Container$f = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n position: relative;\n height: ", ";\n width: ", ";\n"], ["\n position: relative;\n height: ", ";\n width: ", ";\n"])), function (_a) {
|
|
7186
7186
|
var _b;
|
|
7187
7187
|
var size = _a.size;
|
|
7188
|
-
return (_b = getStylesBySize$
|
|
7188
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.container;
|
|
7189
7189
|
}, function (_a) {
|
|
7190
7190
|
var _b;
|
|
7191
7191
|
var size = _a.size;
|
|
7192
|
-
return (_b = getStylesBySize$
|
|
7192
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.container;
|
|
7193
7193
|
});
|
|
7194
7194
|
var Input$1 = newStyled.input(templateObject_3$d || (templateObject_3$d = __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) {
|
|
7195
7195
|
var disabled = _a.disabled;
|
|
@@ -7198,7 +7198,7 @@ var Input$1 = newStyled.input(templateObject_3$d || (templateObject_3$d = __make
|
|
|
7198
7198
|
var CustomRadio = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __makeTemplateObject(["\n border: ", " solid\n ", ";\n border-radius: 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n border: ", " solid\n ", ";\n border-radius: 50%;\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
|
|
7199
7199
|
var _b;
|
|
7200
7200
|
var size = _a.size;
|
|
7201
|
-
return (_b = getStylesBySize$
|
|
7201
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input.borderSize;
|
|
7202
7202
|
}, function (_a) {
|
|
7203
7203
|
var disabled = _a.disabled, color = _a.color, disabledColor = _a.disabledColor;
|
|
7204
7204
|
return (disabled ? disabledColor : color);
|
|
@@ -7209,24 +7209,24 @@ var CustomRadio = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __ma
|
|
|
7209
7209
|
var CustomRadioCheck = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n border-radius: 50%;\n height: ", ";\n width: ", ";\n background-color: #fff;\n"], ["\n border-radius: 50%;\n height: ", ";\n width: ", ";\n background-color: #fff;\n"])), function (_a) {
|
|
7210
7210
|
var _b;
|
|
7211
7211
|
var size = _a.size;
|
|
7212
|
-
return (_b = getStylesBySize$
|
|
7212
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.check;
|
|
7213
7213
|
}, function (_a) {
|
|
7214
7214
|
var _b;
|
|
7215
7215
|
var size = _a.size;
|
|
7216
|
-
return (_b = getStylesBySize$
|
|
7216
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.check;
|
|
7217
7217
|
});
|
|
7218
7218
|
var Text$3 = newStyled.label(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n margin-left: ", ";\n font-weight: 400;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n"], ["\n margin-left: ", ";\n font-weight: 400;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n"])), function (_a) {
|
|
7219
7219
|
var _b;
|
|
7220
7220
|
var size = _a.size;
|
|
7221
|
-
return (_b = getStylesBySize$
|
|
7221
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text.marginLeft;
|
|
7222
7222
|
}, function (_a) {
|
|
7223
7223
|
var _b;
|
|
7224
7224
|
var size = _a.size;
|
|
7225
|
-
return (_b = getStylesBySize$
|
|
7225
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text.fontSize;
|
|
7226
7226
|
}, function (_a) {
|
|
7227
7227
|
var _b;
|
|
7228
7228
|
var size = _a.size;
|
|
7229
|
-
return (_b = getStylesBySize$
|
|
7229
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text.lineHeight;
|
|
7230
7230
|
}, function (_a) {
|
|
7231
7231
|
var disabled = _a.disabled, color = _a.color, disabledColor = _a.disabledColor;
|
|
7232
7232
|
return (disabled ? disabledColor : color);
|
|
@@ -7238,9 +7238,9 @@ var RadioInput = function (_a) {
|
|
|
7238
7238
|
var value = event.currentTarget.value;
|
|
7239
7239
|
onChange({ value: value, label: label });
|
|
7240
7240
|
};
|
|
7241
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$
|
|
7241
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$f, __assign({ size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$1, { id: name + "-" + 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, __assign({ size: size, isChecked: checked, disabled: disabled, color: theme.shades.gray700, disabledColor: theme.shades.gray250, "data-testid": "custom-radio" }, { children: checked && jsxRuntime.jsx(CustomRadioCheck, { size: size, "data-testid": "check" }, void 0) }), void 0)] }), void 0), jsxRuntime.jsx(Text$3, __assign({ size: size, disabled: disabled, color: theme.shades.gray700, disabledColor: theme.shades.gray250, "data-testid": "label", htmlFor: name + "-" + id }, { children: label }), void 0)] }, void 0));
|
|
7242
7242
|
};
|
|
7243
|
-
var templateObject_1$
|
|
7243
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$d, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
7244
7244
|
|
|
7245
7245
|
var RadioGroupInput = function (_a) {
|
|
7246
7246
|
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;
|
|
@@ -7254,8 +7254,8 @@ var RadioGroupInput = function (_a) {
|
|
|
7254
7254
|
}) }), void 0));
|
|
7255
7255
|
};
|
|
7256
7256
|
|
|
7257
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
7258
|
-
var Container$
|
|
7257
|
+
var Wrapper$3 = newStyled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7258
|
+
var Container$e = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
7259
7259
|
var Text$2 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __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) {
|
|
7260
7260
|
var color = _a.color;
|
|
7261
7261
|
return color;
|
|
@@ -7269,34 +7269,34 @@ var Text$2 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __makeTemp
|
|
|
7269
7269
|
var Minimalistic = function (_a) {
|
|
7270
7270
|
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;
|
|
7271
7271
|
var theme = useTheme();
|
|
7272
|
-
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$
|
|
7272
|
+
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$e, __assign({ "data-testid": "TopSection" }, { children: [jsxRuntime.jsx(Text$2, __assign({ color: theme.palette.secondary.default, 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$e, __assign({ "data-testid": "BottomSection" }, { children: [jsxRuntime.jsxs(Text$2, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxRuntime.jsxs(Text$2, __assign({ color: theme.palette.secondary.default }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7273
7273
|
};
|
|
7274
|
-
var templateObject_1$
|
|
7274
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$c;
|
|
7275
7275
|
|
|
7276
|
-
var Container$
|
|
7277
|
-
var Title$2 = newStyled.h1(templateObject_2$
|
|
7276
|
+
var Container$d = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7277
|
+
var Title$2 = newStyled.h1(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"], ["\n font-weight: 700;\n font-size: 1rem;\n line-height: 1.25rem;\n color: ", ";\n margin: 0;\n margin-bottom: 0.125rem;\n text-align: center;\n"])), function (props) { return props.color; });
|
|
7278
7278
|
var Details$1 = newStyled.span(templateObject_3$b || (templateObject_3$b = __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; });
|
|
7279
7279
|
var PriceContainer$1 = newStyled.span(templateObject_4$8 || (templateObject_4$8 = __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"])));
|
|
7280
7280
|
var Simple = function (_a) {
|
|
7281
7281
|
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;
|
|
7282
7282
|
var theme = useTheme();
|
|
7283
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$
|
|
7283
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(Title$2, __assign({ color: theme.palette.secondary.default, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign({ color: theme.palette.secondary.default, "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));
|
|
7284
7284
|
};
|
|
7285
|
-
var templateObject_1$
|
|
7285
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$b, templateObject_4$8;
|
|
7286
7286
|
|
|
7287
7287
|
var Bundle = {
|
|
7288
7288
|
Minimalistic: Minimalistic,
|
|
7289
7289
|
Simple: Simple,
|
|
7290
7290
|
};
|
|
7291
7291
|
|
|
7292
|
-
var Container$
|
|
7292
|
+
var Container$c = newStyled.div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
7293
7293
|
var Tag = function (_a) {
|
|
7294
7294
|
var text = _a.text, className = _a.className;
|
|
7295
|
-
return jsxRuntime.jsx(Container$
|
|
7295
|
+
return jsxRuntime.jsx(Container$c, __assign({ className: className }, { children: text }), void 0);
|
|
7296
7296
|
};
|
|
7297
|
-
var templateObject_1$
|
|
7297
|
+
var templateObject_1$p;
|
|
7298
7298
|
|
|
7299
|
-
var getStylesBySize$
|
|
7299
|
+
var getStylesBySize$3 = function (size) {
|
|
7300
7300
|
switch (size) {
|
|
7301
7301
|
case exports.ComponentSize.Large:
|
|
7302
7302
|
return {
|
|
@@ -7327,11 +7327,11 @@ var getStylesBySize$2 = function (size) {
|
|
|
7327
7327
|
var CategoryTag = function (_a) {
|
|
7328
7328
|
var text = _a.text, size = _a.size, className = _a.className;
|
|
7329
7329
|
var theme = useTheme();
|
|
7330
|
-
var stylesBySize = getStylesBySize$
|
|
7330
|
+
var stylesBySize = getStylesBySize$3(size);
|
|
7331
7331
|
return (jsx(Tag, { css: __assign({ backgroundColor: theme.shades.white, fontWeight: 600, color: theme.shades.gray700 }, stylesBySize), text: text, className: className }, void 0));
|
|
7332
7332
|
};
|
|
7333
7333
|
|
|
7334
|
-
var getStylesBySize$
|
|
7334
|
+
var getStylesBySize$2 = function (size) {
|
|
7335
7335
|
switch (size) {
|
|
7336
7336
|
case exports.ComponentSize.Large:
|
|
7337
7337
|
return {
|
|
@@ -7361,7 +7361,7 @@ var getStylesBySize$1 = function (size) {
|
|
|
7361
7361
|
};
|
|
7362
7362
|
var SeasonOfferTag = function (_a) {
|
|
7363
7363
|
var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#C64844' : _b, size = _a.size, className = _a.className;
|
|
7364
|
-
var stylesBySize = getStylesBySize$
|
|
7364
|
+
var stylesBySize = getStylesBySize$2(size);
|
|
7365
7365
|
return (jsx(Tag, { css: __assign({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF' }, stylesBySize), text: text, className: className }, void 0));
|
|
7366
7366
|
};
|
|
7367
7367
|
|
|
@@ -7395,11 +7395,11 @@ var Timer = function (_a) {
|
|
|
7395
7395
|
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
|
|
7396
7396
|
};
|
|
7397
7397
|
|
|
7398
|
-
var Label = newStyled.span(templateObject_1$
|
|
7398
|
+
var Label = newStyled.span(templateObject_1$o || (templateObject_1$o = __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) {
|
|
7399
7399
|
var color = _a.color;
|
|
7400
7400
|
return color;
|
|
7401
7401
|
});
|
|
7402
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
7402
|
+
var MandatoryIcon = newStyled.span(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
7403
7403
|
var color = _a.color;
|
|
7404
7404
|
return color;
|
|
7405
7405
|
});
|
|
@@ -7408,26 +7408,26 @@ var InputLabel = function (_a) {
|
|
|
7408
7408
|
var theme = useTheme();
|
|
7409
7409
|
return (jsxRuntime.jsxs(Label, __assign({ color: isDisabled ? theme.shades.gray250 : theme.shades.gray700 }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign({ color: theme.semantic.alert }, { children: "*" }), void 0)] }), void 0));
|
|
7410
7410
|
};
|
|
7411
|
-
var templateObject_1$
|
|
7411
|
+
var templateObject_1$o, templateObject_2$h;
|
|
7412
7412
|
|
|
7413
7413
|
var isEmpty = function (value) {
|
|
7414
7414
|
return value.length === 0;
|
|
7415
7415
|
};
|
|
7416
7416
|
|
|
7417
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
7418
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
7417
|
+
var ErrorText = newStyled.h3(templateObject_1$n || (templateObject_1$n = __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; });
|
|
7418
|
+
var ErrorContainer = newStyled.div(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
7419
7419
|
var Error$1 = function (_a) {
|
|
7420
7420
|
var error = _a.error;
|
|
7421
7421
|
var theme = useTheme();
|
|
7422
7422
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.semantic.alert, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign({ color: theme.semantic.alert }, { children: error }), void 0)] }, void 0));
|
|
7423
7423
|
};
|
|
7424
|
-
var templateObject_1$
|
|
7424
|
+
var templateObject_1$n, templateObject_2$g;
|
|
7425
7425
|
|
|
7426
|
-
var Container$
|
|
7426
|
+
var Container$b = newStyled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n height: 3rem;\n input {\n border-color: ", ";\n }\n"], ["\n height: 3rem;\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
7427
7427
|
var color = _a.color;
|
|
7428
7428
|
return color;
|
|
7429
7429
|
});
|
|
7430
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
7430
|
+
var StyledInput = newStyled.input(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n padding: 0.875rem 1rem 0.625rem;\n font-size: 1rem;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n line-height: 1.5rem;\n color: ", ";\n font-weight: 400;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n"], ["\n padding: 0.875rem 1rem 0.625rem;\n font-size: 1rem;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n line-height: 1.5rem;\n color: ", ";\n font-weight: 400;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n border-color: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
7431
7431
|
var borderColor = _a.borderColor;
|
|
7432
7432
|
return borderColor;
|
|
7433
7433
|
}, function (_a) {
|
|
@@ -7453,7 +7453,7 @@ var StyledInput = newStyled.input(templateObject_2$e || (templateObject_2$e = __
|
|
|
7453
7453
|
return disabledColor;
|
|
7454
7454
|
});
|
|
7455
7455
|
var InputWrapper = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: 100%;\n"], ["\n position: relative;\n display: flex;\n height: 100%;\n"])));
|
|
7456
|
-
var templateObject_1$
|
|
7456
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$a;
|
|
7457
7457
|
|
|
7458
7458
|
var BaseInput = function (_a) {
|
|
7459
7459
|
var onChange = _a.onChange, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, rest = __rest(_a, ["onChange", "defaultValue", "label", "children", "required", "onValidation"]);
|
|
@@ -7487,15 +7487,15 @@ var BaseInput = function (_a) {
|
|
|
7487
7487
|
disabledBackgroundColor: theme.shades.gray010,
|
|
7488
7488
|
disabledColor: theme.shades.gray250,
|
|
7489
7489
|
};
|
|
7490
|
-
return (jsxRuntime.jsxs(Container$
|
|
7490
|
+
return (jsxRuntime.jsxs(Container$b, __assign({ color: status === exports.InputValidationType.Valid
|
|
7491
7491
|
? theme.shades.gray700
|
|
7492
7492
|
: status === exports.InputValidationType.Error
|
|
7493
7493
|
? theme.semantic.alert
|
|
7494
7494
|
: '' }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign({ className: "inputWrapper" }, { children: [jsxRuntime.jsx(StyledInput, __assign({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: value }, rest, styling), void 0), children] }), void 0), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
7495
7495
|
};
|
|
7496
7496
|
|
|
7497
|
-
var Container$
|
|
7498
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
7497
|
+
var Container$a = newStyled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n input {\n border-radius: 0.5rem 1rem 1rem 0.5rem;\n }\n"], ["\n input {\n border-radius: 0.5rem 1rem 1rem 0.5rem;\n }\n"])));
|
|
7498
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n width: 7.125rem;\n height: 100%;\n position: absolute;\n right: 0;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: 0 0.5rem 0.5rem 0;\n }\n"], ["\n width: 7.125rem;\n height: 100%;\n position: absolute;\n right: 0;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: 0 0.5rem 0.5rem 0;\n }\n"])));
|
|
7499
7499
|
var Custom = function (_a) {
|
|
7500
7500
|
var onClick = _a.onClick, text = _a.text, type = _a.type, rest = __rest(_a, ["onClick", "text", "type"]);
|
|
7501
7501
|
var props = {
|
|
@@ -7503,20 +7503,20 @@ var Custom = function (_a) {
|
|
|
7503
7503
|
text: text,
|
|
7504
7504
|
disabled: rest.disabled,
|
|
7505
7505
|
};
|
|
7506
|
-
return (jsxRuntime.jsx(Container$
|
|
7506
|
+
return (jsxRuntime.jsx(Container$a, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, { children: type === 'primary' ? jsxRuntime.jsx(ButtonPrimary, __assign({}, props), void 0) : jsxRuntime.jsx(ButtonSecondary, __assign({}, props), void 0) }, void 0) }), void 0) }, void 0));
|
|
7507
7507
|
};
|
|
7508
|
-
var templateObject_1$
|
|
7508
|
+
var templateObject_1$l, templateObject_2$e;
|
|
7509
7509
|
|
|
7510
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
7511
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
7510
|
+
var SuccessContainer = newStyled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n height: 3rem;\n display: flex;\n"], ["\n height: 3rem;\n display: flex;\n"])));
|
|
7511
|
+
var SuccessMessage = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n background-color: #dfefe0;\n border: 0.063rem solid #5ead63;\n border-radius: 0.5rem;\n width: 100%;\n height: 100%;\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 height: 100%;\n display: flex;\n align-items: center;\n padding: 0 1rem;\n box-sizing: border-box;\n"])));
|
|
7512
7512
|
var SuccessText = newStyled.span(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
7513
7513
|
var Success = function (_a) {
|
|
7514
7514
|
var children = _a.children, successText = _a.successText;
|
|
7515
7515
|
return (jsxRuntime.jsxs(SuccessContainer, { 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));
|
|
7516
7516
|
};
|
|
7517
|
-
var templateObject_1$
|
|
7517
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$9;
|
|
7518
7518
|
|
|
7519
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
7519
|
+
var ButtonContainer = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n margin-left: 0.625rem;\n height: 100%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: 0.5rem;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n height: 100%;\n\n button {\n width: 100%;\n height: 100%;\n border-radius: 0.5rem;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
7520
7520
|
var status = _a.status, type = _a.type;
|
|
7521
7521
|
return status === exports.InputValidationType.Empty && type === 'primary' ? '#808080' : '';
|
|
7522
7522
|
});
|
|
@@ -7527,21 +7527,21 @@ var BasePlusButton = function (_a) {
|
|
|
7527
7527
|
var Input = (jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(ButtonContainer, __assign({ status: status, type: "primary" }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
7528
7528
|
return success ? SuccessComponent : Input;
|
|
7529
7529
|
};
|
|
7530
|
-
var templateObject_1$
|
|
7530
|
+
var templateObject_1$j;
|
|
7531
7531
|
|
|
7532
|
-
var Container$
|
|
7533
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
7532
|
+
var Container$9 = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
7533
|
+
var IconContainer$2 = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n\n svg path {\n fill: ", ";\n }\n"], ["\n position: absolute;\n right: 0.875rem;\n width: 1.125rem;\n height: 100%;\n\n svg path {\n fill: ", ";\n }\n"])), function (props) { return props.color; });
|
|
7534
7534
|
var BasePlusIcon = function (_a) {
|
|
7535
7535
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7536
7536
|
var theme = useTheme();
|
|
7537
7537
|
var _b = React.useState(exports.InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7538
|
-
return (jsxRuntime.jsx(Container$
|
|
7538
|
+
return (jsxRuntime.jsx(Container$9, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(IconContainer$2, __assign({ color: status === exports.InputValidationType.Valid
|
|
7539
7539
|
? theme.shades.gray700
|
|
7540
7540
|
: status === exports.InputValidationType.Error
|
|
7541
7541
|
? theme.semantic.alert
|
|
7542
7542
|
: '' }, { children: React.createElement(Icon, { fill: theme.shades.gray250 }) }), void 0) }), void 0) }, void 0));
|
|
7543
7543
|
};
|
|
7544
|
-
var templateObject_1$
|
|
7544
|
+
var templateObject_1$i, templateObject_2$c;
|
|
7545
7545
|
|
|
7546
7546
|
var Input = {
|
|
7547
7547
|
Simple: BaseInput,
|
|
@@ -7555,7 +7555,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
|
|
|
7555
7555
|
Input: Input
|
|
7556
7556
|
});
|
|
7557
7557
|
|
|
7558
|
-
var Container$
|
|
7558
|
+
var Container$8 = newStyled.div(templateObject_1$h || (templateObject_1$h = __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) {
|
|
7559
7559
|
var width = _a.width;
|
|
7560
7560
|
return width;
|
|
7561
7561
|
}, function (_a) {
|
|
@@ -7571,11 +7571,11 @@ var Container$6 = newStyled.div(templateObject_1$f || (templateObject_1$f = __ma
|
|
|
7571
7571
|
var PaymentMethod = function (_a) {
|
|
7572
7572
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7573
7573
|
var theme = useTheme();
|
|
7574
|
-
return (jsxRuntime.jsx(Container$
|
|
7574
|
+
return (jsxRuntime.jsx(Container$8, __assign({ width: width, height: height, borderColor: theme.shades.gray100, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React.createElement(Icon) }), void 0));
|
|
7575
7575
|
};
|
|
7576
|
-
var templateObject_1$
|
|
7576
|
+
var templateObject_1$h;
|
|
7577
7577
|
|
|
7578
|
-
var Text$1 = newStyled.h3(templateObject_1$
|
|
7578
|
+
var Text$1 = newStyled.h3(templateObject_1$g || (templateObject_1$g = __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) {
|
|
7579
7579
|
var backgroundColor = _a.backgroundColor;
|
|
7580
7580
|
return backgroundColor;
|
|
7581
7581
|
}, function (_a) {
|
|
@@ -7587,25 +7587,25 @@ var OfferBanner = function (_a) {
|
|
|
7587
7587
|
var theme = useTheme();
|
|
7588
7588
|
return (jsxRuntime.jsx(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.shades.gray700, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
7589
7589
|
};
|
|
7590
|
-
var templateObject_1$
|
|
7590
|
+
var templateObject_1$g;
|
|
7591
7591
|
|
|
7592
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
7593
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
7592
|
+
var Wrapper$2 = newStyled.div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
7593
|
+
var GrandTotal = newStyled.h1(templateObject_2$b || (templateObject_2$b = __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; });
|
|
7594
7594
|
var Currency = newStyled.span(templateObject_3$8 || (templateObject_3$8 = __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"])));
|
|
7595
|
-
var Container$
|
|
7595
|
+
var Container$7 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __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; });
|
|
7596
7596
|
var Discount = newStyled.h3(templateObject_5$4 || (templateObject_5$4 = __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"])));
|
|
7597
7597
|
var Total = function (_a) {
|
|
7598
7598
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7599
7599
|
var theme = useTheme();
|
|
7600
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.shades.gray550 }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$
|
|
7600
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.shades.gray550 }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$7, __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));
|
|
7601
7601
|
};
|
|
7602
|
-
var templateObject_1$
|
|
7602
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$8, templateObject_4$7, templateObject_5$4;
|
|
7603
7603
|
|
|
7604
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
7604
|
+
var Wrapper$1 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7605
7605
|
var color = _a.color;
|
|
7606
7606
|
return color;
|
|
7607
7607
|
});
|
|
7608
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
7608
|
+
var ItemContainer = newStyled.div(templateObject_2$a || (templateObject_2$a = __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"])));
|
|
7609
7609
|
var Item$1 = newStyled.h4(templateObject_3$7 || (templateObject_3$7 = __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"])));
|
|
7610
7610
|
var CouponItem = newStyled(Item$1)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7611
7611
|
var color = _a.color;
|
|
@@ -7619,22 +7619,22 @@ var Subtotal = function (_a) {
|
|
|
7619
7619
|
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));
|
|
7620
7620
|
})] }), void 0));
|
|
7621
7621
|
};
|
|
7622
|
-
var templateObject_1$
|
|
7622
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$7, templateObject_4$6;
|
|
7623
7623
|
|
|
7624
7624
|
var Totals = {
|
|
7625
7625
|
Total: Total,
|
|
7626
7626
|
Subtotal: Subtotal,
|
|
7627
7627
|
};
|
|
7628
7628
|
|
|
7629
|
-
var Container$
|
|
7630
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
7629
|
+
var Container$6 = newStyled.div(templateObject_1$d || (templateObject_1$d = __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; });
|
|
7630
|
+
var IconContainer$1 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __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"])));
|
|
7631
7631
|
var Text = newStyled.p(templateObject_3$6 || (templateObject_3$6 = __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; });
|
|
7632
7632
|
var Details = newStyled.span(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7633
7633
|
var Note = function (_a) {
|
|
7634
7634
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7635
|
-
return (jsxRuntime.jsxs(Container$
|
|
7635
|
+
return (jsxRuntime.jsxs(Container$6, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$1, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text, __assign({ color: color }, { children: [jsxRuntime.jsxs(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7636
7636
|
};
|
|
7637
|
-
var templateObject_1$
|
|
7637
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$6, templateObject_4$5;
|
|
7638
7638
|
|
|
7639
7639
|
var Breakpoints = {
|
|
7640
7640
|
desktop: 1200,
|
|
@@ -7664,8 +7664,8 @@ var useWindowDimensions = function () {
|
|
|
7664
7664
|
};
|
|
7665
7665
|
};
|
|
7666
7666
|
|
|
7667
|
-
var Title$1 = newStyled.h1(templateObject_1$
|
|
7668
|
-
var Line = newStyled.div(templateObject_2$
|
|
7667
|
+
var Title$1 = newStyled.h1(templateObject_1$c || (templateObject_1$c = __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; });
|
|
7668
|
+
var Line = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __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; });
|
|
7669
7669
|
var Row$1 = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n flex-direction: ", ";\n justify-content: space-between;\n align-items: flex-start;\n"])), function (props) { return (props.isMobile ? 'column' : 'row'); });
|
|
7670
7670
|
var Col$1 = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n flex: 1;\n margin: 0 1.25rem;\n\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n flex: 1;\n margin: 0 1.25rem;\n\n ", "\n"])), function (props) {
|
|
7671
7671
|
return props.isMobile &&
|
|
@@ -7684,28 +7684,28 @@ var DeliveryDetails = function (_a) {
|
|
|
7684
7684
|
var isMobile = useWindowDimensions().isMobile;
|
|
7685
7685
|
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$1, __assign({ color: theme.palette.secondary.default }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.shades.gray100 }, void 0), note && jsxRuntime.jsx(Note, __assign({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign({ isMobile: isMobile, "data-testid": "DD-row" }, { children: [jsxRuntime.jsxs(Col$1, __assign({ isMobile: isMobile }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsxRuntime.jsx(IconContainer, __assign({ isMobile: isMobile }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign({ isMobile: isMobile }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsxRuntime.jsx(IconContainer, __assign({ isMobile: isMobile }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign({ isMobile: isMobile }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsxRuntime.jsx(IconContainer, __assign({ isMobile: isMobile }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: instantOrderUpdate.details }), void 0), jsxRuntime.jsxs(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.shades.gray150 }, { 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));
|
|
7686
7686
|
};
|
|
7687
|
-
var templateObject_1$
|
|
7687
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7688
7688
|
|
|
7689
|
-
var Container$
|
|
7690
|
-
var H1$
|
|
7689
|
+
var Container$5 = newStyled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
7690
|
+
var H1$2 = newStyled.h1(templateObject_2$7 || (templateObject_2$7 = __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; });
|
|
7691
7691
|
var ScrollToTop = function (_a) {
|
|
7692
7692
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7693
7693
|
var theme = useTheme();
|
|
7694
|
-
return (jsxRuntime.jsxs(Container$
|
|
7694
|
+
return (jsxRuntime.jsxs(Container$5, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(H1$2, __assign({ color: theme.shades.gray700 }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.palette.primary.default }, void 0)] }), void 0));
|
|
7695
7695
|
};
|
|
7696
|
-
var templateObject_1$
|
|
7696
|
+
var templateObject_1$b, templateObject_2$7;
|
|
7697
7697
|
|
|
7698
|
-
var Container$
|
|
7699
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
7698
|
+
var Container$4 = newStyled.div(templateObject_1$a || (templateObject_1$a = __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"])));
|
|
7699
|
+
var H1$1 = newStyled.h1(templateObject_2$6 || (templateObject_2$6 = __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; });
|
|
7700
7700
|
var OrderBar = function (_a) {
|
|
7701
7701
|
var message = _a.message;
|
|
7702
7702
|
var theme = useTheme();
|
|
7703
|
-
return (jsxRuntime.jsxs(Container$
|
|
7703
|
+
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1$1, __assign({ color: theme.shades.gray700 }, { children: message }), void 0)] }, void 0));
|
|
7704
7704
|
};
|
|
7705
|
-
var templateObject_1$
|
|
7705
|
+
var templateObject_1$a, templateObject_2$6;
|
|
7706
7706
|
|
|
7707
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
7708
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
7707
|
+
var TableElement = newStyled.table(templateObject_1$9 || (templateObject_1$9 = __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; });
|
|
7708
|
+
var TableCell = newStyled.td(templateObject_2$5 || (templateObject_2$5 = __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; });
|
|
7709
7709
|
var TableHead = newStyled.th(templateObject_3$4 || (templateObject_3$4 = __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; });
|
|
7710
7710
|
var TableRow = newStyled.tr(templateObject_4$3 || (templateObject_4$3 = __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; });
|
|
7711
7711
|
var SizeTable = function (_a) {
|
|
@@ -7713,7 +7713,7 @@ var SizeTable = function (_a) {
|
|
|
7713
7713
|
var theme = useTheme();
|
|
7714
7714
|
return (jsxRuntime.jsxs(TableElement, __assign({ color: theme.shades.gray700, borderColor: theme.shades.gray100 }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign({ backgroundColor: theme.shades.gray010 }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign({ borderColor: theme.shades.gray100 }, { 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.shades.gray010 }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign({ borderColor: theme.shades.gray100 }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
7715
7715
|
};
|
|
7716
|
-
var templateObject_1$
|
|
7716
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$4, templateObject_4$3;
|
|
7717
7717
|
|
|
7718
7718
|
/* eslint-disable no-param-reassign */
|
|
7719
7719
|
var index$2 = function (breakpoints) {
|
|
@@ -7801,15 +7801,15 @@ var breakpoints = {
|
|
|
7801
7801
|
};
|
|
7802
7802
|
var mediaQueries = index$2(Object.values(breakpoints).map(function (bp) { return "@media (min-width: " + bp + "px)"; }));
|
|
7803
7803
|
|
|
7804
|
-
var Img = newStyled.img(templateObject_1$
|
|
7804
|
+
var Img = newStyled.img(templateObject_1$8 || (templateObject_1$8 = __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; });
|
|
7805
7805
|
var Image = function (_a) {
|
|
7806
7806
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition;
|
|
7807
7807
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, void 0));
|
|
7808
7808
|
};
|
|
7809
|
-
var templateObject_1$
|
|
7809
|
+
var templateObject_1$8;
|
|
7810
7810
|
|
|
7811
|
-
var Container$
|
|
7812
|
-
var DescriptionContainer = newStyled.div(templateObject_2$
|
|
7811
|
+
var Container$3 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
7812
|
+
var DescriptionContainer = newStyled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), mediaQueries({
|
|
7813
7813
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
7814
7814
|
}));
|
|
7815
7815
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -7843,9 +7843,9 @@ var PriceContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = _
|
|
|
7843
7843
|
var SimpleOrderItem = function (_a) {
|
|
7844
7844
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag;
|
|
7845
7845
|
var theme = useTheme();
|
|
7846
|
-
return (jsxRuntime.jsxs(Container$
|
|
7846
|
+
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign({ "data-testid": "order-item-description-container" }, { children: [jsxRuntime.jsx(Title, __assign({ color: theme.shades.gray700 }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign({ color: theme.shades.gray700 }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag }, { 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.shades.gray700, size: exports.ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
7847
7847
|
};
|
|
7848
|
-
var templateObject_1$
|
|
7848
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$3;
|
|
7849
7849
|
|
|
7850
7850
|
function formatDate(date) {
|
|
7851
7851
|
var day = date.getDate();
|
|
@@ -7854,8 +7854,8 @@ function formatDate(date) {
|
|
|
7854
7854
|
return month < 10 ? day + "/0" + month + "/" + year : day + "/" + month + "/" + year;
|
|
7855
7855
|
}
|
|
7856
7856
|
|
|
7857
|
-
var Container = newStyled.div(templateObject_1$
|
|
7858
|
-
var Heading = newStyled.div(templateObject_2$
|
|
7857
|
+
var Container$2 = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
7858
|
+
var Heading = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __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"])), mediaQueries({
|
|
7859
7859
|
fontSize: ['14px', '16px'],
|
|
7860
7860
|
lineHeight: ['22px', '24px'],
|
|
7861
7861
|
}));
|
|
@@ -7878,9 +7878,9 @@ var H3$1 = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTempla
|
|
|
7878
7878
|
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"])));
|
|
7879
7879
|
var Review = function (_a) {
|
|
7880
7880
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
7881
|
-
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(H2, { 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" }, { children: [jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(H3$1, { children: title }, void 0), jsxRuntime.jsx(P, { 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));
|
|
7881
|
+
return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsxs(Heading, { children: [jsxRuntime.jsx(H2, { 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" }, { children: [jsxRuntime.jsxs(ReviewContainer, { children: [jsxRuntime.jsx(H3$1, { children: title }, void 0), jsxRuntime.jsx(P, { 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));
|
|
7882
7882
|
};
|
|
7883
|
-
var templateObject_1$
|
|
7883
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
7884
7884
|
|
|
7885
7885
|
var Button = newStyled.button(function () { return ({
|
|
7886
7886
|
background: 'transparent',
|
|
@@ -12133,16 +12133,16 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12133
12133
|
return Slider;
|
|
12134
12134
|
}(React__default['default'].Component);
|
|
12135
12135
|
|
|
12136
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12136
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$5 || (templateObject_1$5 = __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 props.dotsSpacing + "rem"; }, function (props) { return props.dotListMarginTop + "rem"; }, function (_a) {
|
|
12137
12137
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12138
12138
|
return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
|
|
12139
12139
|
}, function (_a) {
|
|
12140
12140
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12141
12141
|
return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
|
|
12142
12142
|
});
|
|
12143
|
-
var templateObject_1$
|
|
12143
|
+
var templateObject_1$5;
|
|
12144
12144
|
|
|
12145
|
-
var getStylesBySize = function (size) {
|
|
12145
|
+
var getStylesBySize$1 = function (size) {
|
|
12146
12146
|
// rem units
|
|
12147
12147
|
switch (size) {
|
|
12148
12148
|
case exports.ComponentSize.Large:
|
|
@@ -12174,7 +12174,7 @@ var getStylesBySize = function (size) {
|
|
|
12174
12174
|
var SliderNavigation = function (_a) {
|
|
12175
12175
|
var children = _a.children, infinite = _a.infinite, arrows = _a.arrows, adaptiveHeight = _a.adaptiveHeight, dotsSize = _a.dotsSize, dotListMarginTop = _a.dotListMarginTop, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;
|
|
12176
12176
|
var _c = React.useState(0), activeIndex = _c[0], setActiveIndex = _c[1];
|
|
12177
|
-
var styles = getStylesBySize(dotsSize);
|
|
12177
|
+
var styles = getStylesBySize$1(dotsSize);
|
|
12178
12178
|
var theme = useTheme();
|
|
12179
12179
|
var nextArrow = arrows && (jsx(ArrowButton, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
12180
12180
|
var prevArrow = arrows && (jsx(ArrowButton, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
@@ -12196,13 +12196,13 @@ var SliderNavigation = function (_a) {
|
|
|
12196
12196
|
return (jsx("div", __assign({ css: { padding: arrows ? "0 " + (arrows.arrowWidth + arrows.arrowPadding) + "rem" : 0 } }, { 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));
|
|
12197
12197
|
};
|
|
12198
12198
|
|
|
12199
|
-
var List = newStyled.ul(templateObject_1$
|
|
12200
|
-
var Item = newStyled.li(templateObject_2$
|
|
12199
|
+
var List = newStyled.ul(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12200
|
+
var Item = newStyled.li(templateObject_2$2 || (templateObject_2$2 = __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"])));
|
|
12201
12201
|
var DropdownWrapper = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __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"])));
|
|
12202
12202
|
var ArrowContainer = newStyled.div(templateObject_4$1 || (templateObject_4$1 = __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"])));
|
|
12203
12203
|
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; });
|
|
12204
12204
|
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; });
|
|
12205
|
-
var templateObject_1$
|
|
12205
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
|
|
12206
12206
|
|
|
12207
12207
|
var DropdownListIcons = function (_a) {
|
|
12208
12208
|
var items = _a.items;
|
|
@@ -12215,7 +12215,7 @@ var Dropdown = function (_a) {
|
|
|
12215
12215
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.shades.gray200, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign({ borderColor: theme.shades.gray200 }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign({ onClick: item.callback, borderColor: theme.shades.gray200, color: theme.shades.gray550, hoverColor: theme.shades.gray010 }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
12216
12216
|
};
|
|
12217
12217
|
|
|
12218
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12218
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$3 || (templateObject_1$3 = __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; });
|
|
12219
12219
|
var AmazonButton = function (_a) {
|
|
12220
12220
|
var onClick = _a.onClick;
|
|
12221
12221
|
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));
|
|
@@ -12224,7 +12224,7 @@ var PaypalButton = function (_a) {
|
|
|
12224
12224
|
var onClick = _a.onClick;
|
|
12225
12225
|
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));
|
|
12226
12226
|
};
|
|
12227
|
-
var templateObject_1$
|
|
12227
|
+
var templateObject_1$3;
|
|
12228
12228
|
|
|
12229
12229
|
var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
|
|
12230
12230
|
__proto__: null,
|
|
@@ -12232,8 +12232,8 @@ var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
|
|
|
12232
12232
|
PaypalButton: PaypalButton
|
|
12233
12233
|
});
|
|
12234
12234
|
|
|
12235
|
-
var Wrapper = newStyled.div(templateObject_1 || (templateObject_1 = __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'); });
|
|
12236
|
-
var Col = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12235
|
+
var Wrapper = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __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'); });
|
|
12236
|
+
var Col = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12237
12237
|
var Row = newStyled.div(templateObject_3 || (templateObject_3 = __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) {
|
|
12238
12238
|
return props.rightToLeft &&
|
|
12239
12239
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
@@ -12246,13 +12246,68 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12246
12246
|
var theme = useTheme();
|
|
12247
12247
|
return (jsxRuntime.jsxs(Wrapper, __assign({ backgroundColor: theme.shades.gray010, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small }, 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.shades.gray700 }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign({ color: theme.semantic.alert }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign({ color: theme.shades.gray700 }, { children: [" + ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12248
12248
|
};
|
|
12249
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
12249
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
12250
12250
|
|
|
12251
12251
|
var index = /*#__PURE__*/Object.freeze({
|
|
12252
12252
|
__proto__: null,
|
|
12253
12253
|
CrossSellCheckbox: CrossSellCheckbox
|
|
12254
12254
|
});
|
|
12255
12255
|
|
|
12256
|
+
var ImageContainer = newStyled.div(function (_a) {
|
|
12257
|
+
var width = _a.width, height = _a.height;
|
|
12258
|
+
return ({
|
|
12259
|
+
position: 'relative',
|
|
12260
|
+
width: width,
|
|
12261
|
+
height: height,
|
|
12262
|
+
});
|
|
12263
|
+
});
|
|
12264
|
+
var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __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"])));
|
|
12265
|
+
var H1 = newStyled.h1(templateObject_2 || (templateObject_2 = __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.palette.secondary.default; }, function (props) { return props.align; });
|
|
12266
|
+
var getStylesBySize = function (size) {
|
|
12267
|
+
switch (size) {
|
|
12268
|
+
case exports.ComponentSize.Medium:
|
|
12269
|
+
return {
|
|
12270
|
+
width: '10.75rem',
|
|
12271
|
+
height: '14.375rem',
|
|
12272
|
+
};
|
|
12273
|
+
case exports.ComponentSize.Small:
|
|
12274
|
+
return {
|
|
12275
|
+
width: '9.813rem',
|
|
12276
|
+
height: '13.125rem',
|
|
12277
|
+
};
|
|
12278
|
+
/* istanbul ignore next */
|
|
12279
|
+
default:
|
|
12280
|
+
return {
|
|
12281
|
+
width: '10.75rem',
|
|
12282
|
+
height: '14.375rem',
|
|
12283
|
+
};
|
|
12284
|
+
}
|
|
12285
|
+
};
|
|
12286
|
+
var ProductItemMobile = function (_a) {
|
|
12287
|
+
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;
|
|
12288
|
+
var theme = useTheme();
|
|
12289
|
+
var styles = getStylesBySize(size);
|
|
12290
|
+
return (jsxs(Container$1, { 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));
|
|
12291
|
+
};
|
|
12292
|
+
var templateObject_1$1, templateObject_2;
|
|
12293
|
+
|
|
12294
|
+
var Container = newStyled.div(templateObject_1 || (templateObject_1 = __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"])));
|
|
12295
|
+
function withProductGrid(ProductItemComponent, data) {
|
|
12296
|
+
function WithProductGrid(props) {
|
|
12297
|
+
return (jsxRuntime.jsx(Container, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
|
|
12298
|
+
}
|
|
12299
|
+
/* istanbul ignore next */
|
|
12300
|
+
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12301
|
+
WithProductGrid.displayName = "withGrid(" + wrappedComponentName + ")";
|
|
12302
|
+
return WithProductGrid;
|
|
12303
|
+
}
|
|
12304
|
+
var templateObject_1;
|
|
12305
|
+
|
|
12306
|
+
var Collection = {
|
|
12307
|
+
ProductItemMobile: ProductItemMobile,
|
|
12308
|
+
withProductGrid: withProductGrid,
|
|
12309
|
+
};
|
|
12310
|
+
|
|
12256
12311
|
exports.Accordion = Accordion$1;
|
|
12257
12312
|
exports.AccordionBox = AccordionBox;
|
|
12258
12313
|
exports.AccordionIcon = AccordionIcon;
|
|
@@ -12264,6 +12319,7 @@ exports.ButtonSecondaryOutline = ButtonSecondaryOutline;
|
|
|
12264
12319
|
exports.Card = Card$1;
|
|
12265
12320
|
exports.CategoryTag = CategoryTag;
|
|
12266
12321
|
exports.Checkbox = Checkbox;
|
|
12322
|
+
exports.Collection = Collection;
|
|
12267
12323
|
exports.CrossSell = index;
|
|
12268
12324
|
exports.DeliveryDetails = DeliveryDetails;
|
|
12269
12325
|
exports.DiscountTag = DiscountTag;
|