@trafilea/afrodita-components 5.0.0-beta.61 → 5.0.0-beta.64

package/build/index.d.ts

@@ -1296,6 +1296,7 @@ interface BaseInputCommmonProps {
     hasError?: boolean;
     inputType?: 'text' | 'email' | 'password' | 'url';
     name?: string;
+    autoFocus?: boolean;
 }
 interface BaseInputControlled extends BaseInputCommmonProps {
     value: string;
@@ -1344,7 +1345,7 @@ declare type CustomProps = BaseInputProps & {
 };
 
 declare const Input: {
-    Simple: ({ value, onChange, defaultValue, label, children, required, onValidation, size, placeholder, inlinePlaceholder, hasError, inputType, name, ...rest }: BaseInputProps) => JSX.Element;
+    Simple: ({ value, onChange, defaultValue, label, children, required, onValidation, size, placeholder, inlinePlaceholder, hasError, inputType, ...rest }: BaseInputProps) => JSX.Element;
     Custom: ({ onClick, text, variant, ...rest }: CustomProps) => JSX.Element;
     SimplePlusButton: ({ onClick, onClickEdit, text, success, editText, successText, ...rest }: BasePlusButtonProps) => JSX.Element;
     SimplePlusIcon: ({ Icon, ...rest }: BasePlusIconProps) => JSX.Element;
@@ -1916,6 +1917,15 @@ interface IconList {
 }
 declare const IconsWithTitle: ({ iconName, iconTitle, backgroundColor, iconColor }: IconList) => JSX.Element | null;
 
+interface NoteProps {
+    accentColor: string;
+    color: string;
+    backgroundColor: string;
+    importantNoteText: string;
+    text: string;
+}
+declare const Note: ({ accentColor, color, backgroundColor, importantNoteText, text, }: NoteProps) => JSX.Element;
+
 declare global {
     interface Events {
         modal: {
@@ -1955,4 +1965,4 @@ declare const formatPrice: (value: number, { locale, currency }?: {
     currency?: string | undefined;
 }) => string;
 
-export { Accordion, 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, OfferBanner, OrderBar, Overlay, PackSelector, Pagination, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, 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, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, 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, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, 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, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, decimalFormat, formatPrice, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, modalEvent, simulateMouseClick, sliceString, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.js

@@ -11545,7 +11545,7 @@ var templateObject_1$K, templateObject_2$t, templateObject_3$n, templateObject_4
 
 var BaseInput = function (_a) {
     var _b;
-    var value = _a.value, onChange = _a.onChange, _c = _a.defaultValue, defaultValue = _c === void 0 ? '' : _c, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _d = _a.inputType, inputType = _d === void 0 ? 'text' : _d, name = _a.name, rest = __rest(_a, ["value", "onChange", "defaultValue", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType", "name"]);
+    var value = _a.value, onChange = _a.onChange, _c = _a.defaultValue, defaultValue = _c === void 0 ? '' : _c, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, size = _a.size, placeholder = _a.placeholder, inlinePlaceholder = _a.inlinePlaceholder, hasError = _a.hasError, _d = _a.inputType, inputType = _d === void 0 ? 'text' : _d, rest = __rest(_a, ["value", "onChange", "defaultValue", "label", "children", "required", "onValidation", "size", "placeholder", "inlinePlaceholder", "hasError", "inputType"]);
     var theme = useTheme();
     var _e = useState((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : ''), internalValue = _e[0], setInternalValue = _e[1];
     var _f = useState(InputValidationType.Empty), status = _f[0], setStatus = _f[1];
@@ -11606,7 +11606,7 @@ var BaseInput = function (_a) {
             ? theme.colors.shades['700'].color
             : status === InputValidationType.Error
                 ? theme.colors.semantic.urgent.color
-                : '', hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ "data-testid": "base-input", type: inputType, onChange: handleChange, onBlur: validate, required: Boolean(required), value: internalValue, placeholder: inlinePlaceholder ? '' : placeholder, name: name }, rest, styling), void 0), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), inlinePlaceholder && internalValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
+                : '', hasError: hasError }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size, inlinePlaceholder: inlinePlaceholder }, { children: [jsx$1(StyledInput, __assign$1({ "data-testid": "base-input", type: inputType, onChange: handleChange, onBlur: validate, required: Boolean(required), value: internalValue, placeholder: inlinePlaceholder ? '' : placeholder }, rest, styling), void 0), inlinePlaceholder && (jsx$1(AnimatedPlaceholder, __assign$1({ "data-testid": "input-placeholder" }, { children: placeholder }), void 0)), children] }), void 0), inlinePlaceholder && internalValue && (jsx$1(ClearInput, __assign$1({ onClick: function () {
                     if (onChange) {
                         onChange('');
                     }
@@ -11778,7 +11778,7 @@ var Text$3 = newStyled.p(templateObject_3$j || (templateObject_3$j = __makeTempl
 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; });
 var Note = function (_a) {
     var accentColor = _a.accentColor, color = _a.color, backgroundColor = _a.backgroundColor, importantNoteText = _a.importantNoteText, text = _a.text;
-    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$3, __assign$1({ color: color }, { children: [jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
+    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$3, __assign$1({ color: color }, { children: [importantNoteText && jsxs$1(Details, __assign$1({ color: accentColor }, { children: [importantNoteText, ":"] }), void 0), " ", text] }), void 0) }, void 0)] }), void 0));
 };
 var templateObject_1$B, templateObject_2$n, templateObject_3$j, templateObject_4$e;
 
@@ -17053,7 +17053,7 @@ var Tabs = function (_a) {
 };
 var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
 
-var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 150px;\n  height: auto;\n  text-align: center;\n"], ["\n  width: 150px;\n  height: auto;\n  text-align: center;\n"])));
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  text-align: center;\n"], ["\n  height: auto;\n  text-align: center;\n"])));
 var IconWrapper = newStyled.div(function (props) { return ({
     borderRadius: '500px',
     width: '120px',
@@ -17063,17 +17063,22 @@ var IconWrapper = newStyled.div(function (props) { return ({
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: props.backgroundColor,
+    '@media (max-width: 767px)': {
+        width: '80px',
+        height: '80px',
+    },
 }); });
 var IconsWithTitle = function (_a) {
     var _b;
     var iconName = _a.iconName, iconTitle = _a.iconTitle, backgroundColor = _a.backgroundColor, iconColor = _a.iconColor;
+    var isMobile = useWindowDimensions({ mobile: 0, desktop: 768 }).isMobile;
     // @ts-ignore
     var IconComponent = (_b = Icon['MyAccount'][iconName]) !== null && _b !== void 0 ? _b : (function () { return 'Not found'; });
     if (IconComponent == null) {
         console.error('Icon', iconName, 'not found');
         return null;
     }
-    return (jsx$1(Fragment$1, { children: jsxs$1(Container, { children: [jsx$1(IconWrapper, __assign$1({ backgroundColor: backgroundColor }, { children: jsx$1(IconComponent, { width: 4, height: 4, fill: iconColor }, void 0) }), void 0), jsx$1(Text$5, __assign$1({ variant: "heading6", style: {
+    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$5, __assign$1({ variant: "heading6", style: {
                         fontSize: '14px',
                         textTransform: 'uppercase',
                         textAlign: 'center',
@@ -17082,5 +17087,5 @@ var IconsWithTitle = function (_a) {
 };
 var templateObject_1;
 
-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, 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$5 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 };
+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$5 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 };
 //# sourceMappingURL=index.esm.js.map