@trafilea/afrodita-components 4.0.1-beta.2 → 4.0.2-beta.0
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/color/ColorRadioGroup.d.ts +2 -1
- package/build/dts/components/color/SingleColorPicker.d.ts +2 -2
- package/build/dts/components/color/SingleColorPicker.stories.d.ts +2 -2
- package/build/dts/components/size/selector/SizeSelector.d.ts +3 -1
- package/build/dts/components/size/selector/SizeSelector.stories.d.ts +2 -1
- package/build/index.d.ts +5 -2
- package/build/index.esm.js +312 -323
- package/build/index.esm.js.map +1 -1
- package/build/index.js +312 -323
- package/build/index.js.map +1 -1
- package/package.json +2 -2
package/build/index.js
CHANGED
|
@@ -6155,7 +6155,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
6155
6155
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6156
6156
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
6157
6157
|
]; });
|
|
6158
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
6158
|
+
var Input$3 = newStyled.input(templateObject_2$C || (templateObject_2$C = __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) {
|
|
6159
6159
|
var disabled = _a.disabled;
|
|
6160
6160
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
6161
6161
|
});
|
|
@@ -6181,7 +6181,7 @@ var Checkbox = function (_a) {
|
|
|
6181
6181
|
}, []);
|
|
6182
6182
|
return (jsxRuntime.jsxs(Container$B, { children: [jsxRuntime.jsx(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$2, __assign({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
6183
6183
|
};
|
|
6184
|
-
var templateObject_1$X, templateObject_2$
|
|
6184
|
+
var templateObject_1$X, templateObject_2$C;
|
|
6185
6185
|
|
|
6186
6186
|
var CustomOption = newStyled.li(function (_a) {
|
|
6187
6187
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -6299,19 +6299,126 @@ var SelectorSecondary = function (_a) {
|
|
|
6299
6299
|
} }) }, void 0));
|
|
6300
6300
|
};
|
|
6301
6301
|
|
|
6302
|
-
|
|
6303
|
-
|
|
6302
|
+
// This defines which HTML tag to render for each `variant`, it also defines
|
|
6303
|
+
// `variants` styles that are consistent through all themes.
|
|
6304
|
+
var TAGS = {
|
|
6305
|
+
hero1: newStyled.h1(templateObject_1$W || (templateObject_1$W = __makeTemplateObject([""], [""]))),
|
|
6306
|
+
hero2: newStyled.h2(templateObject_2$B || (templateObject_2$B = __makeTemplateObject([""], [""]))),
|
|
6307
|
+
hero3: newStyled.h3(templateObject_3$n || (templateObject_3$n = __makeTemplateObject([""], [""]))),
|
|
6308
|
+
display1: newStyled.h1(templateObject_4$e || (templateObject_4$e = __makeTemplateObject([""], [""]))),
|
|
6309
|
+
display2: newStyled.h2(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject([""], [""]))),
|
|
6310
|
+
heading1: newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject([""], [""]))),
|
|
6311
|
+
heading2: newStyled.h2(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject([""], [""]))),
|
|
6312
|
+
heading3: newStyled.h3(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject([""], [""]))),
|
|
6313
|
+
heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
|
|
6314
|
+
heading5: newStyled.h5(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))),
|
|
6315
|
+
heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
|
|
6316
|
+
body: newStyled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))),
|
|
6317
|
+
link: newStyled.a(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
6318
|
+
button: newStyled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
6319
|
+
pricing: newStyled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "], ["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
|
|
6320
|
+
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
6321
|
+
tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
6322
|
+
};
|
|
6323
|
+
var Text$3 = function (_a) {
|
|
6324
|
+
var variant = _a.variant, children = _a.children, size = _a.size, weight = _a.weight, allProps = __rest(_a, ["variant", "children", "size", "weight"]);
|
|
6325
|
+
var theme = useTheme();
|
|
6326
|
+
var Tag = React.useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
6327
|
+
var props = React.useMemo(function () {
|
|
6328
|
+
var _a;
|
|
6329
|
+
return (__assign(__assign({}, ((_a = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _a !== void 0 ? _a : {})), allProps));
|
|
6330
|
+
}, [variant, allProps]);
|
|
6331
|
+
var commonCSS = React.useMemo(function () {
|
|
6332
|
+
var _a, _b;
|
|
6333
|
+
// These are the common style inside a `variant`.
|
|
6334
|
+
// E.g.: Common styles for all "button".
|
|
6335
|
+
var variantstyle = (_a = theme.typography.variants[variant]) !== null && _a !== void 0 ? _a : {
|
|
6336
|
+
fontSize: 14,
|
|
6337
|
+
lineHeight: 1,
|
|
6338
|
+
};
|
|
6339
|
+
// This allow us to define different styles for different `sizes` inside a `variant`
|
|
6340
|
+
// E.g.: "button-small", "button-regular"
|
|
6341
|
+
//
|
|
6342
|
+
// We use .filter(Boolean) to ignore the `size` on the `variants` that don't have it.
|
|
6343
|
+
// E.g.: "hero1", "display1"
|
|
6344
|
+
var variantName = [variant, size].filter(Boolean).join('-');
|
|
6345
|
+
// These are styles specific to `variation-size`.
|
|
6346
|
+
var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
|
|
6347
|
+
var style = __assign(__assign({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle);
|
|
6348
|
+
if (weight) {
|
|
6349
|
+
style.fontWeight = theme.typography.config.weight[weight];
|
|
6350
|
+
}
|
|
6351
|
+
if (props.disabled) {
|
|
6352
|
+
style.opacity = 0.5;
|
|
6353
|
+
style.cursor = 'not-allowed';
|
|
6354
|
+
style.color = theme.colors.text.disabled;
|
|
6355
|
+
}
|
|
6356
|
+
return style;
|
|
6357
|
+
}, [theme, variant, weight, size, props.disabled]);
|
|
6358
|
+
// This is to make TS happy, because `href` doesn't exists on other `variants`
|
|
6359
|
+
var propsHref = props.href;
|
|
6360
|
+
var href = React.useMemo(function () {
|
|
6361
|
+
// We could use `pointer-events: none` but it prevents us from using
|
|
6362
|
+
// `cursor: not-allowed`, so we're changing the `href` for `disabled` links.
|
|
6363
|
+
if (propsHref != null && props.disabled) {
|
|
6364
|
+
return 'javascript:void(0)';
|
|
6365
|
+
}
|
|
6366
|
+
return propsHref;
|
|
6367
|
+
}, [props.disabled, propsHref]);
|
|
6368
|
+
return (jsx(Tag, __assign({}, props, { css: commonCSS, href: href }, { children: children }), void 0));
|
|
6369
|
+
};
|
|
6370
|
+
var DEFAULTS = {
|
|
6371
|
+
heading1: {
|
|
6372
|
+
weight: 'bold',
|
|
6373
|
+
},
|
|
6374
|
+
heading2: {
|
|
6375
|
+
weight: 'bold',
|
|
6376
|
+
},
|
|
6377
|
+
heading3: {
|
|
6378
|
+
weight: 'bold',
|
|
6379
|
+
},
|
|
6380
|
+
hero1: {
|
|
6381
|
+
weight: 'heavy',
|
|
6382
|
+
},
|
|
6383
|
+
hero2: {
|
|
6384
|
+
weight: 'heavy',
|
|
6385
|
+
},
|
|
6386
|
+
hero3: {
|
|
6387
|
+
weight: 'heavy',
|
|
6388
|
+
},
|
|
6389
|
+
display1: {
|
|
6390
|
+
weight: 'bold',
|
|
6391
|
+
},
|
|
6392
|
+
display2: {
|
|
6393
|
+
weight: 'bold',
|
|
6394
|
+
},
|
|
6395
|
+
body: {
|
|
6396
|
+
size: 'regular',
|
|
6397
|
+
weight: 'regular',
|
|
6398
|
+
},
|
|
6399
|
+
button: {
|
|
6400
|
+
size: 'regular',
|
|
6401
|
+
weight: 'bold',
|
|
6402
|
+
},
|
|
6403
|
+
};
|
|
6404
|
+
var templateObject_1$W, templateObject_2$B, templateObject_3$n, templateObject_4$e, templateObject_5$7, templateObject_6$5, templateObject_7$3, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
6405
|
+
|
|
6406
|
+
var ButtonsContainer = newStyled.div(templateObject_1$V || (templateObject_1$V = __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"])));
|
|
6304
6407
|
var SizeSelector = function (_a) {
|
|
6305
|
-
var sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
6306
|
-
return (jsxs("div",
|
|
6408
|
+
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
6409
|
+
return (jsxs("div", __assign({ css: {
|
|
6410
|
+
display: 'flex',
|
|
6411
|
+
flexDirection: inline ? 'row' : 'column',
|
|
6412
|
+
alignItems: inline ? 'center' : 'start',
|
|
6413
|
+
} }, { children: [jsxs(Text$3, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [label, !inline && (jsx(Text$3, __assign({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), jsx(ButtonsContainer, { children: sizes.map(function (size) {
|
|
6307
6414
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
6308
6415
|
return (jsx(SelectorSecondary, { css: {
|
|
6309
6416
|
padding: '0.75rem 1rem 0.625rem',
|
|
6310
|
-
margin: '0
|
|
6417
|
+
margin: '0.5rem',
|
|
6311
6418
|
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
|
|
6312
|
-
}) }, void 0)] }, void 0));
|
|
6419
|
+
}) }, void 0)] }), void 0));
|
|
6313
6420
|
};
|
|
6314
|
-
var templateObject_1$
|
|
6421
|
+
var templateObject_1$V;
|
|
6315
6422
|
|
|
6316
6423
|
var getStylesBySize$7 = function (size) {
|
|
6317
6424
|
switch (size) {
|
|
@@ -6340,7 +6447,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
6340
6447
|
} });
|
|
6341
6448
|
};
|
|
6342
6449
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
6343
|
-
return Icon && (jsx("span", __assign({ css: css(templateObject_1$
|
|
6450
|
+
return Icon && (jsx("span", __assign({ css: css(templateObject_1$U || (templateObject_1$U = __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));
|
|
6344
6451
|
};
|
|
6345
6452
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
6346
6453
|
if (disabled)
|
|
@@ -6356,16 +6463,16 @@ var TextButton = function (_a) {
|
|
|
6356
6463
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
6357
6464
|
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));
|
|
6358
6465
|
};
|
|
6359
|
-
var templateObject_1$
|
|
6466
|
+
var templateObject_1$U;
|
|
6360
6467
|
|
|
6361
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
6362
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
6363
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
6468
|
+
var Container$A = newStyled.div(templateObject_1$T || (templateObject_1$T = __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"])));
|
|
6469
|
+
var P$2 = newStyled.p(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6470
|
+
var PercentageSpan = newStyled.span(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
6364
6471
|
var SizeFitGuide = function (_a) {
|
|
6365
6472
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6366
6473
|
return (jsxRuntime.jsxs(Container$A, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxRuntime.jsxs(P$2, { children: [fitPercentageLabel, " ", jsxRuntime.jsxs(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6367
6474
|
};
|
|
6368
|
-
var templateObject_1$
|
|
6475
|
+
var templateObject_1$T, templateObject_2$A, templateObject_3$m;
|
|
6369
6476
|
|
|
6370
6477
|
var getStylesBySize$6 = function (size) {
|
|
6371
6478
|
switch (size) {
|
|
@@ -6395,7 +6502,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6395
6502
|
};
|
|
6396
6503
|
}
|
|
6397
6504
|
};
|
|
6398
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
6505
|
+
var Container$z = newStyled.div(templateObject_1$S || (templateObject_1$S = __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) {
|
|
6399
6506
|
var backgroundColor = _a.backgroundColor;
|
|
6400
6507
|
return backgroundColor;
|
|
6401
6508
|
}, function (_a) {
|
|
@@ -6417,7 +6524,7 @@ var Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
6417
6524
|
var size = _a.size;
|
|
6418
6525
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
6419
6526
|
});
|
|
6420
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
6527
|
+
var H3$2 = newStyled.h3(templateObject_2$z || (templateObject_2$z = __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) {
|
|
6421
6528
|
var textColor = _a.textColor;
|
|
6422
6529
|
return textColor;
|
|
6423
6530
|
}, function (_a) {
|
|
@@ -6434,7 +6541,7 @@ var DiscountTag = function (_a) {
|
|
|
6434
6541
|
var theme = useTheme();
|
|
6435
6542
|
return (jsxRuntime.jsx(Container$z, __assign({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxRuntime.jsxs(H3$2, __assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6436
6543
|
};
|
|
6437
|
-
var templateObject_1$
|
|
6544
|
+
var templateObject_1$S, templateObject_2$z;
|
|
6438
6545
|
|
|
6439
6546
|
var getStylesBySize$5 = function (size) {
|
|
6440
6547
|
switch (size) {
|
|
@@ -6458,8 +6565,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
6458
6565
|
};
|
|
6459
6566
|
}
|
|
6460
6567
|
};
|
|
6461
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
6462
|
-
var Price = newStyled.h1(templateObject_2$
|
|
6568
|
+
var Container$y = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6569
|
+
var Price = newStyled.h1(templateObject_2$y || (templateObject_2$y = __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) {
|
|
6463
6570
|
var weight = _a.weight;
|
|
6464
6571
|
return (weight ? weight : '400');
|
|
6465
6572
|
}, function (_a) {
|
|
@@ -6481,7 +6588,7 @@ var Price = newStyled.h1(templateObject_2$z || (templateObject_2$z = __makeTempl
|
|
|
6481
6588
|
var margin = _a.margin, size = _a.size;
|
|
6482
6589
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
6483
6590
|
});
|
|
6484
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
6591
|
+
var TagContainer = newStyled.h1(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
6485
6592
|
var _b;
|
|
6486
6593
|
var size = _a.size;
|
|
6487
6594
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -6491,7 +6598,7 @@ var PriceLabel = function (_a) {
|
|
|
6491
6598
|
var theme = useTheme();
|
|
6492
6599
|
return (jsxRuntime.jsxs(Container$y, { children: [jsxRuntime.jsx(Price, __assign({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsxRuntime.jsx(Price, __assign({ size: size, color: theme.colors.shades['400'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6493
6600
|
};
|
|
6494
|
-
var templateObject_1$
|
|
6601
|
+
var templateObject_1$R, templateObject_2$y, templateObject_3$l;
|
|
6495
6602
|
|
|
6496
6603
|
var OneColorSelector = function (_a) {
|
|
6497
6604
|
var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
@@ -6530,69 +6637,55 @@ var OutOfStock = function (_a) {
|
|
|
6530
6637
|
return (jsxRuntime.jsxs("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("title", { children: title }, void 0), jsxRuntime.jsx("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsxRuntime.jsx("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsxRuntime.jsx("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6531
6638
|
};
|
|
6532
6639
|
|
|
6533
|
-
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$
|
|
6534
|
-
|
|
6535
|
-
var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$
|
|
6536
|
-
var Span = newStyled.span(templateObject_4$
|
|
6537
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6640
|
+
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6641
|
+
newStyled(RadioGroup.Label)(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6642
|
+
var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$k || (templateObject_3$k = __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"])));
|
|
6643
|
+
var Span = newStyled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6644
|
+
var OptionsContainer = newStyled.div(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n margin-top: 0.63rem;\n flex-wrap: wrap;\n"])));
|
|
6538
6645
|
var Label$1 = function (_a) {
|
|
6539
6646
|
var label = _a.label, values = _a.values;
|
|
6540
|
-
return (jsxRuntime.jsxs(
|
|
6647
|
+
return (jsxRuntime.jsxs(Text$3, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
6541
6648
|
};
|
|
6542
6649
|
var Option = function (_a) {
|
|
6543
6650
|
var value = _a.value, children = _a.children;
|
|
6544
6651
|
return (jsxRuntime.jsx(CustomRadioGroupOption, __assign({ value: value }, { children: children }), void 0));
|
|
6545
6652
|
};
|
|
6546
6653
|
var ColorRadioGroup = function (_a) {
|
|
6547
|
-
var value = _a.value, onChange = _a.onChange, children = _a.children;
|
|
6548
|
-
return (jsxRuntime.jsx(CustomRadioGroup, __assign({ value: value, onChange: onChange }, { children: children }), void 0));
|
|
6654
|
+
var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
|
|
6655
|
+
return (jsxRuntime.jsx(CustomRadioGroup, __assign({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6549
6656
|
};
|
|
6550
6657
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6551
6658
|
Label: Label$1,
|
|
6552
6659
|
Option: Option,
|
|
6553
6660
|
OptionsContainer: OptionsContainer,
|
|
6554
6661
|
});
|
|
6555
|
-
var templateObject_1$
|
|
6662
|
+
var templateObject_1$Q, templateObject_2$x, templateObject_3$k, templateObject_4$d, templateObject_5$6;
|
|
6556
6663
|
|
|
6557
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
6664
|
+
var Container$x = newStyled.div(templateObject_1$P || (templateObject_1$P = __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) {
|
|
6558
6665
|
var borderColor = _a.borderColor;
|
|
6559
6666
|
return borderColor;
|
|
6560
6667
|
});
|
|
6561
|
-
var Image$4 = newStyled.img(templateObject_2$
|
|
6668
|
+
var Image$4 = newStyled.img(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n"])));
|
|
6562
6669
|
var PatternSelector = function (_a) {
|
|
6563
6670
|
var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6564
6671
|
var theme = useTheme();
|
|
6565
6672
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6566
6673
|
return (jsxRuntime.jsx(Container$x, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsxRuntime.jsx(Image$4, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6567
6674
|
};
|
|
6568
|
-
var templateObject_1$
|
|
6675
|
+
var templateObject_1$P, templateObject_2$w;
|
|
6569
6676
|
|
|
6570
6677
|
var renderOptions$1 = function (options) {
|
|
6571
6678
|
if (options.length)
|
|
6572
|
-
return options.map(function (option) { return (
|
|
6679
|
+
return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
|
|
6573
6680
|
var checked = _a.checked;
|
|
6574
|
-
return option.color ? (
|
|
6681
|
+
return option.color ? (jsx(ColorSelector, __assign({}, option.color, { selected: checked, dataTestId: "".concat(option.label, "-selector") }), void 0)) : (option.pattern && jsx(PatternSelector, { url: option.pattern.url, selected: checked }, void 0));
|
|
6575
6682
|
} }), option.label)); });
|
|
6576
6683
|
else
|
|
6577
|
-
return
|
|
6578
|
-
};
|
|
6579
|
-
var getInitialValue$1 = function (options, selectedValue) {
|
|
6580
|
-
if (selectedValue && options.includes(selectedValue))
|
|
6581
|
-
return selectedValue;
|
|
6582
|
-
else if (selectedValue)
|
|
6583
|
-
return options[0];
|
|
6584
|
-
else
|
|
6585
|
-
;
|
|
6684
|
+
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
6586
6685
|
};
|
|
6587
6686
|
var SingleColorPicker = function (_a) {
|
|
6588
|
-
var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange;
|
|
6589
|
-
|
|
6590
|
-
var _b = React.useState(initialValue), selectedColor = _b[0], setSelectedColor = _b[1];
|
|
6591
|
-
var onChangeHandler = function (selectedOption) {
|
|
6592
|
-
setSelectedColor(selectedOption);
|
|
6593
|
-
onChange(selectedOption);
|
|
6594
|
-
};
|
|
6595
|
-
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: selectedColor && selectedColor.label }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions$1(options) }, void 0)] }), void 0));
|
|
6687
|
+
var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
6688
|
+
return (jsxs(ColorRadioGroup$1, __assign({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions$1(options) }), void 0)] }), void 0));
|
|
6596
6689
|
};
|
|
6597
6690
|
|
|
6598
6691
|
var renderOptions = function (selectedColor, options) {
|
|
@@ -6631,7 +6724,7 @@ var MultiColorPicker = function (_a) {
|
|
|
6631
6724
|
return (jsxRuntime.jsxs(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsxRuntime.jsx(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsxRuntime.jsx(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
6632
6725
|
};
|
|
6633
6726
|
|
|
6634
|
-
var Image$3 = newStyled.img(templateObject_1$
|
|
6727
|
+
var Image$3 = newStyled.img(templateObject_1$O || (templateObject_1$O = __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) {
|
|
6635
6728
|
var selected = _a.selected, theme = _a.theme;
|
|
6636
6729
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
6637
6730
|
});
|
|
@@ -6640,29 +6733,29 @@ var ImageSmallPreview = function (_a) {
|
|
|
6640
6733
|
var theme = useTheme();
|
|
6641
6734
|
return jsxRuntime.jsx(Image$3, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
6642
6735
|
};
|
|
6643
|
-
var templateObject_1$
|
|
6736
|
+
var templateObject_1$O;
|
|
6644
6737
|
|
|
6645
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
6646
|
-
var Button$4 = newStyled.button(templateObject_2$
|
|
6738
|
+
var Container$w = newStyled.div(templateObject_1$N || (templateObject_1$N = __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"])));
|
|
6739
|
+
var Button$4 = newStyled.button(templateObject_2$v || (templateObject_2$v = __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"])));
|
|
6647
6740
|
var ImagePreviewList = function (_a) {
|
|
6648
6741
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
|
|
6649
6742
|
return (jsx(Container$w, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
|
|
6650
6743
|
return (jsx(Button$4, __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));
|
|
6651
6744
|
}) }), void 0));
|
|
6652
6745
|
};
|
|
6653
|
-
var templateObject_1$
|
|
6746
|
+
var templateObject_1$N, templateObject_2$v;
|
|
6654
6747
|
|
|
6655
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
6656
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6657
|
-
var TopTagContainer$1 = newStyled.div(templateObject_3$
|
|
6658
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_4$
|
|
6748
|
+
var Container$v = newStyled.div(templateObject_1$M || (templateObject_1$M = __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"])));
|
|
6749
|
+
var Image$2 = newStyled.img(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
|
|
6750
|
+
var TopTagContainer$1 = newStyled.div(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
6751
|
+
var BottomTagContainer$1 = 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"])));
|
|
6659
6752
|
var ImageProductWithTags$1 = function (_a) {
|
|
6660
6753
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
6661
6754
|
return (jsxRuntime.jsxs(Container$v, __assign({ "data-testid": dataTestId }, { children: [jsxRuntime.jsx(Image$2, { src: image.imageUrl, alt: image.alt }, void 0), jsxRuntime.jsx(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6662
6755
|
};
|
|
6663
|
-
var templateObject_1$
|
|
6756
|
+
var templateObject_1$M, templateObject_2$u, templateObject_3$j, templateObject_4$c;
|
|
6664
6757
|
|
|
6665
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
6758
|
+
var Container$u = newStyled.div(templateObject_1$L || (templateObject_1$L = __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"])));
|
|
6666
6759
|
var ProductGallery = function (_a) {
|
|
6667
6760
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6668
6761
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6674,7 +6767,7 @@ var ProductGallery = function (_a) {
|
|
|
6674
6767
|
setSelectedImage(value);
|
|
6675
6768
|
} }, void 0), jsxRuntime.jsx(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
|
|
6676
6769
|
};
|
|
6677
|
-
var templateObject_1$
|
|
6770
|
+
var templateObject_1$L;
|
|
6678
6771
|
|
|
6679
6772
|
/* base styles & size variants */
|
|
6680
6773
|
var StarStyles = {
|
|
@@ -6712,8 +6805,8 @@ var StarStyles = {
|
|
|
6712
6805
|
});
|
|
6713
6806
|
},
|
|
6714
6807
|
};
|
|
6715
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
6716
|
-
var templateObject_1$
|
|
6808
|
+
var Container$t = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6809
|
+
var templateObject_1$K;
|
|
6717
6810
|
|
|
6718
6811
|
var StarContainer = newStyled.div(function (_a) {
|
|
6719
6812
|
var size = _a.size;
|
|
@@ -6768,8 +6861,8 @@ var LabelStyles = {
|
|
|
6768
6861
|
});
|
|
6769
6862
|
},
|
|
6770
6863
|
};
|
|
6771
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
6772
|
-
var templateObject_1$
|
|
6864
|
+
var Container$s = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6865
|
+
var templateObject_1$J;
|
|
6773
6866
|
|
|
6774
6867
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6775
6868
|
var theme = _a.theme, size = _a.size;
|
|
@@ -6785,8 +6878,8 @@ var Rating = function (_a) {
|
|
|
6785
6878
|
return (jsxRuntime.jsxs(Container$s, { children: [jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
6786
6879
|
};
|
|
6787
6880
|
|
|
6788
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
6789
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
6881
|
+
var Container$r = newStyled.div(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
6882
|
+
var P$1 = newStyled.p(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"], ["\n margin: 0 0.25rem;\n font-weight: 700;\n color: ", ";\n"])), function (props) { return props.theme.colors.shades['550'].color; });
|
|
6790
6883
|
var textButtonStyles = function (theme) { return ({
|
|
6791
6884
|
border: 'none',
|
|
6792
6885
|
background: 'transparent',
|
|
@@ -6801,7 +6894,7 @@ var FitPredictor = function (_a) {
|
|
|
6801
6894
|
var theme = useTheme();
|
|
6802
6895
|
return (jsxs(Container$r, __assign({ theme: theme }, { children: [jsx(Container$r, { children: jsx(Icon.Other.FitPredictor, { width: 1.125, height: 1.125, fill: theme.colors.shades['550'].color }, void 0) }, void 0), jsx(P$1, __assign({ theme: theme }, { children: "FIT PREDICTOR" }), void 0), jsx(BaseButton, __assign({ css: textButtonStyles(theme), onClick: onClick }, { children: "Calculate your size" }), void 0)] }), void 0));
|
|
6803
6896
|
};
|
|
6804
|
-
var templateObject_1$
|
|
6897
|
+
var templateObject_1$I, templateObject_2$t;
|
|
6805
6898
|
|
|
6806
6899
|
var H2$1 = newStyled.h2(function (_a) {
|
|
6807
6900
|
var color = _a.color;
|
|
@@ -6815,7 +6908,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
6815
6908
|
margin: '0.938rem 4.188rem',
|
|
6816
6909
|
});
|
|
6817
6910
|
});
|
|
6818
|
-
var Bar = newStyled.div(templateObject_1$
|
|
6911
|
+
var Bar = newStyled.div(templateObject_1$H || (templateObject_1$H = __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) {
|
|
6819
6912
|
var backgroundColor = _a.backgroundColor;
|
|
6820
6913
|
return backgroundColor;
|
|
6821
6914
|
}, function (_a) {
|
|
@@ -6854,7 +6947,7 @@ var ProgressBar = function (_a) {
|
|
|
6854
6947
|
var theme = useTheme();
|
|
6855
6948
|
return (jsxRuntime.jsxs(Container$q, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsxRuntime.jsx(Background, __assign({ backgroundColor: theme.colors.shades['100'].color }, { children: jsxRuntime.jsx(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsxRuntime.jsx(H2$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
6856
6949
|
};
|
|
6857
|
-
var templateObject_1$
|
|
6950
|
+
var templateObject_1$H;
|
|
6858
6951
|
|
|
6859
6952
|
var getStylesBySize$4 = function (size) {
|
|
6860
6953
|
switch (size) {
|
|
@@ -6875,7 +6968,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
6875
6968
|
};
|
|
6876
6969
|
}
|
|
6877
6970
|
};
|
|
6878
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
6971
|
+
var Container$p = newStyled.div(templateObject_1$G || (templateObject_1$G = __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) {
|
|
6879
6972
|
var backgroundColor = _a.backgroundColor;
|
|
6880
6973
|
return backgroundColor;
|
|
6881
6974
|
}, function (_a) {
|
|
@@ -6905,7 +6998,7 @@ var IconButton = function (_a) {
|
|
|
6905
6998
|
var theme = useTheme();
|
|
6906
6999
|
return (jsxRuntime.jsx(Container$p, __assign({ className: disabled ? 'disabled' : '', backgroundColor: theme.component.button.primary.active.backgroundColor, hoverBackgroundColor: theme.component.button.secondary.active.backgroundColor, disabledColor: theme.colors.shades['50'].color, disabledIconColor: theme.colors.shades['200'].color, size: size, "data-testid": "Container", onClick: disabled ? function () { } : onClick }, { children: children }), void 0));
|
|
6907
7000
|
};
|
|
6908
|
-
var templateObject_1$
|
|
7001
|
+
var templateObject_1$G;
|
|
6909
7002
|
|
|
6910
7003
|
var TooltipArrow = function (_a) {
|
|
6911
7004
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -6985,7 +7078,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6985
7078
|
}
|
|
6986
7079
|
};
|
|
6987
7080
|
|
|
6988
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7081
|
+
var Wrapper$5 = newStyled.div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
6989
7082
|
var position = _a.position;
|
|
6990
7083
|
return getWrapperFlexDirection(position);
|
|
6991
7084
|
});
|
|
@@ -7009,11 +7102,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
7009
7102
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
7010
7103
|
return actual === expected ? margin : '0';
|
|
7011
7104
|
};
|
|
7012
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
7105
|
+
var ContentWrapper = newStyled.div(templateObject_2$s || (templateObject_2$s = __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) {
|
|
7013
7106
|
var borderColor = _a.borderColor;
|
|
7014
7107
|
return borderColor;
|
|
7015
7108
|
});
|
|
7016
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
7109
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"], ["\n width: 1.25rem;\n height: 0.75rem;\n display: flex;\n transform: rotate(", ");\n padding: ", ";\n margin: ", ";\n"])), function (_a) {
|
|
7017
7110
|
var position = _a.position;
|
|
7018
7111
|
return getArrowRotation(position);
|
|
7019
7112
|
}, function (_a) {
|
|
@@ -7023,17 +7116,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$j || (templateObject_
|
|
|
7023
7116
|
var position = _a.position;
|
|
7024
7117
|
return getArrowContainerMargin(position);
|
|
7025
7118
|
});
|
|
7026
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
7119
|
+
var TooltipText = newStyled.div(templateObject_4$b || (templateObject_4$b = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
7027
7120
|
var color = _a.color;
|
|
7028
7121
|
return color;
|
|
7029
7122
|
});
|
|
7030
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
7031
|
-
var Title$3 = newStyled.h1(templateObject_6$
|
|
7123
|
+
var TopSection = newStyled.div(templateObject_5$5 || (templateObject_5$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
7124
|
+
var Title$3 = newStyled.h1(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
7032
7125
|
var color = _a.color;
|
|
7033
7126
|
return color;
|
|
7034
7127
|
});
|
|
7035
|
-
var IconContainer$4 = newStyled.div(templateObject_7$
|
|
7036
|
-
var templateObject_1$
|
|
7128
|
+
var IconContainer$4 = newStyled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
7129
|
+
var templateObject_1$F, templateObject_2$s, templateObject_3$i, templateObject_4$b, templateObject_5$5, templateObject_6$4, templateObject_7$2;
|
|
7037
7130
|
|
|
7038
7131
|
var Tooltip = function (_a) {
|
|
7039
7132
|
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;
|
|
@@ -7184,9 +7277,9 @@ var ContainerStyles = {
|
|
|
7184
7277
|
},
|
|
7185
7278
|
};
|
|
7186
7279
|
|
|
7187
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7280
|
+
var Wrapper$4 = 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"])));
|
|
7188
7281
|
var Container$o = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7189
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
7282
|
+
var Input$2 = newStyled.input(templateObject_2$r || (templateObject_2$r = __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) {
|
|
7190
7283
|
var disabled = _a.disabled;
|
|
7191
7284
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
7192
7285
|
});
|
|
@@ -7203,7 +7296,7 @@ var RadioInput = function (_a) {
|
|
|
7203
7296
|
};
|
|
7204
7297
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsxs(Container$o, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsxRuntime.jsx(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsxRuntime.jsx(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsxRuntime.jsx(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
7205
7298
|
};
|
|
7206
|
-
var templateObject_1$
|
|
7299
|
+
var templateObject_1$E, templateObject_2$r;
|
|
7207
7300
|
|
|
7208
7301
|
var RadioGroupInput = function (_a) {
|
|
7209
7302
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -7217,9 +7310,9 @@ var RadioGroupInput = function (_a) {
|
|
|
7217
7310
|
}) }), void 0));
|
|
7218
7311
|
};
|
|
7219
7312
|
|
|
7220
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
7221
|
-
var Container$n = newStyled.div(templateObject_2$
|
|
7222
|
-
var Text$
|
|
7313
|
+
var Wrapper$3 = newStyled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7314
|
+
var Container$n = newStyled.div(templateObject_2$q || (templateObject_2$q = __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"])));
|
|
7315
|
+
var Text$2 = newStyled.h4(templateObject_3$h || (templateObject_3$h = __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) {
|
|
7223
7316
|
var color = _a.color;
|
|
7224
7317
|
return color;
|
|
7225
7318
|
}, function (_a) {
|
|
@@ -7232,32 +7325,32 @@ var Text$3 = newStyled.h4(templateObject_3$i || (templateObject_3$i = __makeTemp
|
|
|
7232
7325
|
var Minimalistic = function (_a) {
|
|
7233
7326
|
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;
|
|
7234
7327
|
var theme = useTheme();
|
|
7235
|
-
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$n, __assign({ "data-testid": "TopSection" }, { children: [jsxRuntime.jsx(Text$
|
|
7328
|
+
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$n, __assign({ "data-testid": "TopSection" }, { children: [jsxRuntime.jsx(Text$2, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: exports.ComponentSize.Small }, void 0)] }), void 0), jsxRuntime.jsxs(Container$n, __assign({ "data-testid": "BottomSection" }, { children: [jsxRuntime.jsxs(Text$2, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxRuntime.jsxs(Text$2, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7236
7329
|
};
|
|
7237
|
-
var templateObject_1$
|
|
7330
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$h;
|
|
7238
7331
|
|
|
7239
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
7240
|
-
var Title$2 = newStyled.h1(templateObject_2$
|
|
7241
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
7242
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
7332
|
+
var Container$m = newStyled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
7333
|
+
var Title$2 = newStyled.h1(templateObject_2$p || (templateObject_2$p = __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; });
|
|
7334
|
+
var Details$1 = newStyled.span(templateObject_3$g || (templateObject_3$g = __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; });
|
|
7335
|
+
var PriceContainer$1 = newStyled.span(templateObject_4$a || (templateObject_4$a = __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"])));
|
|
7243
7336
|
var Simple = function (_a) {
|
|
7244
7337
|
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;
|
|
7245
7338
|
var theme = useTheme();
|
|
7246
7339
|
return (jsxRuntime.jsx(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxRuntime.jsxs(Container$m, { children: [jsxRuntime.jsx(Title$2, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxRuntime.jsxs(Details$1, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsxRuntime.jsx(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#d3373c", size: exports.ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7247
7340
|
};
|
|
7248
|
-
var templateObject_1$
|
|
7341
|
+
var templateObject_1$C, templateObject_2$p, templateObject_3$g, templateObject_4$a;
|
|
7249
7342
|
|
|
7250
7343
|
var Bundle = {
|
|
7251
7344
|
Minimalistic: Minimalistic,
|
|
7252
7345
|
Simple: Simple,
|
|
7253
7346
|
};
|
|
7254
7347
|
|
|
7255
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
7348
|
+
var Container$l = newStyled.div(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
7256
7349
|
var Tag = function (_a) {
|
|
7257
7350
|
var text = _a.text, className = _a.className;
|
|
7258
7351
|
return jsxRuntime.jsx(Container$l, __assign({ className: className }, { children: text }), void 0);
|
|
7259
7352
|
};
|
|
7260
|
-
var templateObject_1$
|
|
7353
|
+
var templateObject_1$B;
|
|
7261
7354
|
|
|
7262
7355
|
var getStylesBySize$3 = function (size) {
|
|
7263
7356
|
switch (size) {
|
|
@@ -7358,11 +7451,11 @@ var Timer = function (_a) {
|
|
|
7358
7451
|
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
|
|
7359
7452
|
};
|
|
7360
7453
|
|
|
7361
|
-
var Label = newStyled.span(templateObject_1$
|
|
7454
|
+
var Label = newStyled.span(templateObject_1$A || (templateObject_1$A = __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) {
|
|
7362
7455
|
var color = _a.color;
|
|
7363
7456
|
return color;
|
|
7364
7457
|
});
|
|
7365
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
7458
|
+
var MandatoryIcon = newStyled.span(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n color: ", ";\n margin-left: 0.25rem;\n"], ["\n color: ", ";\n margin-left: 0.25rem;\n"])), function (_a) {
|
|
7366
7459
|
var color = _a.color;
|
|
7367
7460
|
return color;
|
|
7368
7461
|
});
|
|
@@ -7371,7 +7464,7 @@ var InputLabel = function (_a) {
|
|
|
7371
7464
|
var theme = useTheme();
|
|
7372
7465
|
return (jsxRuntime.jsxs(Label, __assign({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsxRuntime.jsx(MandatoryIcon, __assign({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
7373
7466
|
};
|
|
7374
|
-
var templateObject_1$
|
|
7467
|
+
var templateObject_1$A, templateObject_2$o;
|
|
7375
7468
|
|
|
7376
7469
|
var isEmpty = function (value) {
|
|
7377
7470
|
return value.length === 0;
|
|
@@ -7381,20 +7474,20 @@ var sliceString = function (str, maxLength) {
|
|
|
7381
7474
|
return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
|
|
7382
7475
|
};
|
|
7383
7476
|
|
|
7384
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
7385
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
7477
|
+
var ErrorText = newStyled.h3(templateObject_1$z || (templateObject_1$z = __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; });
|
|
7478
|
+
var ErrorContainer = newStyled.div(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
7386
7479
|
var Error$1 = function (_a) {
|
|
7387
7480
|
var error = _a.error;
|
|
7388
7481
|
var theme = useTheme();
|
|
7389
7482
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
7390
7483
|
};
|
|
7391
|
-
var templateObject_1$
|
|
7484
|
+
var templateObject_1$z, templateObject_2$n;
|
|
7392
7485
|
|
|
7393
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
7486
|
+
var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n"], ["\n input {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
7394
7487
|
var color = _a.color;
|
|
7395
7488
|
return color;
|
|
7396
7489
|
});
|
|
7397
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
7490
|
+
var StyledInput = newStyled.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\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 box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n"], ["\n padding: ", ";\n font-size: ", ";\n border-radius: ", ";\n border: ", ";\n line-height: ", ";\n color: ", ";\n font-weight: ", ";\n 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 box-shadow: ", ";\n }\n\n &:disabled {\n background-color: ", ";\n border: 0.063rem solid ", ";\n color: ", ";\n\n &::placeholder {\n color: ", ";\n }\n }\n"])), function (_a) {
|
|
7398
7491
|
var padding = _a.padding;
|
|
7399
7492
|
return padding;
|
|
7400
7493
|
}, function (_a) {
|
|
@@ -7437,8 +7530,8 @@ var StyledInput = newStyled.input(templateObject_2$n || (templateObject_2$n = __
|
|
|
7437
7530
|
var disabledColor = _a.disabledColor;
|
|
7438
7531
|
return disabledColor;
|
|
7439
7532
|
});
|
|
7440
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
7441
|
-
var templateObject_1$
|
|
7533
|
+
var InputWrapper = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n position: relative;\n display: flex;\n height: 100%;\n"], ["\n position: relative;\n display: flex;\n height: 100%;\n"])));
|
|
7534
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$f;
|
|
7442
7535
|
|
|
7443
7536
|
var BaseInput = function (_a) {
|
|
7444
7537
|
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"]);
|
|
@@ -7486,11 +7579,11 @@ var BaseInput = function (_a) {
|
|
|
7486
7579
|
: '' }, { children: [label && (jsxRuntime.jsx(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxRuntime.jsxs(InputWrapper, __assign({ className: "inputWrapper" }, { children: [jsxRuntime.jsx(StyledInput, __assign({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: value }, rest, styling), void 0), children] }), void 0), required && status === exports.InputValidationType.Error && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }), void 0));
|
|
7487
7580
|
};
|
|
7488
7581
|
|
|
7489
|
-
var Container$j = newStyled.div(templateObject_1$
|
|
7582
|
+
var Container$j = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n input {\n border-radius: ", ";\n }\n"], ["\n input {\n border-radius: ", ";\n }\n"])), function (_a) {
|
|
7490
7583
|
var theme = _a.theme;
|
|
7491
7584
|
return theme.component.inputCustom.input.borderRadius;
|
|
7492
7585
|
});
|
|
7493
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
7586
|
+
var ButtonContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __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: ", ";\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: ", ";\n }\n"])), function (_a) {
|
|
7494
7587
|
var theme = _a.theme;
|
|
7495
7588
|
return theme.component.inputCustom.button.borderRadius;
|
|
7496
7589
|
});
|
|
@@ -7504,18 +7597,18 @@ var Custom = function (_a) {
|
|
|
7504
7597
|
};
|
|
7505
7598
|
return (jsxRuntime.jsx(Container$j, __assign({ theme: theme }, { children: jsxRuntime.jsx(BaseInput, __assign({}, rest, { children: jsxRuntime.jsx(ButtonContainer$1, __assign({ theme: theme }, { children: type === 'primary' ? jsxRuntime.jsx(ButtonPrimary, __assign({}, props), void 0) : jsxRuntime.jsx(ButtonSecondary, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7506
7599
|
};
|
|
7507
|
-
var templateObject_1$
|
|
7600
|
+
var templateObject_1$x, templateObject_2$l;
|
|
7508
7601
|
|
|
7509
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
7510
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
7511
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
7602
|
+
var SuccessContainer = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n height: 3rem;\n display: flex;\n"], ["\n height: 3rem;\n display: flex;\n"])));
|
|
7603
|
+
var SuccessMessage = newStyled.div(templateObject_2$k || (templateObject_2$k = __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"])));
|
|
7604
|
+
var SuccessText = newStyled.span(templateObject_3$e || (templateObject_3$e = __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"])));
|
|
7512
7605
|
var Success = function (_a) {
|
|
7513
7606
|
var children = _a.children, successText = _a.successText;
|
|
7514
7607
|
return (jsxRuntime.jsxs(SuccessContainer, { children: [jsxRuntime.jsxs(SuccessMessage, { children: [jsxRuntime.jsx(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsxRuntime.jsx(SuccessText, { children: successText }, void 0)] }, void 0), children] }, void 0));
|
|
7515
7608
|
};
|
|
7516
|
-
var templateObject_1$
|
|
7609
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$e;
|
|
7517
7610
|
|
|
7518
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
7611
|
+
var ButtonContainer = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n margin-left: 0.625rem;\n height: 100%;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"], ["\n margin-left: 0.625rem;\n height: 100%;\n\n button {\n width: 100%;\n height: 100%;\n background-color: ", ";\n }\n"])), function (_a) {
|
|
7519
7612
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
7520
7613
|
return status === exports.InputValidationType.Empty &&
|
|
7521
7614
|
type === 'primary' &&
|
|
@@ -7529,10 +7622,10 @@ var BasePlusButton = function (_a) {
|
|
|
7529
7622
|
var Input = (jsxRuntime.jsx(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsxRuntime.jsx(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsxRuntime.jsx(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === exports.InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
7530
7623
|
return success ? SuccessComponent : Input;
|
|
7531
7624
|
};
|
|
7532
|
-
var templateObject_1$
|
|
7625
|
+
var templateObject_1$v;
|
|
7533
7626
|
|
|
7534
|
-
var Container$i = newStyled.div(templateObject_1$
|
|
7535
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
7627
|
+
var Container$i = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n input {\n padding-right: 2.688rem;\n }\n"], ["\n input {\n padding-right: 2.688rem;\n }\n"])));
|
|
7628
|
+
var IconContainer$3 = newStyled.div(templateObject_2$j || (templateObject_2$j = __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; });
|
|
7536
7629
|
var BasePlusIcon = function (_a) {
|
|
7537
7630
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7538
7631
|
var theme = useTheme();
|
|
@@ -7543,7 +7636,7 @@ var BasePlusIcon = function (_a) {
|
|
|
7543
7636
|
? theme.colors.semantic.urgent.color
|
|
7544
7637
|
: '' }, { children: React.createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
7545
7638
|
};
|
|
7546
|
-
var templateObject_1$
|
|
7639
|
+
var templateObject_1$u, templateObject_2$j;
|
|
7547
7640
|
|
|
7548
7641
|
var Input$1 = {
|
|
7549
7642
|
Simple: BaseInput,
|
|
@@ -7552,7 +7645,7 @@ var Input$1 = {
|
|
|
7552
7645
|
SimplePlusIcon: BasePlusIcon,
|
|
7553
7646
|
};
|
|
7554
7647
|
|
|
7555
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
7648
|
+
var Container$h = newStyled.div(templateObject_1$t || (templateObject_1$t = __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) {
|
|
7556
7649
|
var width = _a.width;
|
|
7557
7650
|
return width;
|
|
7558
7651
|
}, function (_a) {
|
|
@@ -7570,9 +7663,9 @@ var PaymentMethod = function (_a) {
|
|
|
7570
7663
|
var theme = useTheme();
|
|
7571
7664
|
return (jsxRuntime.jsx(Container$h, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: React.createElement(Icon) }), void 0));
|
|
7572
7665
|
};
|
|
7573
|
-
var templateObject_1$
|
|
7666
|
+
var templateObject_1$t;
|
|
7574
7667
|
|
|
7575
|
-
var Text$
|
|
7668
|
+
var Text$1 = newStyled.h3(templateObject_1$s || (templateObject_1$s = __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) {
|
|
7576
7669
|
var backgroundColor = _a.backgroundColor;
|
|
7577
7670
|
return backgroundColor;
|
|
7578
7671
|
}, function (_a) {
|
|
@@ -7582,29 +7675,29 @@ var Text$2 = newStyled.h3(templateObject_1$t || (templateObject_1$t = __makeTemp
|
|
|
7582
7675
|
var OfferBanner = function (_a) {
|
|
7583
7676
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
7584
7677
|
var theme = useTheme();
|
|
7585
|
-
return (jsxRuntime.jsx(Text$
|
|
7678
|
+
return (jsxRuntime.jsx(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
7586
7679
|
};
|
|
7587
|
-
var templateObject_1$
|
|
7680
|
+
var templateObject_1$s;
|
|
7588
7681
|
|
|
7589
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
7590
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
7591
|
-
var Currency = newStyled.span(templateObject_3$
|
|
7592
|
-
var Container$g = newStyled.div(templateObject_4$
|
|
7593
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
7682
|
+
var Wrapper$2 = newStyled.div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
7683
|
+
var GrandTotal = newStyled.h1(templateObject_2$i || (templateObject_2$i = __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; });
|
|
7684
|
+
var Currency = newStyled.span(templateObject_3$d || (templateObject_3$d = __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"])));
|
|
7685
|
+
var Container$g = newStyled.div(templateObject_4$9 || (templateObject_4$9 = __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; });
|
|
7686
|
+
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"])));
|
|
7594
7687
|
var Total = function (_a) {
|
|
7595
7688
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7596
7689
|
var theme = useTheme();
|
|
7597
7690
|
return (jsxRuntime.jsxs(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxRuntime.jsxs(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsxRuntime.jsx(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxRuntime.jsxs(Container$g, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsxRuntime.jsx(Discount, { children: saving.savingText }, void 0), jsxRuntime.jsx(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7598
7691
|
};
|
|
7599
|
-
var templateObject_1$
|
|
7692
|
+
var templateObject_1$r, templateObject_2$i, templateObject_3$d, templateObject_4$9, templateObject_5$4;
|
|
7600
7693
|
|
|
7601
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
7694
|
+
var Wrapper$1 = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7602
7695
|
var color = _a.color;
|
|
7603
7696
|
return color;
|
|
7604
7697
|
});
|
|
7605
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
7606
|
-
var Item$1 = newStyled.h4(templateObject_3$
|
|
7607
|
-
var CouponItem = newStyled(Item$1)(templateObject_4$
|
|
7698
|
+
var ItemContainer = newStyled.div(templateObject_2$h || (templateObject_2$h = __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"])));
|
|
7699
|
+
var Item$1 = newStyled.h4(templateObject_3$c || (templateObject_3$c = __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"])));
|
|
7700
|
+
var CouponItem = newStyled(Item$1)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7608
7701
|
var color = _a.color;
|
|
7609
7702
|
return color;
|
|
7610
7703
|
});
|
|
@@ -7616,22 +7709,22 @@ var Subtotal = function (_a) {
|
|
|
7616
7709
|
return (jsxRuntime.jsxs(ItemContainer, { children: [jsxRuntime.jsxs(CouponItem, __assign({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsxRuntime.jsx(CouponItem, __assign({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
7617
7710
|
})] }), void 0));
|
|
7618
7711
|
};
|
|
7619
|
-
var templateObject_1$
|
|
7712
|
+
var templateObject_1$q, templateObject_2$h, templateObject_3$c, templateObject_4$8;
|
|
7620
7713
|
|
|
7621
7714
|
var Totals = {
|
|
7622
7715
|
Total: Total,
|
|
7623
7716
|
Subtotal: Subtotal,
|
|
7624
7717
|
};
|
|
7625
7718
|
|
|
7626
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
7627
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
7628
|
-
var Text
|
|
7629
|
-
var Details = newStyled.span(templateObject_4$
|
|
7719
|
+
var Container$f = newStyled.div(templateObject_1$p || (templateObject_1$p = __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; });
|
|
7720
|
+
var IconContainer$2 = newStyled.div(templateObject_2$g || (templateObject_2$g = __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"])));
|
|
7721
|
+
var Text = newStyled.p(templateObject_3$b || (templateObject_3$b = __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; });
|
|
7722
|
+
var Details = newStyled.span(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
7630
7723
|
var Note = function (_a) {
|
|
7631
7724
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7632
|
-
return (jsxRuntime.jsxs(Container$f, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text
|
|
7725
|
+
return (jsxRuntime.jsxs(Container$f, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsxRuntime.jsx(IconContainer$2, { children: jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsxRuntime.jsx("div", { children: jsxRuntime.jsxs(Text, __assign({ color: color }, { children: [jsxRuntime.jsxs(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7633
7726
|
};
|
|
7634
|
-
var templateObject_1$
|
|
7727
|
+
var templateObject_1$p, templateObject_2$g, templateObject_3$b, templateObject_4$7;
|
|
7635
7728
|
|
|
7636
7729
|
/* eslint-disable no-param-reassign */
|
|
7637
7730
|
var index$2 = function (breakpoints) {
|
|
@@ -7721,14 +7814,14 @@ var mediaQueries = function (_a) {
|
|
|
7721
7814
|
], { literal: true });
|
|
7722
7815
|
};
|
|
7723
7816
|
|
|
7724
|
-
var Title$1 = newStyled.h1(templateObject_1$
|
|
7725
|
-
var Line = newStyled.div(templateObject_2$
|
|
7726
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7817
|
+
var Title$1 = newStyled.h1(templateObject_1$o || (templateObject_1$o = __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; });
|
|
7818
|
+
var Line = newStyled.div(templateObject_2$f || (templateObject_2$f = __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; });
|
|
7819
|
+
var Row$1 = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"], ["\n display: flex;\n ", "\n justify-content: space-between;\n align-items: flex-start;\n"])), function (props) {
|
|
7727
7820
|
return mediaQueries(props)({
|
|
7728
7821
|
flexDirection: ['column', 'row'],
|
|
7729
7822
|
});
|
|
7730
7823
|
});
|
|
7731
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
7824
|
+
var Col$1 = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex: 1;\n ", "\n"])), function (props) {
|
|
7732
7825
|
return mediaQueries(props)({
|
|
7733
7826
|
margin: ['0', '0 1.25rem'],
|
|
7734
7827
|
marginBottom: ['1.875rem', '0'],
|
|
@@ -7737,13 +7830,13 @@ var Col$1 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemp
|
|
|
7737
7830
|
width: ['100%', 'inherit'],
|
|
7738
7831
|
});
|
|
7739
7832
|
});
|
|
7740
|
-
var IconContainer$1 = newStyled.div(templateObject_5$
|
|
7833
|
+
var IconContainer$1 = newStyled.div(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"], ["\n width: 1.375rem;\n height: 1.375rem;\n margin-right: 0.438rem;\n ", "\n"])), function (props) {
|
|
7741
7834
|
return mediaQueries(props)({
|
|
7742
7835
|
marginBottom: ['1.875rem', '0'],
|
|
7743
7836
|
width: ['auto', '1.375rem'],
|
|
7744
7837
|
});
|
|
7745
7838
|
});
|
|
7746
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7839
|
+
var SectionTitle = newStyled.h1(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"], ["\n ", "\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 600;\n margin: 0;\n"])), function (props) {
|
|
7747
7840
|
return mediaQueries(props)({
|
|
7748
7841
|
display: ['block', 'flex'],
|
|
7749
7842
|
});
|
|
@@ -7751,53 +7844,53 @@ var SectionTitle = newStyled.h1(templateObject_6$4 || (templateObject_6$4 = __ma
|
|
|
7751
7844
|
var theme = _a.theme;
|
|
7752
7845
|
return theme.colors.shades['700'].color;
|
|
7753
7846
|
});
|
|
7754
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7755
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8
|
|
7847
|
+
var SectionDetails = newStyled.p(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-top: 0.625rem;\n"], ["\n color: ", ";\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 400;\n margin: 0;\n margin-top: 0.625rem;\n"])), function (props) { return props.color; });
|
|
7848
|
+
var KeepMeUpdated = newStyled.h1(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"], ["\n border: 0.063rem solid ", ";\n color: #0078ff;\n border-radius: 0.313rem;\n padding: 0.625rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: 600;\n margin: 0;\n margin-top: 0.625rem;\n display: flex;\n align-items: center;\n background-color: #fff;\n user-select: none;\n\n svg {\n margin-right: 0.375rem;\n }\n\n &:hover {\n cursor: pointer;\n }\n"])), function (props) { return props.borderColor; });
|
|
7756
7849
|
var DeliveryDetails = function (_a) {
|
|
7757
7850
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7758
7851
|
var theme = useTheme();
|
|
7759
7852
|
return (jsxRuntime.jsxs("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsxRuntime.jsx(Title$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsxRuntime.jsx(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsxRuntime.jsx(Note, __assign({}, note), void 0), jsxRuntime.jsxs(Row$1, __assign({ "data-testid": "DD-row", theme: theme }, { children: [jsxRuntime.jsxs(Col$1, __assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxRuntime.jsxs(Col$1, __assign({ theme: theme }, { children: [jsxRuntime.jsxs(SectionTitle, __assign({ theme: theme }, { children: [jsxRuntime.jsx(IconContainer$1, __assign({ theme: theme }, { children: jsxRuntime.jsx(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsxRuntime.jsx(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxRuntime.jsxs(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsxRuntime.jsx(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
7760
7853
|
};
|
|
7761
|
-
var templateObject_1$
|
|
7854
|
+
var templateObject_1$o, templateObject_2$f, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7762
7855
|
|
|
7763
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
7764
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
7856
|
+
var Container$e = newStyled.div(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
7857
|
+
var H1$2 = newStyled.h1(templateObject_2$e || (templateObject_2$e = __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; });
|
|
7765
7858
|
var ScrollToTop = function (_a) {
|
|
7766
7859
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7767
7860
|
var theme = useTheme();
|
|
7768
7861
|
return (jsxRuntime.jsxs(Container$e, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsxRuntime.jsx(H1$2, __assign({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsxRuntime.jsx(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
7769
7862
|
};
|
|
7770
|
-
var templateObject_1$
|
|
7863
|
+
var templateObject_1$n, templateObject_2$e;
|
|
7771
7864
|
|
|
7772
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
7773
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
7865
|
+
var Container$d = newStyled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
7866
|
+
var H1$1 = newStyled.h1(templateObject_2$d || (templateObject_2$d = __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; });
|
|
7774
7867
|
var OrderBar = function (_a) {
|
|
7775
7868
|
var message = _a.message;
|
|
7776
7869
|
var theme = useTheme();
|
|
7777
7870
|
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsxRuntime.jsx(H1$1, __assign({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
7778
7871
|
};
|
|
7779
|
-
var templateObject_1$
|
|
7872
|
+
var templateObject_1$m, templateObject_2$d;
|
|
7780
7873
|
|
|
7781
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
7782
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
7783
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
7784
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
7874
|
+
var TableElement = newStyled.table(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"], ["\n box-sizing: border-box;\n border-radius: 0.5rem;\n border: 0.063rem solid ", ";\n border-spacing: 0;\n font-size: 0.875rem;\n line-height: 3.125rem;\n width: 100%;\n color: ", ";\n"])), function (props) { return props.borderColor; }, function (props) { return props.color; });
|
|
7875
|
+
var TableCell = newStyled.td(templateObject_2$c || (templateObject_2$c = __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; });
|
|
7876
|
+
var TableHead = newStyled.th(templateObject_3$9 || (templateObject_3$9 = __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; });
|
|
7877
|
+
var TableRow = newStyled.tr(templateObject_4$5 || (templateObject_4$5 = __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; });
|
|
7785
7878
|
var SizeTable = function (_a) {
|
|
7786
7879
|
var headers = _a.headers, data = _a.data;
|
|
7787
7880
|
var theme = useTheme();
|
|
7788
7881
|
return (jsxRuntime.jsxs(TableElement, __assign({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx(TableRow, __assign({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsxRuntime.jsx(TableHead, __assign({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsxRuntime.jsx("tbody", { children: data.map(function (row, index) { return (jsxRuntime.jsx(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsxRuntime.jsx(TableCell, __assign({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
7789
7882
|
};
|
|
7790
|
-
var templateObject_1$
|
|
7883
|
+
var templateObject_1$l, templateObject_2$c, templateObject_3$9, templateObject_4$5;
|
|
7791
7884
|
|
|
7792
|
-
var Img = newStyled.img(templateObject_1$
|
|
7885
|
+
var Img = newStyled.img(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
7793
7886
|
var Image$1 = function (_a) {
|
|
7794
7887
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition;
|
|
7795
7888
|
return (jsxRuntime.jsx(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, void 0));
|
|
7796
7889
|
};
|
|
7797
|
-
var templateObject_1$
|
|
7890
|
+
var templateObject_1$k;
|
|
7798
7891
|
|
|
7799
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
7800
|
-
var DescriptionContainer = newStyled.div(templateObject_2$
|
|
7892
|
+
var Container$c = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n"])));
|
|
7893
|
+
var DescriptionContainer = newStyled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n width: 100%;\n"])), function (_a) {
|
|
7801
7894
|
var theme = _a.theme;
|
|
7802
7895
|
return mediaQueries({ theme: theme })({
|
|
7803
7896
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
@@ -7823,7 +7916,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
7823
7916
|
margin: '0.063rem 0',
|
|
7824
7917
|
});
|
|
7825
7918
|
});
|
|
7826
|
-
var PriceContainer = newStyled.div(templateObject_3$
|
|
7919
|
+
var PriceContainer = newStyled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"], ["\n display: flex;\n ", ";\n height: 100%;\n align-items: end;\n margin-top: 0.219rem;\n"])), function (_a) {
|
|
7827
7920
|
var withTag = _a.withTag, theme = _a.theme;
|
|
7828
7921
|
return withTag
|
|
7829
7922
|
? mediaQueries({ theme: theme })({
|
|
@@ -7837,7 +7930,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
7837
7930
|
var theme = useTheme();
|
|
7838
7931
|
return (jsxRuntime.jsxs(Container$c, { children: [jsxRuntime.jsx(Image$1, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxRuntime.jsxs(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsxRuntime.jsx(Title, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsx(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxRuntime.jsxs(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsxRuntime.jsx(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsxRuntime.jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: exports.ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
7839
7932
|
};
|
|
7840
|
-
var templateObject_1$
|
|
7933
|
+
var templateObject_1$j, templateObject_2$b, templateObject_3$8;
|
|
7841
7934
|
|
|
7842
7935
|
function formatDate(date) {
|
|
7843
7936
|
var day = date.getDate();
|
|
@@ -7846,47 +7939,47 @@ function formatDate(date) {
|
|
|
7846
7939
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
7847
7940
|
}
|
|
7848
7941
|
|
|
7849
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
7850
|
-
var Heading = newStyled.div(templateObject_2$
|
|
7942
|
+
var Container$b = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"], ["\n display: flex;\n flex-direction: column;\n width: auto;\n color: #292929;\n"])));
|
|
7943
|
+
var Heading = newStyled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"], ["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n ", ";\n text-align: right;\n margin-bottom: 10px;\n"])), function (_a) {
|
|
7851
7944
|
var theme = _a.theme;
|
|
7852
7945
|
return mediaQueries({ theme: theme })({
|
|
7853
7946
|
fontSize: ['14px', '16px'],
|
|
7854
7947
|
lineHeight: ['22px', '24px'],
|
|
7855
7948
|
});
|
|
7856
7949
|
});
|
|
7857
|
-
var Content = newStyled.div(templateObject_3$
|
|
7950
|
+
var Content = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n ", ";\n"], ["\n display: flex;\n justify-content: space-between;\n ", ";\n"])), function (_a) {
|
|
7858
7951
|
var theme = _a.theme;
|
|
7859
7952
|
return mediaQueries({ theme: theme })({
|
|
7860
7953
|
flexDirection: ['column', 'row'],
|
|
7861
7954
|
});
|
|
7862
7955
|
});
|
|
7863
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
7956
|
+
var ReviewContainer = newStyled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n ", ";\n"], ["\n display: flex;\n flex-direction: column;\n ", ";\n"])), function (_a) {
|
|
7864
7957
|
var theme = _a.theme;
|
|
7865
7958
|
return mediaQueries({ theme: theme })({
|
|
7866
7959
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
7867
7960
|
});
|
|
7868
7961
|
});
|
|
7869
|
-
var H2 = newStyled.h2(templateObject_5$
|
|
7962
|
+
var H2 = newStyled.h2(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-weight: 600;\n ", ";\n margin: 0;\n"], ["\n font-weight: 600;\n ", ";\n margin: 0;\n"])), function (_a) {
|
|
7870
7963
|
var theme = _a.theme;
|
|
7871
7964
|
return mediaQueries({ theme: theme })({
|
|
7872
7965
|
fontSize: ['16px', '18px'],
|
|
7873
7966
|
lineHeight: ['24px', '28px'],
|
|
7874
7967
|
});
|
|
7875
7968
|
});
|
|
7876
|
-
var H3$1 = newStyled.h3(templateObject_6$
|
|
7969
|
+
var H3$1 = newStyled.h3(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"], ["\n font-size: 16px;\n line-height: 24px;\n ", ";\n margin: 10px 0 8px;\n"])), function (_a) {
|
|
7877
7970
|
var theme = _a.theme;
|
|
7878
7971
|
return mediaQueries({ theme: theme })({
|
|
7879
7972
|
fontSize: ['14px', '16px'],
|
|
7880
7973
|
lineHeight: ['22px', '24px'],
|
|
7881
7974
|
});
|
|
7882
7975
|
});
|
|
7883
|
-
var P = newStyled.p(templateObject_7
|
|
7976
|
+
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"])));
|
|
7884
7977
|
var Review = function (_a) {
|
|
7885
7978
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
7886
7979
|
var theme = useTheme();
|
|
7887
7980
|
return (jsxRuntime.jsxs(Container$b, { children: [jsxRuntime.jsxs(Heading, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsxRuntime.jsx(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxRuntime.jsxs(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxRuntime.jsxs(ReviewContainer, __assign({ theme: theme }, { children: [jsxRuntime.jsx(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsxRuntime.jsx(P, { children: description }, void 0)] }), void 0), jsxRuntime.jsx(Image$1, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
7888
7981
|
};
|
|
7889
|
-
var templateObject_1$
|
|
7982
|
+
var templateObject_1$i, templateObject_2$a, templateObject_3$7, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
7890
7983
|
|
|
7891
7984
|
var Button$3 = newStyled.button(function () { return ({
|
|
7892
7985
|
background: 'transparent',
|
|
@@ -12129,14 +12222,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12129
12222
|
return Slider;
|
|
12130
12223
|
}(React__default["default"].Component);
|
|
12131
12224
|
|
|
12132
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12225
|
+
var StyledSlider = newStyled(Slider)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"], ["\n .slick-dots {\n position: static;\n display: flex !important;\n justify-content: center;\n column-gap: ", ";\n margin-top: ", ";\n }\n .slick-prev {\n left: ", ";\n }\n .slick-next {\n right: ", ";\n }\n .slick-prev,\n .slick-next {\n width: fit-content;\n height: fit-content;\n }\n .slick-prev:before,\n .slick-next:before {\n content: none;\n }\n .slick-dots li {\n margin: 0;\n width: auto;\n line-height: 0;\n height: auto;\n }\n"])), function (props) { return "".concat(props.dotsSpacing, "rem"); }, function (props) { return "".concat(props.dotListMarginTop, "rem"); }, function (_a) {
|
|
12133
12226
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12134
12227
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12135
12228
|
}, function (_a) {
|
|
12136
12229
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12137
12230
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12138
12231
|
});
|
|
12139
|
-
var templateObject_1$
|
|
12232
|
+
var templateObject_1$h;
|
|
12140
12233
|
|
|
12141
12234
|
var getStylesBySize$1 = function (size) {
|
|
12142
12235
|
// rem units
|
|
@@ -12195,13 +12288,13 @@ var SliderNavigation = function (_a) {
|
|
|
12195
12288
|
} }, { 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));
|
|
12196
12289
|
};
|
|
12197
12290
|
|
|
12198
|
-
var List = newStyled.ul(templateObject_1$
|
|
12199
|
-
var Item = newStyled.li(templateObject_2$
|
|
12200
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12201
|
-
var ArrowContainer = newStyled.div(templateObject_4$
|
|
12202
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
12203
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
12204
|
-
var templateObject_1$
|
|
12291
|
+
var List = newStyled.ul(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n margin: 0;\n padding: 0;\n"])));
|
|
12292
|
+
var Item = newStyled.li(templateObject_2$9 || (templateObject_2$9 = __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"])));
|
|
12293
|
+
var DropdownWrapper = newStyled.div(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
12294
|
+
var ArrowContainer = newStyled.div(templateObject_4$3 || (templateObject_4$3 = __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"])));
|
|
12295
|
+
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; });
|
|
12296
|
+
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; });
|
|
12297
|
+
var templateObject_1$g, templateObject_2$9, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6$1;
|
|
12205
12298
|
|
|
12206
12299
|
var DropdownListIcons = function (_a) {
|
|
12207
12300
|
var items = _a.items;
|
|
@@ -12214,7 +12307,7 @@ var Dropdown = function (_a) {
|
|
|
12214
12307
|
return (jsxRuntime.jsxs(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsxRuntime.jsx(ArrowContainer, { children: jsxRuntime.jsx(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsxRuntime.jsx(StyledDropdown, __assign({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(DropdownItem, __assign({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
12215
12308
|
};
|
|
12216
12309
|
|
|
12217
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12310
|
+
var StyledButton = newStyled(BaseButton)(templateObject_1$f || (templateObject_1$f = __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; });
|
|
12218
12311
|
var AmazonButton = function (_a) {
|
|
12219
12312
|
var onClick = _a.onClick;
|
|
12220
12313
|
return (jsxRuntime.jsx(StyledButton, __assign({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12223,23 +12316,23 @@ var PaypalButton = function (_a) {
|
|
|
12223
12316
|
var onClick = _a.onClick;
|
|
12224
12317
|
return (jsxRuntime.jsx(StyledButton, __assign({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsxRuntime.jsx(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12225
12318
|
};
|
|
12226
|
-
var templateObject_1$
|
|
12319
|
+
var templateObject_1$f;
|
|
12227
12320
|
|
|
12228
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12229
|
-
var Col = newStyled.div(templateObject_2$
|
|
12230
|
-
var Row = newStyled.div(templateObject_3$
|
|
12321
|
+
var Wrapper = newStyled.div(templateObject_1$e || (templateObject_1$e = __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'); });
|
|
12322
|
+
var Col = newStyled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
12323
|
+
var Row = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __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) {
|
|
12231
12324
|
return props.rightToLeft &&
|
|
12232
12325
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12233
12326
|
});
|
|
12234
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12235
|
-
var H3 = newStyled.h3(templateObject_5
|
|
12236
|
-
var FreeShipping = newStyled.span(templateObject_6
|
|
12327
|
+
var H5 = newStyled.h5(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n line-height: 1.375rem;\n font-weight: 500;\n margin-bottom: 0.125rem;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12328
|
+
var H3 = newStyled.h3(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 700;\n margin: 0;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12329
|
+
var FreeShipping = newStyled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-weight: 600;\n color: ", ";\n"], ["\n font-weight: 600;\n color: ", ";\n"])), function (props) { return props.color; });
|
|
12237
12330
|
var CrossSellCheckbox = function (_a) {
|
|
12238
12331
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12239
12332
|
var theme = useTheme();
|
|
12240
12333
|
return (jsxRuntime.jsxs(Wrapper, __assign({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: exports.ComponentSize.Small, variant: "secondary" }, void 0), jsxRuntime.jsxs(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsxRuntime.jsx(Image$1, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxRuntime.jsxs(Col, { children: [jsxRuntime.jsx(H5, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxRuntime.jsxs(H3, __assign({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxRuntime.jsxs(FreeShipping, __assign({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12241
12334
|
};
|
|
12242
|
-
var templateObject_1$
|
|
12335
|
+
var templateObject_1$e, templateObject_2$8, templateObject_3$5, templateObject_4$2, templateObject_5, templateObject_6;
|
|
12243
12336
|
|
|
12244
12337
|
var index = /*#__PURE__*/Object.freeze({
|
|
12245
12338
|
__proto__: null,
|
|
@@ -12254,8 +12347,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12254
12347
|
height: height,
|
|
12255
12348
|
});
|
|
12256
12349
|
});
|
|
12257
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
12258
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12350
|
+
var Container$a = newStyled.div(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
12351
|
+
var H1 = newStyled.h1(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: normal;\n line-height: 1.375rem;\n text-align: center;\n color: ", ";\n margin: 0.25rem 0;\n text-align: ", ";\n"])), function (props) { return props.theme.colors.pallete.secondary.color; }, function (props) { return props.align; });
|
|
12259
12352
|
var getStylesBySize = function (size) {
|
|
12260
12353
|
switch (size) {
|
|
12261
12354
|
case exports.ComponentSize.Medium:
|
|
@@ -12282,9 +12375,9 @@ var ProductItemMobile = function (_a) {
|
|
|
12282
12375
|
var styles = getStylesBySize(size);
|
|
12283
12376
|
return (jsxs(Container$a, { 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$1, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(SeasonOfferTag, { text: tags.seasonOfferTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: exports.ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image$1, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(H1, __assign({ theme: theme, align: alignName }, { children: title }), void 0), jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color, size: exports.ComponentSize.Small }, void 0), jsx(Rating, { size: exports.ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
|
|
12284
12377
|
};
|
|
12285
|
-
var templateObject_1$
|
|
12378
|
+
var templateObject_1$d, templateObject_2$7;
|
|
12286
12379
|
|
|
12287
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
12380
|
+
var Container$9 = newStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n row-gap: 1.875rem;\n column-gap: 1.875rem;\n flex-wrap: wrap;\n"])));
|
|
12288
12381
|
function withProductGrid(ProductItemComponent, data) {
|
|
12289
12382
|
function WithProductGrid(props) {
|
|
12290
12383
|
return (jsxRuntime.jsx(Container$9, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsxRuntime.jsx(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
|
|
@@ -12294,18 +12387,18 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
12294
12387
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12295
12388
|
return WithProductGrid;
|
|
12296
12389
|
}
|
|
12297
|
-
var templateObject_1$
|
|
12390
|
+
var templateObject_1$c;
|
|
12298
12391
|
|
|
12299
12392
|
var Collection = {
|
|
12300
12393
|
ProductItemMobile: ProductItemMobile,
|
|
12301
12394
|
withProductGrid: withProductGrid,
|
|
12302
12395
|
};
|
|
12303
12396
|
|
|
12304
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12397
|
+
var Backdrop = newStyled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"], ["\n position: fixed;\n z-index: 2;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n transition: background-color 0.3s ease-out;\n\n ", "\n"])), function (_a) {
|
|
12305
12398
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12306
12399
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12307
12400
|
});
|
|
12308
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12401
|
+
var Sidebar = newStyled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 3;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"], ["\n height: 100%;\n width: ", ";\n position: fixed;\n z-index: 3;\n ", ": 0;\n top: 0;\n background-color: ", ";\n overflow-x: hidden;\n transition: transform 0.3s ease-in-out;\n\n ", "\n"])), function (_a) {
|
|
12309
12402
|
var width = _a.width;
|
|
12310
12403
|
return width;
|
|
12311
12404
|
}, function (_a) {
|
|
@@ -12346,16 +12439,16 @@ var Drawer = function (_a) {
|
|
|
12346
12439
|
}, [isOpen, onClose, onOpen]);
|
|
12347
12440
|
return isMounted ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsxRuntime.jsx(Sidebar, __assign({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12348
12441
|
};
|
|
12349
|
-
var templateObject_1$
|
|
12442
|
+
var templateObject_1$b, templateObject_2$6;
|
|
12350
12443
|
|
|
12351
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
12444
|
+
var Container$8 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12352
12445
|
var size = _a.size;
|
|
12353
12446
|
return (size ? size : '100%');
|
|
12354
12447
|
}, function (_a) {
|
|
12355
12448
|
var size = _a.size;
|
|
12356
12449
|
return (size ? size : '100%');
|
|
12357
12450
|
});
|
|
12358
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12451
|
+
var Animation = newStyled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"], ["\n @keyframes svg--animation {\n 0% {\n transform: rotateZ(0deg);\n }\n 100% {\n transform: rotateZ(360deg);\n }\n }\n width: 100%;\n height: 100%;\n animation: linear infinite svg--animation;\n animation-duration: ", "s;\n"])), function (_a) {
|
|
12359
12452
|
var animationDuration = _a.animationDuration;
|
|
12360
12453
|
return animationDuration;
|
|
12361
12454
|
});
|
|
@@ -12363,11 +12456,11 @@ var Spinner = function (_a) {
|
|
|
12363
12456
|
var fill = _a.fill, background = _a.background, _b = _a.animationDuration, animationDuration = _b === void 0 ? 1 : _b, _c = _a.complete, complete = _c === void 0 ? false : _c, completeIconStroke = _a.completeIconStroke, size = _a.size;
|
|
12364
12457
|
return (jsxRuntime.jsx(Container$8, __assign({ size: size, "data-testid": "Container" }, { children: complete ? (jsxRuntime.jsx(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsxRuntime.jsx(Animation, __assign({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsxRuntime.jsx(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12365
12458
|
};
|
|
12366
|
-
var templateObject_1$
|
|
12459
|
+
var templateObject_1$a, templateObject_2$5;
|
|
12367
12460
|
|
|
12368
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12369
|
-
var LI = newStyled.li(templateObject_2$
|
|
12370
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12461
|
+
var UL = newStyled.ul(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"], ["\n margin: 0;\n padding: 0;\n flex-wrap: wrap;\n display: flex;\n max-width: 100%;\n"])));
|
|
12462
|
+
var LI = newStyled.li(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"], ["\n list-style: none;\n background-color: ", ";\n padding: 0.375rem 0.625rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.125rem;\n color: ", ";\n font-weight: 400;\n margin-right: 0.5rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n"])), function (props) { return props.backgroundColor; }, function (props) { return props.color; });
|
|
12463
|
+
var CloseIconContainer = newStyled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"], ["\n width: 0.656rem;\n height: 0.656rem;\n display: flex;\n align-items: center;\n margin-left: 0.5rem;\n cursor: pointer;\n"])));
|
|
12371
12464
|
var Tags = function (_a) {
|
|
12372
12465
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12373
12466
|
var theme = useTheme();
|
|
@@ -12375,7 +12468,7 @@ var Tags = function (_a) {
|
|
|
12375
12468
|
return (jsxRuntime.jsxs(LI, __assign({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsxRuntime.jsx(CloseIconContainer, __assign({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12376
12469
|
}) }), void 0));
|
|
12377
12470
|
};
|
|
12378
|
-
var templateObject_1$
|
|
12471
|
+
var templateObject_1$9, templateObject_2$4, templateObject_3$4;
|
|
12379
12472
|
|
|
12380
12473
|
function FilteringDropdown(_a) {
|
|
12381
12474
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeHolder = _a.placeHolder, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sliceAfter, sliceAfter = _d === void 0 ? 100 : _d, _e = _a.filter, filter = _e === void 0 ? false : _e, onChange = _a.onChange;
|
|
@@ -12408,15 +12501,15 @@ function FilteringDropdown(_a) {
|
|
|
12408
12501
|
}) }, void 0)] }), void 0));
|
|
12409
12502
|
}
|
|
12410
12503
|
|
|
12411
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
12412
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
12413
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12504
|
+
var Container$7 = newStyled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n"])));
|
|
12505
|
+
var IconContainer = newStyled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n width: 0.531rem;\n height: 0.875rem;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
12506
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), function (_a) {
|
|
12414
12507
|
var theme = _a.theme;
|
|
12415
12508
|
return mediaQueries({ theme: theme })({
|
|
12416
12509
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12417
12510
|
});
|
|
12418
12511
|
});
|
|
12419
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12512
|
+
var PageNumber = newStyled.span(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n text-align: center;\n cursor: pointer;\n border-bottom: ", ";\n ", ";\n"])), function (_a) {
|
|
12420
12513
|
var bold = _a.bold;
|
|
12421
12514
|
return (bold ? '700' : '500');
|
|
12422
12515
|
}, function (_a) {
|
|
@@ -12433,7 +12526,7 @@ var PageNumber = newStyled.span(templateObject_4$2 || (templateObject_4$2 = __ma
|
|
|
12433
12526
|
width: ['1.25rem', '1.875rem'],
|
|
12434
12527
|
});
|
|
12435
12528
|
});
|
|
12436
|
-
var templateObject_1$
|
|
12529
|
+
var templateObject_1$8, templateObject_2$3, templateObject_3$3, templateObject_4$1;
|
|
12437
12530
|
|
|
12438
12531
|
var Pagination = function (_a) {
|
|
12439
12532
|
var from = _a.from, to = _a.to, _b = _a.currentPage, currentPage = _b === void 0 ? from : _b, onChange = _a.onChange, _c = _a.underlineActive, underlineActive = _c === void 0 ? true : _c, _d = _a.boldActive, boldActive = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
|
|
@@ -12449,110 +12542,6 @@ var Pagination = function (_a) {
|
|
|
12449
12542
|
return (jsxRuntime.jsxs(Container$7, __assign({ "data-testid": "PaginationContainer" }, { children: [jsxRuntime.jsx(IconContainer, __assign({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsxRuntime.jsx(PageNumbersContainer, __assign({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsxRuntime.jsx(PageNumber, __assign({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsxRuntime.jsx(IconContainer, __assign({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12450
12543
|
};
|
|
12451
12544
|
|
|
12452
|
-
// This defines which HTML tag to render for each `variant`, it also defines
|
|
12453
|
-
// `variants` styles that are consistent through all themes.
|
|
12454
|
-
var TAGS = {
|
|
12455
|
-
hero1: newStyled.h1(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject([""], [""]))),
|
|
12456
|
-
hero2: newStyled.h2(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject([""], [""]))),
|
|
12457
|
-
hero3: newStyled.h3(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject([""], [""]))),
|
|
12458
|
-
display1: newStyled.h1(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject([""], [""]))),
|
|
12459
|
-
display2: newStyled.h2(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""]))),
|
|
12460
|
-
heading1: newStyled.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""]))),
|
|
12461
|
-
heading2: newStyled.h2(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""]))),
|
|
12462
|
-
heading3: newStyled.h3(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""]))),
|
|
12463
|
-
heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
|
|
12464
|
-
heading5: newStyled.h5(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))),
|
|
12465
|
-
heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
|
|
12466
|
-
body: newStyled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))),
|
|
12467
|
-
link: newStyled.a(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
12468
|
-
button: newStyled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
12469
|
-
pricing: newStyled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "], ["\n display: inline-block;\n font-weight: ", ";\n text-decoration: ", ";\n "])), function (props) { return (props.original ? 'normal' : 'bold'); }, function (props) { return (props.original ? 'line-through' : 'bold'); }),
|
|
12470
|
-
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
12471
|
-
tag: newStyled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: inline-block;\n text-transform: ", ";\n "], ["\n display: inline-block;\n text-transform: ", ";\n "])), function (props) { return (props.allCaps ? 'uppercase' : ''); }),
|
|
12472
|
-
};
|
|
12473
|
-
var Text = function (_a) {
|
|
12474
|
-
var variant = _a.variant, children = _a.children, size = _a.size, weight = _a.weight, allProps = __rest(_a, ["variant", "children", "size", "weight"]);
|
|
12475
|
-
var theme = useTheme();
|
|
12476
|
-
var Tag = React.useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
12477
|
-
var props = React.useMemo(function () {
|
|
12478
|
-
var _a;
|
|
12479
|
-
return (__assign(__assign({}, ((_a = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _a !== void 0 ? _a : {})), allProps));
|
|
12480
|
-
}, [variant, allProps]);
|
|
12481
|
-
var commonCSS = React.useMemo(function () {
|
|
12482
|
-
var _a, _b;
|
|
12483
|
-
// These are the common style inside a `variant`.
|
|
12484
|
-
// E.g.: Common styles for all "button".
|
|
12485
|
-
var variantstyle = (_a = theme.typography.variants[variant]) !== null && _a !== void 0 ? _a : {
|
|
12486
|
-
fontSize: 14,
|
|
12487
|
-
lineHeight: 1,
|
|
12488
|
-
};
|
|
12489
|
-
// This allow us to define different styles for different `sizes` inside a `variant`
|
|
12490
|
-
// E.g.: "button-small", "button-regular"
|
|
12491
|
-
//
|
|
12492
|
-
// We use .filter(Boolean) to ignore the `size` on the `variants` that don't have it.
|
|
12493
|
-
// E.g.: "hero1", "display1"
|
|
12494
|
-
var variantName = [variant, size].filter(Boolean).join('-');
|
|
12495
|
-
// These are styles specific to `variation-size`.
|
|
12496
|
-
var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
|
|
12497
|
-
var style = __assign(__assign({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle);
|
|
12498
|
-
if (weight) {
|
|
12499
|
-
style.fontWeight = theme.typography.config.weight[weight];
|
|
12500
|
-
}
|
|
12501
|
-
if (props.disabled) {
|
|
12502
|
-
style.opacity = 0.5;
|
|
12503
|
-
style.cursor = 'not-allowed';
|
|
12504
|
-
style.color = theme.colors.text.disabled;
|
|
12505
|
-
}
|
|
12506
|
-
return style;
|
|
12507
|
-
}, [theme, variant, weight, size, props.disabled]);
|
|
12508
|
-
// This is to make TS happy, because `href` doesn't exists on other `variants`
|
|
12509
|
-
var propsHref = props.href;
|
|
12510
|
-
var href = React.useMemo(function () {
|
|
12511
|
-
// We could use `pointer-events: none` but it prevents us from using
|
|
12512
|
-
// `cursor: not-allowed`, so we're changing the `href` for `disabled` links.
|
|
12513
|
-
if (propsHref != null && props.disabled) {
|
|
12514
|
-
return 'javascript:void(0)';
|
|
12515
|
-
}
|
|
12516
|
-
return propsHref;
|
|
12517
|
-
}, [props.disabled, propsHref]);
|
|
12518
|
-
return (jsx(Tag, __assign({}, props, { css: commonCSS, href: href }, { children: children }), void 0));
|
|
12519
|
-
};
|
|
12520
|
-
var DEFAULTS = {
|
|
12521
|
-
heading1: {
|
|
12522
|
-
weight: 'bold',
|
|
12523
|
-
},
|
|
12524
|
-
heading2: {
|
|
12525
|
-
weight: 'bold',
|
|
12526
|
-
},
|
|
12527
|
-
heading3: {
|
|
12528
|
-
weight: 'bold',
|
|
12529
|
-
},
|
|
12530
|
-
hero1: {
|
|
12531
|
-
weight: 'heavy',
|
|
12532
|
-
},
|
|
12533
|
-
hero2: {
|
|
12534
|
-
weight: 'heavy',
|
|
12535
|
-
},
|
|
12536
|
-
hero3: {
|
|
12537
|
-
weight: 'heavy',
|
|
12538
|
-
},
|
|
12539
|
-
display1: {
|
|
12540
|
-
weight: 'bold',
|
|
12541
|
-
},
|
|
12542
|
-
display2: {
|
|
12543
|
-
weight: 'bold',
|
|
12544
|
-
},
|
|
12545
|
-
body: {
|
|
12546
|
-
size: 'regular',
|
|
12547
|
-
weight: 'regular',
|
|
12548
|
-
},
|
|
12549
|
-
button: {
|
|
12550
|
-
size: 'regular',
|
|
12551
|
-
weight: 'bold',
|
|
12552
|
-
},
|
|
12553
|
-
};
|
|
12554
|
-
var templateObject_1$8, templateObject_2$3, templateObject_3$3, templateObject_4$1, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
12555
|
-
|
|
12556
12545
|
var Container$6 = newStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"], ["\n display: flex;\n flex-direction: row;\n width: auto;\n padding: 0.688rem 0rem;\n ", ",\n"])), function (props) {
|
|
12557
12546
|
return mediaQueries(props)({
|
|
12558
12547
|
borderTop: ["0.063rem solid ".concat(props.theme.colors.shades['100'].color), 'none'],
|
|
@@ -12572,7 +12561,7 @@ var Description = newStyled.div({
|
|
|
12572
12561
|
var ProductItem = function (_a) {
|
|
12573
12562
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12574
12563
|
var theme = useTheme();
|
|
12575
|
-
return (jsxRuntime.jsxs(Container$6, __assign({ theme: theme }, { children: [jsxRuntime.jsx(Image$1, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text, __assign({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12564
|
+
return (jsxRuntime.jsxs(Container$6, __assign({ theme: theme }, { children: [jsxRuntime.jsx(Image$1, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description, { children: [jsxRuntime.jsx(Text$3, __assign({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12576
12565
|
};
|
|
12577
12566
|
var templateObject_1$7;
|
|
12578
12567
|
|
|
@@ -12583,7 +12572,7 @@ var Container$5 = newStyled.div({
|
|
|
12583
12572
|
});
|
|
12584
12573
|
var Footer = function (_a) {
|
|
12585
12574
|
var text = _a.text, onClick = _a.onClick;
|
|
12586
|
-
return (jsxRuntime.jsx(Container$5, { children: jsxRuntime.jsx(Text, __assign({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12575
|
+
return (jsxRuntime.jsx(Container$5, { children: jsxRuntime.jsx(Text$3, __assign({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12587
12576
|
};
|
|
12588
12577
|
|
|
12589
12578
|
var Ul = newStyled.ul({
|
|
@@ -12617,7 +12606,7 @@ var Header = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTem
|
|
|
12617
12606
|
var ResultsPanel = function (_a) {
|
|
12618
12607
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, dataTestId = _a.dataTestId;
|
|
12619
12608
|
var theme = useTheme();
|
|
12620
|
-
return (jsxRuntime.jsxs(Container$4, __assign({ "data-testid": dataTestId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign({ theme: theme }, { children: jsxRuntime.jsx(Text, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12609
|
+
return (jsxRuntime.jsxs(Container$4, __assign({ "data-testid": dataTestId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign({ theme: theme }, { children: jsxRuntime.jsx(Text$3, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12621
12610
|
};
|
|
12622
12611
|
var templateObject_1$6, templateObject_2$2, templateObject_3$2;
|
|
12623
12612
|
|
|
@@ -12885,7 +12874,7 @@ exports.SizeTable = SizeTable;
|
|
|
12885
12874
|
exports.SliderNavigation = SliderNavigation;
|
|
12886
12875
|
exports.Spinner = Spinner;
|
|
12887
12876
|
exports.StarList = StarList;
|
|
12888
|
-
exports.Text = Text;
|
|
12877
|
+
exports.Text = Text$3;
|
|
12889
12878
|
exports.TextButton = TextButton;
|
|
12890
12879
|
exports.ThemeProvider = ThemeProvider;
|
|
12891
12880
|
exports.ThemeVariables = ThemeVariables;
|