@trafilea/afrodita-components 5.0.0-beta.91 → 5.0.0-beta.92
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 -3
- package/build/index.esm.js +32 -36
- package/build/index.esm.js.map +1 -1
- package/build/index.js +32 -36
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -738,7 +738,7 @@ interface PriceLabelProps {
|
|
|
738
738
|
}
|
|
739
739
|
declare const PriceLabel: ({ finalPrice, originalPrice, discount, color, testId, finalPriceStyled, finalPriceStyle, originalPriceStyled, size, }: PriceLabelProps) => JSX.Element;
|
|
740
740
|
|
|
741
|
-
declare const
|
|
741
|
+
declare const PriceLabelV2: ({ finalPrice, originalPrice, discount, color, testId, originalPriceStyled, size, }: PriceLabelProps) => JSX.Element;
|
|
742
742
|
|
|
743
743
|
interface ColorPickerProps {
|
|
744
744
|
options: ColorPickerOption[];
|
|
@@ -1620,6 +1620,7 @@ interface ProductItemSmallMobileProps extends ProductItemProps {
|
|
|
1620
1620
|
topTag?: JSX.Element;
|
|
1621
1621
|
bottomTag?: JSX.Element;
|
|
1622
1622
|
onClick?: () => void;
|
|
1623
|
+
priceDisplayType?: 'default' | 'styled';
|
|
1623
1624
|
}
|
|
1624
1625
|
|
|
1625
1626
|
declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: React.FC<P>, data: ProductItemProps[]): {
|
|
@@ -1628,7 +1629,7 @@ declare function withProductGrid<P extends ProductItemProps>(ProductItemComponen
|
|
|
1628
1629
|
};
|
|
1629
1630
|
|
|
1630
1631
|
declare const Collection: {
|
|
1631
|
-
ProductItemMobile: ({ title, image, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1632
|
+
ProductItemMobile: ({ title, image, price, rating, size, alignName, url, className, topTag, bottomTag, onClick, priceDisplayType, }: ProductItemSmallMobileProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
|
|
1632
1633
|
withProductGrid: typeof withProductGrid;
|
|
1633
1634
|
};
|
|
1634
1635
|
|
|
@@ -2068,4 +2069,4 @@ declare const formatPrice: (value: number, { locale, currency }?: {
|
|
|
2068
2069
|
currency?: string | undefined;
|
|
2069
2070
|
}) => string;
|
|
2070
2071
|
|
|
2071
|
-
export { Accordion, AccordionOptions, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel,
|
|
2072
|
+
export { Accordion, AccordionOptions, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CartProductItem, CategoryTag, Checkbox, Collection, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitPredictor, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageType, Input, InputValidationType, Modal, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, PaginatorBlog, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, ProductGallery, ProductGalleryMobile, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
package/build/index.esm.js
CHANGED
|
@@ -3584,7 +3584,7 @@ var InputValidationType;
|
|
|
3584
3584
|
InputValidationType[InputValidationType["Empty"] = 2] = "Empty";
|
|
3585
3585
|
})(InputValidationType || (InputValidationType = {}));
|
|
3586
3586
|
|
|
3587
|
-
var Section = newStyled.div(templateObject_1$
|
|
3587
|
+
var Section = newStyled.div(templateObject_1$1f || (templateObject_1$1f = __makeTemplateObject(["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"], ["\n font-weight: 600;\n display: flex;\n flex-direction: row;\n align-items: center;\n align-text: left;\n width: 100%;\n box-sizing: border-box;\n align-self: flex-start;\n padding: ", ";\n"])), function (props) {
|
|
3588
3588
|
return props.type === CardSectionType.Header ? '1.5rem 1.5rem 0' : '0 1.5rem 1.5rem';
|
|
3589
3589
|
});
|
|
3590
3590
|
var CardHeader = function (_a) {
|
|
@@ -3595,14 +3595,14 @@ var CardFooter = function (_a) {
|
|
|
3595
3595
|
var children = _a.children;
|
|
3596
3596
|
return (jsx$1(Section, __assign$1({ type: CardSectionType.Footer }, { children: children }), void 0));
|
|
3597
3597
|
};
|
|
3598
|
-
var templateObject_1$
|
|
3598
|
+
var templateObject_1$1f;
|
|
3599
3599
|
|
|
3600
|
-
var Body = newStyled.div(templateObject_1$
|
|
3600
|
+
var Body = newStyled.div(templateObject_1$1e || (templateObject_1$1e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.5rem 1.5rem;\n align-self: flex-start;\n"])));
|
|
3601
3601
|
var CardBody = function (_a) {
|
|
3602
3602
|
var children = _a.children;
|
|
3603
3603
|
return jsx$1(Body, { children: children }, void 0);
|
|
3604
3604
|
};
|
|
3605
|
-
var templateObject_1$
|
|
3605
|
+
var templateObject_1$1e;
|
|
3606
3606
|
|
|
3607
3607
|
var IGNORED_KEYS = ['typography', 'fonts'];
|
|
3608
3608
|
var applyVariablesIntoTheme = function (theme) {
|
|
@@ -3747,7 +3747,7 @@ var AssetsProvider = function (_a) {
|
|
|
3747
3747
|
};
|
|
3748
3748
|
var useThemeAssets = function () { return useContext(AssetsContext); };
|
|
3749
3749
|
|
|
3750
|
-
var Container$L = newStyled.div(templateObject_1$
|
|
3750
|
+
var Container$L = newStyled.div(templateObject_1$1d || (templateObject_1$1d = __makeTemplateObject(["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"], ["\n ", "\n width: ", ";\n background: ", ";\n border-radius: ", ";\n border: ", ";\n"])), function (_a) {
|
|
3751
3751
|
var flex = _a.flex;
|
|
3752
3752
|
return flex &&
|
|
3753
3753
|
"display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;";
|
|
@@ -3767,7 +3767,7 @@ var Card$2 = Object.assign(Card$1, {
|
|
|
3767
3767
|
Footer: CardFooter,
|
|
3768
3768
|
Body: CardBody,
|
|
3769
3769
|
});
|
|
3770
|
-
var templateObject_1$
|
|
3770
|
+
var templateObject_1$1d;
|
|
3771
3771
|
|
|
3772
3772
|
var Fragment = Fragment$1;
|
|
3773
3773
|
function jsx(type, props, key) {
|
|
@@ -3909,7 +3909,7 @@ function BaseSelectOption(_a) {
|
|
|
3909
3909
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
3910
3910
|
}
|
|
3911
3911
|
|
|
3912
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
3912
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1c || (templateObject_1$1c = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3913
3913
|
function BaseSelect(_a) {
|
|
3914
3914
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
3915
3915
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -3919,7 +3919,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
3919
3919
|
Options: BaseSelectOptions,
|
|
3920
3920
|
Option: BaseSelectOption,
|
|
3921
3921
|
});
|
|
3922
|
-
var templateObject_1$
|
|
3922
|
+
var templateObject_1$1c;
|
|
3923
3923
|
|
|
3924
3924
|
var CustomButton = newStyled.button(function (_a) {
|
|
3925
3925
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4132,7 +4132,7 @@ var CustomCheckboxStyles = {
|
|
|
4132
4132
|
},
|
|
4133
4133
|
};
|
|
4134
4134
|
|
|
4135
|
-
var Container$K = newStyled.div(templateObject_1$
|
|
4135
|
+
var Container$K = newStyled.div(templateObject_1$1b || (templateObject_1$1b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4136
4136
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4137
4137
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4138
4138
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4168,7 +4168,7 @@ var Checkbox = function (_a) {
|
|
|
4168
4168
|
}, []);
|
|
4169
4169
|
return (jsxs$1(Container$K, { children: [jsx$1(Input$3, { type: "checkbox", checked: isChecked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: isChecked, "data-testid": "checkbox", variant: variant }, { children: isChecked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$3, __assign$1({ "data-testid": "checkbox-text", size: size, variant: isChecked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4170
4170
|
};
|
|
4171
|
-
var templateObject_1$
|
|
4171
|
+
var templateObject_1$1b, templateObject_2$L;
|
|
4172
4172
|
|
|
4173
4173
|
var CustomOption = newStyled.li(function (_a) {
|
|
4174
4174
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4305,11 +4305,11 @@ var SelectorSecondary = function (_a) {
|
|
|
4305
4305
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4306
4306
|
// `variants` styles that are consistent through all themes.
|
|
4307
4307
|
var TAGS = {
|
|
4308
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4308
|
+
hero1: newStyled.h1(templateObject_1$1a || (templateObject_1$1a = __makeTemplateObject([""], [""]))),
|
|
4309
4309
|
hero2: newStyled.h2(templateObject_2$K || (templateObject_2$K = __makeTemplateObject([""], [""]))),
|
|
4310
4310
|
hero3: newStyled.h3(templateObject_3$x || (templateObject_3$x = __makeTemplateObject([""], [""]))),
|
|
4311
|
-
display1: newStyled.h1(templateObject_4$
|
|
4312
|
-
display2: newStyled.h2(templateObject_5$
|
|
4311
|
+
display1: newStyled.h1(templateObject_4$n || (templateObject_4$n = __makeTemplateObject([""], [""]))),
|
|
4312
|
+
display2: newStyled.h2(templateObject_5$d || (templateObject_5$d = __makeTemplateObject([""], [""]))),
|
|
4313
4313
|
heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
|
|
4314
4314
|
heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
|
|
4315
4315
|
heading3: newStyled.h3(templateObject_8$3 || (templateObject_8$3 = __makeTemplateObject([""], [""]))),
|
|
@@ -4428,9 +4428,9 @@ var DEFAULTS = {
|
|
|
4428
4428
|
size: 'regular',
|
|
4429
4429
|
},
|
|
4430
4430
|
};
|
|
4431
|
-
var templateObject_1$
|
|
4431
|
+
var templateObject_1$1a, templateObject_2$K, templateObject_3$x, templateObject_4$n, templateObject_5$d, templateObject_6$8, templateObject_7$5, templateObject_8$3, templateObject_9$1, templateObject_10$1, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
|
|
4432
4432
|
|
|
4433
|
-
var ButtonsContainer = newStyled.div(templateObject_1$
|
|
4433
|
+
var ButtonsContainer = newStyled.div(templateObject_1$19 || (templateObject_1$19 = __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) {
|
|
4434
4434
|
var inline = _a.inline;
|
|
4435
4435
|
return (inline ? '0 0 0 10px' : '8px 0 0 0');
|
|
4436
4436
|
});
|
|
@@ -4448,7 +4448,7 @@ var SizeSelector = function (_a) {
|
|
|
4448
4448
|
}, 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));
|
|
4449
4449
|
}) }), void 0)] }), void 0));
|
|
4450
4450
|
};
|
|
4451
|
-
var templateObject_1$
|
|
4451
|
+
var templateObject_1$19;
|
|
4452
4452
|
|
|
4453
4453
|
var getStylesBySize$7 = function (size) {
|
|
4454
4454
|
switch (size) {
|
|
@@ -4475,7 +4475,7 @@ var textButtonStyles$1 = function (theme, size) {
|
|
|
4475
4475
|
} });
|
|
4476
4476
|
};
|
|
4477
4477
|
var withContainer = function (iconFill, isLeading, Icon) {
|
|
4478
|
-
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$
|
|
4478
|
+
return Icon && (jsx("span", __assign$1({ css: css(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n ", "\n "], ["\n display: flex;\n align-items: center;\n ", "\n "])), isLeading ? 'margin-right: 5px' : 'margin-left: 5px') }, { children: jsx(Icon, { width: 1.25, height: 1.25, fill: iconFill }, void 0) }), void 0));
|
|
4479
4479
|
};
|
|
4480
4480
|
var getIconFill = function (theme, disabled, iconColor) {
|
|
4481
4481
|
if (disabled)
|
|
@@ -4491,16 +4491,16 @@ var TextButton = function (_a) {
|
|
|
4491
4491
|
var iconFill = getIconFill(theme, disabled, iconColor);
|
|
4492
4492
|
return (jsx(BaseButton, __assign$1({ renderLeading: withContainer(iconFill, true, LeadingIcon), renderTrailing: withContainer(iconFill, false, TrailingIcon), disabled: disabled, type: type, onClick: onClick, css: textButtonStyles$1(theme, size), uppercase: uppercase }, { children: text }), void 0));
|
|
4493
4493
|
};
|
|
4494
|
-
var templateObject_1$
|
|
4494
|
+
var templateObject_1$18;
|
|
4495
4495
|
|
|
4496
|
-
var Container$J = newStyled.div(templateObject_1$
|
|
4496
|
+
var Container$J = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 0.88rem;\n"])));
|
|
4497
4497
|
var P$3 = newStyled.p(templateObject_2$J || (templateObject_2$J = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
|
|
4498
4498
|
var PercentageSpan = newStyled.span(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"], ["\n font-weight: 700;\n text-decoration-line: underline;\n cursor: pointer;\n"])));
|
|
4499
4499
|
var SizeFitGuide = function (_a) {
|
|
4500
4500
|
var title = _a.title, fitPercentage = _a.fitPercentage, onClick = _a.onClick, onClickFitPercentage = _a.onClickFitPercentage;
|
|
4501
4501
|
return (jsxs$1(Container$J, { children: [jsx$1(TextButton, { LeadingIcon: Icon.PDP.Rule, size: ComponentSize.Small, text: title, onClick: onClick, uppercase: false }, void 0), !!fitPercentage && (jsxs$1(P$3, { children: ["Fit As Expected:", ' ', jsxs$1(PercentageSpan, __assign$1({ onClick: onClickFitPercentage, role: "button" }, { children: [fitPercentage, "%"] }), void 0)] }, void 0))] }, void 0));
|
|
4502
4502
|
};
|
|
4503
|
-
var templateObject_1$
|
|
4503
|
+
var templateObject_1$17, templateObject_2$J, templateObject_3$w;
|
|
4504
4504
|
|
|
4505
4505
|
var getStylesBySize$6 = function (size) {
|
|
4506
4506
|
switch (size) {
|
|
@@ -4530,7 +4530,7 @@ var getStylesBySize$6 = function (size) {
|
|
|
4530
4530
|
};
|
|
4531
4531
|
}
|
|
4532
4532
|
};
|
|
4533
|
-
var Container$I = newStyled.div(templateObject_1$
|
|
4533
|
+
var Container$I = newStyled.div(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
4534
4534
|
var backgroundColor = _a.backgroundColor;
|
|
4535
4535
|
return backgroundColor;
|
|
4536
4536
|
}, function (_a) {
|
|
@@ -4569,7 +4569,7 @@ var DiscountTag = function (_a) {
|
|
|
4569
4569
|
var theme = useTheme();
|
|
4570
4570
|
return (jsx$1(Container$I, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container" }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style }, { children: [discount, "% ", offText] }), void 0) }), void 0));
|
|
4571
4571
|
};
|
|
4572
|
-
var templateObject_1$
|
|
4572
|
+
var templateObject_1$16, templateObject_2$I;
|
|
4573
4573
|
|
|
4574
4574
|
var getStylesBySize$5 = function (size) {
|
|
4575
4575
|
switch (size) {
|
|
@@ -4599,7 +4599,7 @@ var getStylesBySize$5 = function (size) {
|
|
|
4599
4599
|
};
|
|
4600
4600
|
}
|
|
4601
4601
|
};
|
|
4602
|
-
var Container$H = newStyled.div(templateObject_1$
|
|
4602
|
+
var Container$H = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4603
4603
|
var Price = newStyled.p(templateObject_2$H || (templateObject_2$H = __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) {
|
|
4604
4604
|
var weight = _a.weight;
|
|
4605
4605
|
return (weight ? weight : '400');
|
|
@@ -4634,8 +4634,6 @@ var TagContainer = newStyled.p(templateObject_3$v || (templateObject_3$v = __mak
|
|
|
4634
4634
|
var size = _a.size;
|
|
4635
4635
|
return (_b = getStylesBySize$5(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
4636
4636
|
});
|
|
4637
|
-
var FinalPriceContainer = newStyled.div(templateObject_4$n || (templateObject_4$n = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
4638
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4639
4637
|
function getTestId() {
|
|
4640
4638
|
var args = [];
|
|
4641
4639
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
@@ -4646,21 +4644,18 @@ function getTestId() {
|
|
|
4646
4644
|
var PriceLabel = function (_a) {
|
|
4647
4645
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
4648
4646
|
var theme = useTheme();
|
|
4649
|
-
var finalPriceArray = typeof finalPrice === 'string' && finalPrice.includes('.') && finalPrice.includes('$')
|
|
4650
|
-
? finalPrice.split('$')[1].split('.')
|
|
4651
|
-
: ['', ''];
|
|
4652
|
-
var availableFinalPriceStyled = finalPriceStyled && finalPriceArray[0];
|
|
4653
4647
|
var priceCommonProps = {
|
|
4654
4648
|
size: finalPriceStyled ? ComponentSize.Small : size,
|
|
4655
4649
|
color: color || theme.colors.pallete.secondary.color,
|
|
4656
4650
|
weight: 700,
|
|
4657
4651
|
};
|
|
4658
4652
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
4659
|
-
return (jsxs$1(Container$H, { children: [
|
|
4653
|
+
return (jsxs$1(Container$H, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle }, { children: finalPrice }), void 0), originalPrice && jsx$1(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));
|
|
4660
4654
|
};
|
|
4661
|
-
var templateObject_1$
|
|
4655
|
+
var templateObject_1$15, templateObject_2$H, templateObject_3$v;
|
|
4662
4656
|
|
|
4663
|
-
var
|
|
4657
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4658
|
+
var PriceLabelV2 = function (_a) {
|
|
4664
4659
|
var _b;
|
|
4665
4660
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
4666
4661
|
var theme = useTheme();
|
|
@@ -4677,7 +4672,8 @@ var PriceLabelHomeColPDP = function (_a) {
|
|
|
4677
4672
|
};
|
|
4678
4673
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.colors.shades['300'].color, margin: true, underlined: true, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
4679
4674
|
return (jsxs$1(Container$H, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-5px' } }, priceCommonProps, { children: "$" }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split('$')[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { fontSize: '14px', marginTop: '-6px' } }, priceCommonProps, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: { fontSize: '14px', letterSpacing: '-0.05rem' } }), void 0)) }), void 0))] }, void 0));
|
|
4680
|
-
};
|
|
4675
|
+
};
|
|
4676
|
+
var templateObject_1$14;
|
|
4681
4677
|
|
|
4682
4678
|
var OneColorSelector = function (_a) {
|
|
4683
4679
|
var color = _a.color, selected = _a.selected, testId = _a.testId;
|
|
@@ -12184,7 +12180,7 @@ var getStylesBySize = function (size) {
|
|
|
12184
12180
|
var TopTagContainer$1 = newStyled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n width: inherit;\n"])));
|
|
12185
12181
|
var BottomTagContainer$1 = newStyled.div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n"], ["\n position: absolute;\n bottom: 15%;\n left: 0;\n width: inherit;\n"])));
|
|
12186
12182
|
var ProductItemMobile = function (_a) {
|
|
12187
|
-
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick;
|
|
12183
|
+
var title = _a.title, image = _a.image, price = _a.price, rating = _a.rating, size = _a.size, _b = _a.alignName, alignName = _b === void 0 ? 'center' : _b, url = _a.url, className = _a.className, topTag = _a.topTag, bottomTag = _a.bottomTag, onClick = _a.onClick, _c = _a.priceDisplayType, priceDisplayType = _c === void 0 ? 'default' : _c;
|
|
12188
12184
|
var theme = useTheme();
|
|
12189
12185
|
var styles = getStylesBySize(size);
|
|
12190
12186
|
var space = useMemo(function () {
|
|
@@ -12195,7 +12191,7 @@ var ProductItemMobile = function (_a) {
|
|
|
12195
12191
|
_a[ComponentSize.Small] = 2,
|
|
12196
12192
|
_a)[size];
|
|
12197
12193
|
}, [size]);
|
|
12198
|
-
return (jsxs(Container$j, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), jsx(
|
|
12194
|
+
return (jsxs(Container$j, __assign$1({ as: url ? 'a' : 'div', href: url, className: className, onClick: onClick }, { children: [!!topTag || !!bottomTag ? (jsxs(ImageContainer, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image, { src: image.src, alt: image.alt, width: "100%", height: "100%" }, void 0), jsx(TopTagContainer$1, { children: topTag }, void 0), jsx(BottomTagContainer$1, { children: bottomTag }, void 0)] }), void 0)) : (jsx(Image, { src: image.src, alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(Title$2, __assign$1({ theme: theme, align: alignName }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), priceDisplayType === 'styled' ? (jsx(PriceLabelV2, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount" }, void 0)) : (jsx(PriceLabel, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount" }, void 0)), jsx(Spacing, { size: space }, void 0), jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0)] }), void 0));
|
|
12199
12195
|
};
|
|
12200
12196
|
var templateObject_1$s, templateObject_2$g, templateObject_3$e, templateObject_4$8;
|
|
12201
12197
|
|
|
@@ -17316,5 +17312,5 @@ var AccordionOptions = function (_a) {
|
|
|
17316
17312
|
};
|
|
17317
17313
|
var templateObject_1;
|
|
17318
17314
|
|
|
17319
|
-
export { Accordion$1 as Accordion, AccordionOptions, 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, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel,
|
|
17315
|
+
export { Accordion$1 as Accordion, AccordionOptions, 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, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, 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, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, decimalFormat, formatPrice, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
17320
17316
|
//# sourceMappingURL=index.esm.js.map
|