@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.esm.js
CHANGED
|
@@ -3500,7 +3500,7 @@ var InputValidationType;
|
|
|
3500
3500
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3501
3501
|
})(InputValidationType || (InputValidationType = {}));
|
|
3502
3502
|
|
|
3503
|
-
var Section = newStyled.div(templateObject_1$
|
|
3503
|
+
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) {
|
|
3504
3504
|
return props.type === CardSectionType.Header ? '0.5rem 1.5rem 0' : '0 1.5rem 0.5rem';
|
|
3505
3505
|
});
|
|
3506
3506
|
var CardHeader = function (_a) {
|
|
@@ -3511,16 +3511,16 @@ var CardFooter = function (_a) {
|
|
|
3511
3511
|
var children = _a.children;
|
|
3512
3512
|
return (jsx$1(Section, __assign({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
3513
3513
|
};
|
|
3514
|
-
var templateObject_1$
|
|
3514
|
+
var templateObject_1$M;
|
|
3515
3515
|
|
|
3516
|
-
var Body = newStyled.div(templateObject_1$
|
|
3516
|
+
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"])));
|
|
3517
3517
|
var CardBody = function (_a) {
|
|
3518
3518
|
var children = _a.children;
|
|
3519
3519
|
return jsx$1(Body, { children: children }, void 0);
|
|
3520
3520
|
};
|
|
3521
|
-
var templateObject_1$
|
|
3521
|
+
var templateObject_1$L;
|
|
3522
3522
|
|
|
3523
|
-
var Container$
|
|
3523
|
+
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) {
|
|
3524
3524
|
var flex = _a.flex;
|
|
3525
3525
|
return flex &&
|
|
3526
3526
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3532,14 +3532,14 @@ var Container$r = newStyled.div(templateObject_1$I || (templateObject_1$I = __ma
|
|
|
3532
3532
|
});
|
|
3533
3533
|
var Card = function (_a) {
|
|
3534
3534
|
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;
|
|
3535
|
-
return (jsx$1(Container$
|
|
3535
|
+
return (jsx$1(Container$t, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: border, flex: flex, "data-testid": "CardContainer" }, { children: children }), void 0));
|
|
3536
3536
|
};
|
|
3537
3537
|
var Card$1 = Object.assign(Card, {
|
|
3538
3538
|
Header: CardHeader,
|
|
3539
3539
|
Footer: CardFooter,
|
|
3540
3540
|
Body: CardBody,
|
|
3541
3541
|
});
|
|
3542
|
-
var templateObject_1$
|
|
3542
|
+
var templateObject_1$K;
|
|
3543
3543
|
|
|
3544
3544
|
function jsx(type, props, key) {
|
|
3545
3545
|
if (!hasOwnProperty$1.call(props, 'css')) {
|
|
@@ -3569,7 +3569,7 @@ var BaseButton = function (_a) {
|
|
|
3569
3569
|
} }, { children: [renderLeading, children, renderTrailing] }), void 0));
|
|
3570
3570
|
};
|
|
3571
3571
|
|
|
3572
|
-
var getStylesBySize$
|
|
3572
|
+
var getStylesBySize$d = function (size) {
|
|
3573
3573
|
switch (size) {
|
|
3574
3574
|
case ComponentSize.Large:
|
|
3575
3575
|
return {
|
|
@@ -3596,7 +3596,7 @@ var getStylesBySize$c = function (size) {
|
|
|
3596
3596
|
var BaseCTA = function (_a) {
|
|
3597
3597
|
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 ? ComponentSize.Medium : _d, type = _a.type, className = _a.className;
|
|
3598
3598
|
var theme = useTheme();
|
|
3599
|
-
var stylesBySize = getStylesBySize$
|
|
3599
|
+
var stylesBySize = getStylesBySize$d(size);
|
|
3600
3600
|
return (jsx(BaseButton, __assign({ onClick: onClick, disabled: disabled, className: className, type: type, css: __assign(__assign({ width: wide ? '100%' : '' }, stylesBySize), { fontWeight: 600, '&:hover': {
|
|
3601
3601
|
color: theme.shades.white,
|
|
3602
3602
|
cursor: 'pointer',
|
|
@@ -5980,7 +5980,7 @@ function BaseSelectOption(_a) {
|
|
|
5980
5980
|
return (jsx$1(Listbox.Option, __assign({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
5981
5981
|
}
|
|
5982
5982
|
|
|
5983
|
-
var CustomListBox = newStyled(Listbox)(templateObject_1$
|
|
5983
|
+
var CustomListBox = newStyled(Listbox)(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
5984
5984
|
function BaseSelect(_a) {
|
|
5985
5985
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
5986
5986
|
return (jsx$1(CustomListBox, __assign({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -5990,7 +5990,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
5990
5990
|
Options: BaseSelectOptions,
|
|
5991
5991
|
Option: BaseSelectOption,
|
|
5992
5992
|
});
|
|
5993
|
-
var templateObject_1$
|
|
5993
|
+
var templateObject_1$J;
|
|
5994
5994
|
|
|
5995
5995
|
var CustomButton = newStyled.button(function (_a) {
|
|
5996
5996
|
var theme = _a.theme, wide = _a.wide;
|
|
@@ -6127,7 +6127,7 @@ function SimpleDropdown(_a) {
|
|
|
6127
6127
|
return (jsxs$1(BaseDropdown$1, __assign({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide }, { children: selectedOptionLabel() }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
6128
6128
|
}
|
|
6129
6129
|
|
|
6130
|
-
var getStylesBySize$
|
|
6130
|
+
var getStylesBySize$c = function (size) {
|
|
6131
6131
|
switch (size) {
|
|
6132
6132
|
case ComponentSize.Medium:
|
|
6133
6133
|
return {
|
|
@@ -6143,7 +6143,7 @@ var getStylesBySize$b = function (size) {
|
|
|
6143
6143
|
var SimpleSelector = function (_a) {
|
|
6144
6144
|
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, onClick = _a.onClick;
|
|
6145
6145
|
var theme = useTheme();
|
|
6146
|
-
var stylesBySize = getStylesBySize$
|
|
6146
|
+
var stylesBySize = getStylesBySize$c(size);
|
|
6147
6147
|
var activeStyles = active ? { fontWeight: 600 } : { fontWeight: 0 };
|
|
6148
6148
|
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': {
|
|
6149
6149
|
fontWeight: 600,
|
|
@@ -6169,8 +6169,8 @@ var SelectorSecondary = function (_a) {
|
|
|
6169
6169
|
} }) }, void 0));
|
|
6170
6170
|
};
|
|
6171
6171
|
|
|
6172
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
6173
|
-
var SizeParagraph = newStyled.p(templateObject_2$
|
|
6172
|
+
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"])));
|
|
6173
|
+
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"])));
|
|
6174
6174
|
var getInitialValue$2 = function (options, selectedValue) {
|
|
6175
6175
|
if (selectedValue && selectedValue.disabled !== true && options.includes(selectedValue))
|
|
6176
6176
|
return selectedValue;
|
|
@@ -6195,9 +6195,9 @@ var SizeSelector = function (_a) {
|
|
|
6195
6195
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChangeHandler(size); } }, size.label));
|
|
6196
6196
|
}) }, void 0)] }, void 0));
|
|
6197
6197
|
};
|
|
6198
|
-
var templateObject_1$
|
|
6198
|
+
var templateObject_1$I, templateObject_2$v;
|
|
6199
6199
|
|
|
6200
|
-
var getStylesBySize$
|
|
6200
|
+
var getStylesBySize$b = function (size) {
|
|
6201
6201
|
switch (size) {
|
|
6202
6202
|
case ComponentSize.Large:
|
|
6203
6203
|
case ComponentSize.Medium:
|
|
@@ -6215,7 +6215,7 @@ var getStylesBySize$a = function (size) {
|
|
|
6215
6215
|
}
|
|
6216
6216
|
};
|
|
6217
6217
|
var textButtonStyles$1 = function (theme, size) {
|
|
6218
|
-
var stylesBySize = getStylesBySize$
|
|
6218
|
+
var stylesBySize = getStylesBySize$b(size);
|
|
6219
6219
|
return __assign(__assign({ border: 'none', background: 'transparent', padding: 0, color: theme.shades.gray550, alignItems: 'center', fontWeight: 600 }, stylesBySize), { '&:hover': {
|
|
6220
6220
|
textDecorationLine: 'underline',
|
|
6221
6221
|
}, '&:disabled': {
|
|
@@ -6224,7 +6224,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
6224
6224
|
} });
|
|
6225
6225
|
};
|
|
6226
6226
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
6227
|
-
return Icon && (jsx("span", __assign({ css: css(templateObject_1$
|
|
6227
|
+
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));
|
|
6228
6228
|
};
|
|
6229
6229
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
6230
6230
|
if (disabled)
|
|
@@ -6240,18 +6240,18 @@ var TextButton = function (_a) {
|
|
|
6240
6240
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
6241
6241
|
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));
|
|
6242
6242
|
};
|
|
6243
|
-
var templateObject_1$
|
|
6243
|
+
var templateObject_1$H;
|
|
6244
6244
|
|
|
6245
|
-
var Container$
|
|
6246
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
6245
|
+
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"])));
|
|
6246
|
+
var P$2 = newStyled.p(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6247
6247
|
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"])));
|
|
6248
6248
|
var SizeFitGuide = function (_a) {
|
|
6249
6249
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6250
|
-
return (jsxs$1(Container$
|
|
6250
|
+
return (jsxs$1(Container$s, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$2, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6251
6251
|
};
|
|
6252
|
-
var templateObject_1$
|
|
6252
|
+
var templateObject_1$G, templateObject_2$u, templateObject_3$j;
|
|
6253
6253
|
|
|
6254
|
-
var getStylesBySize$
|
|
6254
|
+
var getStylesBySize$a = function (size) {
|
|
6255
6255
|
switch (size) {
|
|
6256
6256
|
case ComponentSize.Large:
|
|
6257
6257
|
return {
|
|
@@ -6279,7 +6279,7 @@ var getStylesBySize$9 = function (size) {
|
|
|
6279
6279
|
};
|
|
6280
6280
|
}
|
|
6281
6281
|
};
|
|
6282
|
-
var Container$
|
|
6282
|
+
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) {
|
|
6283
6283
|
var backgroundColor = _a.backgroundColor;
|
|
6284
6284
|
return backgroundColor;
|
|
6285
6285
|
}, function (_a) {
|
|
@@ -6288,39 +6288,39 @@ var Container$p = newStyled.div(templateObject_1$D || (templateObject_1$D = __ma
|
|
|
6288
6288
|
}, function (_a) {
|
|
6289
6289
|
var _b;
|
|
6290
6290
|
var size = _a.size;
|
|
6291
|
-
return (_b = getStylesBySize$
|
|
6291
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.borderRadius;
|
|
6292
6292
|
}, function (_a) {
|
|
6293
6293
|
var _b;
|
|
6294
6294
|
var size = _a.size;
|
|
6295
|
-
return (_b = getStylesBySize$
|
|
6295
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.padding;
|
|
6296
6296
|
}, function (_a) {
|
|
6297
6297
|
var size = _a.size;
|
|
6298
6298
|
return (size === ComponentSize.Small ? '2rem' : 'unset');
|
|
6299
6299
|
}, function (_a) {
|
|
6300
6300
|
var _b;
|
|
6301
6301
|
var size = _a.size;
|
|
6302
|
-
return (_b = getStylesBySize$
|
|
6302
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
6303
6303
|
});
|
|
6304
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
6304
|
+
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) {
|
|
6305
6305
|
var textColor = _a.textColor;
|
|
6306
6306
|
return textColor;
|
|
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.fontSize;
|
|
6311
6311
|
}, function (_a) {
|
|
6312
6312
|
var _b;
|
|
6313
6313
|
var size = _a.size;
|
|
6314
|
-
return (_b = getStylesBySize$
|
|
6314
|
+
return (_b = getStylesBySize$a(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
6315
6315
|
});
|
|
6316
6316
|
var DiscountTag = function (_a) {
|
|
6317
6317
|
var discount = _a.discount, offText = _a.offText, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#fff' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e;
|
|
6318
6318
|
var theme = useTheme();
|
|
6319
|
-
return (jsx$1(Container$
|
|
6319
|
+
return (jsx$1(Container$r, __assign({ backgroundColor: disabled ? theme.shades.gray050 : backgroundColor, borderColor: disabled ? theme.shades.gray050 : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.shades.gray250 : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6320
6320
|
};
|
|
6321
|
-
var templateObject_1$
|
|
6321
|
+
var templateObject_1$F, templateObject_2$t;
|
|
6322
6322
|
|
|
6323
|
-
var getStylesBySize$
|
|
6323
|
+
var getStylesBySize$9 = function (size) {
|
|
6324
6324
|
switch (size) {
|
|
6325
6325
|
case ComponentSize.Large:
|
|
6326
6326
|
return {
|
|
@@ -6342,18 +6342,18 @@ var getStylesBySize$8 = function (size) {
|
|
|
6342
6342
|
};
|
|
6343
6343
|
}
|
|
6344
6344
|
};
|
|
6345
|
-
var Container$
|
|
6346
|
-
var Price = newStyled.h1(templateObject_2$
|
|
6345
|
+
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"])));
|
|
6346
|
+
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) {
|
|
6347
6347
|
var weight = _a.weight;
|
|
6348
6348
|
return (weight ? weight : '400');
|
|
6349
6349
|
}, function (_a) {
|
|
6350
6350
|
var _b;
|
|
6351
6351
|
var size = _a.size;
|
|
6352
|
-
return (_b = getStylesBySize$
|
|
6352
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.fontSize;
|
|
6353
6353
|
}, function (_a) {
|
|
6354
6354
|
var _b;
|
|
6355
6355
|
var size = _a.size;
|
|
6356
|
-
return (_b = getStylesBySize$
|
|
6356
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
6357
6357
|
}, function (_a) {
|
|
6358
6358
|
var color = _a.color;
|
|
6359
6359
|
return color;
|
|
@@ -6363,19 +6363,19 @@ var Price = newStyled.h1(templateObject_2$r || (templateObject_2$r = __makeTempl
|
|
|
6363
6363
|
}, function (_a) {
|
|
6364
6364
|
var _b;
|
|
6365
6365
|
var margin = _a.margin, size = _a.size;
|
|
6366
|
-
return (margin ? (_b = getStylesBySize$
|
|
6366
|
+
return (margin ? (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
6367
6367
|
});
|
|
6368
6368
|
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) {
|
|
6369
6369
|
var _b;
|
|
6370
6370
|
var size = _a.size;
|
|
6371
|
-
return (_b = getStylesBySize$
|
|
6371
|
+
return (_b = getStylesBySize$9(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
6372
6372
|
});
|
|
6373
6373
|
var PriceLabel = function (_a) {
|
|
6374
6374
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6375
6375
|
var theme = useTheme();
|
|
6376
|
-
return (jsxs$1(Container$
|
|
6376
|
+
return (jsxs$1(Container$q, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.palette.secondary.default, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.shades.gray400, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6377
6377
|
};
|
|
6378
|
-
var templateObject_1$
|
|
6378
|
+
var templateObject_1$E, templateObject_2$s, templateObject_3$i;
|
|
6379
6379
|
|
|
6380
6380
|
var OneColorSelector = function (_a) {
|
|
6381
6381
|
var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
@@ -6414,8 +6414,8 @@ var OutOfStock = function (_a) {
|
|
|
6414
6414
|
return (jsxs$1("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.shades.gray300 }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.shades.gray300, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6415
6415
|
};
|
|
6416
6416
|
|
|
6417
|
-
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$
|
|
6418
|
-
var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$
|
|
6417
|
+
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"])));
|
|
6418
|
+
var CustomRadioGroupLabel = newStyled(RadioGroup.Label)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6419
6419
|
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"])));
|
|
6420
6420
|
var Span = newStyled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6421
6421
|
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"])));
|
|
@@ -6436,20 +6436,20 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
6436
6436
|
Option: Option,
|
|
6437
6437
|
OptionsContainer: OptionsContainer,
|
|
6438
6438
|
});
|
|
6439
|
-
var templateObject_1$
|
|
6439
|
+
var templateObject_1$D, templateObject_2$r, templateObject_3$h, templateObject_4$d, templateObject_5$7;
|
|
6440
6440
|
|
|
6441
|
-
var Container$
|
|
6441
|
+
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) {
|
|
6442
6442
|
var borderColor = _a.borderColor;
|
|
6443
6443
|
return borderColor;
|
|
6444
6444
|
});
|
|
6445
|
-
var Image$3 = newStyled.img(templateObject_2$
|
|
6445
|
+
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"])));
|
|
6446
6446
|
var PatternSelector = function (_a) {
|
|
6447
6447
|
var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6448
6448
|
var theme = useTheme();
|
|
6449
6449
|
var outerBorder = selected ? theme.shades.gray550 : 'transparent';
|
|
6450
|
-
return (jsx$1(Container$
|
|
6450
|
+
return (jsx$1(Container$p, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$3, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6451
6451
|
};
|
|
6452
|
-
var templateObject_1$
|
|
6452
|
+
var templateObject_1$C, templateObject_2$q;
|
|
6453
6453
|
|
|
6454
6454
|
var renderOptions$1 = function (options) {
|
|
6455
6455
|
if (options.length)
|
|
@@ -6515,7 +6515,7 @@ var MultiColorPicker = function (_a) {
|
|
|
6515
6515
|
return (jsxs$1(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
6516
6516
|
};
|
|
6517
6517
|
|
|
6518
|
-
var Image$2 = newStyled.img(templateObject_1$
|
|
6518
|
+
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) {
|
|
6519
6519
|
var selected = _a.selected, theme = _a.theme;
|
|
6520
6520
|
return selected ? "0.063rem solid " + theme.shades.gray700 : 'inherit';
|
|
6521
6521
|
});
|
|
@@ -6524,29 +6524,29 @@ var ImageSmallPreview = function (_a) {
|
|
|
6524
6524
|
var theme = useTheme();
|
|
6525
6525
|
return jsx$1(Image$2, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
6526
6526
|
};
|
|
6527
|
-
var templateObject_1$
|
|
6527
|
+
var templateObject_1$B;
|
|
6528
6528
|
|
|
6529
|
-
var Container$
|
|
6530
|
-
var Button$3 = newStyled.button(templateObject_2$
|
|
6529
|
+
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"])));
|
|
6530
|
+
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"])));
|
|
6531
6531
|
var ImagePreviewList = function (_a) {
|
|
6532
6532
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
|
|
6533
|
-
return (jsx(Container$
|
|
6533
|
+
return (jsx(Container$o, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
|
|
6534
6534
|
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));
|
|
6535
6535
|
}) }), void 0));
|
|
6536
6536
|
};
|
|
6537
|
-
var templateObject_1$
|
|
6537
|
+
var templateObject_1$A, templateObject_2$p;
|
|
6538
6538
|
|
|
6539
|
-
var Container$
|
|
6540
|
-
var Image$1 = newStyled.img(templateObject_2$
|
|
6539
|
+
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"])));
|
|
6540
|
+
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"])));
|
|
6541
6541
|
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"])));
|
|
6542
6542
|
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"])));
|
|
6543
6543
|
var ImageProductWithTags = function (_a) {
|
|
6544
6544
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
6545
|
-
return (jsxs$1(Container$
|
|
6545
|
+
return (jsxs$1(Container$n, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image$1, { src: image.imageUrl, alt: image.alt }, void 0), jsx$1(TopTagContainer, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6546
6546
|
};
|
|
6547
|
-
var templateObject_1$
|
|
6547
|
+
var templateObject_1$z, templateObject_2$o, templateObject_3$g, templateObject_4$c;
|
|
6548
6548
|
|
|
6549
|
-
var Container$
|
|
6549
|
+
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"])));
|
|
6550
6550
|
var ProductGallery = function (_a) {
|
|
6551
6551
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6552
6552
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6554,13 +6554,13 @@ var ProductGallery = function (_a) {
|
|
|
6554
6554
|
useEffect(function () {
|
|
6555
6555
|
setSelectedImage(initialValue);
|
|
6556
6556
|
}, [initialValue]);
|
|
6557
|
-
return (jsxs$1(Container$
|
|
6557
|
+
return (jsxs$1(Container$m, { children: [jsx$1(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
|
|
6558
6558
|
setSelectedImage(value);
|
|
6559
6559
|
} }, void 0), jsx$1(ImageProductWithTags, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
|
|
6560
6560
|
};
|
|
6561
|
-
var templateObject_1$
|
|
6561
|
+
var templateObject_1$y;
|
|
6562
6562
|
|
|
6563
|
-
var getStylesBySize$
|
|
6563
|
+
var getStylesBySize$8 = function (size) {
|
|
6564
6564
|
switch (size) {
|
|
6565
6565
|
case ComponentSize.Large:
|
|
6566
6566
|
return {
|
|
@@ -6592,13 +6592,13 @@ var StarList = function (_a) {
|
|
|
6592
6592
|
var rating = _a.rating, starsNumber = _a.starsNumber, fill = _a.fill, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b;
|
|
6593
6593
|
return (jsx("div", __assign({ style: { display: 'flex' } }, { children: __spreadArray([], new Array(starsNumber)).map(function (_, index) {
|
|
6594
6594
|
return (jsx("div", __assign({ "data-testid": "star-container", css: {
|
|
6595
|
-
marginRight: getStylesBySize$
|
|
6595
|
+
marginRight: getStylesBySize$8(size).marginRight,
|
|
6596
6596
|
display: 'flex',
|
|
6597
|
-
} }, { children: index < Math.floor(rating) ? (jsx(Icon.PDP.Star, __assign({}, getStylesBySize$
|
|
6597
|
+
} }, { 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));
|
|
6598
6598
|
}) }), void 0));
|
|
6599
6599
|
};
|
|
6600
6600
|
|
|
6601
|
-
var getStylesBySize$
|
|
6601
|
+
var getStylesBySize$7 = function (size) {
|
|
6602
6602
|
switch (size) {
|
|
6603
6603
|
case ComponentSize.Large:
|
|
6604
6604
|
return {
|
|
@@ -6638,14 +6638,14 @@ var Rating = function (_a) {
|
|
|
6638
6638
|
fontStyle: 'normal',
|
|
6639
6639
|
fontWeight: 'normal',
|
|
6640
6640
|
color: theme.palette.secondary.default,
|
|
6641
|
-
fontSize: getStylesBySize$
|
|
6642
|
-
lineHeight: getStylesBySize$
|
|
6643
|
-
marginLeft: getStylesBySize$
|
|
6641
|
+
fontSize: getStylesBySize$7(size).fontSize,
|
|
6642
|
+
lineHeight: getStylesBySize$7(size).lineHeight,
|
|
6643
|
+
marginLeft: getStylesBySize$7(size).marginLeft,
|
|
6644
6644
|
} }, { children: [reviews, " ", reviewsText] }), void 0)] }), void 0));
|
|
6645
6645
|
};
|
|
6646
6646
|
|
|
6647
|
-
var Container$
|
|
6648
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
6647
|
+
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"])));
|
|
6648
|
+
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; });
|
|
6649
6649
|
var textButtonStyles = function (theme) { return ({
|
|
6650
6650
|
border: 'none',
|
|
6651
6651
|
background: 'transparent',
|
|
@@ -6658,9 +6658,9 @@ var textButtonStyles = function (theme) { return ({
|
|
|
6658
6658
|
var FitPredictor = function (_a) {
|
|
6659
6659
|
var onClick = _a.onClick;
|
|
6660
6660
|
var theme = useTheme();
|
|
6661
|
-
return (jsxs(Container$
|
|
6661
|
+
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));
|
|
6662
6662
|
};
|
|
6663
|
-
var templateObject_1$
|
|
6663
|
+
var templateObject_1$x, templateObject_2$n;
|
|
6664
6664
|
|
|
6665
6665
|
var H2$1 = newStyled.h2(function (_a) {
|
|
6666
6666
|
var color = _a.color;
|
|
@@ -6674,7 +6674,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
6674
6674
|
margin: '0.938rem 4.188rem',
|
|
6675
6675
|
});
|
|
6676
6676
|
});
|
|
6677
|
-
var Bar = newStyled.div(templateObject_1$
|
|
6677
|
+
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) {
|
|
6678
6678
|
var backgroundColor = _a.backgroundColor;
|
|
6679
6679
|
return backgroundColor;
|
|
6680
6680
|
}, function (_a) {
|
|
@@ -6697,7 +6697,7 @@ var Background = newStyled.div(function (_a) {
|
|
|
6697
6697
|
position: 'absolute',
|
|
6698
6698
|
});
|
|
6699
6699
|
});
|
|
6700
|
-
var Container$
|
|
6700
|
+
var Container$k = newStyled.div(function (_a) {
|
|
6701
6701
|
var widthAuto = _a.widthAuto;
|
|
6702
6702
|
return ({
|
|
6703
6703
|
width: widthAuto ? 'auto' : 'fit-content',
|
|
@@ -6711,11 +6711,11 @@ var getBarWithBasedOnPercent = function (percent) {
|
|
|
6711
6711
|
var ProgressBar = function (_a) {
|
|
6712
6712
|
var description = _a.description, fillColor = _a.fillColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? true : _b, percent = _a.percent;
|
|
6713
6713
|
var theme = useTheme();
|
|
6714
|
-
return (jsxs$1(Container$
|
|
6714
|
+
return (jsxs$1(Container$k, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign({ backgroundColor: theme.shades.gray100 }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign({ color: theme.palette.secondary.default }, { children: description }), void 0)] }), void 0));
|
|
6715
6715
|
};
|
|
6716
|
-
var templateObject_1$
|
|
6716
|
+
var templateObject_1$w;
|
|
6717
6717
|
|
|
6718
|
-
var getStylesBySize$
|
|
6718
|
+
var getStylesBySize$6 = function (size) {
|
|
6719
6719
|
switch (size) {
|
|
6720
6720
|
case ComponentSize.Large:
|
|
6721
6721
|
return {
|
|
@@ -6734,21 +6734,21 @@ var getStylesBySize$5 = function (size) {
|
|
|
6734
6734
|
};
|
|
6735
6735
|
}
|
|
6736
6736
|
};
|
|
6737
|
-
var Container$
|
|
6737
|
+
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) {
|
|
6738
6738
|
var backgroundColor = _a.backgroundColor;
|
|
6739
6739
|
return backgroundColor;
|
|
6740
6740
|
}, function (_a) {
|
|
6741
6741
|
var _b;
|
|
6742
6742
|
var size = _a.size;
|
|
6743
|
-
return (_b = getStylesBySize$
|
|
6743
|
+
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
|
|
6744
6744
|
}, function (_a) {
|
|
6745
6745
|
var _b;
|
|
6746
6746
|
var size = _a.size;
|
|
6747
|
-
return (_b = getStylesBySize$
|
|
6747
|
+
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.widthHeight;
|
|
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.margin;
|
|
6752
6752
|
}, function (_a) {
|
|
6753
6753
|
var hoverBackgroundColor = _a.hoverBackgroundColor;
|
|
6754
6754
|
return hoverBackgroundColor;
|
|
@@ -6762,9 +6762,9 @@ var Container$h = newStyled.div(templateObject_1$t || (templateObject_1$t = __ma
|
|
|
6762
6762
|
var IconButton = function (_a) {
|
|
6763
6763
|
var children = _a.children, disabled = _a.disabled, _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, onClick = _a.onClick;
|
|
6764
6764
|
var theme = useTheme();
|
|
6765
|
-
return (jsx$1(Container$
|
|
6765
|
+
return (jsx$1(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));
|
|
6766
6766
|
};
|
|
6767
|
-
var templateObject_1$
|
|
6767
|
+
var templateObject_1$v;
|
|
6768
6768
|
|
|
6769
6769
|
var TooltipArrow = function (_a) {
|
|
6770
6770
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -6844,7 +6844,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6844
6844
|
}
|
|
6845
6845
|
};
|
|
6846
6846
|
|
|
6847
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
6847
|
+
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) {
|
|
6848
6848
|
var position = _a.position;
|
|
6849
6849
|
return getWrapperFlexDirection(position);
|
|
6850
6850
|
});
|
|
@@ -6868,7 +6868,7 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
6868
6868
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
6869
6869
|
return actual === expected ? margin : '0';
|
|
6870
6870
|
};
|
|
6871
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
6871
|
+
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) {
|
|
6872
6872
|
var borderColor = _a.borderColor;
|
|
6873
6873
|
return borderColor;
|
|
6874
6874
|
});
|
|
@@ -6892,7 +6892,7 @@ var Title$3 = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTem
|
|
|
6892
6892
|
return color;
|
|
6893
6893
|
});
|
|
6894
6894
|
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"])));
|
|
6895
|
-
var templateObject_1$
|
|
6895
|
+
var templateObject_1$u, templateObject_2$m, templateObject_3$f, templateObject_4$b, templateObject_5$6, templateObject_6$5, templateObject_7$2;
|
|
6896
6896
|
|
|
6897
6897
|
var Tooltip = function (_a) {
|
|
6898
6898
|
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;
|
|
@@ -6957,7 +6957,7 @@ var AccordionControlButton = function (_a) {
|
|
|
6957
6957
|
}, disabled: disabled, className: className }, { children: [children, controlIcon] }), void 0));
|
|
6958
6958
|
};
|
|
6959
6959
|
|
|
6960
|
-
var Container$
|
|
6960
|
+
var Container$i = newStyled(Accordion$1)(function (props) { return ({
|
|
6961
6961
|
border: "1px solid " + props.theme.shades.gray100,
|
|
6962
6962
|
padding: '1.25rem 2rem',
|
|
6963
6963
|
}); });
|
|
@@ -6979,14 +6979,14 @@ var Panel$1 = newStyled(Accordion$1.Panel)(function () { return ({
|
|
|
6979
6979
|
var AccordionBox = function (_a) {
|
|
6980
6980
|
var title = _a.title, text = _a.text, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
6981
6981
|
var theme = useTheme();
|
|
6982
|
-
return (jsx$1(Container$
|
|
6982
|
+
return (jsx$1(Container$i, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
|
|
6983
6983
|
var open = _a.open;
|
|
6984
6984
|
var showPanel = open && !disabled;
|
|
6985
6985
|
return (jsxs$1(Fragment$1, { children: [jsx$1(Button$2, __assign({ disabled: disabled, open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1.5, height: 1.5, title: "plus icon", fill: theme.shades.gray700 }, void 0), closeIcon: jsx$1(Icon.PDP.Minus, { width: 1.5, height: 1.5, title: "minus icon", fill: theme.shades.gray700 }, void 0) }, { children: title }), void 0), showPanel && jsx$1(Panel$1, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
|
|
6986
6986
|
} }), void 0));
|
|
6987
6987
|
};
|
|
6988
6988
|
|
|
6989
|
-
var Container$
|
|
6989
|
+
var Container$h = newStyled(Accordion$1)(function (props) { return ({
|
|
6990
6990
|
borderTop: "1px solid " + props.theme.shades.gray100,
|
|
6991
6991
|
padding: '0.625rem 0',
|
|
6992
6992
|
}); });
|
|
@@ -7003,14 +7003,14 @@ var Panel = newStyled(Accordion$1.Panel)(function () { return ({
|
|
|
7003
7003
|
var AccordionIcon = function (_a) {
|
|
7004
7004
|
var title = _a.title, text = _a.text, leadingIcon = _a.leadingIcon, defaultOpen = _a.defaultOpen, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
7005
7005
|
var theme = useTheme();
|
|
7006
|
-
return (jsx$1(Container$
|
|
7006
|
+
return (jsx$1(Container$h, __assign({ theme: theme, defaultOpen: defaultOpen }, { children: function (_a) {
|
|
7007
7007
|
var open = _a.open;
|
|
7008
7008
|
var showPanel = open && !disabled;
|
|
7009
7009
|
return (jsxs$1(Fragment$1, { children: [jsx$1(Button$1, __assign({ open: open, openIcon: jsx$1(Icon.PDP.Plus, { width: 1, height: 1, title: "plus icon", fill: theme.shades.gray700 }, void 0), closeIcon: jsx$1(Icon.PDP.Minus, { width: 1, height: 1, title: "minus icon", fill: theme.shades.gray700 }, void 0), disabled: disabled }, { children: jsxs$1("span", __assign({ style: { display: 'flex', alignItems: 'center' } }, { children: [leadingIcon, title] }), void 0) }), void 0), showPanel && jsx$1(Panel, __assign({ staticProp: true }, { children: text }), void 0)] }, void 0));
|
|
7010
7010
|
} }), void 0));
|
|
7011
7011
|
};
|
|
7012
7012
|
|
|
7013
|
-
var getStylesBySize$
|
|
7013
|
+
var getStylesBySize$5 = function (size) {
|
|
7014
7014
|
switch (size) {
|
|
7015
7015
|
case ComponentSize.Large:
|
|
7016
7016
|
return {
|
|
@@ -7065,37 +7065,37 @@ var getStylesBySize$4 = function (size) {
|
|
|
7065
7065
|
};
|
|
7066
7066
|
}
|
|
7067
7067
|
};
|
|
7068
|
-
var Container$
|
|
7069
|
-
var CustomCheckbox = newStyled.div(templateObject_2$
|
|
7068
|
+
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"])));
|
|
7069
|
+
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) {
|
|
7070
7070
|
var color = _a.color;
|
|
7071
7071
|
return color;
|
|
7072
7072
|
}, function (_a) {
|
|
7073
7073
|
var _b, _c;
|
|
7074
7074
|
var size = _a.size;
|
|
7075
|
-
return (_c = (_b = getStylesBySize$
|
|
7075
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.width;
|
|
7076
7076
|
}, function (_a) {
|
|
7077
7077
|
var _b, _c;
|
|
7078
7078
|
var size = _a.size;
|
|
7079
|
-
return (_c = (_b = getStylesBySize$
|
|
7079
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.height;
|
|
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.borderRadius;
|
|
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.marginRight;
|
|
7088
7088
|
}, function (_a) {
|
|
7089
7089
|
var isChecked = _a.isChecked, color = _a.color;
|
|
7090
7090
|
return (isChecked ? color : '#fff');
|
|
7091
7091
|
}, function (_a) {
|
|
7092
7092
|
var _b, _c;
|
|
7093
7093
|
var size = _a.size;
|
|
7094
|
-
return (_c = (_b = getStylesBySize$
|
|
7094
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.width;
|
|
7095
7095
|
}, function (_a) {
|
|
7096
7096
|
var _b, _c;
|
|
7097
7097
|
var size = _a.size;
|
|
7098
|
-
return (_c = (_b = getStylesBySize$
|
|
7098
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.icon) === null || _c === void 0 ? void 0 : _c.height;
|
|
7099
7099
|
});
|
|
7100
7100
|
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) {
|
|
7101
7101
|
var disabled = _a.disabled;
|
|
@@ -7104,11 +7104,11 @@ var Input$2 = newStyled.input(templateObject_3$e || (templateObject_3$e = __make
|
|
|
7104
7104
|
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) {
|
|
7105
7105
|
var _b, _c;
|
|
7106
7106
|
var size = _a.size;
|
|
7107
|
-
return (_c = (_b = getStylesBySize$
|
|
7107
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
7108
7108
|
}, function (_a) {
|
|
7109
7109
|
var _b, _c;
|
|
7110
7110
|
var size = _a.size;
|
|
7111
|
-
return (_c = (_b = getStylesBySize$
|
|
7111
|
+
return (_c = (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.lineHeight;
|
|
7112
7112
|
}, function (_a) {
|
|
7113
7113
|
var color = _a.color;
|
|
7114
7114
|
return color;
|
|
@@ -7126,11 +7126,11 @@ var Checkbox = function (_a) {
|
|
|
7126
7126
|
return !checked;
|
|
7127
7127
|
});
|
|
7128
7128
|
};
|
|
7129
|
-
return (jsxs$1(Container$
|
|
7129
|
+
return (jsxs$1(Container$g, __assign({ disabled: disabled }, { children: [jsx$1(Input$2, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: disabled ? function () { } : handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign({ isChecked: isChecked, size: size, color: disabled ? theme.shades.gray250 : theme.shades.gray700, "data-testid": "checkbox" }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(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));
|
|
7130
7130
|
};
|
|
7131
|
-
var templateObject_1$
|
|
7131
|
+
var templateObject_1$t, templateObject_2$l, templateObject_3$e, templateObject_4$a;
|
|
7132
7132
|
|
|
7133
|
-
var getStylesBySize$
|
|
7133
|
+
var getStylesBySize$4 = function (size) {
|
|
7134
7134
|
switch (size) {
|
|
7135
7135
|
case ComponentSize.Large:
|
|
7136
7136
|
return {
|
|
@@ -7173,15 +7173,15 @@ var getStylesBySize$3 = function (size) {
|
|
|
7173
7173
|
};
|
|
7174
7174
|
}
|
|
7175
7175
|
};
|
|
7176
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7177
|
-
var Container$
|
|
7176
|
+
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"])));
|
|
7177
|
+
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) {
|
|
7178
7178
|
var _b;
|
|
7179
7179
|
var size = _a.size;
|
|
7180
|
-
return (_b = getStylesBySize$
|
|
7180
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.container;
|
|
7181
7181
|
}, function (_a) {
|
|
7182
7182
|
var _b;
|
|
7183
7183
|
var size = _a.size;
|
|
7184
|
-
return (_b = getStylesBySize$
|
|
7184
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.container;
|
|
7185
7185
|
});
|
|
7186
7186
|
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) {
|
|
7187
7187
|
var disabled = _a.disabled;
|
|
@@ -7190,7 +7190,7 @@ var Input$1 = newStyled.input(templateObject_3$d || (templateObject_3$d = __make
|
|
|
7190
7190
|
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) {
|
|
7191
7191
|
var _b;
|
|
7192
7192
|
var size = _a.size;
|
|
7193
|
-
return (_b = getStylesBySize$
|
|
7193
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.input.borderSize;
|
|
7194
7194
|
}, function (_a) {
|
|
7195
7195
|
var disabled = _a.disabled, color = _a.color, disabledColor = _a.disabledColor;
|
|
7196
7196
|
return (disabled ? disabledColor : color);
|
|
@@ -7201,24 +7201,24 @@ var CustomRadio = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __ma
|
|
|
7201
7201
|
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) {
|
|
7202
7202
|
var _b;
|
|
7203
7203
|
var size = _a.size;
|
|
7204
|
-
return (_b = getStylesBySize$
|
|
7204
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.check;
|
|
7205
7205
|
}, function (_a) {
|
|
7206
7206
|
var _b;
|
|
7207
7207
|
var size = _a.size;
|
|
7208
|
-
return (_b = getStylesBySize$
|
|
7208
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.check;
|
|
7209
7209
|
});
|
|
7210
7210
|
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) {
|
|
7211
7211
|
var _b;
|
|
7212
7212
|
var size = _a.size;
|
|
7213
|
-
return (_b = getStylesBySize$
|
|
7213
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text.marginLeft;
|
|
7214
7214
|
}, function (_a) {
|
|
7215
7215
|
var _b;
|
|
7216
7216
|
var size = _a.size;
|
|
7217
|
-
return (_b = getStylesBySize$
|
|
7217
|
+
return (_b = getStylesBySize$4(size)) === null || _b === void 0 ? void 0 : _b.text.fontSize;
|
|
7218
7218
|
}, 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.lineHeight;
|
|
7222
7222
|
}, function (_a) {
|
|
7223
7223
|
var disabled = _a.disabled, color = _a.color, disabledColor = _a.disabledColor;
|
|
7224
7224
|
return (disabled ? disabledColor : color);
|
|
@@ -7230,9 +7230,9 @@ var RadioInput = function (_a) {
|
|
|
7230
7230
|
var value = event.currentTarget.value;
|
|
7231
7231
|
onChange({ value: value, label: label });
|
|
7232
7232
|
};
|
|
7233
|
-
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$
|
|
7233
|
+
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$f, __assign({ size: size, "data-testid": "container" }, { children: [jsx$1(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), jsx$1(CustomRadio, __assign({ size: size, isChecked: checked, disabled: disabled, color: theme.shades.gray700, disabledColor: theme.shades.gray250, "data-testid": "custom-radio" }, { children: checked && jsx$1(CustomRadioCheck, { size: size, "data-testid": "check" }, void 0) }), void 0)] }), void 0), jsx$1(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));
|
|
7234
7234
|
};
|
|
7235
|
-
var templateObject_1$
|
|
7235
|
+
var templateObject_1$s, templateObject_2$k, templateObject_3$d, templateObject_4$9, templateObject_5$5, templateObject_6$4;
|
|
7236
7236
|
|
|
7237
7237
|
var RadioGroupInput = function (_a) {
|
|
7238
7238
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -7246,8 +7246,8 @@ var RadioGroupInput = function (_a) {
|
|
|
7246
7246
|
}) }), void 0));
|
|
7247
7247
|
};
|
|
7248
7248
|
|
|
7249
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
7250
|
-
var Container$
|
|
7249
|
+
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"])));
|
|
7250
|
+
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"])));
|
|
7251
7251
|
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) {
|
|
7252
7252
|
var color = _a.color;
|
|
7253
7253
|
return color;
|
|
@@ -7261,34 +7261,34 @@ var Text$2 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __makeTemp
|
|
|
7261
7261
|
var Minimalistic = function (_a) {
|
|
7262
7262
|
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;
|
|
7263
7263
|
var theme = useTheme();
|
|
7264
|
-
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$
|
|
7264
|
+
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$e, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$2, __assign({ color: theme.palette.secondary.default, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$e, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$2, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$2, __assign({ color: theme.palette.secondary.default }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7265
7265
|
};
|
|
7266
|
-
var templateObject_1$
|
|
7266
|
+
var templateObject_1$r, templateObject_2$j, templateObject_3$c;
|
|
7267
7267
|
|
|
7268
|
-
var Container$
|
|
7269
|
-
var Title$2 = newStyled.h1(templateObject_2$
|
|
7268
|
+
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"])));
|
|
7269
|
+
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; });
|
|
7270
7270
|
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; });
|
|
7271
7271
|
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"])));
|
|
7272
7272
|
var Simple = function (_a) {
|
|
7273
7273
|
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;
|
|
7274
7274
|
var theme = useTheme();
|
|
7275
|
-
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$
|
|
7275
|
+
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$d, { children: [jsx$1(Title$2, __assign({ color: theme.palette.secondary.default, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign({ color: theme.palette.secondary.default, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7276
7276
|
};
|
|
7277
|
-
var templateObject_1$
|
|
7277
|
+
var templateObject_1$q, templateObject_2$i, templateObject_3$b, templateObject_4$8;
|
|
7278
7278
|
|
|
7279
7279
|
var Bundle = {
|
|
7280
7280
|
Minimalistic: Minimalistic,
|
|
7281
7281
|
Simple: Simple,
|
|
7282
7282
|
};
|
|
7283
7283
|
|
|
7284
|
-
var Container$
|
|
7284
|
+
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"])));
|
|
7285
7285
|
var Tag = function (_a) {
|
|
7286
7286
|
var text = _a.text, className = _a.className;
|
|
7287
|
-
return jsx$1(Container$
|
|
7287
|
+
return jsx$1(Container$c, __assign({ className: className }, { children: text }), void 0);
|
|
7288
7288
|
};
|
|
7289
|
-
var templateObject_1$
|
|
7289
|
+
var templateObject_1$p;
|
|
7290
7290
|
|
|
7291
|
-
var getStylesBySize$
|
|
7291
|
+
var getStylesBySize$3 = function (size) {
|
|
7292
7292
|
switch (size) {
|
|
7293
7293
|
case ComponentSize.Large:
|
|
7294
7294
|
return {
|
|
@@ -7319,11 +7319,11 @@ var getStylesBySize$2 = function (size) {
|
|
|
7319
7319
|
var CategoryTag = function (_a) {
|
|
7320
7320
|
var text = _a.text, size = _a.size, className = _a.className;
|
|
7321
7321
|
var theme = useTheme();
|
|
7322
|
-
var stylesBySize = getStylesBySize$
|
|
7322
|
+
var stylesBySize = getStylesBySize$3(size);
|
|
7323
7323
|
return (jsx(Tag, { css: __assign({ backgroundColor: theme.shades.white, fontWeight: 600, color: theme.shades.gray700 }, stylesBySize), text: text, className: className }, void 0));
|
|
7324
7324
|
};
|
|
7325
7325
|
|
|
7326
|
-
var getStylesBySize$
|
|
7326
|
+
var getStylesBySize$2 = function (size) {
|
|
7327
7327
|
switch (size) {
|
|
7328
7328
|
case ComponentSize.Large:
|
|
7329
7329
|
return {
|
|
@@ -7353,7 +7353,7 @@ var getStylesBySize$1 = function (size) {
|
|
|
7353
7353
|
};
|
|
7354
7354
|
var SeasonOfferTag = function (_a) {
|
|
7355
7355
|
var text = _a.text, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#C64844' : _b, size = _a.size, className = _a.className;
|
|
7356
|
-
var stylesBySize = getStylesBySize$
|
|
7356
|
+
var stylesBySize = getStylesBySize$2(size);
|
|
7357
7357
|
return (jsx(Tag, { css: __assign({ backgroundColor: backgroundColor, fontWeight: 700, color: '#FFFFFF' }, stylesBySize), text: text, className: className }, void 0));
|
|
7358
7358
|
};
|
|
7359
7359
|
|
|
@@ -7387,11 +7387,11 @@ var Timer = function (_a) {
|
|
|
7387
7387
|
return (jsxs$1("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
|
|
7388
7388
|
};
|
|
7389
7389
|
|
|
7390
|
-
var Label = newStyled.span(templateObject_1$
|
|
7390
|
+
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) {
|
|
7391
7391
|
var color = _a.color;
|
|
7392
7392
|
return color;
|
|
7393
7393
|
});
|
|
7394
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
7394
|
+
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) {
|
|
7395
7395
|
var color = _a.color;
|
|
7396
7396
|
return color;
|
|
7397
7397
|
});
|
|
@@ -7400,26 +7400,26 @@ var InputLabel = function (_a) {
|
|
|
7400
7400
|
var theme = useTheme();
|
|
7401
7401
|
return (jsxs$1(Label, __assign({ color: isDisabled ? theme.shades.gray250 : theme.shades.gray700 }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign({ color: theme.semantic.alert }, { children: "*" }), void 0)] }), void 0));
|
|
7402
7402
|
};
|
|
7403
|
-
var templateObject_1$
|
|
7403
|
+
var templateObject_1$o, templateObject_2$h;
|
|
7404
7404
|
|
|
7405
7405
|
var isEmpty = function (value) {
|
|
7406
7406
|
return value.length === 0;
|
|
7407
7407
|
};
|
|
7408
7408
|
|
|
7409
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
7410
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
7409
|
+
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; });
|
|
7410
|
+
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"])));
|
|
7411
7411
|
var Error$1 = function (_a) {
|
|
7412
7412
|
var error = _a.error;
|
|
7413
7413
|
var theme = useTheme();
|
|
7414
7414
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.semantic.alert, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign({ color: theme.semantic.alert }, { children: error }), void 0)] }, void 0));
|
|
7415
7415
|
};
|
|
7416
|
-
var templateObject_1$
|
|
7416
|
+
var templateObject_1$n, templateObject_2$g;
|
|
7417
7417
|
|
|
7418
|
-
var Container$
|
|
7418
|
+
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) {
|
|
7419
7419
|
var color = _a.color;
|
|
7420
7420
|
return color;
|
|
7421
7421
|
});
|
|
7422
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
7422
|
+
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) {
|
|
7423
7423
|
var borderColor = _a.borderColor;
|
|
7424
7424
|
return borderColor;
|
|
7425
7425
|
}, function (_a) {
|
|
@@ -7445,7 +7445,7 @@ var StyledInput = newStyled.input(templateObject_2$e || (templateObject_2$e = __
|
|
|
7445
7445
|
return disabledColor;
|
|
7446
7446
|
});
|
|
7447
7447
|
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"])));
|
|
7448
|
-
var templateObject_1$
|
|
7448
|
+
var templateObject_1$m, templateObject_2$f, templateObject_3$a;
|
|
7449
7449
|
|
|
7450
7450
|
var BaseInput = function (_a) {
|
|
7451
7451
|
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"]);
|
|
@@ -7479,15 +7479,15 @@ var BaseInput = function (_a) {
|
|
|
7479
7479
|
disabledBackgroundColor: theme.shades.gray010,
|
|
7480
7480
|
disabledColor: theme.shades.gray250,
|
|
7481
7481
|
};
|
|
7482
|
-
return (jsxs$1(Container$
|
|
7482
|
+
return (jsxs$1(Container$b, __assign({ color: status === InputValidationType.Valid
|
|
7483
7483
|
? theme.shades.gray700
|
|
7484
7484
|
: status === InputValidationType.Error
|
|
7485
7485
|
? theme.semantic.alert
|
|
7486
7486
|
: '' }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign({ className: "inputWrapper" }, { children: [jsx$1(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 === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
|
|
7487
7487
|
};
|
|
7488
7488
|
|
|
7489
|
-
var Container$
|
|
7490
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
7489
|
+
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"])));
|
|
7490
|
+
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"])));
|
|
7491
7491
|
var Custom = function (_a) {
|
|
7492
7492
|
var onClick = _a.onClick, text = _a.text, type = _a.type, rest = __rest(_a, ["onClick", "text", "type"]);
|
|
7493
7493
|
var props = {
|
|
@@ -7495,20 +7495,20 @@ var Custom = function (_a) {
|
|
|
7495
7495
|
text: text,
|
|
7496
7496
|
disabled: rest.disabled,
|
|
7497
7497
|
};
|
|
7498
|
-
return (jsx$1(Container$
|
|
7498
|
+
return (jsx$1(Container$a, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, { children: type === 'primary' ? jsx$1(ButtonPrimary, __assign({}, props), void 0) : jsx$1(ButtonSecondary, __assign({}, props), void 0) }, void 0) }), void 0) }, void 0));
|
|
7499
7499
|
};
|
|
7500
|
-
var templateObject_1$
|
|
7500
|
+
var templateObject_1$l, templateObject_2$e;
|
|
7501
7501
|
|
|
7502
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
7503
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
7502
|
+
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"])));
|
|
7503
|
+
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"])));
|
|
7504
7504
|
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"])));
|
|
7505
7505
|
var Success = function (_a) {
|
|
7506
7506
|
var children = _a.children, successText = _a.successText;
|
|
7507
7507
|
return (jsxs$1(SuccessContainer, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }, void 0));
|
|
7508
7508
|
};
|
|
7509
|
-
var templateObject_1$
|
|
7509
|
+
var templateObject_1$k, templateObject_2$d, templateObject_3$9;
|
|
7510
7510
|
|
|
7511
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
7511
|
+
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) {
|
|
7512
7512
|
var status = _a.status, type = _a.type;
|
|
7513
7513
|
return status === InputValidationType.Empty && type === 'primary' ? '#808080' : '';
|
|
7514
7514
|
});
|
|
@@ -7519,21 +7519,21 @@ var BasePlusButton = function (_a) {
|
|
|
7519
7519
|
var Input = (jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "primary" }, { children: jsx$1(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
7520
7520
|
return success ? SuccessComponent : Input;
|
|
7521
7521
|
};
|
|
7522
|
-
var templateObject_1$
|
|
7522
|
+
var templateObject_1$j;
|
|
7523
7523
|
|
|
7524
|
-
var Container$
|
|
7525
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
7524
|
+
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"])));
|
|
7525
|
+
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; });
|
|
7526
7526
|
var BasePlusIcon = function (_a) {
|
|
7527
7527
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7528
7528
|
var theme = useTheme();
|
|
7529
7529
|
var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
|
|
7530
|
-
return (jsx$1(Container$
|
|
7530
|
+
return (jsx$1(Container$9, { children: jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(IconContainer$2, __assign({ color: status === InputValidationType.Valid
|
|
7531
7531
|
? theme.shades.gray700
|
|
7532
7532
|
: status === InputValidationType.Error
|
|
7533
7533
|
? theme.semantic.alert
|
|
7534
7534
|
: '' }, { children: createElement(Icon, { fill: theme.shades.gray250 }) }), void 0) }), void 0) }, void 0));
|
|
7535
7535
|
};
|
|
7536
|
-
var templateObject_1$
|
|
7536
|
+
var templateObject_1$i, templateObject_2$c;
|
|
7537
7537
|
|
|
7538
7538
|
var Input = {
|
|
7539
7539
|
Simple: BaseInput,
|
|
@@ -7547,7 +7547,7 @@ var index$3 = /*#__PURE__*/Object.freeze({
|
|
|
7547
7547
|
Input: Input
|
|
7548
7548
|
});
|
|
7549
7549
|
|
|
7550
|
-
var Container$
|
|
7550
|
+
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) {
|
|
7551
7551
|
var width = _a.width;
|
|
7552
7552
|
return width;
|
|
7553
7553
|
}, function (_a) {
|
|
@@ -7563,11 +7563,11 @@ var Container$6 = newStyled.div(templateObject_1$f || (templateObject_1$f = __ma
|
|
|
7563
7563
|
var PaymentMethod = function (_a) {
|
|
7564
7564
|
var Icon = _a.Icon, width = _a.width, height = _a.height, onClick = _a.onClick;
|
|
7565
7565
|
var theme = useTheme();
|
|
7566
|
-
return (jsx$1(Container$
|
|
7566
|
+
return (jsx$1(Container$8, __assign({ width: width, height: height, borderColor: theme.shades.gray100, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
7567
7567
|
};
|
|
7568
|
-
var templateObject_1$
|
|
7568
|
+
var templateObject_1$h;
|
|
7569
7569
|
|
|
7570
|
-
var Text$1 = newStyled.h3(templateObject_1$
|
|
7570
|
+
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) {
|
|
7571
7571
|
var backgroundColor = _a.backgroundColor;
|
|
7572
7572
|
return backgroundColor;
|
|
7573
7573
|
}, function (_a) {
|
|
@@ -7579,25 +7579,25 @@ var OfferBanner = function (_a) {
|
|
|
7579
7579
|
var theme = useTheme();
|
|
7580
7580
|
return (jsx$1(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.shades.gray700, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
7581
7581
|
};
|
|
7582
|
-
var templateObject_1$
|
|
7582
|
+
var templateObject_1$g;
|
|
7583
7583
|
|
|
7584
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
7585
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
7584
|
+
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"])));
|
|
7585
|
+
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; });
|
|
7586
7586
|
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"])));
|
|
7587
|
-
var Container$
|
|
7587
|
+
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; });
|
|
7588
7588
|
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"])));
|
|
7589
7589
|
var Total = function (_a) {
|
|
7590
7590
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7591
7591
|
var theme = useTheme();
|
|
7592
|
-
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.shades.gray550 }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$
|
|
7592
|
+
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.shades.gray550 }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$7, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7593
7593
|
};
|
|
7594
|
-
var templateObject_1$
|
|
7594
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$8, templateObject_4$7, templateObject_5$4;
|
|
7595
7595
|
|
|
7596
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
7596
|
+
var Wrapper$1 = newStyled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7597
7597
|
var color = _a.color;
|
|
7598
7598
|
return color;
|
|
7599
7599
|
});
|
|
7600
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
7600
|
+
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"])));
|
|
7601
7601
|
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"])));
|
|
7602
7602
|
var CouponItem = newStyled(Item$1)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7603
7603
|
var color = _a.color;
|
|
@@ -7611,22 +7611,22 @@ var Subtotal = function (_a) {
|
|
|
7611
7611
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
7612
7612
|
})] }), void 0));
|
|
7613
7613
|
};
|
|
7614
|
-
var templateObject_1$
|
|
7614
|
+
var templateObject_1$e, templateObject_2$a, templateObject_3$7, templateObject_4$6;
|
|
7615
7615
|
|
|
7616
7616
|
var Totals = {
|
|
7617
7617
|
Total: Total,
|
|
7618
7618
|
Subtotal: Subtotal,
|
|
7619
7619
|
};
|
|
7620
7620
|
|
|
7621
|
-
var Container$
|
|
7622
|
-
var IconContainer$1 = newStyled.div(templateObject_2$
|
|
7621
|
+
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; });
|
|
7622
|
+
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"])));
|
|
7623
7623
|
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; });
|
|
7624
7624
|
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; });
|
|
7625
7625
|
var Note = function (_a) {
|
|
7626
7626
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7627
|
-
return (jsxs$1(Container$
|
|
7627
|
+
return (jsxs$1(Container$6, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$1, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7628
7628
|
};
|
|
7629
|
-
var templateObject_1$
|
|
7629
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$6, templateObject_4$5;
|
|
7630
7630
|
|
|
7631
7631
|
var Breakpoints = {
|
|
7632
7632
|
desktop: 1200,
|
|
@@ -7656,8 +7656,8 @@ var useWindowDimensions = function () {
|
|
|
7656
7656
|
};
|
|
7657
7657
|
};
|
|
7658
7658
|
|
|
7659
|
-
var Title$1 = newStyled.h1(templateObject_1$
|
|
7660
|
-
var Line = newStyled.div(templateObject_2$
|
|
7659
|
+
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; });
|
|
7660
|
+
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; });
|
|
7661
7661
|
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'); });
|
|
7662
7662
|
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) {
|
|
7663
7663
|
return props.isMobile &&
|
|
@@ -7676,28 +7676,28 @@ var DeliveryDetails = function (_a) {
|
|
|
7676
7676
|
var isMobile = useWindowDimensions().isMobile;
|
|
7677
7677
|
return (jsxs$1("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$1, __assign({ color: theme.palette.secondary.default }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.shades.gray100 }, void 0), note && jsx$1(Note, __assign({}, note), void 0), jsxs$1(Row$1, __assign({ isMobile: isMobile, "data-testid": "DD-row" }, { children: [jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ isMobile: isMobile }, { children: [jsxs$1(SectionTitle, __assign({ color: theme.shades.gray700, isMobile: isMobile }, { children: [jsx$1(IconContainer, __assign({ isMobile: isMobile }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.shades.gray700 }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.shades.gray150 }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
7678
7678
|
};
|
|
7679
|
-
var templateObject_1$
|
|
7679
|
+
var templateObject_1$c, templateObject_2$8, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7680
7680
|
|
|
7681
|
-
var Container$
|
|
7682
|
-
var H1$
|
|
7681
|
+
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"])));
|
|
7682
|
+
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; });
|
|
7683
7683
|
var ScrollToTop = function (_a) {
|
|
7684
7684
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7685
7685
|
var theme = useTheme();
|
|
7686
|
-
return (jsxs$1(Container$
|
|
7686
|
+
return (jsxs$1(Container$5, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$2, __assign({ color: theme.shades.gray700 }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.palette.primary.default }, void 0)] }), void 0));
|
|
7687
7687
|
};
|
|
7688
|
-
var templateObject_1$
|
|
7688
|
+
var templateObject_1$b, templateObject_2$7;
|
|
7689
7689
|
|
|
7690
|
-
var Container$
|
|
7691
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
7690
|
+
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"])));
|
|
7691
|
+
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; });
|
|
7692
7692
|
var OrderBar = function (_a) {
|
|
7693
7693
|
var message = _a.message;
|
|
7694
7694
|
var theme = useTheme();
|
|
7695
|
-
return (jsxs$1(Container$
|
|
7695
|
+
return (jsxs$1(Container$4, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1$1, __assign({ color: theme.shades.gray700 }, { children: message }), void 0)] }, void 0));
|
|
7696
7696
|
};
|
|
7697
|
-
var templateObject_1$
|
|
7697
|
+
var templateObject_1$a, templateObject_2$6;
|
|
7698
7698
|
|
|
7699
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
7700
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
7699
|
+
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; });
|
|
7700
|
+
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; });
|
|
7701
7701
|
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; });
|
|
7702
7702
|
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; });
|
|
7703
7703
|
var SizeTable = function (_a) {
|
|
@@ -7705,7 +7705,7 @@ var SizeTable = function (_a) {
|
|
|
7705
7705
|
var theme = useTheme();
|
|
7706
7706
|
return (jsxs$1(TableElement, __assign({ color: theme.shades.gray700, borderColor: theme.shades.gray100 }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign({ backgroundColor: theme.shades.gray010 }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign({ borderColor: theme.shades.gray100 }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.shades.gray010 }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign({ borderColor: theme.shades.gray100 }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
7707
7707
|
};
|
|
7708
|
-
var templateObject_1$
|
|
7708
|
+
var templateObject_1$9, templateObject_2$5, templateObject_3$4, templateObject_4$3;
|
|
7709
7709
|
|
|
7710
7710
|
/* eslint-disable no-param-reassign */
|
|
7711
7711
|
var index$2 = function (breakpoints) {
|
|
@@ -7793,15 +7793,15 @@ var breakpoints = {
|
|
|
7793
7793
|
};
|
|
7794
7794
|
var mediaQueries = index$2(Object.values(breakpoints).map(function (bp) { return "@media (min-width: " + bp + "px)"; }));
|
|
7795
7795
|
|
|
7796
|
-
var Img = newStyled.img(templateObject_1$
|
|
7796
|
+
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; });
|
|
7797
7797
|
var Image = function (_a) {
|
|
7798
7798
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition;
|
|
7799
7799
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, void 0));
|
|
7800
7800
|
};
|
|
7801
|
-
var templateObject_1$
|
|
7801
|
+
var templateObject_1$8;
|
|
7802
7802
|
|
|
7803
|
-
var Container$
|
|
7804
|
-
var DescriptionContainer = newStyled.div(templateObject_2$
|
|
7803
|
+
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"])));
|
|
7804
|
+
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({
|
|
7805
7805
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
7806
7806
|
}));
|
|
7807
7807
|
var Title = newStyled.h2(function (_a) {
|
|
@@ -7835,9 +7835,9 @@ var PriceContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = _
|
|
|
7835
7835
|
var SimpleOrderItem = function (_a) {
|
|
7836
7836
|
var title = _a.title, subtitle = _a.subtitle, image = _a.image, price = _a.price, tag = _a.tag;
|
|
7837
7837
|
var theme = useTheme();
|
|
7838
|
-
return (jsxs$1(Container$
|
|
7838
|
+
return (jsxs$1(Container$3, { children: [jsx$1(Image, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container" }, { children: [jsx$1(Title, __assign({ color: theme.shades.gray700 }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.shades.gray700 }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.shades.gray700, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
7839
7839
|
};
|
|
7840
|
-
var templateObject_1$
|
|
7840
|
+
var templateObject_1$7, templateObject_2$4, templateObject_3$3;
|
|
7841
7841
|
|
|
7842
7842
|
function formatDate(date) {
|
|
7843
7843
|
var day = date.getDate();
|
|
@@ -7846,8 +7846,8 @@ function formatDate(date) {
|
|
|
7846
7846
|
return month < 10 ? day + "/0" + month + "/" + year : day + "/" + month + "/" + year;
|
|
7847
7847
|
}
|
|
7848
7848
|
|
|
7849
|
-
var Container = newStyled.div(templateObject_1$
|
|
7850
|
-
var Heading = newStyled.div(templateObject_2$
|
|
7849
|
+
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"])));
|
|
7850
|
+
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({
|
|
7851
7851
|
fontSize: ['14px', '16px'],
|
|
7852
7852
|
lineHeight: ['22px', '24px'],
|
|
7853
7853
|
}));
|
|
@@ -7870,9 +7870,9 @@ var H3$1 = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTempla
|
|
|
7870
7870
|
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"])));
|
|
7871
7871
|
var Review = function (_a) {
|
|
7872
7872
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
7873
|
-
return (jsxs$1(Container, { children: [jsxs$1(Heading, { children: [jsx$1(H2, { children: reviewerName }, void 0), formatDate(date)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(H3$1, { children: title }, void 0), jsx$1(P, { children: description }, void 0)] }, void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
7873
|
+
return (jsxs$1(Container$2, { children: [jsxs$1(Heading, { children: [jsx$1(H2, { children: reviewerName }, void 0), formatDate(date)] }, void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content" }, { children: [jsxs$1(ReviewContainer, { children: [jsx$1(H3$1, { children: title }, void 0), jsx$1(P, { children: description }, void 0)] }, void 0), jsx$1(Image, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
7874
7874
|
};
|
|
7875
|
-
var templateObject_1$
|
|
7875
|
+
var templateObject_1$6, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
7876
7876
|
|
|
7877
7877
|
var Button = newStyled.button(function () { return ({
|
|
7878
7878
|
background: 'transparent',
|
|
@@ -12125,16 +12125,16 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12125
12125
|
return Slider;
|
|
12126
12126
|
}(React.Component);
|
|
12127
12127
|
|
|
12128
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12128
|
+
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) {
|
|
12129
12129
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12130
12130
|
return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
|
|
12131
12131
|
}, function (_a) {
|
|
12132
12132
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12133
12133
|
return "-" + (arrowPaddingOffset + arrowPadding) + "rem";
|
|
12134
12134
|
});
|
|
12135
|
-
var templateObject_1$
|
|
12135
|
+
var templateObject_1$5;
|
|
12136
12136
|
|
|
12137
|
-
var getStylesBySize = function (size) {
|
|
12137
|
+
var getStylesBySize$1 = function (size) {
|
|
12138
12138
|
// rem units
|
|
12139
12139
|
switch (size) {
|
|
12140
12140
|
case ComponentSize.Large:
|
|
@@ -12166,7 +12166,7 @@ var getStylesBySize = function (size) {
|
|
|
12166
12166
|
var SliderNavigation = function (_a) {
|
|
12167
12167
|
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;
|
|
12168
12168
|
var _c = useState(0), activeIndex = _c[0], setActiveIndex = _c[1];
|
|
12169
|
-
var styles = getStylesBySize(dotsSize);
|
|
12169
|
+
var styles = getStylesBySize$1(dotsSize);
|
|
12170
12170
|
var theme = useTheme();
|
|
12171
12171
|
var nextArrow = arrows && (jsx(ArrowButton, { direction: "right", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
12172
12172
|
var prevArrow = arrows && (jsx(ArrowButton, { direction: "left", width: arrows.arrowWidth, height: arrows.arrowHeight }, void 0));
|
|
@@ -12188,13 +12188,13 @@ var SliderNavigation = function (_a) {
|
|
|
12188
12188
|
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));
|
|
12189
12189
|
};
|
|
12190
12190
|
|
|
12191
|
-
var List = newStyled.ul(templateObject_1$
|
|
12192
|
-
var Item = newStyled.li(templateObject_2$
|
|
12191
|
+
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"])));
|
|
12192
|
+
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"])));
|
|
12193
12193
|
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"])));
|
|
12194
12194
|
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"])));
|
|
12195
12195
|
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; });
|
|
12196
12196
|
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; });
|
|
12197
|
-
var templateObject_1$
|
|
12197
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1;
|
|
12198
12198
|
|
|
12199
12199
|
var DropdownListIcons = function (_a) {
|
|
12200
12200
|
var items = _a.items;
|
|
@@ -12207,7 +12207,7 @@ var Dropdown = function (_a) {
|
|
|
12207
12207
|
return (jsxs$1(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer, { children: jsx$1(TooltipArrow, { stroke: theme.shades.gray200, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign({ borderColor: theme.shades.gray200 }, { children: items.map(function (item, index) { return (jsx$1(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));
|
|
12208
12208
|
};
|
|
12209
12209
|
|
|
12210
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12210
|
+
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; });
|
|
12211
12211
|
var AmazonButton = function (_a) {
|
|
12212
12212
|
var onClick = _a.onClick;
|
|
12213
12213
|
return (jsx$1(StyledButton, __assign({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12216,7 +12216,7 @@ var PaypalButton = function (_a) {
|
|
|
12216
12216
|
var onClick = _a.onClick;
|
|
12217
12217
|
return (jsx$1(StyledButton, __assign({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12218
12218
|
};
|
|
12219
|
-
var templateObject_1$
|
|
12219
|
+
var templateObject_1$3;
|
|
12220
12220
|
|
|
12221
12221
|
var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
|
|
12222
12222
|
__proto__: null,
|
|
@@ -12224,8 +12224,8 @@ var AmazonPaypalButtons = /*#__PURE__*/Object.freeze({
|
|
|
12224
12224
|
PaypalButton: PaypalButton
|
|
12225
12225
|
});
|
|
12226
12226
|
|
|
12227
|
-
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'); });
|
|
12228
|
-
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"])));
|
|
12227
|
+
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'); });
|
|
12228
|
+
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"])));
|
|
12229
12229
|
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) {
|
|
12230
12230
|
return props.rightToLeft &&
|
|
12231
12231
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
@@ -12238,12 +12238,67 @@ var CrossSellCheckbox = function (_a) {
|
|
|
12238
12238
|
var theme = useTheme();
|
|
12239
12239
|
return (jsxs$1(Wrapper, __assign({ backgroundColor: theme.shades.gray010, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small }, void 0), jsxs$1(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign({ color: theme.shades.gray700 }, { children: title }), void 0), jsxs$1(H3, __assign({ color: theme.semantic.alert }, { children: [description, jsxs$1(FreeShipping, __assign({ color: theme.shades.gray700 }, { children: [" + ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12240
12240
|
};
|
|
12241
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
12241
|
+
var templateObject_1$2, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
12242
12242
|
|
|
12243
12243
|
var index = /*#__PURE__*/Object.freeze({
|
|
12244
12244
|
__proto__: null,
|
|
12245
12245
|
CrossSellCheckbox: CrossSellCheckbox
|
|
12246
12246
|
});
|
|
12247
12247
|
|
|
12248
|
-
|
|
12248
|
+
var ImageContainer = newStyled.div(function (_a) {
|
|
12249
|
+
var width = _a.width, height = _a.height;
|
|
12250
|
+
return ({
|
|
12251
|
+
position: 'relative',
|
|
12252
|
+
width: width,
|
|
12253
|
+
height: height,
|
|
12254
|
+
});
|
|
12255
|
+
});
|
|
12256
|
+
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"])));
|
|
12257
|
+
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; });
|
|
12258
|
+
var getStylesBySize = function (size) {
|
|
12259
|
+
switch (size) {
|
|
12260
|
+
case ComponentSize.Medium:
|
|
12261
|
+
return {
|
|
12262
|
+
width: '10.75rem',
|
|
12263
|
+
height: '14.375rem',
|
|
12264
|
+
};
|
|
12265
|
+
case ComponentSize.Small:
|
|
12266
|
+
return {
|
|
12267
|
+
width: '9.813rem',
|
|
12268
|
+
height: '13.125rem',
|
|
12269
|
+
};
|
|
12270
|
+
/* istanbul ignore next */
|
|
12271
|
+
default:
|
|
12272
|
+
return {
|
|
12273
|
+
width: '10.75rem',
|
|
12274
|
+
height: '14.375rem',
|
|
12275
|
+
};
|
|
12276
|
+
}
|
|
12277
|
+
};
|
|
12278
|
+
var ProductItemMobile = function (_a) {
|
|
12279
|
+
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;
|
|
12280
|
+
var theme = useTheme();
|
|
12281
|
+
var styles = getStylesBySize(size);
|
|
12282
|
+
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: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: ComponentSize.Small }, void 0), jsx(Rating, { size: ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
|
|
12283
|
+
};
|
|
12284
|
+
var templateObject_1$1, templateObject_2;
|
|
12285
|
+
|
|
12286
|
+
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"])));
|
|
12287
|
+
function withProductGrid(ProductItemComponent, data) {
|
|
12288
|
+
function WithProductGrid(props) {
|
|
12289
|
+
return (jsx$1(Container, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
|
|
12290
|
+
}
|
|
12291
|
+
/* istanbul ignore next */
|
|
12292
|
+
var wrappedComponentName = ProductItemComponent.displayName || ProductItemComponent.name || 'Component';
|
|
12293
|
+
WithProductGrid.displayName = "withGrid(" + wrappedComponentName + ")";
|
|
12294
|
+
return WithProductGrid;
|
|
12295
|
+
}
|
|
12296
|
+
var templateObject_1;
|
|
12297
|
+
|
|
12298
|
+
var Collection = {
|
|
12299
|
+
ProductItemMobile: ProductItemMobile,
|
|
12300
|
+
withProductGrid: withProductGrid,
|
|
12301
|
+
};
|
|
12302
|
+
|
|
12303
|
+
export { Accordion$1 as Accordion, AccordionBox, AccordionIcon, AmazonPaypalButtons as AmazonAndPaypalButtons, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, DropdownListIcons, FitPredictor, Icon, IconButton, Image, index$3 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, PaymentMethod, PriceLabel, ProductGallery, ProgressBar, RadioGroupInput, Rating, Review, ScrollToTop, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, TextButton, ThemeProvider, Timer, Tooltip, Totals };
|
|
12249
12304
|
//# sourceMappingURL=index.esm.js.map
|