@trafilea/afrodita-components 5.0.0-beta.69 → 5.0.0-beta.71
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.esm.js +30 -26
- package/build/index.esm.js.map +1 -1
- package/build/index.js +30 -26
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -4183,6 +4183,9 @@ function SimpleDropdown(_a) {
|
|
|
4183
4183
|
};
|
|
4184
4184
|
useEffect(function () {
|
|
4185
4185
|
if (value == null) {
|
|
4186
|
+
if (!initialValue) {
|
|
4187
|
+
setSelectedValue(undefined);
|
|
4188
|
+
}
|
|
4186
4189
|
return;
|
|
4187
4190
|
}
|
|
4188
4191
|
if (options.findIndex(function (option) { return option.value === value.value; }) < 0) {
|
|
@@ -4190,7 +4193,7 @@ function SimpleDropdown(_a) {
|
|
|
4190
4193
|
return;
|
|
4191
4194
|
}
|
|
4192
4195
|
setSelectedValue(value);
|
|
4193
|
-
}, [value, options]);
|
|
4196
|
+
}, [value, options, initialValue]);
|
|
4194
4197
|
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4195
4198
|
return (jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, "data-testid": testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: false }, { children: item.label }), item.key)); }) }, void 0)] }), void 0));
|
|
4196
4199
|
}
|
|
@@ -4257,7 +4260,7 @@ var TAGS = {
|
|
|
4257
4260
|
hero2: newStyled.h2(templateObject_2$I || (templateObject_2$I = __makeTemplateObject([""], [""]))),
|
|
4258
4261
|
hero3: newStyled.h3(templateObject_3$v || (templateObject_3$v = __makeTemplateObject([""], [""]))),
|
|
4259
4262
|
display1: newStyled.h1(templateObject_4$n || (templateObject_4$n = __makeTemplateObject([""], [""]))),
|
|
4260
|
-
display2: newStyled.h2(templateObject_5$
|
|
4263
|
+
display2: newStyled.h2(templateObject_5$e || (templateObject_5$e = __makeTemplateObject([""], [""]))),
|
|
4261
4264
|
heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
|
|
4262
4265
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
4263
4266
|
heading3: newStyled.h3(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -4271,7 +4274,7 @@ var TAGS = {
|
|
|
4271
4274
|
label: newStyled.label(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))),
|
|
4272
4275
|
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' : ''); }),
|
|
4273
4276
|
};
|
|
4274
|
-
var Text$
|
|
4277
|
+
var Text$6 = function (_a) {
|
|
4275
4278
|
var variant = _a.variant, children = _a.children, testId = _a.testId, allProps = __rest(_a, ["variant", "children", "testId"]);
|
|
4276
4279
|
var theme = useTheme();
|
|
4277
4280
|
var Tag = useMemo(function () { return TAGS[variant] || 'p'; }, [variant]);
|
|
@@ -4376,7 +4379,7 @@ var DEFAULTS = {
|
|
|
4376
4379
|
size: 'regular',
|
|
4377
4380
|
},
|
|
4378
4381
|
};
|
|
4379
|
-
var templateObject_1$17, templateObject_2$I, templateObject_3$v, templateObject_4$n, templateObject_5$
|
|
4382
|
+
var templateObject_1$17, templateObject_2$I, templateObject_3$v, templateObject_4$n, templateObject_5$e, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4380
4383
|
|
|
4381
4384
|
var ButtonsContainer = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __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) {
|
|
4382
4385
|
var inline = _a.inline;
|
|
@@ -4388,7 +4391,7 @@ var SizeSelector = function (_a) {
|
|
|
4388
4391
|
display: 'flex',
|
|
4389
4392
|
flexDirection: inline ? 'row' : 'column',
|
|
4390
4393
|
alignItems: inline ? 'center' : 'start',
|
|
4391
|
-
} }, { children: [jsxs(Text$
|
|
4394
|
+
} }, { children: [jsxs(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$6, __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) {
|
|
4392
4395
|
var active = !size.disabled && size.label === selectedValue.label;
|
|
4393
4396
|
return (jsx(SelectorSecondary, { css: {
|
|
4394
4397
|
padding: '0.75rem 1rem 0.625rem',
|
|
@@ -4548,7 +4551,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
4548
4551
|
}
|
|
4549
4552
|
};
|
|
4550
4553
|
var Container$F = newStyled.div(templateObject_1$12 || (templateObject_1$12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4551
|
-
var Price = newStyled.
|
|
4554
|
+
var Price = newStyled.p(templateObject_2$F || (templateObject_2$F = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
4552
4555
|
var weight = _a.weight;
|
|
4553
4556
|
return (weight ? weight : '400');
|
|
4554
4557
|
}, function (_a) {
|
|
@@ -4577,12 +4580,13 @@ var Price = newStyled.h1(templateObject_2$F || (templateObject_2$F = __makeTempl
|
|
|
4577
4580
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
4578
4581
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
4579
4582
|
});
|
|
4580
|
-
var TagContainer = newStyled.
|
|
4583
|
+
var TagContainer = newStyled.p(templateObject_3$t || (templateObject_3$t = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
4581
4584
|
var _b;
|
|
4582
4585
|
var size = _a.size;
|
|
4583
4586
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
4584
4587
|
});
|
|
4585
|
-
var FinalPriceContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4588
|
+
var FinalPriceContainer = newStyled.div(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4589
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4586
4590
|
function getTestId() {
|
|
4587
4591
|
var args = [];
|
|
4588
4592
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
@@ -4603,9 +4607,9 @@ var PriceLabel = function (_a) {
|
|
|
4603
4607
|
weight: 700,
|
|
4604
4608
|
};
|
|
4605
4609
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'discount') }, { children: originalPrice }), void 0)); };
|
|
4606
|
-
return (jsxs$1(Container$F, { children: [availableFinalPriceStyled && originalPrice && jsx$1(OriginalPrice, {}, void 0), availableFinalPriceStyled ? (jsxs$1(
|
|
4610
|
+
return (jsxs$1(Container$F, { children: [availableFinalPriceStyled && originalPrice && jsx$1(OriginalPrice, {}, void 0), availableFinalPriceStyled ? (jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true }, priceCommonProps, { children: "$" }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true }, priceCommonProps, { children: finalPriceArray[1] }), void 0)] }), void 0)) : (jsxs$1(FinalPriceContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'price') }, priceCommonProps, { children: finalPrice }), void 0), originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, 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));
|
|
4607
4611
|
};
|
|
4608
|
-
var templateObject_1$12, templateObject_2$F, templateObject_3$t, templateObject_4$m;
|
|
4612
|
+
var templateObject_1$12, templateObject_2$F, templateObject_3$t, templateObject_4$m, templateObject_5$d;
|
|
4609
4613
|
|
|
4610
4614
|
var OneColorSelector = function (_a) {
|
|
4611
4615
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -4653,7 +4657,7 @@ var Span = newStyled.span(templateObject_4$l || (templateObject_4$l = __makeTemp
|
|
|
4653
4657
|
var OptionsContainer = newStyled.div(templateObject_5$c || (templateObject_5$c = __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"])));
|
|
4654
4658
|
var Label$2 = function (_a) {
|
|
4655
4659
|
var label = _a.label, values = _a.values;
|
|
4656
|
-
return (jsxs$1(Text$
|
|
4660
|
+
return (jsxs$1(Text$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
|
|
4657
4661
|
};
|
|
4658
4662
|
var Option = function (_a) {
|
|
4659
4663
|
var value = _a.value, children = _a.children;
|
|
@@ -11271,7 +11275,7 @@ var Container$u = newStyled.div(templateObject_2$x || (templateObject_2$x = __ma
|
|
|
11271
11275
|
var Minimalistic = function (_a) {
|
|
11272
11276
|
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, _e = _a.testId, testId = _e === void 0 ? 'minimalistic' : _e;
|
|
11273
11277
|
var theme = useTheme();
|
|
11274
|
-
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$u, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$
|
|
11278
|
+
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$u, __assign$1({ "data-testid": "".concat(testId, "-section") }, { children: [jsx$1(Text$6, __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, testId: testId }, void 0)] }), void 0), jsxs$1(Container$u, __assign$1({ "data-testid": "".concat(testId, "-section-bottom") }, { children: [jsxs$1(Text$6, __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$6, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [youAreSavingText, ": ", savingPrice] }), void 0)] }), void 0)] }, void 0) }), void 0));
|
|
11275
11279
|
};
|
|
11276
11280
|
var templateObject_1$P, templateObject_2$x;
|
|
11277
11281
|
|
|
@@ -11721,7 +11725,7 @@ var PaymentMethod = function (_a) {
|
|
|
11721
11725
|
};
|
|
11722
11726
|
var templateObject_1$F;
|
|
11723
11727
|
|
|
11724
|
-
var Text$
|
|
11728
|
+
var Text$5 = newStyled.h3(templateObject_1$E || (templateObject_1$E = __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) {
|
|
11725
11729
|
var backgroundColor = _a.backgroundColor;
|
|
11726
11730
|
return backgroundColor;
|
|
11727
11731
|
}, function (_a) {
|
|
@@ -11731,7 +11735,7 @@ var Text$4 = newStyled.h3(templateObject_1$E || (templateObject_1$E = __makeTemp
|
|
|
11731
11735
|
var OfferBanner = function (_a) {
|
|
11732
11736
|
var discountAppliedText = _a.discountAppliedText, backgroundColor = _a.backgroundColor;
|
|
11733
11737
|
var theme = useTheme();
|
|
11734
|
-
return (jsx$1(Text$
|
|
11738
|
+
return (jsx$1(Text$5, __assign$1({ backgroundColor: backgroundColor, color: theme.colors.shades['700'].color, "data-testid": "OfferBanner" }, { children: discountAppliedText }), void 0));
|
|
11735
11739
|
};
|
|
11736
11740
|
var templateObject_1$E;
|
|
11737
11741
|
|
|
@@ -11774,11 +11778,11 @@ var Totals = {
|
|
|
11774
11778
|
|
|
11775
11779
|
var Container$m = newStyled.div(templateObject_1$B || (templateObject_1$B = __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; });
|
|
11776
11780
|
var IconContainer$3 = newStyled.div(templateObject_2$n || (templateObject_2$n = __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"])));
|
|
11777
|
-
var Text$
|
|
11781
|
+
var Text$4 = newStyled.p(templateObject_3$j || (templateObject_3$j = __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; });
|
|
11778
11782
|
var Details = newStyled.span(templateObject_4$e || (templateObject_4$e = __makeTemplateObject(["\n color: ", ";\n font-weight: 700;\n"], ["\n color: ", ";\n font-weight: 700;\n"])), function (props) { return props.color; });
|
|
11779
11783
|
var Note = function (_a) {
|
|
11780
11784
|
var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
|
|
11781
|
-
return (jsxs$1(Container$m, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$
|
|
11785
|
+
return (jsxs$1(Container$m, __assign$1({ color: backgroundColor, "data-testid": "Container" }, { children: [jsx$1(IconContainer$3, { children: jsx$1(Icon.Actions.LightExclamation, { fill: accentColor }, void 0) }, void 0), jsx$1("div", { children: jsxs$1(Text$4, __assign$1({ color: color }, { children: [importantNoteText && jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
|
|
11782
11786
|
};
|
|
11783
11787
|
var templateObject_1$B, templateObject_2$n, templateObject_3$j, templateObject_4$e;
|
|
11784
11788
|
|
|
@@ -11898,11 +11902,11 @@ var DeliveryDetails = function (_a) {
|
|
|
11898
11902
|
var templateObject_1$A, templateObject_2$m, templateObject_3$i, templateObject_4$d, templateObject_5$8, templateObject_6$6, templateObject_7$3, templateObject_8$1;
|
|
11899
11903
|
|
|
11900
11904
|
var Container$l = newStyled.div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
11901
|
-
var
|
|
11905
|
+
var Text$3 = newStyled.p(templateObject_2$l || (templateObject_2$l = __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; });
|
|
11902
11906
|
var ScrollToTop = function (_a) {
|
|
11903
11907
|
var scrollToTopText = _a.scrollToTopText, onClick = _a.onClick;
|
|
11904
11908
|
var theme = useTheme();
|
|
11905
|
-
return (jsxs$1(Container$l, __assign$1({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(
|
|
11909
|
+
return (jsxs$1(Container$l, __assign$1({ onClick: onClick, "data-testid": "Container" }, { children: [jsx$1(Text$3, __assign$1({ 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));
|
|
11906
11910
|
};
|
|
11907
11911
|
var templateObject_1$z, templateObject_2$l;
|
|
11908
11912
|
|
|
@@ -12295,7 +12299,7 @@ var Description$1 = newStyled.div({
|
|
|
12295
12299
|
var ProductItem = function (_a) {
|
|
12296
12300
|
var src = _a.src, title = _a.title, price = _a.price;
|
|
12297
12301
|
var theme = useTheme();
|
|
12298
|
-
return (jsxs$1(Container$d, __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$
|
|
12302
|
+
return (jsxs$1(Container$d, __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$6, __assign$1({ variant: "body", weight: "regular", size: "regular" }, { children: jsx$1("div", { dangerouslySetInnerHTML: { __html: title } }, void 0) }), void 0), jsx$1(PriceLabel, { finalPrice: price, color: "#C64844", size: ComponentSize.Small }, void 0)] }, void 0)] }), void 0));
|
|
12299
12303
|
};
|
|
12300
12304
|
var templateObject_1$k;
|
|
12301
12305
|
|
|
@@ -12306,7 +12310,7 @@ var Container$c = newStyled.div({
|
|
|
12306
12310
|
});
|
|
12307
12311
|
var Footer = function (_a) {
|
|
12308
12312
|
var text = _a.text, onClick = _a.onClick;
|
|
12309
|
-
return (jsx$1(Container$c, { children: jsx$1(Text$
|
|
12313
|
+
return (jsx$1(Container$c, { children: jsx$1(Text$6, __assign$1({ variant: "link", size: "regular", underline: true, onClick: onClick }, { children: text }), void 0) }, void 0));
|
|
12310
12314
|
};
|
|
12311
12315
|
|
|
12312
12316
|
var Ul = newStyled.ul({
|
|
@@ -12336,7 +12340,7 @@ var Header$1 = newStyled.div(templateObject_3$9 || (templateObject_3$9 = __makeT
|
|
|
12336
12340
|
var ResultsPanel = function (_a) {
|
|
12337
12341
|
var options = _a.options, header = _a.header, footer = _a.footer, onViewAll = _a.onViewAll, testId = _a.testId;
|
|
12338
12342
|
var theme = useTheme();
|
|
12339
|
-
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$
|
|
12343
|
+
return (jsxs$1(Container$b, __assign$1({ "data-testid": testId, theme: theme }, { children: [header && (jsx$1(Header$1, __assign$1({ theme: theme }, { children: jsx$1(Text$6, __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(Anchor, __assign$1({ href: item.optionUrl }, { 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));
|
|
12340
12344
|
};
|
|
12341
12345
|
var templateObject_1$j, templateObject_2$9, templateObject_3$9;
|
|
12342
12346
|
|
|
@@ -16895,9 +16899,9 @@ var PackCard = function (_a) {
|
|
|
16895
16899
|
.then(function (icon) { return setIcon(icon); })
|
|
16896
16900
|
.catch(function (e) { return console.error('Error getting icon', pack.meta.icon, e); });
|
|
16897
16901
|
}, [pack.meta.icon]);
|
|
16898
|
-
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$
|
|
16902
|
+
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$6, __assign$1({ variant: "tag", weight: "bold", size: "small", "data-keep-color": true }, { children: pack.meta.tag.toUpperCase() }), void 0) }), void 0)) : null, jsxs$1(Label, { children: [jsx$1(Text$6, __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.6, fill: "var(--background)" }, void 0) }), void 0)] }, void 0), jsxs$1(Text$6, __assign$1({ variant: "body", size: "small", weight: "bold", "data-keep-color": true, style: {
|
|
16899
16903
|
color: 'var(--colors-semantic-urgent-color)',
|
|
16900
|
-
} }, { 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$
|
|
16904
|
+
} }, { 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$6, __assign$1({ variant: "body", weight: "demi", size: "small" }, { children: [formatPrice(pack.meta.price / pack.meta.quantity), " each"] }), void 0)] }), void 0));
|
|
16901
16905
|
};
|
|
16902
16906
|
var templateObject_1$6, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$1, templateObject_7$1;
|
|
16903
16907
|
|
|
@@ -17016,7 +17020,7 @@ var NormalSpan = newStyled.span(templateObject_4$1 || (templateObject_4$1 = __ma
|
|
|
17016
17020
|
var SearchNavigationParents = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-left: 1.25rem;\n padding-right: 1rem;\n"])));
|
|
17017
17021
|
var SearchNavigation = function (_a) {
|
|
17018
17022
|
var returnText = _a.returnText, returnUrl = _a.returnUrl, _b = _a.steps, steps = _b === void 0 ? [] : _b, returnAction = _a.returnAction;
|
|
17019
|
-
return (jsxs$1(Container$2, { children: [jsxs$1(Text$
|
|
17023
|
+
return (jsxs$1(Container$2, { children: [jsxs$1(Text$6, __assign$1({ variant: "link", style: { display: 'flex', justifyContent: 'center' }, href: returnUrl || '/', onClick: returnAction }, { children: [jsx$1(BackArrow, { children: jsx$1(Icon.Arrows.ChevronRightVariant, { width: 1.375, height: 1.375 }, void 0) }, void 0), returnText && jsx$1(BoldSpan, { children: returnText }, void 0)] }), void 0), jsx$1(SearchNavigationParents, { children: steps.map(function (step, index) {
|
|
17020
17024
|
return index === steps.length - 1 ? (jsx$1(BoldSpan, { children: step }, void 0)) : (jsx$1(NormalSpan, { children: "".concat(step, " / ") }, step));
|
|
17021
17025
|
}) }, void 0)] }, void 0));
|
|
17022
17026
|
};
|
|
@@ -17085,7 +17089,7 @@ var IconsWithTitle = function (_a) {
|
|
|
17085
17089
|
console.error('Icon', iconName, 'not found');
|
|
17086
17090
|
return null;
|
|
17087
17091
|
}
|
|
17088
|
-
return (jsx$1(Fragment$1, { children: jsxs$1(Container, { children: [jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor }, { children: jsx$1(IconComponent, { width: isMobile ? 3 : 4, height: isMobile ? 3 : 4, fill: iconColor }, void 0) }), void 0), jsx$1(Text$
|
|
17092
|
+
return (jsx$1(Fragment$1, { children: jsxs$1(Container, { children: [jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor }, { children: jsx$1(IconComponent, { width: isMobile ? 3 : 4, height: isMobile ? 3 : 4, fill: iconColor }, void 0) }), void 0), jsx$1(Text$6, __assign$1({ variant: "heading6", style: {
|
|
17089
17093
|
fontSize: '14px',
|
|
17090
17094
|
textTransform: 'uppercase',
|
|
17091
17095
|
textAlign: 'center',
|
|
@@ -17094,5 +17098,5 @@ var IconsWithTitle = function (_a) {
|
|
|
17094
17098
|
};
|
|
17095
17099
|
var templateObject_1;
|
|
17096
17100
|
|
|
17097
|
-
export { Accordion$1 as 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, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$
|
|
17101
|
+
export { Accordion$1 as 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, Filters, FitPredictor, Icon, IconButton, IconsWithTitle, Image, Input$1 as Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaymentMethod, PaypalButton, Portal, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text$6 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
17098
17102
|
//# sourceMappingURL=index.esm.js.map
|