@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.esm.js
CHANGED
|
@@ -6147,7 +6147,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
6147
6147
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6148
6148
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
6149
6149
|
]; });
|
|
6150
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
6150
|
+
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) {
|
|
6151
6151
|
var disabled = _a.disabled;
|
|
6152
6152
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
6153
6153
|
});
|
|
@@ -6173,7 +6173,7 @@ var Checkbox = function (_a) {
|
|
|
6173
6173
|
}, []);
|
|
6174
6174
|
return (jsxs$1(Container$B, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$2, __assign({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
6175
6175
|
};
|
|
6176
|
-
var templateObject_1$X, templateObject_2$
|
|
6176
|
+
var templateObject_1$X, templateObject_2$C;
|
|
6177
6177
|
|
|
6178
6178
|
var CustomOption = newStyled.li(function (_a) {
|
|
6179
6179
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -6291,19 +6291,126 @@ var SelectorSecondary = function (_a) {
|
|
|
6291
6291
|
} }) }, void 0));
|
|
6292
6292
|
};
|
|
6293
6293
|
|
|
6294
|
-
|
|
6295
|
-
|
|
6294
|
+
// This defines which HTML tag to render for each `variant`, it also defines
|
|
6295
|
+
// `variants` styles that are consistent through all themes.
|
|
6296
|
+
var TAGS = {
|
|
6297
|
+
hero1: newStyled.h1(templateObject_1$W || (templateObject_1$W = __makeTemplateObject([""], [""]))),
|
|
6298
|
+
hero2: newStyled.h2(templateObject_2$B || (templateObject_2$B = __makeTemplateObject([""], [""]))),
|
|
6299
|
+
hero3: newStyled.h3(templateObject_3$n || (templateObject_3$n = __makeTemplateObject([""], [""]))),
|
|
6300
|
+
display1: newStyled.h1(templateObject_4$e || (templateObject_4$e = __makeTemplateObject([""], [""]))),
|
|
6301
|
+
display2: newStyled.h2(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject([""], [""]))),
|
|
6302
|
+
heading1: newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject([""], [""]))),
|
|
6303
|
+
heading2: newStyled.h2(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject([""], [""]))),
|
|
6304
|
+
heading3: newStyled.h3(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject([""], [""]))),
|
|
6305
|
+
heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
|
|
6306
|
+
heading5: newStyled.h5(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))),
|
|
6307
|
+
heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
|
|
6308
|
+
body: newStyled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))),
|
|
6309
|
+
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'); }),
|
|
6310
|
+
button: newStyled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
6311
|
+
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'); }),
|
|
6312
|
+
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
6313
|
+
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' : ''); }),
|
|
6314
|
+
};
|
|
6315
|
+
var Text$3 = function (_a) {
|
|
6316
|
+
var variant = _a.variant, children = _a.children, size = _a.size, weight = _a.weight, allProps = __rest(_a, ["variant", "children", "size", "weight"]);
|
|
6317
|
+
var theme = useTheme();
|
|
6318
|
+
var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
6319
|
+
var props = useMemo(function () {
|
|
6320
|
+
var _a;
|
|
6321
|
+
return (__assign(__assign({}, ((_a = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _a !== void 0 ? _a : {})), allProps));
|
|
6322
|
+
}, [variant, allProps]);
|
|
6323
|
+
var commonCSS = useMemo(function () {
|
|
6324
|
+
var _a, _b;
|
|
6325
|
+
// These are the common style inside a `variant`.
|
|
6326
|
+
// E.g.: Common styles for all "button".
|
|
6327
|
+
var variantstyle = (_a = theme.typography.variants[variant]) !== null && _a !== void 0 ? _a : {
|
|
6328
|
+
fontSize: 14,
|
|
6329
|
+
lineHeight: 1,
|
|
6330
|
+
};
|
|
6331
|
+
// This allow us to define different styles for different `sizes` inside a `variant`
|
|
6332
|
+
// E.g.: "button-small", "button-regular"
|
|
6333
|
+
//
|
|
6334
|
+
// We use .filter(Boolean) to ignore the `size` on the `variants` that don't have it.
|
|
6335
|
+
// E.g.: "hero1", "display1"
|
|
6336
|
+
var variantName = [variant, size].filter(Boolean).join('-');
|
|
6337
|
+
// These are styles specific to `variation-size`.
|
|
6338
|
+
var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
|
|
6339
|
+
var style = __assign(__assign({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle);
|
|
6340
|
+
if (weight) {
|
|
6341
|
+
style.fontWeight = theme.typography.config.weight[weight];
|
|
6342
|
+
}
|
|
6343
|
+
if (props.disabled) {
|
|
6344
|
+
style.opacity = 0.5;
|
|
6345
|
+
style.cursor = 'not-allowed';
|
|
6346
|
+
style.color = theme.colors.text.disabled;
|
|
6347
|
+
}
|
|
6348
|
+
return style;
|
|
6349
|
+
}, [theme, variant, weight, size, props.disabled]);
|
|
6350
|
+
// This is to make TS happy, because `href` doesn't exists on other `variants`
|
|
6351
|
+
var propsHref = props.href;
|
|
6352
|
+
var href = useMemo(function () {
|
|
6353
|
+
// We could use `pointer-events: none` but it prevents us from using
|
|
6354
|
+
// `cursor: not-allowed`, so we're changing the `href` for `disabled` links.
|
|
6355
|
+
if (propsHref != null && props.disabled) {
|
|
6356
|
+
return 'javascript:void(0)';
|
|
6357
|
+
}
|
|
6358
|
+
return propsHref;
|
|
6359
|
+
}, [props.disabled, propsHref]);
|
|
6360
|
+
return (jsx(Tag, __assign({}, props, { css: commonCSS, href: href }, { children: children }), void 0));
|
|
6361
|
+
};
|
|
6362
|
+
var DEFAULTS = {
|
|
6363
|
+
heading1: {
|
|
6364
|
+
weight: 'bold',
|
|
6365
|
+
},
|
|
6366
|
+
heading2: {
|
|
6367
|
+
weight: 'bold',
|
|
6368
|
+
},
|
|
6369
|
+
heading3: {
|
|
6370
|
+
weight: 'bold',
|
|
6371
|
+
},
|
|
6372
|
+
hero1: {
|
|
6373
|
+
weight: 'heavy',
|
|
6374
|
+
},
|
|
6375
|
+
hero2: {
|
|
6376
|
+
weight: 'heavy',
|
|
6377
|
+
},
|
|
6378
|
+
hero3: {
|
|
6379
|
+
weight: 'heavy',
|
|
6380
|
+
},
|
|
6381
|
+
display1: {
|
|
6382
|
+
weight: 'bold',
|
|
6383
|
+
},
|
|
6384
|
+
display2: {
|
|
6385
|
+
weight: 'bold',
|
|
6386
|
+
},
|
|
6387
|
+
body: {
|
|
6388
|
+
size: 'regular',
|
|
6389
|
+
weight: 'regular',
|
|
6390
|
+
},
|
|
6391
|
+
button: {
|
|
6392
|
+
size: 'regular',
|
|
6393
|
+
weight: 'bold',
|
|
6394
|
+
},
|
|
6395
|
+
};
|
|
6396
|
+
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;
|
|
6397
|
+
|
|
6398
|
+
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"])));
|
|
6296
6399
|
var SizeSelector = function (_a) {
|
|
6297
|
-
var sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
6298
|
-
return (jsxs("div",
|
|
6400
|
+
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
6401
|
+
return (jsxs("div", __assign({ css: {
|
|
6402
|
+
display: 'flex',
|
|
6403
|
+
flexDirection: inline ? 'row' : 'column',
|
|
6404
|
+
alignItems: inline ? 'center' : 'start',
|
|
6405
|
+
} }, { 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) {
|
|
6299
6406
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
6300
6407
|
return (jsx(SelectorSecondary, { css: {
|
|
6301
6408
|
padding: '0.75rem 1rem 0.625rem',
|
|
6302
|
-
margin: '0
|
|
6409
|
+
margin: '0.5rem',
|
|
6303
6410
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
|
|
6304
|
-
}) }, void 0)] }, void 0));
|
|
6411
|
+
}) }, void 0)] }), void 0));
|
|
6305
6412
|
};
|
|
6306
|
-
var templateObject_1$
|
|
6413
|
+
var templateObject_1$V;
|
|
6307
6414
|
|
|
6308
6415
|
var getStylesBySize$7 = function (size) {
|
|
6309
6416
|
switch (size) {
|
|
@@ -6332,7 +6439,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
6332
6439
|
} });
|
|
6333
6440
|
};
|
|
6334
6441
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
6335
|
-
return Icon && (jsx("span", __assign({ css: css(templateObject_1$
|
|
6442
|
+
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));
|
|
6336
6443
|
};
|
|
6337
6444
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
6338
6445
|
if (disabled)
|
|
@@ -6348,16 +6455,16 @@ var TextButton = function (_a) {
|
|
|
6348
6455
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
6349
6456
|
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));
|
|
6350
6457
|
};
|
|
6351
|
-
var templateObject_1$
|
|
6458
|
+
var templateObject_1$U;
|
|
6352
6459
|
|
|
6353
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
6354
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
6355
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
6460
|
+
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"])));
|
|
6461
|
+
var P$2 = newStyled.p(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6462
|
+
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"])));
|
|
6356
6463
|
var SizeFitGuide = function (_a) {
|
|
6357
6464
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6358
6465
|
return (jsxs$1(Container$A, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$2, { children: [fitPercentageLabel, " ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0)] }, void 0));
|
|
6359
6466
|
};
|
|
6360
|
-
var templateObject_1$
|
|
6467
|
+
var templateObject_1$T, templateObject_2$A, templateObject_3$m;
|
|
6361
6468
|
|
|
6362
6469
|
var getStylesBySize$6 = function (size) {
|
|
6363
6470
|
switch (size) {
|
|
@@ -6387,7 +6494,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6387
6494
|
};
|
|
6388
6495
|
}
|
|
6389
6496
|
};
|
|
6390
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
6497
|
+
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) {
|
|
6391
6498
|
var backgroundColor = _a.backgroundColor;
|
|
6392
6499
|
return backgroundColor;
|
|
6393
6500
|
}, function (_a) {
|
|
@@ -6409,7 +6516,7 @@ var Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
6409
6516
|
var size = _a.size;
|
|
6410
6517
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
6411
6518
|
});
|
|
6412
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
6519
|
+
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) {
|
|
6413
6520
|
var textColor = _a.textColor;
|
|
6414
6521
|
return textColor;
|
|
6415
6522
|
}, function (_a) {
|
|
@@ -6426,7 +6533,7 @@ var DiscountTag = function (_a) {
|
|
|
6426
6533
|
var theme = useTheme();
|
|
6427
6534
|
return (jsx$1(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: jsxs$1(H3$2, __assign({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
6428
6535
|
};
|
|
6429
|
-
var templateObject_1$
|
|
6536
|
+
var templateObject_1$S, templateObject_2$z;
|
|
6430
6537
|
|
|
6431
6538
|
var getStylesBySize$5 = function (size) {
|
|
6432
6539
|
switch (size) {
|
|
@@ -6450,8 +6557,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
6450
6557
|
};
|
|
6451
6558
|
}
|
|
6452
6559
|
};
|
|
6453
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
6454
|
-
var Price = newStyled.h1(templateObject_2$
|
|
6560
|
+
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"])));
|
|
6561
|
+
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) {
|
|
6455
6562
|
var weight = _a.weight;
|
|
6456
6563
|
return (weight ? weight : '400');
|
|
6457
6564
|
}, function (_a) {
|
|
@@ -6473,7 +6580,7 @@ var Price = newStyled.h1(templateObject_2$z || (templateObject_2$z = __makeTempl
|
|
|
6473
6580
|
var margin = _a.margin, size = _a.size;
|
|
6474
6581
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
6475
6582
|
});
|
|
6476
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
6583
|
+
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) {
|
|
6477
6584
|
var _b;
|
|
6478
6585
|
var size = _a.size;
|
|
6479
6586
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -6483,7 +6590,7 @@ var PriceLabel = function (_a) {
|
|
|
6483
6590
|
var theme = useTheme();
|
|
6484
6591
|
return (jsxs$1(Container$y, { children: [jsx$1(Price, __assign({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign({ size: size, color: theme.colors.shades['400'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign({ size: size }, { children: jsx$1(DiscountTag, __assign({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
6485
6592
|
};
|
|
6486
|
-
var templateObject_1$
|
|
6593
|
+
var templateObject_1$R, templateObject_2$y, templateObject_3$l;
|
|
6487
6594
|
|
|
6488
6595
|
var OneColorSelector = function (_a) {
|
|
6489
6596
|
var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
@@ -6522,69 +6629,55 @@ var OutOfStock = function (_a) {
|
|
|
6522
6629
|
return (jsxs$1("svg", __assign({ width: "32", height: "33", viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("title", { children: title }, void 0), jsx$1("mask", __assign({ id: "path-1-inside-1", fill: "white" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z" }, void 0) }), void 0), jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.89435 9.60565C8.40619 10.0938 8.40619 10.8853 8.89435 11.3734L14.0209 16.5L8.89433 21.6266C8.40617 22.1147 8.40617 22.9062 8.89433 23.3943C9.38248 23.8825 10.1739 23.8825 10.6621 23.3943L15.7887 18.2677L21.2687 23.7478C21.7569 24.2359 22.5483 24.2359 23.0365 23.7478C23.5246 23.2596 23.5246 22.4682 23.0365 21.98L17.5564 16.5L23.0365 11.02C23.5246 10.5318 23.5246 9.74035 23.0365 9.25219C22.5483 8.76404 21.7568 8.76404 21.2687 9.25219L15.7887 14.7322L10.6621 9.60565C10.174 9.1175 9.3825 9.1175 8.89435 9.60565Z", fill: theme.colors.shades['300'].color }, void 0), jsx$1("path", { d: "M14.0209 16.5L14.5866 17.0657L15.1523 16.5L14.5866 15.9343L14.0209 16.5ZM8.89433 21.6266L9.46001 22.1922L8.89433 21.6266ZM10.6621 23.3943L11.2278 23.96L10.6621 23.3943ZM15.7887 18.2677L16.3544 17.7021L15.7887 17.1364L15.223 17.7021L15.7887 18.2677ZM17.5564 16.5L16.9908 15.9343L16.4251 16.5L16.9908 17.0657L17.5564 16.5ZM23.0365 11.02L23.6021 11.5856L23.0365 11.02ZM21.2687 9.25219L21.8344 9.81788L21.2687 9.25219ZM15.7887 14.7322L15.223 15.2979L15.7887 15.8636L16.3544 15.2979L15.7887 14.7322ZM9.46003 10.8077C9.2843 10.632 9.2843 10.3471 9.46003 10.1713L8.32866 9.03997C7.52809 9.84054 7.52809 11.1385 8.32866 11.9391L9.46003 10.8077ZM14.5866 15.9343L9.46003 10.8077L8.32866 11.9391L13.4552 17.0657L14.5866 15.9343ZM9.46001 22.1922L14.5866 17.0657L13.4552 15.9343L8.32864 21.0609L9.46001 22.1922ZM9.46001 22.8286C9.28428 22.6529 9.28428 22.368 9.46001 22.1922L8.32864 21.0609C7.52807 21.8614 7.52807 23.1594 8.32864 23.96L9.46001 22.8286ZM10.0964 22.8286C9.92067 23.0044 9.63575 23.0044 9.46001 22.8286L8.32864 23.96C9.12922 24.7606 10.4272 24.7606 11.2278 23.96L10.0964 22.8286ZM15.223 17.7021L10.0964 22.8286L11.2278 23.96L16.3544 18.8334L15.223 17.7021ZM21.8344 23.1821L16.3544 17.7021L15.223 18.8334L20.703 24.3135L21.8344 23.1821ZM22.4708 23.1821C22.2951 23.3578 22.0101 23.3578 21.8344 23.1821L20.703 24.3135C21.5036 25.114 22.8016 25.114 23.6022 24.3135L22.4708 23.1821ZM22.4708 22.5457C22.6465 22.7214 22.6465 23.0064 22.4708 23.1821L23.6022 24.3135C24.4027 23.5129 24.4027 22.2149 23.6022 21.4143L22.4708 22.5457ZM16.9908 17.0657L22.4708 22.5457L23.6022 21.4143L18.1221 15.9343L16.9908 17.0657ZM22.4708 10.4543L16.9908 15.9343L18.1221 17.0657L23.6021 11.5856L22.4708 10.4543ZM22.4708 9.81788C22.6465 9.99361 22.6465 10.2785 22.4708 10.4543L23.6021 11.5856C24.4027 10.7851 24.4027 9.48708 23.6021 8.68651L22.4708 9.81788ZM21.8344 9.81788C22.0101 9.64214 22.295 9.64214 22.4708 9.81788L23.6021 8.68651C22.8016 7.88593 21.5036 7.88593 20.703 8.68651L21.8344 9.81788ZM16.3544 15.2979L21.8344 9.81788L20.703 8.68651L15.223 14.1665L16.3544 15.2979ZM10.0964 10.1713L15.223 15.2979L16.3544 14.1665L11.2278 9.03997L10.0964 10.1713ZM9.46003 10.1713C9.63577 9.9956 9.92069 9.9956 10.0964 10.1713L11.2278 9.03997C10.4272 8.23939 9.12924 8.23939 8.32866 9.03997L9.46003 10.1713Z", fill: "white", mask: "url(#path-1-inside-1)" }, void 0), jsx$1("circle", { cx: "16", cy: "16.5", r: "12", stroke: theme.colors.shades['300'].color, strokeWidth: "0.5" }, void 0)] }), void 0));
|
|
6523
6630
|
};
|
|
6524
6631
|
|
|
6525
|
-
var CustomRadioGroup = newStyled(RadioGroup)(templateObject_1$
|
|
6526
|
-
|
|
6527
|
-
var CustomRadioGroupOption = newStyled(RadioGroup.Option)(templateObject_3$
|
|
6528
|
-
var Span = newStyled.span(templateObject_4$
|
|
6529
|
-
var OptionsContainer = newStyled.div(templateObject_5$
|
|
6632
|
+
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"])));
|
|
6633
|
+
newStyled(RadioGroup.Label)(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6634
|
+
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"])));
|
|
6635
|
+
var Span = newStyled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6636
|
+
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"])));
|
|
6530
6637
|
var Label$1 = function (_a) {
|
|
6531
6638
|
var label = _a.label, values = _a.values;
|
|
6532
|
-
return (jsxs$1(
|
|
6639
|
+
return (jsxs$1(Text$3, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
6533
6640
|
};
|
|
6534
6641
|
var Option = function (_a) {
|
|
6535
6642
|
var value = _a.value, children = _a.children;
|
|
6536
6643
|
return (jsx$1(CustomRadioGroupOption, __assign({ value: value }, { children: children }), void 0));
|
|
6537
6644
|
};
|
|
6538
6645
|
var ColorRadioGroup = function (_a) {
|
|
6539
|
-
var value = _a.value, onChange = _a.onChange, children = _a.children;
|
|
6540
|
-
return (jsx$1(CustomRadioGroup, __assign({ value: value, onChange: onChange }, { children: children }), void 0));
|
|
6646
|
+
var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
|
|
6647
|
+
return (jsx$1(CustomRadioGroup, __assign({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6541
6648
|
};
|
|
6542
6649
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6543
6650
|
Label: Label$1,
|
|
6544
6651
|
Option: Option,
|
|
6545
6652
|
OptionsContainer: OptionsContainer,
|
|
6546
6653
|
});
|
|
6547
|
-
var templateObject_1$
|
|
6654
|
+
var templateObject_1$Q, templateObject_2$x, templateObject_3$k, templateObject_4$d, templateObject_5$6;
|
|
6548
6655
|
|
|
6549
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
6656
|
+
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) {
|
|
6550
6657
|
var borderColor = _a.borderColor;
|
|
6551
6658
|
return borderColor;
|
|
6552
6659
|
});
|
|
6553
|
-
var Image$4 = newStyled.img(templateObject_2$
|
|
6660
|
+
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"])));
|
|
6554
6661
|
var PatternSelector = function (_a) {
|
|
6555
6662
|
var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6556
6663
|
var theme = useTheme();
|
|
6557
6664
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6558
6665
|
return (jsx$1(Container$x, __assign({ "data-testid": dataTestId, borderColor: outerBorder }, { children: jsx$1(Image$4, { src: url, alt: "pattern" }, void 0) }), void 0));
|
|
6559
6666
|
};
|
|
6560
|
-
var templateObject_1$
|
|
6667
|
+
var templateObject_1$P, templateObject_2$w;
|
|
6561
6668
|
|
|
6562
6669
|
var renderOptions$1 = function (options) {
|
|
6563
6670
|
if (options.length)
|
|
6564
|
-
return options.map(function (option) { return (jsx
|
|
6671
|
+
return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
|
|
6565
6672
|
var checked = _a.checked;
|
|
6566
|
-
return option.color ? (jsx
|
|
6673
|
+
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));
|
|
6567
6674
|
} }), option.label)); });
|
|
6568
6675
|
else
|
|
6569
|
-
return jsx
|
|
6570
|
-
};
|
|
6571
|
-
var getInitialValue$1 = function (options, selectedValue) {
|
|
6572
|
-
if (selectedValue && options.includes(selectedValue))
|
|
6573
|
-
return selectedValue;
|
|
6574
|
-
else if (selectedValue)
|
|
6575
|
-
return options[0];
|
|
6576
|
-
else
|
|
6577
|
-
;
|
|
6676
|
+
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
6578
6677
|
};
|
|
6579
6678
|
var SingleColorPicker = function (_a) {
|
|
6580
|
-
var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange;
|
|
6581
|
-
|
|
6582
|
-
var _b = useState(initialValue), selectedColor = _b[0], setSelectedColor = _b[1];
|
|
6583
|
-
var onChangeHandler = function (selectedOption) {
|
|
6584
|
-
setSelectedColor(selectedOption);
|
|
6585
|
-
onChange(selectedOption);
|
|
6586
|
-
};
|
|
6587
|
-
return (jsxs$1(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: selectedColor && selectedColor.label }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions$1(options) }, void 0)] }), void 0));
|
|
6679
|
+
var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
6680
|
+
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));
|
|
6588
6681
|
};
|
|
6589
6682
|
|
|
6590
6683
|
var renderOptions = function (selectedColor, options) {
|
|
@@ -6623,7 +6716,7 @@ var MultiColorPicker = function (_a) {
|
|
|
6623
6716
|
return (jsxs$1(ColorRadioGroup$1, __assign({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions(selectedColor, options) }, void 0)] }), void 0));
|
|
6624
6717
|
};
|
|
6625
6718
|
|
|
6626
|
-
var Image$3 = newStyled.img(templateObject_1$
|
|
6719
|
+
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) {
|
|
6627
6720
|
var selected = _a.selected, theme = _a.theme;
|
|
6628
6721
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
6629
6722
|
});
|
|
@@ -6632,29 +6725,29 @@ var ImageSmallPreview = function (_a) {
|
|
|
6632
6725
|
var theme = useTheme();
|
|
6633
6726
|
return jsx$1(Image$3, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
6634
6727
|
};
|
|
6635
|
-
var templateObject_1$
|
|
6728
|
+
var templateObject_1$O;
|
|
6636
6729
|
|
|
6637
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
6638
|
-
var Button$4 = newStyled.button(templateObject_2$
|
|
6730
|
+
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"])));
|
|
6731
|
+
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"])));
|
|
6639
6732
|
var ImagePreviewList = function (_a) {
|
|
6640
6733
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
|
|
6641
6734
|
return (jsx(Container$w, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
|
|
6642
6735
|
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));
|
|
6643
6736
|
}) }), void 0));
|
|
6644
6737
|
};
|
|
6645
|
-
var templateObject_1$
|
|
6738
|
+
var templateObject_1$N, templateObject_2$v;
|
|
6646
6739
|
|
|
6647
|
-
var Container$v = newStyled.div(templateObject_1$
|
|
6648
|
-
var Image$2 = newStyled.img(templateObject_2$
|
|
6649
|
-
var TopTagContainer$1 = newStyled.div(templateObject_3$
|
|
6650
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_4$
|
|
6740
|
+
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"])));
|
|
6741
|
+
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"])));
|
|
6742
|
+
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"])));
|
|
6743
|
+
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"])));
|
|
6651
6744
|
var ImageProductWithTags$1 = function (_a) {
|
|
6652
6745
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
6653
6746
|
return (jsxs$1(Container$v, __assign({ "data-testid": dataTestId }, { children: [jsx$1(Image$2, { src: image.imageUrl, alt: image.alt }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
6654
6747
|
};
|
|
6655
|
-
var templateObject_1$
|
|
6748
|
+
var templateObject_1$M, templateObject_2$u, templateObject_3$j, templateObject_4$c;
|
|
6656
6749
|
|
|
6657
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
6750
|
+
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"])));
|
|
6658
6751
|
var ProductGallery = function (_a) {
|
|
6659
6752
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6660
6753
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6666,7 +6759,7 @@ var ProductGallery = function (_a) {
|
|
|
6666
6759
|
setSelectedImage(value);
|
|
6667
6760
|
} }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
|
|
6668
6761
|
};
|
|
6669
|
-
var templateObject_1$
|
|
6762
|
+
var templateObject_1$L;
|
|
6670
6763
|
|
|
6671
6764
|
/* base styles & size variants */
|
|
6672
6765
|
var StarStyles = {
|
|
@@ -6704,8 +6797,8 @@ var StarStyles = {
|
|
|
6704
6797
|
});
|
|
6705
6798
|
},
|
|
6706
6799
|
};
|
|
6707
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
6708
|
-
var templateObject_1$
|
|
6800
|
+
var Container$t = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6801
|
+
var templateObject_1$K;
|
|
6709
6802
|
|
|
6710
6803
|
var StarContainer = newStyled.div(function (_a) {
|
|
6711
6804
|
var size = _a.size;
|
|
@@ -6760,8 +6853,8 @@ var LabelStyles = {
|
|
|
6760
6853
|
});
|
|
6761
6854
|
},
|
|
6762
6855
|
};
|
|
6763
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
6764
|
-
var templateObject_1$
|
|
6856
|
+
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"])));
|
|
6857
|
+
var templateObject_1$J;
|
|
6765
6858
|
|
|
6766
6859
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6767
6860
|
var theme = _a.theme, size = _a.size;
|
|
@@ -6777,8 +6870,8 @@ var Rating = function (_a) {
|
|
|
6777
6870
|
return (jsxs$1(Container$s, { children: [jsx$1(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.colors.pallete.primary.color }, void 0), jsxs$1(CustomLabel, __assign({ theme: theme, size: size, "data-testid": "CustomLabel" }, { children: [reviews, " ", reviewsText] }), void 0)] }, void 0));
|
|
6778
6871
|
};
|
|
6779
6872
|
|
|
6780
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
6781
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
6873
|
+
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"])));
|
|
6874
|
+
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; });
|
|
6782
6875
|
var textButtonStyles = function (theme) { return ({
|
|
6783
6876
|
border: 'none',
|
|
6784
6877
|
background: 'transparent',
|
|
@@ -6793,7 +6886,7 @@ var FitPredictor = function (_a) {
|
|
|
6793
6886
|
var theme = useTheme();
|
|
6794
6887
|
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));
|
|
6795
6888
|
};
|
|
6796
|
-
var templateObject_1$
|
|
6889
|
+
var templateObject_1$I, templateObject_2$t;
|
|
6797
6890
|
|
|
6798
6891
|
var H2$1 = newStyled.h2(function (_a) {
|
|
6799
6892
|
var color = _a.color;
|
|
@@ -6807,7 +6900,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
6807
6900
|
margin: '0.938rem 4.188rem',
|
|
6808
6901
|
});
|
|
6809
6902
|
});
|
|
6810
|
-
var Bar = newStyled.div(templateObject_1$
|
|
6903
|
+
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) {
|
|
6811
6904
|
var backgroundColor = _a.backgroundColor;
|
|
6812
6905
|
return backgroundColor;
|
|
6813
6906
|
}, function (_a) {
|
|
@@ -6846,7 +6939,7 @@ var ProgressBar = function (_a) {
|
|
|
6846
6939
|
var theme = useTheme();
|
|
6847
6940
|
return (jsxs$1(Container$q, __assign({ "data-testid": "PBContainer", widthAuto: widthAuto }, { children: [jsx$1(Background, __assign({ backgroundColor: theme.colors.shades['100'].color }, { children: jsx$1(Bar, { "data-testid": "PBBar", backgroundColor: fillColor, percent: percent }, void 0) }), void 0), description && jsx$1(H2$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: description }), void 0)] }), void 0));
|
|
6848
6941
|
};
|
|
6849
|
-
var templateObject_1$
|
|
6942
|
+
var templateObject_1$H;
|
|
6850
6943
|
|
|
6851
6944
|
var getStylesBySize$4 = function (size) {
|
|
6852
6945
|
switch (size) {
|
|
@@ -6867,7 +6960,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
6867
6960
|
};
|
|
6868
6961
|
}
|
|
6869
6962
|
};
|
|
6870
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
6963
|
+
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) {
|
|
6871
6964
|
var backgroundColor = _a.backgroundColor;
|
|
6872
6965
|
return backgroundColor;
|
|
6873
6966
|
}, function (_a) {
|
|
@@ -6897,7 +6990,7 @@ var IconButton = function (_a) {
|
|
|
6897
6990
|
var theme = useTheme();
|
|
6898
6991
|
return (jsx$1(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));
|
|
6899
6992
|
};
|
|
6900
|
-
var templateObject_1$
|
|
6993
|
+
var templateObject_1$G;
|
|
6901
6994
|
|
|
6902
6995
|
var TooltipArrow = function (_a) {
|
|
6903
6996
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -6977,7 +7070,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6977
7070
|
}
|
|
6978
7071
|
};
|
|
6979
7072
|
|
|
6980
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7073
|
+
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) {
|
|
6981
7074
|
var position = _a.position;
|
|
6982
7075
|
return getWrapperFlexDirection(position);
|
|
6983
7076
|
});
|
|
@@ -7001,11 +7094,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
7001
7094
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
7002
7095
|
return actual === expected ? margin : '0';
|
|
7003
7096
|
};
|
|
7004
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
7097
|
+
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) {
|
|
7005
7098
|
var borderColor = _a.borderColor;
|
|
7006
7099
|
return borderColor;
|
|
7007
7100
|
});
|
|
7008
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
7101
|
+
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) {
|
|
7009
7102
|
var position = _a.position;
|
|
7010
7103
|
return getArrowRotation(position);
|
|
7011
7104
|
}, function (_a) {
|
|
@@ -7015,17 +7108,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$j || (templateObject_
|
|
|
7015
7108
|
var position = _a.position;
|
|
7016
7109
|
return getArrowContainerMargin(position);
|
|
7017
7110
|
});
|
|
7018
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
7111
|
+
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) {
|
|
7019
7112
|
var color = _a.color;
|
|
7020
7113
|
return color;
|
|
7021
7114
|
});
|
|
7022
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
7023
|
-
var Title$3 = newStyled.h1(templateObject_6$
|
|
7115
|
+
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"])));
|
|
7116
|
+
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) {
|
|
7024
7117
|
var color = _a.color;
|
|
7025
7118
|
return color;
|
|
7026
7119
|
});
|
|
7027
|
-
var IconContainer$4 = newStyled.div(templateObject_7$
|
|
7028
|
-
var templateObject_1$
|
|
7120
|
+
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"])));
|
|
7121
|
+
var templateObject_1$F, templateObject_2$s, templateObject_3$i, templateObject_4$b, templateObject_5$5, templateObject_6$4, templateObject_7$2;
|
|
7029
7122
|
|
|
7030
7123
|
var Tooltip = function (_a) {
|
|
7031
7124
|
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;
|
|
@@ -7176,9 +7269,9 @@ var ContainerStyles = {
|
|
|
7176
7269
|
},
|
|
7177
7270
|
};
|
|
7178
7271
|
|
|
7179
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7272
|
+
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"])));
|
|
7180
7273
|
var Container$o = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7181
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
7274
|
+
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) {
|
|
7182
7275
|
var disabled = _a.disabled;
|
|
7183
7276
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
7184
7277
|
});
|
|
@@ -7195,7 +7288,7 @@ var RadioInput = function (_a) {
|
|
|
7195
7288
|
};
|
|
7196
7289
|
return (jsxs$1(Wrapper$4, { children: [jsxs$1(Container$o, __assign({ theme: theme, size: size, "data-testid": "container" }, { children: [jsx$1(Input$2, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled }, void 0), jsx$1(CustomRadio, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio" }, void 0)] }), void 0), jsx$1(Label$2, __assign({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)] }, void 0));
|
|
7197
7290
|
};
|
|
7198
|
-
var templateObject_1$
|
|
7291
|
+
var templateObject_1$E, templateObject_2$r;
|
|
7199
7292
|
|
|
7200
7293
|
var RadioGroupInput = function (_a) {
|
|
7201
7294
|
var name = _a.name, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d;
|
|
@@ -7209,9 +7302,9 @@ var RadioGroupInput = function (_a) {
|
|
|
7209
7302
|
}) }), void 0));
|
|
7210
7303
|
};
|
|
7211
7304
|
|
|
7212
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
7213
|
-
var Container$n = newStyled.div(templateObject_2$
|
|
7214
|
-
var Text$
|
|
7305
|
+
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"])));
|
|
7306
|
+
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"])));
|
|
7307
|
+
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) {
|
|
7215
7308
|
var color = _a.color;
|
|
7216
7309
|
return color;
|
|
7217
7310
|
}, function (_a) {
|
|
@@ -7224,32 +7317,32 @@ var Text$3 = newStyled.h4(templateObject_3$i || (templateObject_3$i = __makeTemp
|
|
|
7224
7317
|
var Minimalistic = function (_a) {
|
|
7225
7318
|
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;
|
|
7226
7319
|
var theme = useTheme();
|
|
7227
|
-
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$n, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$
|
|
7320
|
+
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$n, __assign({ "data-testid": "TopSection" }, { children: [jsx$1(Text$2, __assign({ color: theme.colors.pallete.secondary.color, weight: "600", margin: "0 1.25rem 0 0" }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: "#3A3A3A", size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$n, __assign({ "data-testid": "BottomSection" }, { children: [jsxs$1(Text$2, __assign({ color: "#d3373c", weight: "600", margin: "0 1.25rem 0 0" }, { children: [getQtyForText, " ", discount, "% ", offText] }), void 0), jsxs$1(Text$2, __assign({ color: theme.colors.pallete.secondary.color }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
7228
7321
|
};
|
|
7229
|
-
var templateObject_1$
|
|
7322
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$h;
|
|
7230
7323
|
|
|
7231
|
-
var Container$m = newStyled.div(templateObject_1$
|
|
7232
|
-
var Title$2 = newStyled.h1(templateObject_2$
|
|
7233
|
-
var Details$1 = newStyled.span(templateObject_3$
|
|
7234
|
-
var PriceContainer$1 = newStyled.span(templateObject_4$
|
|
7324
|
+
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"])));
|
|
7325
|
+
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; });
|
|
7326
|
+
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; });
|
|
7327
|
+
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"])));
|
|
7235
7328
|
var Simple = function (_a) {
|
|
7236
7329
|
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;
|
|
7237
7330
|
var theme = useTheme();
|
|
7238
7331
|
return (jsx$1(Card$1, __assign({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$m, { children: [jsx$1(Title$2, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
|
|
7239
7332
|
};
|
|
7240
|
-
var templateObject_1$
|
|
7333
|
+
var templateObject_1$C, templateObject_2$p, templateObject_3$g, templateObject_4$a;
|
|
7241
7334
|
|
|
7242
7335
|
var Bundle = {
|
|
7243
7336
|
Minimalistic: Minimalistic,
|
|
7244
7337
|
Simple: Simple,
|
|
7245
7338
|
};
|
|
7246
7339
|
|
|
7247
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
7340
|
+
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"])));
|
|
7248
7341
|
var Tag = function (_a) {
|
|
7249
7342
|
var text = _a.text, className = _a.className;
|
|
7250
7343
|
return jsx$1(Container$l, __assign({ className: className }, { children: text }), void 0);
|
|
7251
7344
|
};
|
|
7252
|
-
var templateObject_1$
|
|
7345
|
+
var templateObject_1$B;
|
|
7253
7346
|
|
|
7254
7347
|
var getStylesBySize$3 = function (size) {
|
|
7255
7348
|
switch (size) {
|
|
@@ -7350,11 +7443,11 @@ var Timer = function (_a) {
|
|
|
7350
7443
|
return (jsxs$1("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
|
|
7351
7444
|
};
|
|
7352
7445
|
|
|
7353
|
-
var Label = newStyled.span(templateObject_1$
|
|
7446
|
+
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) {
|
|
7354
7447
|
var color = _a.color;
|
|
7355
7448
|
return color;
|
|
7356
7449
|
});
|
|
7357
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
7450
|
+
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) {
|
|
7358
7451
|
var color = _a.color;
|
|
7359
7452
|
return color;
|
|
7360
7453
|
});
|
|
@@ -7363,7 +7456,7 @@ var InputLabel = function (_a) {
|
|
|
7363
7456
|
var theme = useTheme();
|
|
7364
7457
|
return (jsxs$1(Label, __assign({ color: isDisabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, { children: [label, isRequired && jsx$1(MandatoryIcon, __assign({ color: theme.colors.semantic.urgent.color }, { children: "*" }), void 0)] }), void 0));
|
|
7365
7458
|
};
|
|
7366
|
-
var templateObject_1$
|
|
7459
|
+
var templateObject_1$A, templateObject_2$o;
|
|
7367
7460
|
|
|
7368
7461
|
var isEmpty = function (value) {
|
|
7369
7462
|
return value.length === 0;
|
|
@@ -7373,20 +7466,20 @@ var sliceString = function (str, maxLength) {
|
|
|
7373
7466
|
return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
|
|
7374
7467
|
};
|
|
7375
7468
|
|
|
7376
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
7377
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
7469
|
+
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; });
|
|
7470
|
+
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"])));
|
|
7378
7471
|
var Error$1 = function (_a) {
|
|
7379
7472
|
var error = _a.error;
|
|
7380
7473
|
var theme = useTheme();
|
|
7381
7474
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
7382
7475
|
};
|
|
7383
|
-
var templateObject_1$
|
|
7476
|
+
var templateObject_1$z, templateObject_2$n;
|
|
7384
7477
|
|
|
7385
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
7478
|
+
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) {
|
|
7386
7479
|
var color = _a.color;
|
|
7387
7480
|
return color;
|
|
7388
7481
|
});
|
|
7389
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
7482
|
+
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) {
|
|
7390
7483
|
var padding = _a.padding;
|
|
7391
7484
|
return padding;
|
|
7392
7485
|
}, function (_a) {
|
|
@@ -7429,8 +7522,8 @@ var StyledInput = newStyled.input(templateObject_2$n || (templateObject_2$n = __
|
|
|
7429
7522
|
var disabledColor = _a.disabledColor;
|
|
7430
7523
|
return disabledColor;
|
|
7431
7524
|
});
|
|
7432
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
7433
|
-
var templateObject_1$
|
|
7525
|
+
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"])));
|
|
7526
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$f;
|
|
7434
7527
|
|
|
7435
7528
|
var BaseInput = function (_a) {
|
|
7436
7529
|
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"]);
|
|
@@ -7478,11 +7571,11 @@ var BaseInput = function (_a) {
|
|
|
7478
7571
|
: '' }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign({ className: "inputWrapper" }, { children: [jsx$1(StyledInput, __assign({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: value }, rest, styling), void 0), children] }), void 0), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
|
|
7479
7572
|
};
|
|
7480
7573
|
|
|
7481
|
-
var Container$j = newStyled.div(templateObject_1$
|
|
7574
|
+
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) {
|
|
7482
7575
|
var theme = _a.theme;
|
|
7483
7576
|
return theme.component.inputCustom.input.borderRadius;
|
|
7484
7577
|
});
|
|
7485
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
7578
|
+
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) {
|
|
7486
7579
|
var theme = _a.theme;
|
|
7487
7580
|
return theme.component.inputCustom.button.borderRadius;
|
|
7488
7581
|
});
|
|
@@ -7496,18 +7589,18 @@ var Custom = function (_a) {
|
|
|
7496
7589
|
};
|
|
7497
7590
|
return (jsx$1(Container$j, __assign({ theme: theme }, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, __assign({ theme: theme }, { children: type === 'primary' ? jsx$1(ButtonPrimary, __assign({}, props), void 0) : jsx$1(ButtonSecondary, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
|
|
7498
7591
|
};
|
|
7499
|
-
var templateObject_1$
|
|
7592
|
+
var templateObject_1$x, templateObject_2$l;
|
|
7500
7593
|
|
|
7501
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
7502
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
7503
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
7594
|
+
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"])));
|
|
7595
|
+
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"])));
|
|
7596
|
+
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"])));
|
|
7504
7597
|
var Success = function (_a) {
|
|
7505
7598
|
var children = _a.children, successText = _a.successText;
|
|
7506
7599
|
return (jsxs$1(SuccessContainer, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }, void 0));
|
|
7507
7600
|
};
|
|
7508
|
-
var templateObject_1$
|
|
7601
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$e;
|
|
7509
7602
|
|
|
7510
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
7603
|
+
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) {
|
|
7511
7604
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
7512
7605
|
return status === InputValidationType.Empty &&
|
|
7513
7606
|
type === 'primary' &&
|
|
@@ -7521,10 +7614,10 @@ var BasePlusButton = function (_a) {
|
|
|
7521
7614
|
var Input = (jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
|
|
7522
7615
|
return success ? SuccessComponent : Input;
|
|
7523
7616
|
};
|
|
7524
|
-
var templateObject_1$
|
|
7617
|
+
var templateObject_1$v;
|
|
7525
7618
|
|
|
7526
|
-
var Container$i = newStyled.div(templateObject_1$
|
|
7527
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
7619
|
+
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"])));
|
|
7620
|
+
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; });
|
|
7528
7621
|
var BasePlusIcon = function (_a) {
|
|
7529
7622
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7530
7623
|
var theme = useTheme();
|
|
@@ -7535,7 +7628,7 @@ var BasePlusIcon = function (_a) {
|
|
|
7535
7628
|
? theme.colors.semantic.urgent.color
|
|
7536
7629
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
7537
7630
|
};
|
|
7538
|
-
var templateObject_1$
|
|
7631
|
+
var templateObject_1$u, templateObject_2$j;
|
|
7539
7632
|
|
|
7540
7633
|
var Input$1 = {
|
|
7541
7634
|
Simple: BaseInput,
|
|
@@ -7544,7 +7637,7 @@ var Input$1 = {
|
|
|
7544
7637
|
SimplePlusIcon: BasePlusIcon,
|
|
7545
7638
|
};
|
|
7546
7639
|
|
|
7547
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
7640
|
+
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) {
|
|
7548
7641
|
var width = _a.width;
|
|
7549
7642
|
return width;
|
|
7550
7643
|
}, function (_a) {
|
|
@@ -7562,9 +7655,9 @@ var PaymentMethod = function (_a) {
|
|
|
7562
7655
|
var theme = useTheme();
|
|
7563
7656
|
return (jsx$1(Container$h, __assign({ width: width, height: height, borderColor: theme.colors.shades['100'].color, isClickable: Boolean(onClick), onClick: onClick, "data-testid": "payment-method-container" }, { children: createElement(Icon) }), void 0));
|
|
7564
7657
|
};
|
|
7565
|
-
var templateObject_1$
|
|
7658
|
+
var templateObject_1$t;
|
|
7566
7659
|
|
|
7567
|
-
var Text$
|
|
7660
|
+
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) {
|
|
7568
7661
|
var backgroundColor = _a.backgroundColor;
|
|
7569
7662
|
return backgroundColor;
|
|
7570
7663
|
}, function (_a) {
|
|
@@ -7574,29 +7667,29 @@ var Text$2 = newStyled.h3(templateObject_1$t || (templateObject_1$t = __makeTemp
|
|
|
7574
7667
|
var OfferBanner = function (_a) {
|
|
7575
7668
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
7576
7669
|
var theme = useTheme();
|
|
7577
|
-
return (jsx$1(Text$
|
|
7670
|
+
return (jsx$1(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
7578
7671
|
};
|
|
7579
|
-
var templateObject_1$
|
|
7672
|
+
var templateObject_1$s;
|
|
7580
7673
|
|
|
7581
|
-
var Wrapper$2 = newStyled.div(templateObject_1$
|
|
7582
|
-
var GrandTotal = newStyled.h1(templateObject_2$
|
|
7583
|
-
var Currency = newStyled.span(templateObject_3$
|
|
7584
|
-
var Container$g = newStyled.div(templateObject_4$
|
|
7585
|
-
var Discount = newStyled.h3(templateObject_5$
|
|
7674
|
+
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"])));
|
|
7675
|
+
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; });
|
|
7676
|
+
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"])));
|
|
7677
|
+
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; });
|
|
7678
|
+
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"])));
|
|
7586
7679
|
var Total = function (_a) {
|
|
7587
7680
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7588
7681
|
var theme = useTheme();
|
|
7589
7682
|
return (jsxs$1(Wrapper$2, __assign({ "data-testid": "total-wrapper" }, { children: [jsxs$1(GrandTotal, __assign({ color: theme.colors.shades['550'].color }, { children: [jsx$1(Currency, { children: currency }, void 0), total] }), void 0), saving && (jsxs$1(Container$g, __assign({ "data-testid": "subtotal-container", highlightColor: highlightColor }, { children: [jsx$1(Discount, { children: saving.savingText }, void 0), jsx$1(Discount, { children: saving.amount }, void 0)] }), void 0))] }), void 0));
|
|
7590
7683
|
};
|
|
7591
|
-
var templateObject_1$
|
|
7684
|
+
var templateObject_1$r, templateObject_2$i, templateObject_3$d, templateObject_4$9, templateObject_5$4;
|
|
7592
7685
|
|
|
7593
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
7686
|
+
var Wrapper$1 = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7594
7687
|
var color = _a.color;
|
|
7595
7688
|
return color;
|
|
7596
7689
|
});
|
|
7597
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
7598
|
-
var Item$1 = newStyled.h4(templateObject_3$
|
|
7599
|
-
var CouponItem = newStyled(Item$1)(templateObject_4$
|
|
7690
|
+
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"])));
|
|
7691
|
+
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"])));
|
|
7692
|
+
var CouponItem = newStyled(Item$1)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7600
7693
|
var color = _a.color;
|
|
7601
7694
|
return color;
|
|
7602
7695
|
});
|
|
@@ -7608,22 +7701,22 @@ var Subtotal = function (_a) {
|
|
|
7608
7701
|
return (jsxs$1(ItemContainer, { children: [jsxs$1(CouponItem, __assign({ color: highlightColor }, { children: [coupon.couponText, " ", c.code, " ", coupon.appliedText] }), void 0), jsx$1(CouponItem, __assign({ color: highlightColor }, { children: c.amount }), void 0)] }, i));
|
|
7609
7702
|
})] }), void 0));
|
|
7610
7703
|
};
|
|
7611
|
-
var templateObject_1$
|
|
7704
|
+
var templateObject_1$q, templateObject_2$h, templateObject_3$c, templateObject_4$8;
|
|
7612
7705
|
|
|
7613
7706
|
var Totals = {
|
|
7614
7707
|
Total: Total,
|
|
7615
7708
|
Subtotal: Subtotal,
|
|
7616
7709
|
};
|
|
7617
7710
|
|
|
7618
|
-
var Container$f = newStyled.div(templateObject_1$
|
|
7619
|
-
var IconContainer$2 = newStyled.div(templateObject_2$
|
|
7620
|
-
var Text
|
|
7621
|
-
var Details = newStyled.span(templateObject_4$
|
|
7711
|
+
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; });
|
|
7712
|
+
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"])));
|
|
7713
|
+
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; });
|
|
7714
|
+
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; });
|
|
7622
7715
|
var Note = function (_a) {
|
|
7623
7716
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
7624
|
-
return (jsxs$1(Container$f, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$2, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text
|
|
7717
|
+
return (jsxs$1(Container$f, __assign({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$2, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text, __assign({ color: color }, { children: [jsxs$1(Details, __assign({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
7625
7718
|
};
|
|
7626
|
-
var templateObject_1$
|
|
7719
|
+
var templateObject_1$p, templateObject_2$g, templateObject_3$b, templateObject_4$7;
|
|
7627
7720
|
|
|
7628
7721
|
/* eslint-disable no-param-reassign */
|
|
7629
7722
|
var index$2 = function (breakpoints) {
|
|
@@ -7713,14 +7806,14 @@ var mediaQueries = function (_a) {
|
|
|
7713
7806
|
], { literal: true });
|
|
7714
7807
|
};
|
|
7715
7808
|
|
|
7716
|
-
var Title$1 = newStyled.h1(templateObject_1$
|
|
7717
|
-
var Line = newStyled.div(templateObject_2$
|
|
7718
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7809
|
+
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; });
|
|
7810
|
+
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; });
|
|
7811
|
+
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) {
|
|
7719
7812
|
return mediaQueries(props)({
|
|
7720
7813
|
flexDirection: ['column', 'row'],
|
|
7721
7814
|
});
|
|
7722
7815
|
});
|
|
7723
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
7816
|
+
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) {
|
|
7724
7817
|
return mediaQueries(props)({
|
|
7725
7818
|
margin: ['0', '0 1.25rem'],
|
|
7726
7819
|
marginBottom: ['1.875rem', '0'],
|
|
@@ -7729,13 +7822,13 @@ var Col$1 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemp
|
|
|
7729
7822
|
width: ['100%', 'inherit'],
|
|
7730
7823
|
});
|
|
7731
7824
|
});
|
|
7732
|
-
var IconContainer$1 = newStyled.div(templateObject_5$
|
|
7825
|
+
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) {
|
|
7733
7826
|
return mediaQueries(props)({
|
|
7734
7827
|
marginBottom: ['1.875rem', '0'],
|
|
7735
7828
|
width: ['auto', '1.375rem'],
|
|
7736
7829
|
});
|
|
7737
7830
|
});
|
|
7738
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7831
|
+
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) {
|
|
7739
7832
|
return mediaQueries(props)({
|
|
7740
7833
|
display: ['block', 'flex'],
|
|
7741
7834
|
});
|
|
@@ -7743,53 +7836,53 @@ var SectionTitle = newStyled.h1(templateObject_6$4 || (templateObject_6$4 = __ma
|
|
|
7743
7836
|
var theme = _a.theme;
|
|
7744
7837
|
return theme.colors.shades['700'].color;
|
|
7745
7838
|
});
|
|
7746
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7747
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8
|
|
7839
|
+
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; });
|
|
7840
|
+
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; });
|
|
7748
7841
|
var DeliveryDetails = function (_a) {
|
|
7749
7842
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7750
7843
|
var theme = useTheme();
|
|
7751
7844
|
return (jsxs$1("div", __assign({ "data-testid": "DeliveryDetails" }, { children: [jsx$1(Title$1, __assign({ color: theme.colors.pallete.secondary.color }, { children: deliveryDetailsText }), void 0), jsx$1(Line, { backgroundColor: theme.colors.shades['100'].color }, void 0), note && jsx$1(Note, __assign({}, note), void 0), jsxs$1(Row$1, __assign({ "data-testid": "DD-row", theme: theme }, { children: [jsxs$1(Col$1, __assign({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign({ theme: theme }, { children: [jsx$1(IconContainer$1, __assign({ theme: theme }, { children: jsx$1(Icon.PDP.Clock, {}, void 0) }), void 0), arrivingBy.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: arrivingBy.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign({ theme: theme }, { children: [jsx$1(IconContainer$1, __assign({ theme: theme }, { children: jsx$1(Icon.Navigation.MapMarker, {}, void 0) }), void 0), shippingTo.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: shippingTo.details }), void 0)] }), void 0), jsxs$1(Col$1, __assign({ theme: theme }, { children: [jsxs$1(SectionTitle, __assign({ theme: theme }, { children: [jsx$1(IconContainer$1, __assign({ theme: theme }, { children: jsx$1(Icon.Messaging.Messenger, {}, void 0) }), void 0), instantOrderUpdate.title] }), void 0), jsx$1(SectionDetails, __assign({ color: theme.colors.shades['700'].color }, { children: instantOrderUpdate.details }), void 0), jsxs$1(KeepMeUpdated, __assign({ onClick: instantOrderUpdate.keepMeUpdated.onClick, borderColor: theme.colors.shades['150'].color }, { children: [jsx$1(Icon.Messaging.Messenger, { width: 1, height: 1, fill: "#0078FF" }, void 0), instantOrderUpdate.keepMeUpdated.title] }), void 0)] }), void 0)] }), void 0)] }), void 0));
|
|
7752
7845
|
};
|
|
7753
|
-
var templateObject_1$
|
|
7846
|
+
var templateObject_1$o, templateObject_2$f, templateObject_3$a, templateObject_4$6, templateObject_5$3, templateObject_6$3, templateObject_7$1, templateObject_8;
|
|
7754
7847
|
|
|
7755
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
7756
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
7848
|
+
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"])));
|
|
7849
|
+
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; });
|
|
7757
7850
|
var ScrollToTop = function (_a) {
|
|
7758
7851
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7759
7852
|
var theme = useTheme();
|
|
7760
7853
|
return (jsxs$1(Container$e, __assign({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(H1$2, __assign({ color: theme.colors.shades['700'].color }, { children: scrollToTopText }), void 0), jsx$1(Icon.Arrows.ChevronUpSolid, { width: 1.375, height: 1.375, fill: theme.colors.pallete.primary.color }, void 0)] }), void 0));
|
|
7761
7854
|
};
|
|
7762
|
-
var templateObject_1$
|
|
7855
|
+
var templateObject_1$n, templateObject_2$e;
|
|
7763
7856
|
|
|
7764
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
7765
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
7857
|
+
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"])));
|
|
7858
|
+
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; });
|
|
7766
7859
|
var OrderBar = function (_a) {
|
|
7767
7860
|
var message = _a.message;
|
|
7768
7861
|
var theme = useTheme();
|
|
7769
7862
|
return (jsxs$1(Container$d, { children: [jsx$1(Icon.Actions.Check, { width: 1.25, height: 0.875, fill: "#2F806A" }, void 0), jsx$1(H1$1, __assign({ color: theme.colors.shades['700'].color }, { children: message }), void 0)] }, void 0));
|
|
7770
7863
|
};
|
|
7771
|
-
var templateObject_1$
|
|
7864
|
+
var templateObject_1$m, templateObject_2$d;
|
|
7772
7865
|
|
|
7773
|
-
var TableElement = newStyled.table(templateObject_1$
|
|
7774
|
-
var TableCell = newStyled.td(templateObject_2$
|
|
7775
|
-
var TableHead = newStyled.th(templateObject_3$
|
|
7776
|
-
var TableRow = newStyled.tr(templateObject_4$
|
|
7866
|
+
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; });
|
|
7867
|
+
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; });
|
|
7868
|
+
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; });
|
|
7869
|
+
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; });
|
|
7777
7870
|
var SizeTable = function (_a) {
|
|
7778
7871
|
var headers = _a.headers, data = _a.data;
|
|
7779
7872
|
var theme = useTheme();
|
|
7780
7873
|
return (jsxs$1(TableElement, __assign({ color: theme.colors.shades['700'].color, borderColor: theme.colors.shades['100'].color }, { children: [jsx$1("thead", { children: jsx$1(TableRow, __assign({ backgroundColor: theme.colors.shades['10'].color }, { children: headers.map(function (header, index) { return (jsx$1(TableHead, __assign({ borderColor: theme.colors.shades['100'].color }, { children: header }), index)); }) }), void 0) }, void 0), jsx$1("tbody", { children: data.map(function (row, index) { return (jsx$1(TableRow, __assign({ className: index % 2 !== 0 ? '' : 'background', backgroundColor: theme.colors.shades['10'].color }, { children: row.map(function (cell, index) { return (jsx$1(TableCell, __assign({ borderColor: theme.colors.shades['100'].color }, { children: cell }), index)); }) }), index)); }) }, void 0)] }), void 0));
|
|
7781
7874
|
};
|
|
7782
|
-
var templateObject_1$
|
|
7875
|
+
var templateObject_1$l, templateObject_2$c, templateObject_3$9, templateObject_4$5;
|
|
7783
7876
|
|
|
7784
|
-
var Img = newStyled.img(templateObject_1$
|
|
7877
|
+
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; });
|
|
7785
7878
|
var Image$1 = function (_a) {
|
|
7786
7879
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition;
|
|
7787
7880
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, void 0));
|
|
7788
7881
|
};
|
|
7789
|
-
var templateObject_1$
|
|
7882
|
+
var templateObject_1$k;
|
|
7790
7883
|
|
|
7791
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
7792
|
-
var DescriptionContainer = newStyled.div(templateObject_2$
|
|
7884
|
+
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"])));
|
|
7885
|
+
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) {
|
|
7793
7886
|
var theme = _a.theme;
|
|
7794
7887
|
return mediaQueries({ theme: theme })({
|
|
7795
7888
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
@@ -7815,7 +7908,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
7815
7908
|
margin: '0.063rem 0',
|
|
7816
7909
|
});
|
|
7817
7910
|
});
|
|
7818
|
-
var PriceContainer = newStyled.div(templateObject_3$
|
|
7911
|
+
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) {
|
|
7819
7912
|
var withTag = _a.withTag, theme = _a.theme;
|
|
7820
7913
|
return withTag
|
|
7821
7914
|
? mediaQueries({ theme: theme })({
|
|
@@ -7829,7 +7922,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
7829
7922
|
var theme = useTheme();
|
|
7830
7923
|
return (jsxs$1(Container$c, { children: [jsx$1(Image$1, { src: image.src, alt: image.alt, width: "4.063rem", height: "5.375rem", objectFit: "cover", objectPosition: "center" }, void 0), jsxs$1(DescriptionContainer, __assign({ "data-testid": "order-item-description-container", theme: theme }, { children: [jsx$1(Title, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsx$1(Subtitle, __assign({ color: theme.colors.shades['700'].color }, { children: subtitle }), void 0), jsxs$1(PriceContainer, __assign({ "data-testid": "order-item-price-container", withTag: !!tag, theme: theme }, { children: [tag && (jsx$1(OfferBanner, { discountAppliedText: tag === null || tag === void 0 ? void 0 : tag.text, backgroundColor: tag === null || tag === void 0 ? void 0 : tag.backgroundColor }, void 0)), jsx$1(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, color: price.color || theme.colors.shades['700'].color, size: ComponentSize.Small }, void 0)] }), void 0)] }), void 0)] }, void 0));
|
|
7831
7924
|
};
|
|
7832
|
-
var templateObject_1$
|
|
7925
|
+
var templateObject_1$j, templateObject_2$b, templateObject_3$8;
|
|
7833
7926
|
|
|
7834
7927
|
function formatDate(date) {
|
|
7835
7928
|
var day = date.getDate();
|
|
@@ -7838,47 +7931,47 @@ function formatDate(date) {
|
|
|
7838
7931
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
7839
7932
|
}
|
|
7840
7933
|
|
|
7841
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
7842
|
-
var Heading = newStyled.div(templateObject_2$
|
|
7934
|
+
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"])));
|
|
7935
|
+
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) {
|
|
7843
7936
|
var theme = _a.theme;
|
|
7844
7937
|
return mediaQueries({ theme: theme })({
|
|
7845
7938
|
fontSize: ['14px', '16px'],
|
|
7846
7939
|
lineHeight: ['22px', '24px'],
|
|
7847
7940
|
});
|
|
7848
7941
|
});
|
|
7849
|
-
var Content = newStyled.div(templateObject_3$
|
|
7942
|
+
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) {
|
|
7850
7943
|
var theme = _a.theme;
|
|
7851
7944
|
return mediaQueries({ theme: theme })({
|
|
7852
7945
|
flexDirection: ['column', 'row'],
|
|
7853
7946
|
});
|
|
7854
7947
|
});
|
|
7855
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
7948
|
+
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) {
|
|
7856
7949
|
var theme = _a.theme;
|
|
7857
7950
|
return mediaQueries({ theme: theme })({
|
|
7858
7951
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
7859
7952
|
});
|
|
7860
7953
|
});
|
|
7861
|
-
var H2 = newStyled.h2(templateObject_5$
|
|
7954
|
+
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) {
|
|
7862
7955
|
var theme = _a.theme;
|
|
7863
7956
|
return mediaQueries({ theme: theme })({
|
|
7864
7957
|
fontSize: ['16px', '18px'],
|
|
7865
7958
|
lineHeight: ['24px', '28px'],
|
|
7866
7959
|
});
|
|
7867
7960
|
});
|
|
7868
|
-
var H3$1 = newStyled.h3(templateObject_6$
|
|
7961
|
+
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) {
|
|
7869
7962
|
var theme = _a.theme;
|
|
7870
7963
|
return mediaQueries({ theme: theme })({
|
|
7871
7964
|
fontSize: ['14px', '16px'],
|
|
7872
7965
|
lineHeight: ['22px', '24px'],
|
|
7873
7966
|
});
|
|
7874
7967
|
});
|
|
7875
|
-
var P = newStyled.p(templateObject_7
|
|
7968
|
+
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"])));
|
|
7876
7969
|
var Review = function (_a) {
|
|
7877
7970
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
7878
7971
|
var theme = useTheme();
|
|
7879
7972
|
return (jsxs$1(Container$b, { children: [jsxs$1(Heading, __assign({ theme: theme }, { children: [jsx$1(H2, __assign({ theme: theme }, { children: reviewerName }), void 0), formatDate(date)] }), void 0), jsx$1(StarList, { starsNumber: 5, rating: rating, fill: stars.color, size: stars.size }, void 0), jsxs$1(Content, __assign({ "data-testid": "review-content", theme: theme }, { children: [jsxs$1(ReviewContainer, __assign({ theme: theme }, { children: [jsx$1(H3$1, __assign({ theme: theme }, { children: title }), void 0), jsx$1(P, { children: description }, void 0)] }), void 0), jsx$1(Image$1, { src: image.src, alt: image.alt, width: "7.5rem", height: "10rem" }, void 0)] }), void 0)] }, void 0));
|
|
7880
7973
|
};
|
|
7881
|
-
var templateObject_1$
|
|
7974
|
+
var templateObject_1$i, templateObject_2$a, templateObject_3$7, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
7882
7975
|
|
|
7883
7976
|
var Button$3 = newStyled.button(function () { return ({
|
|
7884
7977
|
background: 'transparent',
|
|
@@ -12121,14 +12214,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12121
12214
|
return Slider;
|
|
12122
12215
|
}(React.Component);
|
|
12123
12216
|
|
|
12124
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12217
|
+
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) {
|
|
12125
12218
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12126
12219
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12127
12220
|
}, function (_a) {
|
|
12128
12221
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12129
12222
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12130
12223
|
});
|
|
12131
|
-
var templateObject_1$
|
|
12224
|
+
var templateObject_1$h;
|
|
12132
12225
|
|
|
12133
12226
|
var getStylesBySize$1 = function (size) {
|
|
12134
12227
|
// rem units
|
|
@@ -12187,13 +12280,13 @@ var SliderNavigation = function (_a) {
|
|
|
12187
12280
|
} }, { 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));
|
|
12188
12281
|
};
|
|
12189
12282
|
|
|
12190
|
-
var List = newStyled.ul(templateObject_1$
|
|
12191
|
-
var Item = newStyled.li(templateObject_2$
|
|
12192
|
-
var DropdownWrapper = newStyled.div(templateObject_3$
|
|
12193
|
-
var ArrowContainer = newStyled.div(templateObject_4$
|
|
12194
|
-
var StyledDropdown = newStyled.ul(templateObject_5$
|
|
12195
|
-
var DropdownItem = newStyled.li(templateObject_6$
|
|
12196
|
-
var templateObject_1$
|
|
12283
|
+
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"])));
|
|
12284
|
+
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"])));
|
|
12285
|
+
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"])));
|
|
12286
|
+
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"])));
|
|
12287
|
+
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; });
|
|
12288
|
+
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; });
|
|
12289
|
+
var templateObject_1$g, templateObject_2$9, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6$1;
|
|
12197
12290
|
|
|
12198
12291
|
var DropdownListIcons = function (_a) {
|
|
12199
12292
|
var items = _a.items;
|
|
@@ -12206,7 +12299,7 @@ var Dropdown = function (_a) {
|
|
|
12206
12299
|
return (jsxs$1(DropdownWrapper, __assign({ className: "dropdownWrapper", "data-testid": "Dropdown-wrapper" }, { children: [jsx$1(ArrowContainer, { children: jsx$1(TooltipArrow, { stroke: theme.colors.shades['200'].color, fill: "#fff", width: 1.25, height: 0.75 }, void 0) }, void 0), jsx$1(StyledDropdown, __assign({ borderColor: theme.colors.shades['200'].color }, { children: items.map(function (item, index) { return (jsx$1(DropdownItem, __assign({ onClick: item.callback, borderColor: theme.colors.shades['200'].color, color: theme.colors.shades['550'].color, hoverColor: theme.colors.shades['10'].color }, { children: item.description }), index)); }) }), void 0)] }), void 0));
|
|
12207
12300
|
};
|
|
12208
12301
|
|
|
12209
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12302
|
+
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; });
|
|
12210
12303
|
var AmazonButton = function (_a) {
|
|
12211
12304
|
var onClick = _a.onClick;
|
|
12212
12305
|
return (jsx$1(StyledButton, __assign({ backgroundColor: "#FED865", hoverBackgroundColor: "#F1CB58", onClick: onClick }, { children: jsx$1(Icon.Payment.Amazon, { width: 5.375, height: 1.25 }, void 0) }), void 0));
|
|
@@ -12215,23 +12308,23 @@ var PaypalButton = function (_a) {
|
|
|
12215
12308
|
var onClick = _a.onClick;
|
|
12216
12309
|
return (jsx$1(StyledButton, __assign({ backgroundColor: "#ffc439", hoverBackgroundColor: "#F4BF41", onClick: onClick }, { children: jsx$1(Icon.Payment.Paypal, { width: 4.938, height: 1.25 }, void 0) }), void 0));
|
|
12217
12310
|
};
|
|
12218
|
-
var templateObject_1$
|
|
12311
|
+
var templateObject_1$f;
|
|
12219
12312
|
|
|
12220
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12221
|
-
var Col = newStyled.div(templateObject_2$
|
|
12222
|
-
var Row = newStyled.div(templateObject_3$
|
|
12313
|
+
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'); });
|
|
12314
|
+
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"])));
|
|
12315
|
+
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) {
|
|
12223
12316
|
return props.rightToLeft &&
|
|
12224
12317
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12225
12318
|
});
|
|
12226
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12227
|
-
var H3 = newStyled.h3(templateObject_5
|
|
12228
|
-
var FreeShipping = newStyled.span(templateObject_6
|
|
12319
|
+
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; });
|
|
12320
|
+
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; });
|
|
12321
|
+
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; });
|
|
12229
12322
|
var CrossSellCheckbox = function (_a) {
|
|
12230
12323
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12231
12324
|
var theme = useTheme();
|
|
12232
12325
|
return (jsxs$1(Wrapper, __assign({ backgroundColor: theme.colors.shades['10'].color, rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Checkbox, { text: "", id: "checkbox", onChange: onChange, size: ComponentSize.Small, variant: "secondary" }, void 0), jsxs$1(Row, __assign({ rightToLeft: Boolean(rightToLeft) }, { children: [jsx$1(Image$1, { src: imageURL, alt: "Cross sell image", borderRadius: "0.5rem" }, void 0), jsxs$1(Col, { children: [jsx$1(H5, __assign({ color: theme.colors.shades['700'].color }, { children: title }), void 0), jsxs$1(H3, __assign({ color: theme.colors.semantic.urgent.color }, { children: [description, jsxs$1(FreeShipping, __assign({ color: theme.colors.shades['700'].color }, { children: [' ', "+ ", freeShippingText] }), void 0)] }), void 0)] }, void 0)] }), void 0)] }), void 0));
|
|
12233
12326
|
};
|
|
12234
|
-
var templateObject_1$
|
|
12327
|
+
var templateObject_1$e, templateObject_2$8, templateObject_3$5, templateObject_4$2, templateObject_5, templateObject_6;
|
|
12235
12328
|
|
|
12236
12329
|
var index = /*#__PURE__*/Object.freeze({
|
|
12237
12330
|
__proto__: null,
|
|
@@ -12246,8 +12339,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12246
12339
|
height: height,
|
|
12247
12340
|
});
|
|
12248
12341
|
});
|
|
12249
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
12250
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12342
|
+
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"])));
|
|
12343
|
+
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; });
|
|
12251
12344
|
var getStylesBySize = function (size) {
|
|
12252
12345
|
switch (size) {
|
|
12253
12346
|
case ComponentSize.Medium:
|
|
@@ -12274,9 +12367,9 @@ var ProductItemMobile = function (_a) {
|
|
|
12274
12367
|
var styles = getStylesBySize(size);
|
|
12275
12368
|
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: ComponentSize.Small, css: { position: 'absolute', top: 0, left: 0 } }, void 0), jsx(CategoryTag, { text: tags.categoryTagText, size: ComponentSize.Small, css: { position: 'absolute', bottom: '1rem', left: 0 } }, void 0)] }), void 0)) : (jsx(Image$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: ComponentSize.Small }, void 0), jsx(Rating, { size: ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "" }, void 0)] }, void 0));
|
|
12276
12369
|
};
|
|
12277
|
-
var templateObject_1$
|
|
12370
|
+
var templateObject_1$d, templateObject_2$7;
|
|
12278
12371
|
|
|
12279
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
12372
|
+
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"])));
|
|
12280
12373
|
function withProductGrid(ProductItemComponent, data) {
|
|
12281
12374
|
function WithProductGrid(props) {
|
|
12282
12375
|
return (jsx$1(Container$9, __assign({ "data-testid": "product-grid-container" }, { children: data.map(function (product, index) { return (jsx$1(ProductItemComponent, __assign({}, product, props), index)); }) }), void 0));
|
|
@@ -12286,18 +12379,18 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
12286
12379
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12287
12380
|
return WithProductGrid;
|
|
12288
12381
|
}
|
|
12289
|
-
var templateObject_1$
|
|
12382
|
+
var templateObject_1$c;
|
|
12290
12383
|
|
|
12291
12384
|
var Collection = {
|
|
12292
12385
|
ProductItemMobile: ProductItemMobile,
|
|
12293
12386
|
withProductGrid: withProductGrid,
|
|
12294
12387
|
};
|
|
12295
12388
|
|
|
12296
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12389
|
+
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) {
|
|
12297
12390
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12298
12391
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12299
12392
|
});
|
|
12300
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12393
|
+
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) {
|
|
12301
12394
|
var width = _a.width;
|
|
12302
12395
|
return width;
|
|
12303
12396
|
}, function (_a) {
|
|
@@ -12338,16 +12431,16 @@ var Drawer = function (_a) {
|
|
|
12338
12431
|
}, [isOpen, onClose, onOpen]);
|
|
12339
12432
|
return isMounted ? (jsxs$1("div", { children: [jsx$1(Backdrop, { backgroundColor: backdropColor, isOpen: isOpenState, "data-testid": "Drawer-Backdrop", onClick: onClickOutside && onClickOutside }, void 0), jsx$1(Sidebar, __assign({ position: position, width: width, backgroundColor: backgroundColor, isOpen: isOpenState, "data-testid": "Drawer-Sidebar" }, { children: children }), void 0)] }, void 0)) : null;
|
|
12340
12433
|
};
|
|
12341
|
-
var templateObject_1$
|
|
12434
|
+
var templateObject_1$b, templateObject_2$6;
|
|
12342
12435
|
|
|
12343
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
12436
|
+
var Container$8 = newStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
12344
12437
|
var size = _a.size;
|
|
12345
12438
|
return (size ? size : '100%');
|
|
12346
12439
|
}, function (_a) {
|
|
12347
12440
|
var size = _a.size;
|
|
12348
12441
|
return (size ? size : '100%');
|
|
12349
12442
|
});
|
|
12350
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12443
|
+
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) {
|
|
12351
12444
|
var animationDuration = _a.animationDuration;
|
|
12352
12445
|
return animationDuration;
|
|
12353
12446
|
});
|
|
@@ -12355,11 +12448,11 @@ var Spinner = function (_a) {
|
|
|
12355
12448
|
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;
|
|
12356
12449
|
return (jsx$1(Container$8, __assign({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, strokeWidth: completeIconStroke }, void 0)) : (jsx$1(Animation, __assign({ animationDuration: animationDuration, "data-testid": "Animation" }, { children: jsx$1(Icon.Other.Loading, { fill: fill, backgroundColor: background }, void 0) }), void 0)) }), void 0));
|
|
12357
12450
|
};
|
|
12358
|
-
var templateObject_1$
|
|
12451
|
+
var templateObject_1$a, templateObject_2$5;
|
|
12359
12452
|
|
|
12360
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12361
|
-
var LI = newStyled.li(templateObject_2$
|
|
12362
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12453
|
+
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"])));
|
|
12454
|
+
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; });
|
|
12455
|
+
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"])));
|
|
12363
12456
|
var Tags = function (_a) {
|
|
12364
12457
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12365
12458
|
var theme = useTheme();
|
|
@@ -12367,7 +12460,7 @@ var Tags = function (_a) {
|
|
|
12367
12460
|
return (jsxs$1(LI, __assign({ color: theme.colors.shades['700'].color, backgroundColor: color }, { children: [item, jsx$1(CloseIconContainer, __assign({ "data-testid": "li-close-icon", onClick: function () { return onCloseClick(index); } }, { children: jsx$1(Icon.Actions.Close, { fill: theme.colors.shades['700'].color }, void 0) }), void 0)] }), index));
|
|
12368
12461
|
}) }), void 0));
|
|
12369
12462
|
};
|
|
12370
|
-
var templateObject_1$
|
|
12463
|
+
var templateObject_1$9, templateObject_2$4, templateObject_3$4;
|
|
12371
12464
|
|
|
12372
12465
|
function FilteringDropdown(_a) {
|
|
12373
12466
|
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;
|
|
@@ -12400,15 +12493,15 @@ function FilteringDropdown(_a) {
|
|
|
12400
12493
|
}) }, void 0)] }), void 0));
|
|
12401
12494
|
}
|
|
12402
12495
|
|
|
12403
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
12404
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
12405
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12496
|
+
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"])));
|
|
12497
|
+
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"])));
|
|
12498
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), function (_a) {
|
|
12406
12499
|
var theme = _a.theme;
|
|
12407
12500
|
return mediaQueries({ theme: theme })({
|
|
12408
12501
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12409
12502
|
});
|
|
12410
12503
|
});
|
|
12411
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12504
|
+
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) {
|
|
12412
12505
|
var bold = _a.bold;
|
|
12413
12506
|
return (bold ? '700' : '500');
|
|
12414
12507
|
}, function (_a) {
|
|
@@ -12425,7 +12518,7 @@ var PageNumber = newStyled.span(templateObject_4$2 || (templateObject_4$2 = __ma
|
|
|
12425
12518
|
width: ['1.25rem', '1.875rem'],
|
|
12426
12519
|
});
|
|
12427
12520
|
});
|
|
12428
|
-
var templateObject_1$
|
|
12521
|
+
var templateObject_1$8, templateObject_2$3, templateObject_3$3, templateObject_4$1;
|
|
12429
12522
|
|
|
12430
12523
|
var Pagination = function (_a) {
|
|
12431
12524
|
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;
|
|
@@ -12441,110 +12534,6 @@ var Pagination = function (_a) {
|
|
|
12441
12534
|
return (jsxs$1(Container$7, __assign({ "data-testid": "PaginationContainer" }, { children: [jsx$1(IconContainer, __assign({ onClick: function () { return handlePageChange(page - 1); }, "data-testid": "LeftChevron" }, { children: jsx$1(Icon.Arrows.ChevronLeft, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0), jsx$1(PageNumbersContainer, __assign({ "data-testid": "PageNumbersContainer", theme: theme }, { children: new Array(to - from + 1).fill(0).map(function (_, i) { return (jsx$1(PageNumber, __assign({ onClick: function () { return handlePageChange(i + from); }, bold: boldActive && page === i + from, underline: underlineActive && page === i + from, role: 'button', color: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, borderColor: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color, theme: theme }, { children: i + from }), i)); }) }), void 0), jsx$1(IconContainer, __assign({ onClick: function () { return handlePageChange(page + 1); }, "data-testid": "RightChevron" }, { children: jsx$1(Icon.Arrows.ChevronRight, { fill: disabled ? theme.colors.shades['250'].color : theme.colors.shades['700'].color }, void 0) }), void 0)] }), void 0));
|
|
12442
12535
|
};
|
|
12443
12536
|
|
|
12444
|
-
// This defines which HTML tag to render for each `variant`, it also defines
|
|
12445
|
-
// `variants` styles that are consistent through all themes.
|
|
12446
|
-
var TAGS = {
|
|
12447
|
-
hero1: newStyled.h1(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject([""], [""]))),
|
|
12448
|
-
hero2: newStyled.h2(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject([""], [""]))),
|
|
12449
|
-
hero3: newStyled.h3(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject([""], [""]))),
|
|
12450
|
-
display1: newStyled.h1(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject([""], [""]))),
|
|
12451
|
-
display2: newStyled.h2(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""]))),
|
|
12452
|
-
heading1: newStyled.h1(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""]))),
|
|
12453
|
-
heading2: newStyled.h2(templateObject_7 || (templateObject_7 = __makeTemplateObject([""], [""]))),
|
|
12454
|
-
heading3: newStyled.h3(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""]))),
|
|
12455
|
-
heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
|
|
12456
|
-
heading5: newStyled.h5(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))),
|
|
12457
|
-
heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
|
|
12458
|
-
body: newStyled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))),
|
|
12459
|
-
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'); }),
|
|
12460
|
-
button: newStyled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
12461
|
-
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'); }),
|
|
12462
|
-
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
12463
|
-
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' : ''); }),
|
|
12464
|
-
};
|
|
12465
|
-
var Text = function (_a) {
|
|
12466
|
-
var variant = _a.variant, children = _a.children, size = _a.size, weight = _a.weight, allProps = __rest(_a, ["variant", "children", "size", "weight"]);
|
|
12467
|
-
var theme = useTheme();
|
|
12468
|
-
var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
12469
|
-
var props = useMemo(function () {
|
|
12470
|
-
var _a;
|
|
12471
|
-
return (__assign(__assign({}, ((_a = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _a !== void 0 ? _a : {})), allProps));
|
|
12472
|
-
}, [variant, allProps]);
|
|
12473
|
-
var commonCSS = useMemo(function () {
|
|
12474
|
-
var _a, _b;
|
|
12475
|
-
// These are the common style inside a `variant`.
|
|
12476
|
-
// E.g.: Common styles for all "button".
|
|
12477
|
-
var variantstyle = (_a = theme.typography.variants[variant]) !== null && _a !== void 0 ? _a : {
|
|
12478
|
-
fontSize: 14,
|
|
12479
|
-
lineHeight: 1,
|
|
12480
|
-
};
|
|
12481
|
-
// This allow us to define different styles for different `sizes` inside a `variant`
|
|
12482
|
-
// E.g.: "button-small", "button-regular"
|
|
12483
|
-
//
|
|
12484
|
-
// We use .filter(Boolean) to ignore the `size` on the `variants` that don't have it.
|
|
12485
|
-
// E.g.: "hero1", "display1"
|
|
12486
|
-
var variantName = [variant, size].filter(Boolean).join('-');
|
|
12487
|
-
// These are styles specific to `variation-size`.
|
|
12488
|
-
var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
|
|
12489
|
-
var style = __assign(__assign({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle);
|
|
12490
|
-
if (weight) {
|
|
12491
|
-
style.fontWeight = theme.typography.config.weight[weight];
|
|
12492
|
-
}
|
|
12493
|
-
if (props.disabled) {
|
|
12494
|
-
style.opacity = 0.5;
|
|
12495
|
-
style.cursor = 'not-allowed';
|
|
12496
|
-
style.color = theme.colors.text.disabled;
|
|
12497
|
-
}
|
|
12498
|
-
return style;
|
|
12499
|
-
}, [theme, variant, weight, size, props.disabled]);
|
|
12500
|
-
// This is to make TS happy, because `href` doesn't exists on other `variants`
|
|
12501
|
-
var propsHref = props.href;
|
|
12502
|
-
var href = useMemo(function () {
|
|
12503
|
-
// We could use `pointer-events: none` but it prevents us from using
|
|
12504
|
-
// `cursor: not-allowed`, so we're changing the `href` for `disabled` links.
|
|
12505
|
-
if (propsHref != null && props.disabled) {
|
|
12506
|
-
return 'javascript:void(0)';
|
|
12507
|
-
}
|
|
12508
|
-
return propsHref;
|
|
12509
|
-
}, [props.disabled, propsHref]);
|
|
12510
|
-
return (jsx(Tag, __assign({}, props, { css: commonCSS, href: href }, { children: children }), void 0));
|
|
12511
|
-
};
|
|
12512
|
-
var DEFAULTS = {
|
|
12513
|
-
heading1: {
|
|
12514
|
-
weight: 'bold',
|
|
12515
|
-
},
|
|
12516
|
-
heading2: {
|
|
12517
|
-
weight: 'bold',
|
|
12518
|
-
},
|
|
12519
|
-
heading3: {
|
|
12520
|
-
weight: 'bold',
|
|
12521
|
-
},
|
|
12522
|
-
hero1: {
|
|
12523
|
-
weight: 'heavy',
|
|
12524
|
-
},
|
|
12525
|
-
hero2: {
|
|
12526
|
-
weight: 'heavy',
|
|
12527
|
-
},
|
|
12528
|
-
hero3: {
|
|
12529
|
-
weight: 'heavy',
|
|
12530
|
-
},
|
|
12531
|
-
display1: {
|
|
12532
|
-
weight: 'bold',
|
|
12533
|
-
},
|
|
12534
|
-
display2: {
|
|
12535
|
-
weight: 'bold',
|
|
12536
|
-
},
|
|
12537
|
-
body: {
|
|
12538
|
-
size: 'regular',
|
|
12539
|
-
weight: 'regular',
|
|
12540
|
-
},
|
|
12541
|
-
button: {
|
|
12542
|
-
size: 'regular',
|
|
12543
|
-
weight: 'bold',
|
|
12544
|
-
},
|
|
12545
|
-
};
|
|
12546
|
-
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;
|
|
12547
|
-
|
|
12548
12537
|
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) {
|
|
12549
12538
|
return mediaQueries(props)({
|
|
12550
12539
|
borderTop: ["0.063rem solid ".concat(props.theme.colors.shades['100'].color), 'none'],
|
|
@@ -12564,7 +12553,7 @@ var Description = newStyled.div({
|
|
|
12564
12553
|
var ProductItem = function (_a) {
|
|
12565
12554
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12566
12555
|
var theme = useTheme();
|
|
12567
|
-
return (jsxs$1(Container$6, __assign({ theme: theme }, { children: [jsx$1(Image$1, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text, __assign({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12556
|
+
return (jsxs$1(Container$6, __assign({ theme: theme }, { children: [jsx$1(Image$1, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description, { children: [jsx$1(Text$3, __assign({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12568
12557
|
};
|
|
12569
12558
|
var templateObject_1$7;
|
|
12570
12559
|
|
|
@@ -12575,7 +12564,7 @@ var Container$5 = newStyled.div({
|
|
|
12575
12564
|
});
|
|
12576
12565
|
var Footer = function (_a) {
|
|
12577
12566
|
var text = _a.text, onClick = _a.onClick;
|
|
12578
|
-
return (jsx$1(Container$5, { children: jsx$1(Text, __assign({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12567
|
+
return (jsx$1(Container$5, { children: jsx$1(Text$3, __assign({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12579
12568
|
};
|
|
12580
12569
|
|
|
12581
12570
|
var Ul = newStyled.ul({
|
|
@@ -12609,7 +12598,7 @@ var Header = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTem
|
|
|
12609
12598
|
var ResultsPanel = function (_a) {
|
|
12610
12599
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, dataTestId = _a.dataTestId;
|
|
12611
12600
|
var theme = useTheme();
|
|
12612
|
-
return (jsxs$1(Container$4, __assign({ "data-testid": dataTestId, theme: theme }, { children: [header && (jsx$1(Header, __assign({ theme: theme }, { children: jsx$1(Text, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign({ theme: theme }, { children: jsx$1(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12601
|
+
return (jsxs$1(Container$4, __assign({ "data-testid": dataTestId, theme: theme }, { children: [header && (jsx$1(Header, __assign({ theme: theme }, { children: jsx$1(Text$3, __assign({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign({ theme: theme }, { children: jsx$1(Button$2, __assign({ onClick: function () { return onClick(item); } }, { children: jsx$1(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsx$1(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
12613
12602
|
};
|
|
12614
12603
|
var templateObject_1$6, templateObject_2$2, templateObject_3$2;
|
|
12615
12604
|
|
|
@@ -12829,5 +12818,5 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12829
12818
|
};
|
|
12830
12819
|
var templateObject_1;
|
|
12831
12820
|
|
|
12832
|
-
export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image$1 as Image, Input$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
12821
|
+
export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image$1 as Image, Input$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text$3 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
12833
12822
|
//# sourceMappingURL=index.esm.js.map
|