@trafilea/afrodita-components 5.0.0-beta.3 → 5.0.0-beta.6
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/index.d.ts +4 -4
- package/build/index.esm.js +38 -45
- package/build/index.esm.js.map +1 -1
- package/build/index.js +38 -45
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4034,13 +4034,13 @@ var getStylesBySize$8 = function (size, theme) {
|
|
|
4034
4034
|
}
|
|
4035
4035
|
};
|
|
4036
4036
|
var SimpleSelector = function (_a) {
|
|
4037
|
-
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, onClick = _a.onClick;
|
|
4037
|
+
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? exports.ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick;
|
|
4038
4038
|
var theme = useTheme();
|
|
4039
4039
|
var stylesBySize = getStylesBySize$8(size, theme);
|
|
4040
4040
|
var activeStyles = active
|
|
4041
4041
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
4042
4042
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
4043
|
-
return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
4043
|
+
return (jsx(BaseButton, __assign$1({ onClick: onClick, disabled: disabled, className: className, type: "button", testId: testId, css: __assign$1(__assign$1(__assign$1({}, stylesBySize), activeStyles), { width: width, boxSizing: 'border-box', fontSize: theme.component.selector.fontSize, '&:hover': {
|
|
4044
4044
|
fontWeight: theme.component.selector.hover.fontWeight,
|
|
4045
4045
|
}, '&:disabled': {
|
|
4046
4046
|
color: theme.colors.shades['250'].color,
|
|
@@ -4049,7 +4049,7 @@ var SimpleSelector = function (_a) {
|
|
|
4049
4049
|
};
|
|
4050
4050
|
|
|
4051
4051
|
var SelectorSecondary = function (_a) {
|
|
4052
|
-
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
|
|
4052
|
+
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, width = _a.width, onClick = _a.onClick;
|
|
4053
4053
|
var theme = useTheme();
|
|
4054
4054
|
var stylesByActive = active
|
|
4055
4055
|
? {
|
|
@@ -4064,7 +4064,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4064
4064
|
border: theme.component.selector.default.border,
|
|
4065
4065
|
fontWeight: theme.component.selector.default.fontWeight,
|
|
4066
4066
|
};
|
|
4067
|
-
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
4067
|
+
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, width: width, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
4068
4068
|
background: theme.component.selector.hover.background,
|
|
4069
4069
|
color: theme.component.selector.hover.color,
|
|
4070
4070
|
}, '&:disabled': {
|
|
@@ -4079,7 +4079,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4079
4079
|
var TAGS = {
|
|
4080
4080
|
hero1: newStyled.h1(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject([""], [""]))),
|
|
4081
4081
|
hero2: newStyled.h2(templateObject_2$E || (templateObject_2$E = __makeTemplateObject([""], [""]))),
|
|
4082
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4082
|
+
hero3: newStyled.h3(templateObject_3$p || (templateObject_3$p = __makeTemplateObject([""], [""]))),
|
|
4083
4083
|
display1: newStyled.h1(templateObject_4$g || (templateObject_4$g = __makeTemplateObject([""], [""]))),
|
|
4084
4084
|
display2: newStyled.h2(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject([""], [""]))),
|
|
4085
4085
|
heading1: newStyled.h1(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject([""], [""]))),
|
|
@@ -4095,7 +4095,7 @@ var TAGS = {
|
|
|
4095
4095
|
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
4096
4096
|
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' : ''); }),
|
|
4097
4097
|
};
|
|
4098
|
-
var Text$
|
|
4098
|
+
var Text$5 = function (_a) {
|
|
4099
4099
|
var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
|
|
4100
4100
|
var theme = useTheme();
|
|
4101
4101
|
var Tag = React$2.useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
@@ -4200,24 +4200,24 @@ var DEFAULTS = {
|
|
|
4200
4200
|
size: 'regular',
|
|
4201
4201
|
},
|
|
4202
4202
|
};
|
|
4203
|
-
var templateObject_1$11, templateObject_2$E, templateObject_3$
|
|
4203
|
+
var templateObject_1$11, templateObject_2$E, templateObject_3$p, templateObject_4$g, templateObject_5$9, templateObject_6$6, templateObject_7$4, templateObject_8$1, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4204
4204
|
|
|
4205
4205
|
var ButtonsContainer = newStyled.div(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: ", ";\n"])), function (_a) {
|
|
4206
4206
|
var inline = _a.inline;
|
|
4207
4207
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4208
4208
|
});
|
|
4209
4209
|
var SizeSelector = function (_a) {
|
|
4210
|
-
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
4210
|
+
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, width = _a.width;
|
|
4211
4211
|
return (jsxs("div", __assign$1({ css: {
|
|
4212
4212
|
display: 'flex',
|
|
4213
4213
|
flexDirection: inline ? 'row' : 'column',
|
|
4214
4214
|
alignItems: inline ? 'center' : 'start',
|
|
4215
|
-
} }, { children: [jsxs(Text$
|
|
4215
|
+
} }, { children: [jsxs(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$5, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue.description }), void 0))] }), void 0), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes.map(function (size) {
|
|
4216
4216
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
4217
4217
|
return (jsx(SelectorSecondary, { css: {
|
|
4218
4218
|
padding: '0.75rem 1rem 0.625rem',
|
|
4219
4219
|
margin: '0 0.5rem 0.625rem 0',
|
|
4220
|
-
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]) }, size.label));
|
|
4220
|
+
}, size: exports.ComponentSize.Medium, text: size.label, active: active, disabled: size.disabled, onClick: function () { return onChange(size); }, testId: "size-variant-".concat(size.label.split('/')[0]), width: width }, size.label));
|
|
4221
4221
|
}) }), void 0)] }), void 0));
|
|
4222
4222
|
};
|
|
4223
4223
|
var templateObject_1$10;
|
|
@@ -4269,12 +4269,12 @@ var templateObject_1$$;
|
|
|
4269
4269
|
|
|
4270
4270
|
var Container$E = newStyled.div(templateObject_1$_ || (templateObject_1$_ = __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"])));
|
|
4271
4271
|
var P$3 = newStyled.p(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4272
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4272
|
+
var PercentageSpan = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n"])));
|
|
4273
4273
|
var SizeFitGuide = function (_a) {
|
|
4274
|
-
var title = _a.title,
|
|
4275
|
-
return (jsxRuntime.jsxs(Container$E, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxRuntime.jsxs(P$3, { children: [
|
|
4274
|
+
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
4275
|
+
return (jsxRuntime.jsxs(Container$E, { children: [jsxRuntime.jsx(TextButton, { LeadingIcon: Icon.PDP.Rule, size: exports.ComponentSize.Small, text: title, onClick: onClick }, void 0), !!fitPercentage && (jsxRuntime.jsxs(P$3, { children: ["Fit As Expected: ", jsxRuntime.jsxs(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0))] }, void 0));
|
|
4276
4276
|
};
|
|
4277
|
-
var templateObject_1$_, templateObject_2$D, templateObject_3$
|
|
4277
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$o;
|
|
4278
4278
|
|
|
4279
4279
|
var getStylesBySize$6 = function (size) {
|
|
4280
4280
|
switch (size) {
|
|
@@ -4390,7 +4390,7 @@ var Price = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTempl
|
|
|
4390
4390
|
var margin = _a.margin, size = _a.size;
|
|
4391
4391
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
4392
4392
|
});
|
|
4393
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
4393
|
+
var TagContainer = newStyled.h1(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
4394
4394
|
var _b;
|
|
4395
4395
|
var size = _a.size;
|
|
4396
4396
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -4400,7 +4400,7 @@ var PriceLabel = function (_a) {
|
|
|
4400
4400
|
var theme = useTheme();
|
|
4401
4401
|
return (jsxRuntime.jsxs(Container$C, { children: [jsxRuntime.jsx(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsxRuntime.jsx(Price, __assign$1({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
4402
4402
|
};
|
|
4403
|
-
var templateObject_1$Y, templateObject_2$B, templateObject_3$
|
|
4403
|
+
var templateObject_1$Y, templateObject_2$B, templateObject_3$n;
|
|
4404
4404
|
|
|
4405
4405
|
var OneColorSelector = function (_a) {
|
|
4406
4406
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4441,12 +4441,12 @@ var OutOfStock = function (_a) {
|
|
|
4441
4441
|
|
|
4442
4442
|
var CustomRadioGroup = newStyled(lt)(templateObject_1$X || (templateObject_1$X = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4443
4443
|
newStyled(lt.Label)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4444
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
4444
|
+
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"], ["\n margin-right: 8px;\n\n svg {\n cursor: pointer;\n }\n"])));
|
|
4445
4445
|
var Span = newStyled.span(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4446
4446
|
var OptionsContainer = newStyled.div(templateObject_5$8 || (templateObject_5$8 = __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"])));
|
|
4447
4447
|
var Label$2 = function (_a) {
|
|
4448
4448
|
var label = _a.label, values = _a.values;
|
|
4449
|
-
return (jsxRuntime.jsxs(Text$
|
|
4449
|
+
return (jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsxRuntime.jsx(Span, { children: values }, void 0)] }), void 0));
|
|
4450
4450
|
};
|
|
4451
4451
|
var Option = function (_a) {
|
|
4452
4452
|
var value = _a.value, children = _a.children;
|
|
@@ -4461,7 +4461,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4461
4461
|
Option: Option,
|
|
4462
4462
|
OptionsContainer: OptionsContainer,
|
|
4463
4463
|
});
|
|
4464
|
-
var templateObject_1$X, templateObject_2$A, templateObject_3$
|
|
4464
|
+
var templateObject_1$X, templateObject_2$A, templateObject_3$m, templateObject_4$f, templateObject_5$8;
|
|
4465
4465
|
|
|
4466
4466
|
var Container$B = newStyled.div(templateObject_1$W || (templateObject_1$W = __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) {
|
|
4467
4467
|
var borderColor = _a.borderColor;
|
|
@@ -4562,12 +4562,12 @@ var templateObject_1$T;
|
|
|
4562
4562
|
|
|
4563
4563
|
var Container$z = newStyled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n position: relative;\n height: 45rem;\n"], ["\n position: relative;\n height: 45rem;\n"])));
|
|
4564
4564
|
var TopTagContainer$1 = newStyled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n"])));
|
|
4565
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
4565
|
+
var BottomTagContainer$1 = newStyled.div(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"], ["\n position: absolute;\n bottom: 3.75rem;\n left: 0;\n"])));
|
|
4566
4566
|
var ImageProductWithTags$1 = function (_a) {
|
|
4567
4567
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
4568
4568
|
return (jsxRuntime.jsxs(Container$z, __assign$1({ "data-testid": testId }, { children: [jsxRuntime.jsx(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsxRuntime.jsx(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsxRuntime.jsx(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
4569
4569
|
};
|
|
4570
|
-
var templateObject_1$S, templateObject_2$x, templateObject_3$
|
|
4570
|
+
var templateObject_1$S, templateObject_2$x, templateObject_3$l;
|
|
4571
4571
|
|
|
4572
4572
|
var Container$y = newStyled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"], ["\n display: grid;\n grid-template-columns: auto auto;\n grid-column-gap: 20px;\n max-height: 45rem;\n width: fit-content;\n"])));
|
|
4573
4573
|
var ProductGallery = function (_a) {
|
|
@@ -4943,7 +4943,7 @@ var ContentWrapper = newStyled.div(templateObject_2$v || (templateObject_2$v = _
|
|
|
4943
4943
|
var borderColor = _a.borderColor;
|
|
4944
4944
|
return borderColor;
|
|
4945
4945
|
});
|
|
4946
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
4946
|
+
var TooltipArrowContainer = newStyled.div(templateObject_3$k || (templateObject_3$k = __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) {
|
|
4947
4947
|
var position = _a.position;
|
|
4948
4948
|
return getArrowRotation(position);
|
|
4949
4949
|
}, function (_a) {
|
|
@@ -4963,7 +4963,7 @@ var Title$4 = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTem
|
|
|
4963
4963
|
return color;
|
|
4964
4964
|
});
|
|
4965
4965
|
var IconContainer$5 = newStyled.div(templateObject_7$3 || (templateObject_7$3 = __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"])));
|
|
4966
|
-
var templateObject_1$L, templateObject_2$v, templateObject_3$
|
|
4966
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$k, templateObject_4$e, templateObject_5$7, templateObject_6$5, templateObject_7$3;
|
|
4967
4967
|
|
|
4968
4968
|
var Tooltip = function (_a) {
|
|
4969
4969
|
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;
|
|
@@ -5150,22 +5150,12 @@ var RadioGroupInput = function (_a) {
|
|
|
5150
5150
|
|
|
5151
5151
|
var Wrapper$3 = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5152
5152
|
var Container$r = newStyled.div(templateObject_2$t || (templateObject_2$t = __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"])));
|
|
5153
|
-
var Text$5 = newStyled.h4(templateObject_3$k || (templateObject_3$k = __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) {
|
|
5154
|
-
var color = _a.color;
|
|
5155
|
-
return color;
|
|
5156
|
-
}, function (_a) {
|
|
5157
|
-
var weight = _a.weight;
|
|
5158
|
-
return (weight ? weight : '400');
|
|
5159
|
-
}, function (_a) {
|
|
5160
|
-
var margin = _a.margin;
|
|
5161
|
-
return (margin ? margin : '0');
|
|
5162
|
-
});
|
|
5163
5153
|
var Minimalistic = function (_a) {
|
|
5164
|
-
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#
|
|
5154
|
+
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#FFF6EF' : _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;
|
|
5165
5155
|
var theme = useTheme();
|
|
5166
|
-
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$r, __assign$1({ "data-testid": "TopSection" }, { children: [jsxRuntime.jsx(Text$5, __assign$1({
|
|
5156
|
+
return (jsxRuntime.jsx(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsxs(Container$r, __assign$1({ "data-testid": "TopSection" }, { children: [jsxRuntime.jsx(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: exports.ComponentSize.Small }, void 0)] }), void 0), jsxRuntime.jsxs(Container$r, __assign$1({ "data-testid": "BottomSection" }, { children: [jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", weight: "demi", style: { color: '#d3373c', margin: '0.1rem 1.25rem 0.1rem 0' }, size: "small" }, { children: [getQtyForText, " ", discount, "% ", offText.toLocaleUpperCase()] }), void 0), jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5167
5157
|
};
|
|
5168
|
-
var templateObject_1$J, templateObject_2$t
|
|
5158
|
+
var templateObject_1$J, templateObject_2$t;
|
|
5169
5159
|
|
|
5170
5160
|
var Container$q = newStyled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n padding: 0.625rem 1.5rem;\n"], ["\n padding: 0.625rem 1.5rem;\n"])));
|
|
5171
5161
|
var Title$3 = newStyled.h1(templateObject_2$s || (templateObject_2$s = __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; });
|
|
@@ -5283,8 +5273,10 @@ var Timer = function (_a) {
|
|
|
5283
5273
|
return seconds - 1;
|
|
5284
5274
|
});
|
|
5285
5275
|
}, 1000);
|
|
5276
|
+
if (secs <= 0)
|
|
5277
|
+
clearInterval(timer);
|
|
5286
5278
|
return function () { return clearInterval(timer); };
|
|
5287
|
-
}, [onTimeUp]);
|
|
5279
|
+
}, [onTimeUp, secs]);
|
|
5288
5280
|
var _d = secondsToTime(secs), hours = _d.hours, minutes = _d.minutes, seconds = _d.seconds;
|
|
5289
5281
|
return (jsxRuntime.jsxs("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
5290
5282
|
};
|
|
@@ -5344,10 +5336,11 @@ var sliceString = function (str, maxLength) {
|
|
|
5344
5336
|
};
|
|
5345
5337
|
|
|
5346
5338
|
var formatPrice = function (value, _a) {
|
|
5347
|
-
var _b
|
|
5348
|
-
var
|
|
5339
|
+
var _b;
|
|
5340
|
+
var _c = _a === void 0 ? {} : _a, _d = _c.locale, locale = _d === void 0 ? 'en-US' : _d, _e = _c.currency, currency = _e === void 0 ? 'USD' : _e;
|
|
5341
|
+
var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
|
|
5349
5342
|
// this prevents `Intl.NumberFormat` from rounding the number
|
|
5350
|
-
var valueToFormat = parseFloat("".concat(integer, ".").concat(fraction.slice(0, 2)));
|
|
5343
|
+
var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
|
|
5351
5344
|
return new Intl.NumberFormat(locale, {
|
|
5352
5345
|
style: 'currency',
|
|
5353
5346
|
currency: currency,
|
|
@@ -10492,7 +10485,7 @@ var Description$1 = newStyled.div({
|
|
|
10492
10485
|
var ProductItem = function (_a) {
|
|
10493
10486
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
10494
10487
|
var theme = useTheme();
|
|
10495
|
-
return (jsxRuntime.jsxs(Container$a, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$1, { children: [jsxRuntime.jsx(Text$
|
|
10488
|
+
return (jsxRuntime.jsxs(Container$a, __assign$1({ theme: theme }, { children: [jsxRuntime.jsx(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxRuntime.jsxs(Description$1, { children: [jsxRuntime.jsx(Text$5, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: title }), void 0), jsxRuntime.jsx(PriceLabel, { finalPrice: price, color: "#C64844", size: exports.ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
10496
10489
|
};
|
|
10497
10490
|
var templateObject_1$e;
|
|
10498
10491
|
|
|
@@ -10503,7 +10496,7 @@ var Container$9 = newStyled.div({
|
|
|
10503
10496
|
});
|
|
10504
10497
|
var Footer = function (_a) {
|
|
10505
10498
|
var text = _a.text, onClick = _a.onClick;
|
|
10506
|
-
return (jsxRuntime.jsx(Container$9, { children: jsxRuntime.jsx(Text$
|
|
10499
|
+
return (jsxRuntime.jsx(Container$9, { children: jsxRuntime.jsx(Text$5, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
10507
10500
|
};
|
|
10508
10501
|
|
|
10509
10502
|
var Ul = newStyled.ul({
|
|
@@ -10537,7 +10530,7 @@ var Header = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTem
|
|
|
10537
10530
|
var ResultsPanel = function (_a) {
|
|
10538
10531
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
10539
10532
|
var theme = useTheme();
|
|
10540
|
-
return (jsxRuntime.jsxs(Container$8, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$
|
|
10533
|
+
return (jsxRuntime.jsxs(Container$8, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsxRuntime.jsx(Header, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Text$5, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsxRuntime.jsx(Ul, { children: options.map(function (item, index) { return (jsxRuntime.jsx(Li, __assign$1({ theme: theme }, { children: jsxRuntime.jsx(Button$2, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(ProductItem, { src: item.src, title: item.title, price: item.price }, void 0) }), void 0) }), index)); }) }, void 0), footer && jsxRuntime.jsx(Footer, { text: footer, onClick: onViewAll }, void 0)] }), void 0));
|
|
10541
10534
|
};
|
|
10542
10535
|
var templateObject_1$d, templateObject_2$5, templateObject_3$5;
|
|
10543
10536
|
|
|
@@ -15056,7 +15049,7 @@ var PackCard = function (_a) {
|
|
|
15056
15049
|
.then(function (icon) { return setIcon(icon); })
|
|
15057
15050
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
15058
15051
|
}, [pack.meta.icon]);
|
|
15059
|
-
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$
|
|
15052
|
+
return (jsxRuntime.jsxs(Card, __assign$1({ onClick: function () { return onChange(pack); }, role: "radio", "aria-checked": selected, tabIndex: 0, "data-highlight": pack.meta.tag != null, "data-testid": "pack-selector" }, { children: [pack.meta.tag ? (jsxRuntime.jsx(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsxRuntime.jsx(Text$5, __assign$1({ variant: "tag", weight: "bold", size: "small" }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxRuntime.jsxs(Label, { children: [jsxRuntime.jsx(Text$5, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsxRuntime.jsx(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsxRuntime.jsx(Icon.Actions.Check, { width: 0.7, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", size: "small" }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsx(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsxRuntime.jsx(IconPlaceholder, {}, void 0) }, void 0), jsxRuntime.jsx(Spacing, { type: "block", size: 12 }, void 0), jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", size: "small", "data-testid": "pack-selector-prices" }, { children: [jsxRuntime.jsx("del", { children: formatPrice(pack.meta.originalPrice) }, void 0), " - ", formatPrice(pack.meta.price)] }), void 0), jsxRuntime.jsxs(Text$5, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
15060
15053
|
};
|
|
15061
15054
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
15062
15055
|
|
|
@@ -15116,7 +15109,7 @@ exports.SliderNavigation = SliderNavigation;
|
|
|
15116
15109
|
exports.Spacing = Spacing;
|
|
15117
15110
|
exports.Spinner = Spinner;
|
|
15118
15111
|
exports.StarList = StarList;
|
|
15119
|
-
exports.Text = Text$
|
|
15112
|
+
exports.Text = Text$5;
|
|
15120
15113
|
exports.TextButton = TextButton;
|
|
15121
15114
|
exports.ThemeProvider = ThemeProvider;
|
|
15122
15115
|
exports.ThemeVariables = ThemeVariables;
|