@trafilea/afrodita-components 4.0.1-beta.2 → 4.0.2-beta.3
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/dts/components/text/Text.d.ts +2 -1
- package/build/index.d.ts +7 -3
- package/build/index.esm.js +325 -323
- package/build/index.esm.js.map +1 -1
- package/build/index.js +325 -323
- package/build/index.js.map +1 -1
- package/build/theme/shapermint.theme.js +12 -0
- package/build/theme/truekind.theme.js +12 -0
- package/package.json +2 -2
package/build/index.esm.js
CHANGED
|
@@ -3287,6 +3287,7 @@ var CardBody = function (_a) {
|
|
|
3287
3287
|
};
|
|
3288
3288
|
var templateObject_1$_;
|
|
3289
3289
|
|
|
3290
|
+
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3290
3291
|
var applyVariablesIntoTheme = function (theme) {
|
|
3291
3292
|
var variables = {};
|
|
3292
3293
|
var pending = {};
|
|
@@ -3299,6 +3300,11 @@ var applyVariablesIntoTheme = function (theme) {
|
|
|
3299
3300
|
}
|
|
3300
3301
|
variables[key] = variables[valueKey];
|
|
3301
3302
|
}
|
|
3303
|
+
for (var _i = 0, IGNORED_KEYS_1 = IGNORED_KEYS; _i < IGNORED_KEYS_1.length; _i++) {
|
|
3304
|
+
var key = IGNORED_KEYS_1[_i];
|
|
3305
|
+
// @ts-ignore
|
|
3306
|
+
variables[key] = theme[key];
|
|
3307
|
+
}
|
|
3302
3308
|
return variablesToObject(variables, {});
|
|
3303
3309
|
};
|
|
3304
3310
|
var variablesToObject = function (variables, theme) {
|
|
@@ -3326,6 +3332,9 @@ var transformToVariables = function (prefix, variables, theme, pending) {
|
|
|
3326
3332
|
/* istanbul ignore next */
|
|
3327
3333
|
var fullKey = key === '$root' ? prefix : "".concat(prefix, "-").concat(key);
|
|
3328
3334
|
var value = theme[key];
|
|
3335
|
+
if (IGNORED_KEYS.includes(key)) {
|
|
3336
|
+
continue;
|
|
3337
|
+
}
|
|
3329
3338
|
if (value == null) {
|
|
3330
3339
|
continue;
|
|
3331
3340
|
}
|
|
@@ -6147,7 +6156,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
6147
6156
|
CustomCheckboxStyles[props.size](props.theme),
|
|
6148
6157
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
6149
6158
|
]; });
|
|
6150
|
-
var Input$3 = newStyled.input(templateObject_2$
|
|
6159
|
+
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
6160
|
var disabled = _a.disabled;
|
|
6152
6161
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
6153
6162
|
});
|
|
@@ -6173,7 +6182,7 @@ var Checkbox = function (_a) {
|
|
|
6173
6182
|
}, []);
|
|
6174
6183
|
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
6184
|
};
|
|
6176
|
-
var templateObject_1$X, templateObject_2$
|
|
6185
|
+
var templateObject_1$X, templateObject_2$C;
|
|
6177
6186
|
|
|
6178
6187
|
var CustomOption = newStyled.li(function (_a) {
|
|
6179
6188
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -6291,19 +6300,130 @@ var SelectorSecondary = function (_a) {
|
|
|
6291
6300
|
} }) }, void 0));
|
|
6292
6301
|
};
|
|
6293
6302
|
|
|
6294
|
-
|
|
6295
|
-
|
|
6303
|
+
// This defines which HTML tag to render for each `variant`, it also defines
|
|
6304
|
+
// `variants` styles that are consistent through all themes.
|
|
6305
|
+
var TAGS = {
|
|
6306
|
+
hero1: newStyled.h1(templateObject_1$W || (templateObject_1$W = __makeTemplateObject([""], [""]))),
|
|
6307
|
+
hero2: newStyled.h2(templateObject_2$B || (templateObject_2$B = __makeTemplateObject([""], [""]))),
|
|
6308
|
+
hero3: newStyled.h3(templateObject_3$n || (templateObject_3$n = __makeTemplateObject([""], [""]))),
|
|
6309
|
+
display1: newStyled.h1(templateObject_4$e || (templateObject_4$e = __makeTemplateObject([""], [""]))),
|
|
6310
|
+
display2: newStyled.h2(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject([""], [""]))),
|
|
6311
|
+
heading1: newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject([""], [""]))),
|
|
6312
|
+
heading2: newStyled.h2(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject([""], [""]))),
|
|
6313
|
+
heading3: newStyled.h3(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject([""], [""]))),
|
|
6314
|
+
heading4: newStyled.h4(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))),
|
|
6315
|
+
heading5: newStyled.h5(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""]))),
|
|
6316
|
+
heading6: newStyled.h6(templateObject_11 || (templateObject_11 = __makeTemplateObject([""], [""]))),
|
|
6317
|
+
body: newStyled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))),
|
|
6318
|
+
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'); }),
|
|
6319
|
+
button: newStyled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
6320
|
+
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'); }),
|
|
6321
|
+
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
6322
|
+
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' : ''); }),
|
|
6323
|
+
};
|
|
6324
|
+
var Text$3 = function (_a) {
|
|
6325
|
+
var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
|
|
6326
|
+
var theme = useTheme();
|
|
6327
|
+
var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
6328
|
+
var _b = useMemo(function () {
|
|
6329
|
+
var _a;
|
|
6330
|
+
return (__assign(__assign({}, ((_a = DEFAULTS === null || DEFAULTS === void 0 ? void 0 : DEFAULTS[variant]) !== null && _a !== void 0 ? _a : {})), allProps));
|
|
6331
|
+
}, [variant, allProps]), size = _b.size, weight = _b.weight, props = __rest(_b, ["size", "weight"]);
|
|
6332
|
+
var commonCSS = useMemo(function () {
|
|
6333
|
+
var _a, _b;
|
|
6334
|
+
// These are the common style inside a `variant`.
|
|
6335
|
+
// E.g.: Common styles for all "button".
|
|
6336
|
+
var variantstyle = (_a = theme.typography.variants[variant]) !== null && _a !== void 0 ? _a : {
|
|
6337
|
+
fontSize: 14,
|
|
6338
|
+
lineHeight: 1,
|
|
6339
|
+
};
|
|
6340
|
+
// This allow us to define different styles for different `sizes` inside a `variant`
|
|
6341
|
+
// E.g.: "button-small", "button-regular"
|
|
6342
|
+
//
|
|
6343
|
+
// We use .filter(Boolean) to ignore the `size` on the `variants` that don't have it.
|
|
6344
|
+
// E.g.: "hero1", "display1"
|
|
6345
|
+
var variantName = [variant, size].filter(Boolean).join('-');
|
|
6346
|
+
// These are styles specific to `variation-size`.
|
|
6347
|
+
var variantSizeStyle = (_b = theme.typography.variants[variantName]) !== null && _b !== void 0 ? _b : {};
|
|
6348
|
+
var style = __assign(__assign({ margin: 0, color: theme.colors.text.color }, variantstyle), variantSizeStyle);
|
|
6349
|
+
if (weight) {
|
|
6350
|
+
style.fontWeight = theme.typography.config.weight[weight];
|
|
6351
|
+
}
|
|
6352
|
+
if (props.disabled) {
|
|
6353
|
+
style.opacity = 0.5;
|
|
6354
|
+
style.cursor = 'not-allowed';
|
|
6355
|
+
style.color = theme.colors.text.disabled;
|
|
6356
|
+
}
|
|
6357
|
+
return style;
|
|
6358
|
+
}, [theme, variant, weight, size, props.disabled]);
|
|
6359
|
+
// This is to make TS happy, because `href` doesn't exists on other `variants`
|
|
6360
|
+
var propsHref = props.href;
|
|
6361
|
+
var href = useMemo(function () {
|
|
6362
|
+
// We could use `pointer-events: none` but it prevents us from using
|
|
6363
|
+
// `cursor: not-allowed`, so we're changing the `href` for `disabled` links.
|
|
6364
|
+
if (propsHref != null && props.disabled) {
|
|
6365
|
+
return 'javascript:void(0)';
|
|
6366
|
+
}
|
|
6367
|
+
return propsHref;
|
|
6368
|
+
}, [props.disabled, propsHref]);
|
|
6369
|
+
return (jsx(Tag, __assign({}, props, { css: commonCSS, href: href }, { children: children }), void 0));
|
|
6370
|
+
};
|
|
6371
|
+
var DEFAULTS = {
|
|
6372
|
+
heading1: {
|
|
6373
|
+
weight: 'bold',
|
|
6374
|
+
},
|
|
6375
|
+
heading2: {
|
|
6376
|
+
weight: 'bold',
|
|
6377
|
+
},
|
|
6378
|
+
heading3: {
|
|
6379
|
+
weight: 'bold',
|
|
6380
|
+
},
|
|
6381
|
+
hero1: {
|
|
6382
|
+
weight: 'heavy',
|
|
6383
|
+
},
|
|
6384
|
+
hero2: {
|
|
6385
|
+
weight: 'heavy',
|
|
6386
|
+
},
|
|
6387
|
+
hero3: {
|
|
6388
|
+
weight: 'heavy',
|
|
6389
|
+
},
|
|
6390
|
+
display1: {
|
|
6391
|
+
weight: 'bold',
|
|
6392
|
+
},
|
|
6393
|
+
display2: {
|
|
6394
|
+
weight: 'bold',
|
|
6395
|
+
},
|
|
6396
|
+
body: {
|
|
6397
|
+
size: 'regular',
|
|
6398
|
+
weight: 'regular',
|
|
6399
|
+
},
|
|
6400
|
+
button: {
|
|
6401
|
+
size: 'regular',
|
|
6402
|
+
weight: 'bold',
|
|
6403
|
+
},
|
|
6404
|
+
tag: {
|
|
6405
|
+
size: 'regular',
|
|
6406
|
+
weight: 'regular',
|
|
6407
|
+
},
|
|
6408
|
+
};
|
|
6409
|
+
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;
|
|
6410
|
+
|
|
6411
|
+
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
6412
|
var SizeSelector = function (_a) {
|
|
6297
|
-
var sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange;
|
|
6298
|
-
return (jsxs("div",
|
|
6413
|
+
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
6414
|
+
return (jsxs("div", __assign({ css: {
|
|
6415
|
+
display: 'flex',
|
|
6416
|
+
flexDirection: inline ? 'row' : 'column',
|
|
6417
|
+
alignItems: inline ? 'center' : 'start',
|
|
6418
|
+
} }, { 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
6419
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
6300
6420
|
return (jsx(SelectorSecondary, { css: {
|
|
6301
6421
|
padding: '0.75rem 1rem 0.625rem',
|
|
6302
|
-
margin: '0
|
|
6422
|
+
margin: '0.5rem',
|
|
6303
6423
|
}, size: ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); } }, size.label));
|
|
6304
|
-
}) }, void 0)] }, void 0));
|
|
6424
|
+
}) }, void 0)] }), void 0));
|
|
6305
6425
|
};
|
|
6306
|
-
var templateObject_1$
|
|
6426
|
+
var templateObject_1$V;
|
|
6307
6427
|
|
|
6308
6428
|
var getStylesBySize$7 = function (size) {
|
|
6309
6429
|
switch (size) {
|
|
@@ -6332,7 +6452,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
6332
6452
|
} });
|
|
6333
6453
|
};
|
|
6334
6454
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
6335
|
-
return Icon && (jsx("span", __assign({ css: css(templateObject_1$
|
|
6455
|
+
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
6456
|
};
|
|
6337
6457
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
6338
6458
|
if (disabled)
|
|
@@ -6348,16 +6468,16 @@ var TextButton = function (_a) {
|
|
|
6348
6468
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
6349
6469
|
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
6470
|
};
|
|
6351
|
-
var templateObject_1$
|
|
6471
|
+
var templateObject_1$U;
|
|
6352
6472
|
|
|
6353
|
-
var Container$A = newStyled.div(templateObject_1$
|
|
6354
|
-
var P$2 = newStyled.p(templateObject_2$
|
|
6355
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
6473
|
+
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"])));
|
|
6474
|
+
var P$2 = newStyled.p(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
6475
|
+
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
6476
|
var SizeFitGuide = function (_a) {
|
|
6357
6477
|
var title = _a.title, fitPercentageLabel = _a.fitPercentageLabel, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
6358
6478
|
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
6479
|
};
|
|
6360
|
-
var templateObject_1$
|
|
6480
|
+
var templateObject_1$T, templateObject_2$A, templateObject_3$m;
|
|
6361
6481
|
|
|
6362
6482
|
var getStylesBySize$6 = function (size) {
|
|
6363
6483
|
switch (size) {
|
|
@@ -6387,7 +6507,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
6387
6507
|
};
|
|
6388
6508
|
}
|
|
6389
6509
|
};
|
|
6390
|
-
var Container$z = newStyled.div(templateObject_1$
|
|
6510
|
+
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
6511
|
var backgroundColor = _a.backgroundColor;
|
|
6392
6512
|
return backgroundColor;
|
|
6393
6513
|
}, function (_a) {
|
|
@@ -6409,7 +6529,7 @@ var Container$z = newStyled.div(templateObject_1$T || (templateObject_1$T = __ma
|
|
|
6409
6529
|
var size = _a.size;
|
|
6410
6530
|
return (_b = getStylesBySize$6(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
6411
6531
|
});
|
|
6412
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
6532
|
+
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
6533
|
var textColor = _a.textColor;
|
|
6414
6534
|
return textColor;
|
|
6415
6535
|
}, function (_a) {
|
|
@@ -6426,7 +6546,7 @@ var DiscountTag = function (_a) {
|
|
|
6426
6546
|
var theme = useTheme();
|
|
6427
6547
|
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
6548
|
};
|
|
6429
|
-
var templateObject_1$
|
|
6549
|
+
var templateObject_1$S, templateObject_2$z;
|
|
6430
6550
|
|
|
6431
6551
|
var getStylesBySize$5 = function (size) {
|
|
6432
6552
|
switch (size) {
|
|
@@ -6450,8 +6570,8 @@ var getStylesBySize$5 = function (size) {
|
|
|
6450
6570
|
};
|
|
6451
6571
|
}
|
|
6452
6572
|
};
|
|
6453
|
-
var Container$y = newStyled.div(templateObject_1$
|
|
6454
|
-
var Price = newStyled.h1(templateObject_2$
|
|
6573
|
+
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"])));
|
|
6574
|
+
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
6575
|
var weight = _a.weight;
|
|
6456
6576
|
return (weight ? weight : '400');
|
|
6457
6577
|
}, function (_a) {
|
|
@@ -6473,7 +6593,7 @@ var Price = newStyled.h1(templateObject_2$z || (templateObject_2$z = __makeTempl
|
|
|
6473
6593
|
var margin = _a.margin, size = _a.size;
|
|
6474
6594
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
6475
6595
|
});
|
|
6476
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
6596
|
+
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
6597
|
var _b;
|
|
6478
6598
|
var size = _a.size;
|
|
6479
6599
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -6483,7 +6603,7 @@ var PriceLabel = function (_a) {
|
|
|
6483
6603
|
var theme = useTheme();
|
|
6484
6604
|
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
6605
|
};
|
|
6486
|
-
var templateObject_1$
|
|
6606
|
+
var templateObject_1$R, templateObject_2$y, templateObject_3$l;
|
|
6487
6607
|
|
|
6488
6608
|
var OneColorSelector = function (_a) {
|
|
6489
6609
|
var color = _a.color, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
@@ -6522,69 +6642,55 @@ var OutOfStock = function (_a) {
|
|
|
6522
6642
|
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
6643
|
};
|
|
6524
6644
|
|
|
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$
|
|
6645
|
+
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"])));
|
|
6646
|
+
newStyled(RadioGroup.Label)(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
6647
|
+
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"])));
|
|
6648
|
+
var Span = newStyled.span(templateObject_4$d || (templateObject_4$d = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
6649
|
+
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
6650
|
var Label$1 = function (_a) {
|
|
6531
6651
|
var label = _a.label, values = _a.values;
|
|
6532
|
-
return (jsxs$1(
|
|
6652
|
+
return (jsxs$1(Text$3, __assign({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
6533
6653
|
};
|
|
6534
6654
|
var Option = function (_a) {
|
|
6535
6655
|
var value = _a.value, children = _a.children;
|
|
6536
6656
|
return (jsx$1(CustomRadioGroupOption, __assign({ value: value }, { children: children }), void 0));
|
|
6537
6657
|
};
|
|
6538
6658
|
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));
|
|
6659
|
+
var value = _a.value, onChange = _a.onChange, children = _a.children, className = _a.className;
|
|
6660
|
+
return (jsx$1(CustomRadioGroup, __assign({ value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
6541
6661
|
};
|
|
6542
6662
|
var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
6543
6663
|
Label: Label$1,
|
|
6544
6664
|
Option: Option,
|
|
6545
6665
|
OptionsContainer: OptionsContainer,
|
|
6546
6666
|
});
|
|
6547
|
-
var templateObject_1$
|
|
6667
|
+
var templateObject_1$Q, templateObject_2$x, templateObject_3$k, templateObject_4$d, templateObject_5$6;
|
|
6548
6668
|
|
|
6549
|
-
var Container$x = newStyled.div(templateObject_1$
|
|
6669
|
+
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
6670
|
var borderColor = _a.borderColor;
|
|
6551
6671
|
return borderColor;
|
|
6552
6672
|
});
|
|
6553
|
-
var Image$4 = newStyled.img(templateObject_2$
|
|
6673
|
+
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
6674
|
var PatternSelector = function (_a) {
|
|
6555
6675
|
var url = _a.url, selected = _a.selected, dataTestId = _a.dataTestId;
|
|
6556
6676
|
var theme = useTheme();
|
|
6557
6677
|
var outerBorder = selected ? theme.colors.shades['550'].color : 'transparent';
|
|
6558
6678
|
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
6679
|
};
|
|
6560
|
-
var templateObject_1$
|
|
6680
|
+
var templateObject_1$P, templateObject_2$w;
|
|
6561
6681
|
|
|
6562
6682
|
var renderOptions$1 = function (options) {
|
|
6563
6683
|
if (options.length)
|
|
6564
|
-
return options.map(function (option) { return (jsx
|
|
6684
|
+
return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign({ value: option }, { children: function (_a) {
|
|
6565
6685
|
var checked = _a.checked;
|
|
6566
|
-
return option.color ? (jsx
|
|
6686
|
+
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
6687
|
} }), option.label)); });
|
|
6568
6688
|
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
|
-
;
|
|
6689
|
+
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
6578
6690
|
};
|
|
6579
6691
|
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));
|
|
6692
|
+
var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
6693
|
+
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
6694
|
};
|
|
6589
6695
|
|
|
6590
6696
|
var renderOptions = function (selectedColor, options) {
|
|
@@ -6623,7 +6729,7 @@ var MultiColorPicker = function (_a) {
|
|
|
6623
6729
|
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
6730
|
};
|
|
6625
6731
|
|
|
6626
|
-
var Image$3 = newStyled.img(templateObject_1$
|
|
6732
|
+
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
6733
|
var selected = _a.selected, theme = _a.theme;
|
|
6628
6734
|
return selected ? "0.063rem solid ".concat(theme.colors.shades['700'].color) : 'inherit';
|
|
6629
6735
|
});
|
|
@@ -6632,29 +6738,29 @@ var ImageSmallPreview = function (_a) {
|
|
|
6632
6738
|
var theme = useTheme();
|
|
6633
6739
|
return jsx$1(Image$3, { className: className, src: imageUrl, alt: alt, selected: selected, theme: theme }, void 0);
|
|
6634
6740
|
};
|
|
6635
|
-
var templateObject_1$
|
|
6741
|
+
var templateObject_1$O;
|
|
6636
6742
|
|
|
6637
|
-
var Container$w = newStyled.div(templateObject_1$
|
|
6638
|
-
var Button$4 = newStyled.button(templateObject_2$
|
|
6743
|
+
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"])));
|
|
6744
|
+
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
6745
|
var ImagePreviewList = function (_a) {
|
|
6640
6746
|
var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
|
|
6641
6747
|
return (jsx(Container$w, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
|
|
6642
6748
|
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
6749
|
}) }), void 0));
|
|
6644
6750
|
};
|
|
6645
|
-
var templateObject_1$
|
|
6751
|
+
var templateObject_1$N, templateObject_2$v;
|
|
6646
6752
|
|
|
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$
|
|
6753
|
+
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"])));
|
|
6754
|
+
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"])));
|
|
6755
|
+
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"])));
|
|
6756
|
+
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
6757
|
var ImageProductWithTags$1 = function (_a) {
|
|
6652
6758
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, dataTestId = _a.dataTestId;
|
|
6653
6759
|
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
6760
|
};
|
|
6655
|
-
var templateObject_1$
|
|
6761
|
+
var templateObject_1$M, templateObject_2$u, templateObject_3$j, templateObject_4$c;
|
|
6656
6762
|
|
|
6657
|
-
var Container$u = newStyled.div(templateObject_1$
|
|
6763
|
+
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
6764
|
var ProductGallery = function (_a) {
|
|
6659
6765
|
var images = _a.images, selectedValue = _a.selectedValue, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId;
|
|
6660
6766
|
var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
|
|
@@ -6666,7 +6772,7 @@ var ProductGallery = function (_a) {
|
|
|
6666
6772
|
setSelectedImage(value);
|
|
6667
6773
|
} }, void 0), jsx$1(ImageProductWithTags$1, { image: selectedImage, DiscountTagElement: DiscountTagElement, BestSellerTagElement: BestSellerTagElement, dataTestId: productImageDataTestId }, void 0)] }, void 0));
|
|
6668
6774
|
};
|
|
6669
|
-
var templateObject_1$
|
|
6775
|
+
var templateObject_1$L;
|
|
6670
6776
|
|
|
6671
6777
|
/* base styles & size variants */
|
|
6672
6778
|
var StarStyles = {
|
|
@@ -6704,8 +6810,8 @@ var StarStyles = {
|
|
|
6704
6810
|
});
|
|
6705
6811
|
},
|
|
6706
6812
|
};
|
|
6707
|
-
var Container$t = newStyled.div(templateObject_1$
|
|
6708
|
-
var templateObject_1$
|
|
6813
|
+
var Container$t = newStyled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6814
|
+
var templateObject_1$K;
|
|
6709
6815
|
|
|
6710
6816
|
var StarContainer = newStyled.div(function (_a) {
|
|
6711
6817
|
var size = _a.size;
|
|
@@ -6760,8 +6866,8 @@ var LabelStyles = {
|
|
|
6760
6866
|
});
|
|
6761
6867
|
},
|
|
6762
6868
|
};
|
|
6763
|
-
var Container$s = newStyled.div(templateObject_1$
|
|
6764
|
-
var templateObject_1$
|
|
6869
|
+
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"])));
|
|
6870
|
+
var templateObject_1$J;
|
|
6765
6871
|
|
|
6766
6872
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6767
6873
|
var theme = _a.theme, size = _a.size;
|
|
@@ -6777,8 +6883,8 @@ var Rating = function (_a) {
|
|
|
6777
6883
|
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
6884
|
};
|
|
6779
6885
|
|
|
6780
|
-
var Container$r = newStyled.div(templateObject_1$
|
|
6781
|
-
var P$1 = newStyled.p(templateObject_2$
|
|
6886
|
+
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"])));
|
|
6887
|
+
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
6888
|
var textButtonStyles = function (theme) { return ({
|
|
6783
6889
|
border: 'none',
|
|
6784
6890
|
background: 'transparent',
|
|
@@ -6793,7 +6899,7 @@ var FitPredictor = function (_a) {
|
|
|
6793
6899
|
var theme = useTheme();
|
|
6794
6900
|
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
6901
|
};
|
|
6796
|
-
var templateObject_1$
|
|
6902
|
+
var templateObject_1$I, templateObject_2$t;
|
|
6797
6903
|
|
|
6798
6904
|
var H2$1 = newStyled.h2(function (_a) {
|
|
6799
6905
|
var color = _a.color;
|
|
@@ -6807,7 +6913,7 @@ var H2$1 = newStyled.h2(function (_a) {
|
|
|
6807
6913
|
margin: '0.938rem 4.188rem',
|
|
6808
6914
|
});
|
|
6809
6915
|
});
|
|
6810
|
-
var Bar = newStyled.div(templateObject_1$
|
|
6916
|
+
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
6917
|
var backgroundColor = _a.backgroundColor;
|
|
6812
6918
|
return backgroundColor;
|
|
6813
6919
|
}, function (_a) {
|
|
@@ -6846,7 +6952,7 @@ var ProgressBar = function (_a) {
|
|
|
6846
6952
|
var theme = useTheme();
|
|
6847
6953
|
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
6954
|
};
|
|
6849
|
-
var templateObject_1$
|
|
6955
|
+
var templateObject_1$H;
|
|
6850
6956
|
|
|
6851
6957
|
var getStylesBySize$4 = function (size) {
|
|
6852
6958
|
switch (size) {
|
|
@@ -6867,7 +6973,7 @@ var getStylesBySize$4 = function (size) {
|
|
|
6867
6973
|
};
|
|
6868
6974
|
}
|
|
6869
6975
|
};
|
|
6870
|
-
var Container$p = newStyled.div(templateObject_1$
|
|
6976
|
+
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
6977
|
var backgroundColor = _a.backgroundColor;
|
|
6872
6978
|
return backgroundColor;
|
|
6873
6979
|
}, function (_a) {
|
|
@@ -6897,7 +7003,7 @@ var IconButton = function (_a) {
|
|
|
6897
7003
|
var theme = useTheme();
|
|
6898
7004
|
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
7005
|
};
|
|
6900
|
-
var templateObject_1$
|
|
7006
|
+
var templateObject_1$G;
|
|
6901
7007
|
|
|
6902
7008
|
var TooltipArrow = function (_a) {
|
|
6903
7009
|
var height = _a.height, width = _a.width, fill = _a.fill, stroke = _a.stroke;
|
|
@@ -6977,7 +7083,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
6977
7083
|
}
|
|
6978
7084
|
};
|
|
6979
7085
|
|
|
6980
|
-
var Wrapper$5 = newStyled.div(templateObject_1$
|
|
7086
|
+
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
7087
|
var position = _a.position;
|
|
6982
7088
|
return getWrapperFlexDirection(position);
|
|
6983
7089
|
});
|
|
@@ -7001,11 +7107,11 @@ var TooltipContainer = newStyled.div(function (_a) {
|
|
|
7001
7107
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
7002
7108
|
return actual === expected ? margin : '0';
|
|
7003
7109
|
};
|
|
7004
|
-
var ContentWrapper = newStyled.div(templateObject_2$
|
|
7110
|
+
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
7111
|
var borderColor = _a.borderColor;
|
|
7006
7112
|
return borderColor;
|
|
7007
7113
|
});
|
|
7008
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
7114
|
+
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
7115
|
var position = _a.position;
|
|
7010
7116
|
return getArrowRotation(position);
|
|
7011
7117
|
}, function (_a) {
|
|
@@ -7015,17 +7121,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$j || (templateObject_
|
|
|
7015
7121
|
var position = _a.position;
|
|
7016
7122
|
return getArrowContainerMargin(position);
|
|
7017
7123
|
});
|
|
7018
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
7124
|
+
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
7125
|
var color = _a.color;
|
|
7020
7126
|
return color;
|
|
7021
7127
|
});
|
|
7022
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
7023
|
-
var Title$3 = newStyled.h1(templateObject_6$
|
|
7128
|
+
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"])));
|
|
7129
|
+
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
7130
|
var color = _a.color;
|
|
7025
7131
|
return color;
|
|
7026
7132
|
});
|
|
7027
|
-
var IconContainer$4 = newStyled.div(templateObject_7$
|
|
7028
|
-
var templateObject_1$
|
|
7133
|
+
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"])));
|
|
7134
|
+
var templateObject_1$F, templateObject_2$s, templateObject_3$i, templateObject_4$b, templateObject_5$5, templateObject_6$4, templateObject_7$2;
|
|
7029
7135
|
|
|
7030
7136
|
var Tooltip = function (_a) {
|
|
7031
7137
|
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 +7282,9 @@ var ContainerStyles = {
|
|
|
7176
7282
|
},
|
|
7177
7283
|
};
|
|
7178
7284
|
|
|
7179
|
-
var Wrapper$4 = newStyled.div(templateObject_1$
|
|
7285
|
+
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
7286
|
var Container$o = newStyled.div(__assign({}, ContainerStyles.baseStyles), function (props) { return [ContainerStyles[props.size](props.theme)]; });
|
|
7181
|
-
var Input$2 = newStyled.input(templateObject_2$
|
|
7287
|
+
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
7288
|
var disabled = _a.disabled;
|
|
7183
7289
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
7184
7290
|
});
|
|
@@ -7195,7 +7301,7 @@ var RadioInput = function (_a) {
|
|
|
7195
7301
|
};
|
|
7196
7302
|
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
7303
|
};
|
|
7198
|
-
var templateObject_1$
|
|
7304
|
+
var templateObject_1$E, templateObject_2$r;
|
|
7199
7305
|
|
|
7200
7306
|
var RadioGroupInput = function (_a) {
|
|
7201
7307
|
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 +7315,9 @@ var RadioGroupInput = function (_a) {
|
|
|
7209
7315
|
}) }), void 0));
|
|
7210
7316
|
};
|
|
7211
7317
|
|
|
7212
|
-
var Wrapper$3 = newStyled.div(templateObject_1$
|
|
7213
|
-
var Container$n = newStyled.div(templateObject_2$
|
|
7214
|
-
var Text$
|
|
7318
|
+
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"])));
|
|
7319
|
+
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"])));
|
|
7320
|
+
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
7321
|
var color = _a.color;
|
|
7216
7322
|
return color;
|
|
7217
7323
|
}, function (_a) {
|
|
@@ -7224,32 +7330,32 @@ var Text$3 = newStyled.h4(templateObject_3$i || (templateObject_3$i = __makeTemp
|
|
|
7224
7330
|
var Minimalistic = function (_a) {
|
|
7225
7331
|
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
7332
|
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$
|
|
7333
|
+
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
7334
|
};
|
|
7229
|
-
var templateObject_1$
|
|
7335
|
+
var templateObject_1$D, templateObject_2$q, templateObject_3$h;
|
|
7230
7336
|
|
|
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$
|
|
7337
|
+
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"])));
|
|
7338
|
+
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; });
|
|
7339
|
+
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; });
|
|
7340
|
+
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
7341
|
var Simple = function (_a) {
|
|
7236
7342
|
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
7343
|
var theme = useTheme();
|
|
7238
7344
|
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
7345
|
};
|
|
7240
|
-
var templateObject_1$
|
|
7346
|
+
var templateObject_1$C, templateObject_2$p, templateObject_3$g, templateObject_4$a;
|
|
7241
7347
|
|
|
7242
7348
|
var Bundle = {
|
|
7243
7349
|
Minimalistic: Minimalistic,
|
|
7244
7350
|
Simple: Simple,
|
|
7245
7351
|
};
|
|
7246
7352
|
|
|
7247
|
-
var Container$l = newStyled.div(templateObject_1$
|
|
7353
|
+
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
7354
|
var Tag = function (_a) {
|
|
7249
7355
|
var text = _a.text, className = _a.className;
|
|
7250
7356
|
return jsx$1(Container$l, __assign({ className: className }, { children: text }), void 0);
|
|
7251
7357
|
};
|
|
7252
|
-
var templateObject_1$
|
|
7358
|
+
var templateObject_1$B;
|
|
7253
7359
|
|
|
7254
7360
|
var getStylesBySize$3 = function (size) {
|
|
7255
7361
|
switch (size) {
|
|
@@ -7350,11 +7456,11 @@ var Timer = function (_a) {
|
|
|
7350
7456
|
return (jsxs$1("div", __assign({ "data-testid": "Time" }, { children: [hours, "h ", minutes, "m ", seconds, "s"] }), void 0));
|
|
7351
7457
|
};
|
|
7352
7458
|
|
|
7353
|
-
var Label = newStyled.span(templateObject_1$
|
|
7459
|
+
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
7460
|
var color = _a.color;
|
|
7355
7461
|
return color;
|
|
7356
7462
|
});
|
|
7357
|
-
var MandatoryIcon = newStyled.span(templateObject_2$
|
|
7463
|
+
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
7464
|
var color = _a.color;
|
|
7359
7465
|
return color;
|
|
7360
7466
|
});
|
|
@@ -7363,7 +7469,7 @@ var InputLabel = function (_a) {
|
|
|
7363
7469
|
var theme = useTheme();
|
|
7364
7470
|
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
7471
|
};
|
|
7366
|
-
var templateObject_1$
|
|
7472
|
+
var templateObject_1$A, templateObject_2$o;
|
|
7367
7473
|
|
|
7368
7474
|
var isEmpty = function (value) {
|
|
7369
7475
|
return value.length === 0;
|
|
@@ -7373,20 +7479,20 @@ var sliceString = function (str, maxLength) {
|
|
|
7373
7479
|
return str.length > maxLength ? "".concat(str.slice(0, maxLength), "...") : str;
|
|
7374
7480
|
};
|
|
7375
7481
|
|
|
7376
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
7377
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
7482
|
+
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; });
|
|
7483
|
+
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
7484
|
var Error$1 = function (_a) {
|
|
7379
7485
|
var error = _a.error;
|
|
7380
7486
|
var theme = useTheme();
|
|
7381
7487
|
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
7488
|
};
|
|
7383
|
-
var templateObject_1$
|
|
7489
|
+
var templateObject_1$z, templateObject_2$n;
|
|
7384
7490
|
|
|
7385
|
-
var Container$k = newStyled.div(templateObject_1$
|
|
7491
|
+
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
7492
|
var color = _a.color;
|
|
7387
7493
|
return color;
|
|
7388
7494
|
});
|
|
7389
|
-
var StyledInput = newStyled.input(templateObject_2$
|
|
7495
|
+
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
7496
|
var padding = _a.padding;
|
|
7391
7497
|
return padding;
|
|
7392
7498
|
}, function (_a) {
|
|
@@ -7429,8 +7535,8 @@ var StyledInput = newStyled.input(templateObject_2$n || (templateObject_2$n = __
|
|
|
7429
7535
|
var disabledColor = _a.disabledColor;
|
|
7430
7536
|
return disabledColor;
|
|
7431
7537
|
});
|
|
7432
|
-
var InputWrapper = newStyled.div(templateObject_3$
|
|
7433
|
-
var templateObject_1$
|
|
7538
|
+
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"])));
|
|
7539
|
+
var templateObject_1$y, templateObject_2$m, templateObject_3$f;
|
|
7434
7540
|
|
|
7435
7541
|
var BaseInput = function (_a) {
|
|
7436
7542
|
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 +7584,11 @@ var BaseInput = function (_a) {
|
|
|
7478
7584
|
: '' }, { 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
7585
|
};
|
|
7480
7586
|
|
|
7481
|
-
var Container$j = newStyled.div(templateObject_1$
|
|
7587
|
+
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
7588
|
var theme = _a.theme;
|
|
7483
7589
|
return theme.component.inputCustom.input.borderRadius;
|
|
7484
7590
|
});
|
|
7485
|
-
var ButtonContainer$1 = newStyled.div(templateObject_2$
|
|
7591
|
+
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
7592
|
var theme = _a.theme;
|
|
7487
7593
|
return theme.component.inputCustom.button.borderRadius;
|
|
7488
7594
|
});
|
|
@@ -7496,18 +7602,18 @@ var Custom = function (_a) {
|
|
|
7496
7602
|
};
|
|
7497
7603
|
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
7604
|
};
|
|
7499
|
-
var templateObject_1$
|
|
7605
|
+
var templateObject_1$x, templateObject_2$l;
|
|
7500
7606
|
|
|
7501
|
-
var SuccessContainer = newStyled.div(templateObject_1$
|
|
7502
|
-
var SuccessMessage = newStyled.div(templateObject_2$
|
|
7503
|
-
var SuccessText = newStyled.span(templateObject_3$
|
|
7607
|
+
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"])));
|
|
7608
|
+
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"])));
|
|
7609
|
+
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
7610
|
var Success = function (_a) {
|
|
7505
7611
|
var children = _a.children, successText = _a.successText;
|
|
7506
7612
|
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
7613
|
};
|
|
7508
|
-
var templateObject_1$
|
|
7614
|
+
var templateObject_1$w, templateObject_2$k, templateObject_3$e;
|
|
7509
7615
|
|
|
7510
|
-
var ButtonContainer = newStyled.div(templateObject_1$
|
|
7616
|
+
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
7617
|
var status = _a.status, type = _a.type, theme = _a.theme;
|
|
7512
7618
|
return status === InputValidationType.Empty &&
|
|
7513
7619
|
type === 'primary' &&
|
|
@@ -7521,10 +7627,10 @@ var BasePlusButton = function (_a) {
|
|
|
7521
7627
|
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
7628
|
return success ? SuccessComponent : Input;
|
|
7523
7629
|
};
|
|
7524
|
-
var templateObject_1$
|
|
7630
|
+
var templateObject_1$v;
|
|
7525
7631
|
|
|
7526
|
-
var Container$i = newStyled.div(templateObject_1$
|
|
7527
|
-
var IconContainer$3 = newStyled.div(templateObject_2$
|
|
7632
|
+
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"])));
|
|
7633
|
+
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
7634
|
var BasePlusIcon = function (_a) {
|
|
7529
7635
|
var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
|
|
7530
7636
|
var theme = useTheme();
|
|
@@ -7535,7 +7641,7 @@ var BasePlusIcon = function (_a) {
|
|
|
7535
7641
|
? theme.colors.semantic.urgent.color
|
|
7536
7642
|
: '' }, { children: createElement(Icon, { fill: theme.colors.shades['250'].color }) }), void 0) }), void 0) }, void 0));
|
|
7537
7643
|
};
|
|
7538
|
-
var templateObject_1$
|
|
7644
|
+
var templateObject_1$u, templateObject_2$j;
|
|
7539
7645
|
|
|
7540
7646
|
var Input$1 = {
|
|
7541
7647
|
Simple: BaseInput,
|
|
@@ -7544,7 +7650,7 @@ var Input$1 = {
|
|
|
7544
7650
|
SimplePlusIcon: BasePlusIcon,
|
|
7545
7651
|
};
|
|
7546
7652
|
|
|
7547
|
-
var Container$h = newStyled.div(templateObject_1$
|
|
7653
|
+
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
7654
|
var width = _a.width;
|
|
7549
7655
|
return width;
|
|
7550
7656
|
}, function (_a) {
|
|
@@ -7562,9 +7668,9 @@ var PaymentMethod = function (_a) {
|
|
|
7562
7668
|
var theme = useTheme();
|
|
7563
7669
|
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
7670
|
};
|
|
7565
|
-
var templateObject_1$
|
|
7671
|
+
var templateObject_1$t;
|
|
7566
7672
|
|
|
7567
|
-
var Text$
|
|
7673
|
+
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
7674
|
var backgroundColor = _a.backgroundColor;
|
|
7569
7675
|
return backgroundColor;
|
|
7570
7676
|
}, function (_a) {
|
|
@@ -7574,29 +7680,29 @@ var Text$2 = newStyled.h3(templateObject_1$t || (templateObject_1$t = __makeTemp
|
|
|
7574
7680
|
var OfferBanner = function (_a) {
|
|
7575
7681
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
7576
7682
|
var theme = useTheme();
|
|
7577
|
-
return (jsx$1(Text$
|
|
7683
|
+
return (jsx$1(Text$1, __assign({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
7578
7684
|
};
|
|
7579
|
-
var templateObject_1$
|
|
7685
|
+
var templateObject_1$s;
|
|
7580
7686
|
|
|
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$
|
|
7687
|
+
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"])));
|
|
7688
|
+
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; });
|
|
7689
|
+
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"])));
|
|
7690
|
+
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; });
|
|
7691
|
+
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
7692
|
var Total = function (_a) {
|
|
7587
7693
|
var total = _a.total, currency = _a.currency, saving = _a.saving, _b = _a.highlightColor, highlightColor = _b === void 0 ? '#2f806a' : _b;
|
|
7588
7694
|
var theme = useTheme();
|
|
7589
7695
|
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
7696
|
};
|
|
7591
|
-
var templateObject_1$
|
|
7697
|
+
var templateObject_1$r, templateObject_2$i, templateObject_3$d, templateObject_4$9, templateObject_5$4;
|
|
7592
7698
|
|
|
7593
|
-
var Wrapper$1 = newStyled.div(templateObject_1$
|
|
7699
|
+
var Wrapper$1 = newStyled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7594
7700
|
var color = _a.color;
|
|
7595
7701
|
return color;
|
|
7596
7702
|
});
|
|
7597
|
-
var ItemContainer = newStyled.div(templateObject_2$
|
|
7598
|
-
var Item$1 = newStyled.h4(templateObject_3$
|
|
7599
|
-
var CouponItem = newStyled(Item$1)(templateObject_4$
|
|
7703
|
+
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"])));
|
|
7704
|
+
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"])));
|
|
7705
|
+
var CouponItem = newStyled(Item$1)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), function (_a) {
|
|
7600
7706
|
var color = _a.color;
|
|
7601
7707
|
return color;
|
|
7602
7708
|
});
|
|
@@ -7608,22 +7714,22 @@ var Subtotal = function (_a) {
|
|
|
7608
7714
|
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
7715
|
})] }), void 0));
|
|
7610
7716
|
};
|
|
7611
|
-
var templateObject_1$
|
|
7717
|
+
var templateObject_1$q, templateObject_2$h, templateObject_3$c, templateObject_4$8;
|
|
7612
7718
|
|
|
7613
7719
|
var Totals = {
|
|
7614
7720
|
Total: Total,
|
|
7615
7721
|
Subtotal: Subtotal,
|
|
7616
7722
|
};
|
|
7617
7723
|
|
|
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$
|
|
7724
|
+
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; });
|
|
7725
|
+
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"])));
|
|
7726
|
+
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; });
|
|
7727
|
+
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
7728
|
var Note = function (_a) {
|
|
7623
7729
|
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
|
|
7730
|
+
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
7731
|
};
|
|
7626
|
-
var templateObject_1$
|
|
7732
|
+
var templateObject_1$p, templateObject_2$g, templateObject_3$b, templateObject_4$7;
|
|
7627
7733
|
|
|
7628
7734
|
/* eslint-disable no-param-reassign */
|
|
7629
7735
|
var index$2 = function (breakpoints) {
|
|
@@ -7713,14 +7819,14 @@ var mediaQueries = function (_a) {
|
|
|
7713
7819
|
], { literal: true });
|
|
7714
7820
|
};
|
|
7715
7821
|
|
|
7716
|
-
var Title$1 = newStyled.h1(templateObject_1$
|
|
7717
|
-
var Line = newStyled.div(templateObject_2$
|
|
7718
|
-
var Row$1 = newStyled.div(templateObject_3$
|
|
7822
|
+
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; });
|
|
7823
|
+
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; });
|
|
7824
|
+
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
7825
|
return mediaQueries(props)({
|
|
7720
7826
|
flexDirection: ['column', 'row'],
|
|
7721
7827
|
});
|
|
7722
7828
|
});
|
|
7723
|
-
var Col$1 = newStyled.div(templateObject_4$
|
|
7829
|
+
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
7830
|
return mediaQueries(props)({
|
|
7725
7831
|
margin: ['0', '0 1.25rem'],
|
|
7726
7832
|
marginBottom: ['1.875rem', '0'],
|
|
@@ -7729,13 +7835,13 @@ var Col$1 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemp
|
|
|
7729
7835
|
width: ['100%', 'inherit'],
|
|
7730
7836
|
});
|
|
7731
7837
|
});
|
|
7732
|
-
var IconContainer$1 = newStyled.div(templateObject_5$
|
|
7838
|
+
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
7839
|
return mediaQueries(props)({
|
|
7734
7840
|
marginBottom: ['1.875rem', '0'],
|
|
7735
7841
|
width: ['auto', '1.375rem'],
|
|
7736
7842
|
});
|
|
7737
7843
|
});
|
|
7738
|
-
var SectionTitle = newStyled.h1(templateObject_6$
|
|
7844
|
+
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
7845
|
return mediaQueries(props)({
|
|
7740
7846
|
display: ['block', 'flex'],
|
|
7741
7847
|
});
|
|
@@ -7743,53 +7849,53 @@ var SectionTitle = newStyled.h1(templateObject_6$4 || (templateObject_6$4 = __ma
|
|
|
7743
7849
|
var theme = _a.theme;
|
|
7744
7850
|
return theme.colors.shades['700'].color;
|
|
7745
7851
|
});
|
|
7746
|
-
var SectionDetails = newStyled.p(templateObject_7$
|
|
7747
|
-
var KeepMeUpdated = newStyled.h1(templateObject_8
|
|
7852
|
+
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; });
|
|
7853
|
+
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
7854
|
var DeliveryDetails = function (_a) {
|
|
7749
7855
|
var deliveryDetailsText = _a.deliveryDetailsText, arrivingBy = _a.arrivingBy, shippingTo = _a.shippingTo, instantOrderUpdate = _a.instantOrderUpdate, note = _a.note;
|
|
7750
7856
|
var theme = useTheme();
|
|
7751
7857
|
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
7858
|
};
|
|
7753
|
-
var templateObject_1$
|
|
7859
|
+
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
7860
|
|
|
7755
|
-
var Container$e = newStyled.div(templateObject_1$
|
|
7756
|
-
var H1$2 = newStyled.h1(templateObject_2$
|
|
7861
|
+
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"])));
|
|
7862
|
+
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
7863
|
var ScrollToTop = function (_a) {
|
|
7758
7864
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
7759
7865
|
var theme = useTheme();
|
|
7760
7866
|
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
7867
|
};
|
|
7762
|
-
var templateObject_1$
|
|
7868
|
+
var templateObject_1$n, templateObject_2$e;
|
|
7763
7869
|
|
|
7764
|
-
var Container$d = newStyled.div(templateObject_1$
|
|
7765
|
-
var H1$1 = newStyled.h1(templateObject_2$
|
|
7870
|
+
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"])));
|
|
7871
|
+
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
7872
|
var OrderBar = function (_a) {
|
|
7767
7873
|
var message = _a.message;
|
|
7768
7874
|
var theme = useTheme();
|
|
7769
7875
|
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
7876
|
};
|
|
7771
|
-
var templateObject_1$
|
|
7877
|
+
var templateObject_1$m, templateObject_2$d;
|
|
7772
7878
|
|
|
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$
|
|
7879
|
+
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; });
|
|
7880
|
+
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; });
|
|
7881
|
+
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; });
|
|
7882
|
+
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
7883
|
var SizeTable = function (_a) {
|
|
7778
7884
|
var headers = _a.headers, data = _a.data;
|
|
7779
7885
|
var theme = useTheme();
|
|
7780
7886
|
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
7887
|
};
|
|
7782
|
-
var templateObject_1$
|
|
7888
|
+
var templateObject_1$l, templateObject_2$c, templateObject_3$9, templateObject_4$5;
|
|
7783
7889
|
|
|
7784
|
-
var Img = newStyled.img(templateObject_1$
|
|
7890
|
+
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
7891
|
var Image$1 = function (_a) {
|
|
7786
7892
|
var src = _a.src, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition;
|
|
7787
7893
|
return (jsx$1(Img, { src: src, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition }, void 0));
|
|
7788
7894
|
};
|
|
7789
|
-
var templateObject_1$
|
|
7895
|
+
var templateObject_1$k;
|
|
7790
7896
|
|
|
7791
|
-
var Container$c = newStyled.div(templateObject_1$
|
|
7792
|
-
var DescriptionContainer = newStyled.div(templateObject_2$
|
|
7897
|
+
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"])));
|
|
7898
|
+
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
7899
|
var theme = _a.theme;
|
|
7794
7900
|
return mediaQueries({ theme: theme })({
|
|
7795
7901
|
marginLeft: ['0.938rem', '1.875rem'],
|
|
@@ -7815,7 +7921,7 @@ var Subtitle = newStyled.h3(function (_a) {
|
|
|
7815
7921
|
margin: '0.063rem 0',
|
|
7816
7922
|
});
|
|
7817
7923
|
});
|
|
7818
|
-
var PriceContainer = newStyled.div(templateObject_3$
|
|
7924
|
+
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
7925
|
var withTag = _a.withTag, theme = _a.theme;
|
|
7820
7926
|
return withTag
|
|
7821
7927
|
? mediaQueries({ theme: theme })({
|
|
@@ -7829,7 +7935,7 @@ var SimpleOrderItem = function (_a) {
|
|
|
7829
7935
|
var theme = useTheme();
|
|
7830
7936
|
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
7937
|
};
|
|
7832
|
-
var templateObject_1$
|
|
7938
|
+
var templateObject_1$j, templateObject_2$b, templateObject_3$8;
|
|
7833
7939
|
|
|
7834
7940
|
function formatDate(date) {
|
|
7835
7941
|
var day = date.getDate();
|
|
@@ -7838,47 +7944,47 @@ function formatDate(date) {
|
|
|
7838
7944
|
return month < 10 ? "".concat(day, "/0").concat(month, "/").concat(year) : "".concat(day, "/").concat(month, "/").concat(year);
|
|
7839
7945
|
}
|
|
7840
7946
|
|
|
7841
|
-
var Container$b = newStyled.div(templateObject_1$
|
|
7842
|
-
var Heading = newStyled.div(templateObject_2$
|
|
7947
|
+
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"])));
|
|
7948
|
+
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
7949
|
var theme = _a.theme;
|
|
7844
7950
|
return mediaQueries({ theme: theme })({
|
|
7845
7951
|
fontSize: ['14px', '16px'],
|
|
7846
7952
|
lineHeight: ['22px', '24px'],
|
|
7847
7953
|
});
|
|
7848
7954
|
});
|
|
7849
|
-
var Content = newStyled.div(templateObject_3$
|
|
7955
|
+
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
7956
|
var theme = _a.theme;
|
|
7851
7957
|
return mediaQueries({ theme: theme })({
|
|
7852
7958
|
flexDirection: ['column', 'row'],
|
|
7853
7959
|
});
|
|
7854
7960
|
});
|
|
7855
|
-
var ReviewContainer = newStyled.div(templateObject_4$
|
|
7961
|
+
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
7962
|
var theme = _a.theme;
|
|
7857
7963
|
return mediaQueries({ theme: theme })({
|
|
7858
7964
|
margin: ['0 0 8px 0', '0 50px 0 0'],
|
|
7859
7965
|
});
|
|
7860
7966
|
});
|
|
7861
|
-
var H2 = newStyled.h2(templateObject_5$
|
|
7967
|
+
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
7968
|
var theme = _a.theme;
|
|
7863
7969
|
return mediaQueries({ theme: theme })({
|
|
7864
7970
|
fontSize: ['16px', '18px'],
|
|
7865
7971
|
lineHeight: ['24px', '28px'],
|
|
7866
7972
|
});
|
|
7867
7973
|
});
|
|
7868
|
-
var H3$1 = newStyled.h3(templateObject_6$
|
|
7974
|
+
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
7975
|
var theme = _a.theme;
|
|
7870
7976
|
return mediaQueries({ theme: theme })({
|
|
7871
7977
|
fontSize: ['14px', '16px'],
|
|
7872
7978
|
lineHeight: ['22px', '24px'],
|
|
7873
7979
|
});
|
|
7874
7980
|
});
|
|
7875
|
-
var P = newStyled.p(templateObject_7
|
|
7981
|
+
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
7982
|
var Review = function (_a) {
|
|
7877
7983
|
var reviewerName = _a.reviewerName, date = _a.date, rating = _a.rating, stars = _a.stars, title = _a.title, description = _a.description, image = _a.image;
|
|
7878
7984
|
var theme = useTheme();
|
|
7879
7985
|
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
7986
|
};
|
|
7881
|
-
var templateObject_1$
|
|
7987
|
+
var templateObject_1$i, templateObject_2$a, templateObject_3$7, templateObject_4$4, templateObject_5$2, templateObject_6$2, templateObject_7;
|
|
7882
7988
|
|
|
7883
7989
|
var Button$3 = newStyled.button(function () { return ({
|
|
7884
7990
|
background: 'transparent',
|
|
@@ -12121,14 +12227,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
|
|
|
12121
12227
|
return Slider;
|
|
12122
12228
|
}(React.Component);
|
|
12123
12229
|
|
|
12124
|
-
var StyledSlider = newStyled(Slider)(templateObject_1$
|
|
12230
|
+
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
12231
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12126
12232
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12127
12233
|
}, function (_a) {
|
|
12128
12234
|
var arrowPaddingOffset = _a.arrowPaddingOffset, _b = _a.arrowPadding, arrowPadding = _b === void 0 ? 0 : _b;
|
|
12129
12235
|
return "-".concat(arrowPaddingOffset + arrowPadding, "rem");
|
|
12130
12236
|
});
|
|
12131
|
-
var templateObject_1$
|
|
12237
|
+
var templateObject_1$h;
|
|
12132
12238
|
|
|
12133
12239
|
var getStylesBySize$1 = function (size) {
|
|
12134
12240
|
// rem units
|
|
@@ -12187,13 +12293,13 @@ var SliderNavigation = function (_a) {
|
|
|
12187
12293
|
} }, { 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
12294
|
};
|
|
12189
12295
|
|
|
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$
|
|
12296
|
+
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"])));
|
|
12297
|
+
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"])));
|
|
12298
|
+
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"])));
|
|
12299
|
+
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"])));
|
|
12300
|
+
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; });
|
|
12301
|
+
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; });
|
|
12302
|
+
var templateObject_1$g, templateObject_2$9, templateObject_3$6, templateObject_4$3, templateObject_5$1, templateObject_6$1;
|
|
12197
12303
|
|
|
12198
12304
|
var DropdownListIcons = function (_a) {
|
|
12199
12305
|
var items = _a.items;
|
|
@@ -12206,7 +12312,7 @@ var Dropdown = function (_a) {
|
|
|
12206
12312
|
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
12313
|
};
|
|
12208
12314
|
|
|
12209
|
-
var StyledButton = newStyled(BaseButton)(templateObject_1$
|
|
12315
|
+
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
12316
|
var AmazonButton = function (_a) {
|
|
12211
12317
|
var onClick = _a.onClick;
|
|
12212
12318
|
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 +12321,23 @@ var PaypalButton = function (_a) {
|
|
|
12215
12321
|
var onClick = _a.onClick;
|
|
12216
12322
|
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
12323
|
};
|
|
12218
|
-
var templateObject_1$
|
|
12324
|
+
var templateObject_1$f;
|
|
12219
12325
|
|
|
12220
|
-
var Wrapper = newStyled.div(templateObject_1$
|
|
12221
|
-
var Col = newStyled.div(templateObject_2$
|
|
12222
|
-
var Row = newStyled.div(templateObject_3$
|
|
12326
|
+
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'); });
|
|
12327
|
+
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"])));
|
|
12328
|
+
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
12329
|
return props.rightToLeft &&
|
|
12224
12330
|
"\n flex-direction: row-reverse;\n justify-content: space-between;\n ";
|
|
12225
12331
|
});
|
|
12226
|
-
var H5 = newStyled.h5(templateObject_4$
|
|
12227
|
-
var H3 = newStyled.h3(templateObject_5
|
|
12228
|
-
var FreeShipping = newStyled.span(templateObject_6
|
|
12332
|
+
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; });
|
|
12333
|
+
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; });
|
|
12334
|
+
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
12335
|
var CrossSellCheckbox = function (_a) {
|
|
12230
12336
|
var imageURL = _a.imageURL, title = _a.title, description = _a.description, freeShippingText = _a.freeShippingText, rightToLeft = _a.rightToLeft, onChange = _a.onChange;
|
|
12231
12337
|
var theme = useTheme();
|
|
12232
12338
|
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
12339
|
};
|
|
12234
|
-
var templateObject_1$
|
|
12340
|
+
var templateObject_1$e, templateObject_2$8, templateObject_3$5, templateObject_4$2, templateObject_5, templateObject_6;
|
|
12235
12341
|
|
|
12236
12342
|
var index = /*#__PURE__*/Object.freeze({
|
|
12237
12343
|
__proto__: null,
|
|
@@ -12246,8 +12352,8 @@ var ImageContainer = newStyled.div(function (_a) {
|
|
|
12246
12352
|
height: height,
|
|
12247
12353
|
});
|
|
12248
12354
|
});
|
|
12249
|
-
var Container$a = newStyled.div(templateObject_1$
|
|
12250
|
-
var H1 = newStyled.h1(templateObject_2$
|
|
12355
|
+
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"])));
|
|
12356
|
+
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
12357
|
var getStylesBySize = function (size) {
|
|
12252
12358
|
switch (size) {
|
|
12253
12359
|
case ComponentSize.Medium:
|
|
@@ -12274,9 +12380,9 @@ var ProductItemMobile = function (_a) {
|
|
|
12274
12380
|
var styles = getStylesBySize(size);
|
|
12275
12381
|
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
12382
|
};
|
|
12277
|
-
var templateObject_1$
|
|
12383
|
+
var templateObject_1$d, templateObject_2$7;
|
|
12278
12384
|
|
|
12279
|
-
var Container$9 = newStyled.div(templateObject_1$
|
|
12385
|
+
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
12386
|
function withProductGrid(ProductItemComponent, data) {
|
|
12281
12387
|
function WithProductGrid(props) {
|
|
12282
12388
|
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 +12392,18 @@ function withProductGrid(ProductItemComponent, data) {
|
|
|
12286
12392
|
WithProductGrid.displayName = "withGrid(".concat(wrappedComponentName, ")");
|
|
12287
12393
|
return WithProductGrid;
|
|
12288
12394
|
}
|
|
12289
|
-
var templateObject_1$
|
|
12395
|
+
var templateObject_1$c;
|
|
12290
12396
|
|
|
12291
12397
|
var Collection = {
|
|
12292
12398
|
ProductItemMobile: ProductItemMobile,
|
|
12293
12399
|
withProductGrid: withProductGrid,
|
|
12294
12400
|
};
|
|
12295
12401
|
|
|
12296
|
-
var Backdrop = newStyled.div(templateObject_1$
|
|
12402
|
+
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
12403
|
var isOpen = _a.isOpen, backgroundColor = _a.backgroundColor;
|
|
12298
12404
|
return isOpen ? "background-color: ".concat(backgroundColor, ";") : 'transparent';
|
|
12299
12405
|
});
|
|
12300
|
-
var Sidebar = newStyled.div(templateObject_2$
|
|
12406
|
+
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
12407
|
var width = _a.width;
|
|
12302
12408
|
return width;
|
|
12303
12409
|
}, function (_a) {
|
|
@@ -12338,16 +12444,16 @@ var Drawer = function (_a) {
|
|
|
12338
12444
|
}, [isOpen, onClose, onOpen]);
|
|
12339
12445
|
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
12446
|
};
|
|
12341
|
-
var templateObject_1$
|
|
12447
|
+
var templateObject_1$b, templateObject_2$6;
|
|
12342
12448
|
|
|
12343
|
-
var Container$8 = newStyled.div(templateObject_1$
|
|
12449
|
+
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
12450
|
var size = _a.size;
|
|
12345
12451
|
return (size ? size : '100%');
|
|
12346
12452
|
}, function (_a) {
|
|
12347
12453
|
var size = _a.size;
|
|
12348
12454
|
return (size ? size : '100%');
|
|
12349
12455
|
});
|
|
12350
|
-
var Animation = newStyled.div(templateObject_2$
|
|
12456
|
+
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
12457
|
var animationDuration = _a.animationDuration;
|
|
12352
12458
|
return animationDuration;
|
|
12353
12459
|
});
|
|
@@ -12355,11 +12461,11 @@ var Spinner = function (_a) {
|
|
|
12355
12461
|
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
12462
|
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
12463
|
};
|
|
12358
|
-
var templateObject_1$
|
|
12464
|
+
var templateObject_1$a, templateObject_2$5;
|
|
12359
12465
|
|
|
12360
|
-
var UL = newStyled.ul(templateObject_1$
|
|
12361
|
-
var LI = newStyled.li(templateObject_2$
|
|
12362
|
-
var CloseIconContainer = newStyled.div(templateObject_3$
|
|
12466
|
+
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"])));
|
|
12467
|
+
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; });
|
|
12468
|
+
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
12469
|
var Tags = function (_a) {
|
|
12364
12470
|
var _b = _a.color, color = _b === void 0 ? '#fff6ef' : _b, items = _a.items, onCloseClick = _a.onCloseClick;
|
|
12365
12471
|
var theme = useTheme();
|
|
@@ -12367,7 +12473,7 @@ var Tags = function (_a) {
|
|
|
12367
12473
|
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
12474
|
}) }), void 0));
|
|
12369
12475
|
};
|
|
12370
|
-
var templateObject_1$
|
|
12476
|
+
var templateObject_1$9, templateObject_2$4, templateObject_3$4;
|
|
12371
12477
|
|
|
12372
12478
|
function FilteringDropdown(_a) {
|
|
12373
12479
|
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 +12506,15 @@ function FilteringDropdown(_a) {
|
|
|
12400
12506
|
}) }, void 0)] }), void 0));
|
|
12401
12507
|
}
|
|
12402
12508
|
|
|
12403
|
-
var Container$7 = newStyled.div(templateObject_1$
|
|
12404
|
-
var IconContainer = newStyled.div(templateObject_2$
|
|
12405
|
-
var PageNumbersContainer = newStyled.div(templateObject_3$
|
|
12509
|
+
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"])));
|
|
12510
|
+
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"])));
|
|
12511
|
+
var PageNumbersContainer = newStyled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n display: flex;\n ", ";\n"], ["\n display: flex;\n ", ";\n"])), function (_a) {
|
|
12406
12512
|
var theme = _a.theme;
|
|
12407
12513
|
return mediaQueries({ theme: theme })({
|
|
12408
12514
|
margin: ['0 0.75rem', '0 1.25rem'],
|
|
12409
12515
|
});
|
|
12410
12516
|
});
|
|
12411
|
-
var PageNumber = newStyled.span(templateObject_4$
|
|
12517
|
+
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
12518
|
var bold = _a.bold;
|
|
12413
12519
|
return (bold ? '700' : '500');
|
|
12414
12520
|
}, function (_a) {
|
|
@@ -12425,7 +12531,7 @@ var PageNumber = newStyled.span(templateObject_4$2 || (templateObject_4$2 = __ma
|
|
|
12425
12531
|
width: ['1.25rem', '1.875rem'],
|
|
12426
12532
|
});
|
|
12427
12533
|
});
|
|
12428
|
-
var templateObject_1$
|
|
12534
|
+
var templateObject_1$8, templateObject_2$3, templateObject_3$3, templateObject_4$1;
|
|
12429
12535
|
|
|
12430
12536
|
var Pagination = function (_a) {
|
|
12431
12537
|
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 +12547,6 @@ var Pagination = function (_a) {
|
|
|
12441
12547
|
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
12548
|
};
|
|
12443
12549
|
|
|
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
12550
|
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
12551
|
return mediaQueries(props)({
|
|
12550
12552
|
borderTop: ["0.063rem solid ".concat(props.theme.colors.shades['100'].color), 'none'],
|
|
@@ -12564,7 +12566,7 @@ var Description = newStyled.div({
|
|
|
12564
12566
|
var ProductItem = function (_a) {
|
|
12565
12567
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12566
12568
|
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));
|
|
12569
|
+
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
12570
|
};
|
|
12569
12571
|
var templateObject_1$7;
|
|
12570
12572
|
|
|
@@ -12575,7 +12577,7 @@ var Container$5 = newStyled.div({
|
|
|
12575
12577
|
});
|
|
12576
12578
|
var Footer = function (_a) {
|
|
12577
12579
|
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));
|
|
12580
|
+
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
12581
|
};
|
|
12580
12582
|
|
|
12581
12583
|
var Ul = newStyled.ul({
|
|
@@ -12609,7 +12611,7 @@ var Header = newStyled.div(templateObject_3$2 || (templateObject_3$2 = __makeTem
|
|
|
12609
12611
|
var ResultsPanel = function (_a) {
|
|
12610
12612
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, dataTestId = _a.dataTestId;
|
|
12611
12613
|
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));
|
|
12614
|
+
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
12615
|
};
|
|
12614
12616
|
var templateObject_1$6, templateObject_2$2, templateObject_3$2;
|
|
12615
12617
|
|
|
@@ -12829,5 +12831,5 @@ var ProductGalleryMobile = function (_a) {
|
|
|
12829
12831
|
};
|
|
12830
12832
|
var templateObject_1;
|
|
12831
12833
|
|
|
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 };
|
|
12834
|
+
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
12835
|
//# sourceMappingURL=index.esm.js.map
|