@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.d.ts
CHANGED
|
@@ -491,16 +491,16 @@ interface SizeSelectorProps {
|
|
|
491
491
|
selectedValue: SizeOption;
|
|
492
492
|
onChange: (size: SizeOption) => void;
|
|
493
493
|
inline?: boolean;
|
|
494
|
+
width?: string;
|
|
494
495
|
}
|
|
495
|
-
declare const SizeSelector: ({ label, sizes, selectedValue, onChange, inline, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
496
|
+
declare const SizeSelector: ({ label, sizes, selectedValue, onChange, inline, width, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
496
497
|
|
|
497
498
|
interface SizeFitGuideProps {
|
|
498
499
|
title: string;
|
|
499
|
-
|
|
500
|
-
fitPercentage: number;
|
|
500
|
+
fitPercentage?: number;
|
|
501
501
|
onClick: () => void;
|
|
502
502
|
}
|
|
503
|
-
declare const SizeFitGuide: ({ title,
|
|
503
|
+
declare const SizeFitGuide: ({ title, fitPercentage, onClick }: SizeFitGuideProps) => JSX.Element;
|
|
504
504
|
|
|
505
505
|
interface BaseButtonProps {
|
|
506
506
|
children: React.ReactNode;
|
package/build/index.esm.js
CHANGED
|
@@ -4008,13 +4008,13 @@ var getStylesBySize$8 = function (size, theme) {
|
|
|
4008
4008
|
}
|
|
4009
4009
|
};
|
|
4010
4010
|
var SimpleSelector = function (_a) {
|
|
4011
|
-
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, onClick = _a.onClick;
|
|
4011
|
+
var text = _a.text, className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? ComponentSize.Medium : _c, _d = _a.active, active = _d === void 0 ? false : _d, _e = _a.testId, testId = _e === void 0 ? 'base-button' : _e, _f = _a.width, width = _f === void 0 ? '' : _f, onClick = _a.onClick;
|
|
4012
4012
|
var theme = useTheme();
|
|
4013
4013
|
var stylesBySize = getStylesBySize$8(size, theme);
|
|
4014
4014
|
var activeStyles = active
|
|
4015
4015
|
? { fontWeight: theme.component.selector.hover.fontWeight }
|
|
4016
4016
|
: { fontWeight: theme.component.selector.default.fontWeight };
|
|
4017
|
-
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': {
|
|
4017
|
+
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': {
|
|
4018
4018
|
fontWeight: theme.component.selector.hover.fontWeight,
|
|
4019
4019
|
}, '&:disabled': {
|
|
4020
4020
|
color: theme.colors.shades['250'].color,
|
|
@@ -4023,7 +4023,7 @@ var SimpleSelector = function (_a) {
|
|
|
4023
4023
|
};
|
|
4024
4024
|
|
|
4025
4025
|
var SelectorSecondary = function (_a) {
|
|
4026
|
-
var text = _a.text, size = _a.size, disabled = _a.disabled, active = _a.active, className = _a.className, testId = _a.testId, onClick = _a.onClick;
|
|
4026
|
+
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;
|
|
4027
4027
|
var theme = useTheme();
|
|
4028
4028
|
var stylesByActive = active
|
|
4029
4029
|
? {
|
|
@@ -4038,7 +4038,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4038
4038
|
border: theme.component.selector.default.border,
|
|
4039
4039
|
fontWeight: theme.component.selector.default.fontWeight,
|
|
4040
4040
|
};
|
|
4041
|
-
return (jsx(SimpleSelector, { text: text, size: size, onClick: onClick, className: className, disabled: disabled, testId: testId, css: __assign$1(__assign$1({}, stylesByActive), { whiteSpace: 'nowrap', '&:hover': {
|
|
4041
|
+
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': {
|
|
4042
4042
|
background: theme.component.selector.hover.background,
|
|
4043
4043
|
color: theme.component.selector.hover.color,
|
|
4044
4044
|
}, '&:disabled': {
|
|
@@ -4053,7 +4053,7 @@ var SelectorSecondary = function (_a) {
|
|
|
4053
4053
|
var TAGS = {
|
|
4054
4054
|
hero1: newStyled.h1(templateObject_1$11 || (templateObject_1$11 = __makeTemplateObject([""], [""]))),
|
|
4055
4055
|
hero2: newStyled.h2(templateObject_2$E || (templateObject_2$E = __makeTemplateObject([""], [""]))),
|
|
4056
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4056
|
+
hero3: newStyled.h3(templateObject_3$p || (templateObject_3$p = __makeTemplateObject([""], [""]))),
|
|
4057
4057
|
display1: newStyled.h1(templateObject_4$g || (templateObject_4$g = __makeTemplateObject([""], [""]))),
|
|
4058
4058
|
display2: newStyled.h2(templateObject_5$9 || (templateObject_5$9 = __makeTemplateObject([""], [""]))),
|
|
4059
4059
|
heading1: newStyled.h1(templateObject_6$6 || (templateObject_6$6 = __makeTemplateObject([""], [""]))),
|
|
@@ -4069,7 +4069,7 @@ var TAGS = {
|
|
|
4069
4069
|
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
4070
4070
|
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' : ''); }),
|
|
4071
4071
|
};
|
|
4072
|
-
var Text$
|
|
4072
|
+
var Text$5 = function (_a) {
|
|
4073
4073
|
var variant = _a.variant, children = _a.children, allProps = __rest(_a, ["variant", "children"]);
|
|
4074
4074
|
var theme = useTheme();
|
|
4075
4075
|
var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
@@ -4174,24 +4174,24 @@ var DEFAULTS = {
|
|
|
4174
4174
|
size: 'regular',
|
|
4175
4175
|
},
|
|
4176
4176
|
};
|
|
4177
|
-
var templateObject_1$11, templateObject_2$E, templateObject_3$
|
|
4177
|
+
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;
|
|
4178
4178
|
|
|
4179
4179
|
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) {
|
|
4180
4180
|
var inline = _a.inline;
|
|
4181
4181
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4182
4182
|
});
|
|
4183
4183
|
var SizeSelector = function (_a) {
|
|
4184
|
-
var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
|
|
4184
|
+
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;
|
|
4185
4185
|
return (jsxs("div", __assign$1({ css: {
|
|
4186
4186
|
display: 'flex',
|
|
4187
4187
|
flexDirection: inline ? 'row' : 'column',
|
|
4188
4188
|
alignItems: inline ? 'center' : 'start',
|
|
4189
|
-
} }, { children: [jsxs(Text$
|
|
4189
|
+
} }, { 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) {
|
|
4190
4190
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
4191
4191
|
return (jsx(SelectorSecondary, { css: {
|
|
4192
4192
|
padding: '0.75rem 1rem 0.625rem',
|
|
4193
4193
|
margin: '0 0.5rem 0.625rem 0',
|
|
4194
|
-
}, size: 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));
|
|
4194
|
+
}, size: 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));
|
|
4195
4195
|
}) }), void 0)] }), void 0));
|
|
4196
4196
|
};
|
|
4197
4197
|
var templateObject_1$10;
|
|
@@ -4243,12 +4243,12 @@ var templateObject_1$$;
|
|
|
4243
4243
|
|
|
4244
4244
|
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"])));
|
|
4245
4245
|
var P$3 = newStyled.p(templateObject_2$D || (templateObject_2$D = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4246
|
-
var PercentageSpan = newStyled.span(templateObject_3$
|
|
4246
|
+
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"])));
|
|
4247
4247
|
var SizeFitGuide = function (_a) {
|
|
4248
|
-
var title = _a.title,
|
|
4249
|
-
return (jsxs$1(Container$E, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), jsxs$1(P$3, { children: [
|
|
4248
|
+
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick;
|
|
4249
|
+
return (jsxs$1(Container$E, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected: ", jsxs$1(PercentageSpan, { children: [fitPercentage, "%"] }, void 0)] }, void 0))] }, void 0));
|
|
4250
4250
|
};
|
|
4251
|
-
var templateObject_1$_, templateObject_2$D, templateObject_3$
|
|
4251
|
+
var templateObject_1$_, templateObject_2$D, templateObject_3$o;
|
|
4252
4252
|
|
|
4253
4253
|
var getStylesBySize$6 = function (size) {
|
|
4254
4254
|
switch (size) {
|
|
@@ -4364,7 +4364,7 @@ var Price = newStyled.h1(templateObject_2$B || (templateObject_2$B = __makeTempl
|
|
|
4364
4364
|
var margin = _a.margin, size = _a.size;
|
|
4365
4365
|
return (margin ? (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
4366
4366
|
});
|
|
4367
|
-
var TagContainer = newStyled.h1(templateObject_3$
|
|
4367
|
+
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) {
|
|
4368
4368
|
var _b;
|
|
4369
4369
|
var size = _a.size;
|
|
4370
4370
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -4374,7 +4374,7 @@ var PriceLabel = function (_a) {
|
|
|
4374
4374
|
var theme = useTheme();
|
|
4375
4375
|
return (jsxs$1(Container$C, { children: [jsx$1(Price, __assign$1({ size: size, color: color || theme.colors.pallete.secondary.color, weight: 700, "data-testid": "price" }, { children: finalPrice }), void 0), originalPrice && (jsx$1(Price, __assign$1({ size: size, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": "discount" }, { children: originalPrice }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }, void 0));
|
|
4376
4376
|
};
|
|
4377
|
-
var templateObject_1$Y, templateObject_2$B, templateObject_3$
|
|
4377
|
+
var templateObject_1$Y, templateObject_2$B, templateObject_3$n;
|
|
4378
4378
|
|
|
4379
4379
|
var OneColorSelector = function (_a) {
|
|
4380
4380
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4415,12 +4415,12 @@ var OutOfStock = function (_a) {
|
|
|
4415
4415
|
|
|
4416
4416
|
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"])));
|
|
4417
4417
|
newStyled(lt.Label)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n font-size: 0.88rem;\n"], ["\n font-size: 0.88rem;\n"])));
|
|
4418
|
-
var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$
|
|
4418
|
+
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"])));
|
|
4419
4419
|
var Span = newStyled.span(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n font-weight: 600;\n"], ["\n font-weight: 600;\n"])));
|
|
4420
4420
|
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"])));
|
|
4421
4421
|
var Label$2 = function (_a) {
|
|
4422
4422
|
var label = _a.label, values = _a.values;
|
|
4423
|
-
return (jsxs$1(Text$
|
|
4423
|
+
return (jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
4424
4424
|
};
|
|
4425
4425
|
var Option = function (_a) {
|
|
4426
4426
|
var value = _a.value, children = _a.children;
|
|
@@ -4435,7 +4435,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
|
|
|
4435
4435
|
Option: Option,
|
|
4436
4436
|
OptionsContainer: OptionsContainer,
|
|
4437
4437
|
});
|
|
4438
|
-
var templateObject_1$X, templateObject_2$A, templateObject_3$
|
|
4438
|
+
var templateObject_1$X, templateObject_2$A, templateObject_3$m, templateObject_4$f, templateObject_5$8;
|
|
4439
4439
|
|
|
4440
4440
|
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) {
|
|
4441
4441
|
var borderColor = _a.borderColor;
|
|
@@ -4536,12 +4536,12 @@ var templateObject_1$T;
|
|
|
4536
4536
|
|
|
4537
4537
|
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"])));
|
|
4538
4538
|
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"])));
|
|
4539
|
-
var BottomTagContainer$1 = newStyled.div(templateObject_3$
|
|
4539
|
+
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"])));
|
|
4540
4540
|
var ImageProductWithTags$1 = function (_a) {
|
|
4541
4541
|
var image = _a.image, DiscountTagElement = _a.DiscountTagElement, BestSellerTagElement = _a.BestSellerTagElement, testId = _a.testId;
|
|
4542
4542
|
return (jsxs$1(Container$z, __assign$1({ "data-testid": testId }, { children: [jsx$1(Image, { src: image.imageUrl, alt: image.alt, objectFit: "cover", objectPosition: "center", width: "530px", height: "720px" }, void 0), jsx$1(TopTagContainer$1, { children: DiscountTagElement }, void 0), jsx$1(BottomTagContainer$1, { children: BestSellerTagElement }, void 0)] }), void 0));
|
|
4543
4543
|
};
|
|
4544
|
-
var templateObject_1$S, templateObject_2$x, templateObject_3$
|
|
4544
|
+
var templateObject_1$S, templateObject_2$x, templateObject_3$l;
|
|
4545
4545
|
|
|
4546
4546
|
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"])));
|
|
4547
4547
|
var ProductGallery = function (_a) {
|
|
@@ -4917,7 +4917,7 @@ var ContentWrapper = newStyled.div(templateObject_2$v || (templateObject_2$v = _
|
|
|
4917
4917
|
var borderColor = _a.borderColor;
|
|
4918
4918
|
return borderColor;
|
|
4919
4919
|
});
|
|
4920
|
-
var TooltipArrowContainer = newStyled.div(templateObject_3$
|
|
4920
|
+
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) {
|
|
4921
4921
|
var position = _a.position;
|
|
4922
4922
|
return getArrowRotation(position);
|
|
4923
4923
|
}, function (_a) {
|
|
@@ -4937,7 +4937,7 @@ var Title$4 = newStyled.h1(templateObject_6$5 || (templateObject_6$5 = __makeTem
|
|
|
4937
4937
|
return color;
|
|
4938
4938
|
});
|
|
4939
4939
|
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"])));
|
|
4940
|
-
var templateObject_1$L, templateObject_2$v, templateObject_3$
|
|
4940
|
+
var templateObject_1$L, templateObject_2$v, templateObject_3$k, templateObject_4$e, templateObject_5$7, templateObject_6$5, templateObject_7$3;
|
|
4941
4941
|
|
|
4942
4942
|
var Tooltip = function (_a) {
|
|
4943
4943
|
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;
|
|
@@ -5124,22 +5124,12 @@ var RadioGroupInput = function (_a) {
|
|
|
5124
5124
|
|
|
5125
5125
|
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"])));
|
|
5126
5126
|
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"])));
|
|
5127
|
-
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) {
|
|
5128
|
-
var color = _a.color;
|
|
5129
|
-
return color;
|
|
5130
|
-
}, function (_a) {
|
|
5131
|
-
var weight = _a.weight;
|
|
5132
|
-
return (weight ? weight : '400');
|
|
5133
|
-
}, function (_a) {
|
|
5134
|
-
var margin = _a.margin;
|
|
5135
|
-
return (margin ? margin : '0');
|
|
5136
|
-
});
|
|
5137
5127
|
var Minimalistic = function (_a) {
|
|
5138
|
-
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#
|
|
5128
|
+
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;
|
|
5139
5129
|
var theme = useTheme();
|
|
5140
|
-
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$r, __assign$1({ "data-testid": "TopSection" }, { children: [jsx$1(Text$5, __assign$1({
|
|
5130
|
+
return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto, border: { borderColor: borderColor, borderWidth: '0.063rem' }, flex: false }, { children: jsxs$1(Wrapper$3, { children: [jsxs$1(Container$r, __assign$1({ "data-testid": "TopSection" }, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: "demi", size: "small", style: { margin: '0.1rem 1.25rem 0.1rem 0' } }, { children: getMorePayLessText }), void 0), jsx$1(PriceLabel, { finalPrice: price, originalPrice: originalPrice, color: theme.colors.pallete.secondary.color, size: ComponentSize.Small }, void 0)] }), void 0), jsxs$1(Container$r, __assign$1({ "data-testid": "BottomSection" }, { children: [jsxs$1(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), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
5141
5131
|
};
|
|
5142
|
-
var templateObject_1$J, templateObject_2$t
|
|
5132
|
+
var templateObject_1$J, templateObject_2$t;
|
|
5143
5133
|
|
|
5144
5134
|
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"])));
|
|
5145
5135
|
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; });
|
|
@@ -5257,8 +5247,10 @@ var Timer = function (_a) {
|
|
|
5257
5247
|
return seconds - 1;
|
|
5258
5248
|
});
|
|
5259
5249
|
}, 1000);
|
|
5250
|
+
if (secs <= 0)
|
|
5251
|
+
clearInterval(timer);
|
|
5260
5252
|
return function () { return clearInterval(timer); };
|
|
5261
|
-
}, [onTimeUp]);
|
|
5253
|
+
}, [onTimeUp, secs]);
|
|
5262
5254
|
var _d = secondsToTime(secs), hours = _d.hours, minutes = _d.minutes, seconds = _d.seconds;
|
|
5263
5255
|
return (jsxs$1("div", __assign$1({ "data-testid": "Time" }, { children: [(hours || displayZeroValues) && "".concat(hours, "h "), (minutes || displayZeroValues) && "".concat(minutes, "m "), seconds, "s"] }), void 0));
|
|
5264
5256
|
};
|
|
@@ -5318,10 +5310,11 @@ var sliceString = function (str, maxLength) {
|
|
|
5318
5310
|
};
|
|
5319
5311
|
|
|
5320
5312
|
var formatPrice = function (value, _a) {
|
|
5321
|
-
var _b
|
|
5322
|
-
var
|
|
5313
|
+
var _b;
|
|
5314
|
+
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;
|
|
5315
|
+
var _f = value.toFixed(3).split('.'), integer = _f[0], fraction = _f[1];
|
|
5323
5316
|
// this prevents `Intl.NumberFormat` from rounding the number
|
|
5324
|
-
var valueToFormat = parseFloat("".concat(integer, ".").concat(fraction.slice(0, 2)));
|
|
5317
|
+
var valueToFormat = parseFloat("".concat(integer, ".").concat((_b = fraction === null || fraction === void 0 ? void 0 : fraction.slice(0, 2)) !== null && _b !== void 0 ? _b : 0));
|
|
5325
5318
|
return new Intl.NumberFormat(locale, {
|
|
5326
5319
|
style: 'currency',
|
|
5327
5320
|
currency: currency,
|
|
@@ -10466,7 +10459,7 @@ var Description$1 = newStyled.div({
|
|
|
10466
10459
|
var ProductItem = function (_a) {
|
|
10467
10460
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
10468
10461
|
var theme = useTheme();
|
|
10469
|
-
return (jsxs$1(Container$a, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$
|
|
10462
|
+
return (jsxs$1(Container$a, __assign$1({ theme: theme }, { children: [jsx$1(Image, { src: src, alt: "", width: "4.063rem", height: "5.375rem" }, void 0), jsxs$1(Description$1, { children: [jsx$1(Text$5, __assign$1({ 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));
|
|
10470
10463
|
};
|
|
10471
10464
|
var templateObject_1$e;
|
|
10472
10465
|
|
|
@@ -10477,7 +10470,7 @@ var Container$9 = newStyled.div({
|
|
|
10477
10470
|
});
|
|
10478
10471
|
var Footer = function (_a) {
|
|
10479
10472
|
var text = _a.text, onClick = _a.onClick;
|
|
10480
|
-
return (jsx$1(Container$9, { children: jsx$1(Text$
|
|
10473
|
+
return (jsx$1(Container$9, { children: jsx$1(Text$5, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
10481
10474
|
};
|
|
10482
10475
|
|
|
10483
10476
|
var Ul = newStyled.ul({
|
|
@@ -10511,7 +10504,7 @@ var Header = newStyled.div(templateObject_3$5 || (templateObject_3$5 = __makeTem
|
|
|
10511
10504
|
var ResultsPanel = function (_a) {
|
|
10512
10505
|
var options = _a.options, header = _a.header, footer = _a.footer, onClick = _a.onClick, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
10513
10506
|
var theme = useTheme();
|
|
10514
|
-
return (jsxs$1(Container$8, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$
|
|
10507
|
+
return (jsxs$1(Container$8, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header, __assign$1({ theme: theme }, { children: jsx$1(Text$5, __assign$1({ variant: "heading6", weight: "demi" }, { children: header }), void 0) }), void 0)), jsx$1(Ul, { children: options.map(function (item, index) { return (jsx$1(Li, __assign$1({ theme: theme }, { children: jsx$1(Button$2, __assign$1({ 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));
|
|
10515
10508
|
};
|
|
10516
10509
|
var templateObject_1$d, templateObject_2$5, templateObject_3$5;
|
|
10517
10510
|
|
|
@@ -15030,9 +15023,9 @@ var PackCard = function (_a) {
|
|
|
15030
15023
|
.then(function (icon) { return setIcon(icon); })
|
|
15031
15024
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
15032
15025
|
}, [pack.meta.icon]);
|
|
15033
|
-
return (jsxs$1(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 ? (jsx$1(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$
|
|
15026
|
+
return (jsxs$1(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 ? (jsx$1(Tag, __assign$1({ "data-testid": "pack-selector-tag" }, { children: jsx$1(Text$5, __assign$1({ variant: "tag", weight: "bold", size: "small" }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label, { children: [jsx$1(Text$5, __assign$1({ variant: "body", weight: selected || pack.meta.tag ? 'bold' : 'regular' }, { children: pack.label }), void 0), jsx$1(Check, __assign$1({ "data-visible": selected, "data-testid": "pack-selector-check" }, { children: jsx$1(Icon.Actions.Check, { width: 0.7, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxs$1(Text$5, __assign$1({ variant: "body", size: "small" }, { children: ["Save ", pack.meta.discountPercentage, "%"] }), void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsx$1(IconContainer, { children: icon ? HTMLReactParser$1(icon) : jsx$1(IconPlaceholder, {}, void 0) }, void 0), jsx$1(Spacing, { type: "block", size: 12 }, void 0), jsxs$1(Text$5, __assign$1({ variant: "body", size: "small", "data-testid": "pack-selector-prices" }, { children: [jsx$1("del", { children: formatPrice(pack.meta.originalPrice) }, void 0), " - ", formatPrice(pack.meta.price)] }), void 0), jsxs$1(Text$5, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
15034
15027
|
};
|
|
15035
15028
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
15036
15029
|
|
|
15037
|
-
export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text$
|
|
15030
|
+
export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$2 as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Text$5 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
15038
15031
|
//# sourceMappingURL=index.esm.js.map
|