@trafilea/afrodita-components 6.1.0 → 6.1.1

package/build/index.esm.js

@@ -4547,6 +4547,15 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
     literal: true,
 });
 
+var ErrorText = newStyled.h3(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"], ["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"])), function (props) { return props.color; });
+var ErrorContainer = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 12px;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 12px;\n"])));
+var Error$1 = function (_a) {
+    var error = _a.error;
+    var theme = useTheme();
+    return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
+};
+var templateObject_1$1F, templateObject_2$15;
+
 var BaseSelectButton = function (_a) {
     var children = _a.children, as = _a.as;
     return jsx$1(Ee.Button, __assign$1({ as: as }, { children: children }), void 0);
@@ -4562,7 +4571,7 @@ function BaseSelectOption(_a) {
     return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
 }
 
-var CustomListBox = newStyled(Ee)(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var CustomListBox = newStyled(Ee)(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 function BaseSelect(_a) {
     var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
     return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
@@ -4572,7 +4581,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
     Options: BaseSelectOptions,
     Option: BaseSelectOption,
 });
-var templateObject_1$1F;
+var templateObject_1$1E;
 
 var CustomButton = newStyled.button(function (_a) {
     var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
@@ -4611,17 +4620,17 @@ var CustomButton = newStyled.button(function (_a) {
     });
 });
 var BaseDropdownButton = function (_a) {
-    var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter;
+    var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter, testId = _a.testId;
     var theme = useTheme();
     return (jsx(BaseSelect$1.Button, __assign$1({ as: Fragment$1 }, { children: function (_a) {
             var open = _a.open;
-            return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, isSortOrFilter: isSortOrFilter }, { children: [children, open ? (jsx(CloseIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0)) : (jsx(OpenIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0))] }), void 0));
+            return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, "data-testid": testId, isSortOrFilter: isSortOrFilter }, { children: [children, open ? (jsx(CloseIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0)) : (jsx(OpenIcon, { height: 0.875, width: 0.875, fill: "inherit" }, void 0))] }), void 0));
         } }), void 0));
 };
 var withLabel = function (Button, label) {
     return function WithLabel(_a) {
-        var CloseIcon = _a.CloseIcon, OpenIcon = _a.OpenIcon, children = _a.children, wide = _a.wide;
-        return (jsx(Button, __assign$1({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide }, { children: jsxs("div", __assign$1({ css: {
+        var CloseIcon = _a.CloseIcon, OpenIcon = _a.OpenIcon, children = _a.children, testId = _a.testId, wide = _a.wide;
+        return (jsx(Button, __assign$1({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide, "data-testid": testId }, { children: jsxs("div", __assign$1({ css: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'flex-start',
@@ -4631,15 +4640,6 @@ var withLabel = function (Button, label) {
     };
 };
 
-var ErrorText = newStyled.h3(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"], ["\n  color: ", " !important;\n  font-size: 0.75rem;\n  font-weight: 600;\n  margin: 0;\n  font-height: 1rem;\n  margin-left: 0.313rem;\n"])), function (props) { return props.color; });
-var ErrorContainer = newStyled.div(templateObject_2$15 || (templateObject_2$15 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 12px;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 12px;\n"])));
-var Error$1 = function (_a) {
-    var error = _a.error;
-    var theme = useTheme();
-    return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
-};
-var templateObject_1$1E, templateObject_2$15;
-
 var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
     var theme = _a.theme;
     return ({
@@ -4913,7 +4913,7 @@ function SimpleDropdown(_a) {
     }, [value, options, initialValue]);
     var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
     var DropdownContainer = showRequiredPlaceholder ? Container$12 : Fragment$1;
-    return (jsxs$1(DropdownContainer, { children: [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: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
+    return (jsxs$1(DropdownContainer, { children: [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, 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: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
 }
 var templateObject_1$1C, templateObject_2$13;
 
@@ -5596,9 +5596,9 @@ var Autoship = function (_a) {
         onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
     };
     var benefitsColor = benefitsColorMapper(theme);
-    return (jsxs$1(Container$Z, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer, __assign$1({ selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice, { finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice, { finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
+    return (jsxs$1(Container$Z, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
                                         ? benefitsColor.selected
-                                        : benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
+                                        : benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px" }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
 };
 
 var Img = newStyled.img(templateObject_1$1u || (templateObject_1$1u = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"], ["\n  height: ", ";\n  width: ", ";\n  border-radius: ", ";\n  object-fit: ", ";\n  object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
@@ -6449,7 +6449,7 @@ var sizeMapper = (_a = {},
     _a[ComponentSize.Large] = 'large',
     _a[ComponentSize.XSmall] = 'small',
     _a);
-var StyledBaseButton = newStyled(BaseButton)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n  width: ", ";\n  font-size: ", ";\n  padding: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"], ["\n  width: ", ";\n  font-size: ", ";\n  padding: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), function (_a) {
+var StyledBaseButton = newStyled(BaseButton)(templateObject_1$14 || (templateObject_1$14 = __makeTemplateObject(["\n  width: ", ";\n  font-size: ", ";\n  padding: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n  svg {\n    color: inherit;\n  }\n"], ["\n  width: ", ";\n  font-size: ", ";\n  padding: ", ";\n  font-weight: ", ";\n  border-radius: ", ";\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n  svg {\n    color: inherit;\n  }\n"])), function (_a) {
     var wide = _a.wide;
     return (wide ? '100%' : 'fit-content');
 }, function (_a) {
@@ -6471,10 +6471,7 @@ var StyledBaseButton = newStyled(BaseButton)(templateObject_1$14 || (templateObj
     var theme = _a.theme;
     return theme.colors.text.disabled;
 });
-var StyledIcon = newStyled(Icon$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n  margin-right: 10px;\n  ", ":hover & {\n    color: ", ";\n  }\n"], ["\n  margin-right: 10px;\n  ", ":hover & {\n    color: ", ";\n  }\n"])), StyledBaseButton, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.shades[700].color;
-});
+var StyledIcon = newStyled(Icon$1)(templateObject_2$M || (templateObject_2$M = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));
 var templateObject_1$14, templateObject_2$M;
 
 var BaseCTA = function (_a) {