@trafilea/afrodita-components 5.0.0-beta.48 → 5.0.0-beta.49

package/build/index.d.ts

@@ -150,6 +150,8 @@ declare const Close: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const Trash: ({ height, width, fill }: IconProps) => JSX.Element;
 
+declare const Warning: ({ height, width, fill }: IconProps) => JSX.Element;
+
 declare const Edit: ({ height, width, fill }: IconProps) => JSX.Element;
 
 declare const SignOut: ({ height, width, fill }: IconProps) => JSX.Element;
@@ -162,6 +164,7 @@ declare const Actions_LightCheck: typeof LightCheck;
 declare const Actions_Question: typeof Question;
 declare const Actions_Close: typeof Close;
 declare const Actions_Trash: typeof Trash;
+declare const Actions_Warning: typeof Warning;
 declare const Actions_Edit: typeof Edit;
 declare const Actions_SignOut: typeof SignOut;
 declare namespace Actions {
@@ -174,6 +177,7 @@ declare namespace Actions {
     Actions_Question as Question,
     Actions_Close as Close,
     Actions_Trash as Trash,
+    Actions_Warning as Warning,
     Actions_Edit as Edit,
     Actions_SignOut as SignOut,
   };
@@ -836,6 +840,12 @@ declare type ThemeComponent = {
         lineHeight: string;
         border: string;
         boxShadow: string;
+        errorBorder: string;
+    };
+    inputPlaceholder: {
+        fontSize: string;
+        padding: string;
+        focusBorder: string;
     };
     inputCustom: {
         button: {
@@ -1196,6 +1206,9 @@ interface BaseInputCommmonProps {
     required?: string;
     children?: React.ReactNode;
     size?: 'regular' | 'small';
+    inlinePlaceholder?: boolean;
+    hasError?: boolean;
+    inputType?: 'text' | 'email' | 'password' | 'url';
 }
 interface BaseInputControlled extends BaseInputCommmonProps {
     value: string;
@@ -1244,7 +1257,7 @@ declare type CustomProps = BaseInputProps & {
 };
 
 declare const Input: {
-    Simple: ({ value, onChange, defaultValue, label, children, required, onValidation, size, ...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;
@@ -1784,7 +1797,7 @@ interface SearchNavigationProps {
 }
 declare const SearchNavigation: ({ returnText, returnUrl, steps, returnAction, }: SearchNavigationProps) => JSX.Element;
 
-interface TabProps {
+interface TabProps$1 {
     title: string;
     content: ReactNode;
 }
@@ -1792,10 +1805,22 @@ interface TabsProps {
     backgroundColor?: string;
     initialSelected?: string;
     tabsMaxWidth?: string;
-    tabs: TabProps[];
+    tabs: TabProps$1[];
 }
 declare const Tabs: ({ backgroundColor, tabs, initialSelected, tabsMaxWidth, }: TabsProps) => JSX.Element | null;
 
+interface TabProps {
+    title: string;
+    titleSize?: string;
+    selectedTitleWeight?: number;
+    height?: string;
+    selected?: boolean;
+    color?: string;
+    tabsMaxWidth?: string;
+    onClick: (clickedTab: string) => void;
+}
+declare const Tab: ({ title, titleSize, height, selectedTitleWeight, selected, onClick, color, tabsMaxWidth, }: TabProps) => JSX.Element;
+
 declare global {
     interface Events {
         modal: {
@@ -1835,4 +1860,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, Color, 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, 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, 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, Color, 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, 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 };

package/build/index.esm.js

@@ -112,6 +112,11 @@ var Trash = function (_a) {
     return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 16, viewBoxY: 20, title: "trash" }, { children: jsx$1("path", { d: "M10.5714 16.875H11.1429C11.2186 16.875 11.2913 16.8421 11.3449 16.7835C11.3985 16.7249 11.4286 16.6454 11.4286 16.5625V5.9375C11.4286 5.85462 11.3985 5.77513 11.3449 5.71653C11.2913 5.65792 11.2186 5.625 11.1429 5.625H10.5714C10.4957 5.625 10.423 5.65792 10.3694 5.71653C10.3158 5.77513 10.2857 5.85462 10.2857 5.9375V16.5625C10.2857 16.6454 10.3158 16.7249 10.3694 16.7835C10.423 16.8421 10.4957 16.875 10.5714 16.875ZM4.85714 16.875H5.42857C5.50435 16.875 5.57702 16.8421 5.6306 16.7835C5.68418 16.7249 5.71429 16.6454 5.71429 16.5625V5.9375C5.71429 5.85462 5.68418 5.77513 5.6306 5.71653C5.57702 5.65792 5.50435 5.625 5.42857 5.625H4.85714C4.78137 5.625 4.70869 5.65792 4.65511 5.71653C4.60153 5.77513 4.57143 5.85462 4.57143 5.9375V16.5625C4.57143 16.6454 4.60153 16.7249 4.65511 16.7835C4.70869 16.8421 4.78137 16.875 4.85714 16.875ZM15.7143 2.5H12L10.8 0.75C10.6403 0.517132 10.4333 0.328126 10.1952 0.197949C9.95719 0.067772 9.69471 0 9.42857 0L6.57143 0C6.30529 0 6.04282 0.067772 5.80478 0.197949C5.56674 0.328126 5.35968 0.517132 5.2 0.75L4 2.5H0.285714C0.209938 2.5 0.137266 2.53292 0.0836838 2.59153C0.030102 2.65013 0 2.72962 0 2.8125L0 3.4375C0 3.52038 0.030102 3.59987 0.0836838 3.65847C0.137266 3.71708 0.209938 3.75 0.285714 3.75H1.14286V18.125C1.14286 18.6223 1.32347 19.0992 1.64496 19.4508C1.96645 19.8025 2.40249 20 2.85714 20H13.1429C13.5975 20 14.0336 19.8025 14.355 19.4508C14.6765 19.0992 14.8571 18.6223 14.8571 18.125V3.75H15.7143C15.7901 3.75 15.8627 3.71708 15.9163 3.65847C15.9699 3.59987 16 3.52038 16 3.4375V2.8125C16 2.72962 15.9699 2.65013 15.9163 2.59153C15.8627 2.53292 15.7901 2.5 15.7143 2.5ZM6.11429 1.5C6.1677 1.4226 6.23676 1.35976 6.31607 1.31639C6.39537 1.27302 6.48277 1.2503 6.57143 1.25H9.42857C9.51723 1.2503 9.60463 1.27302 9.68394 1.31639C9.76324 1.35976 9.8323 1.4226 9.88571 1.5L10.5714 2.5H5.42857L6.11429 1.5ZM13.7143 18.125C13.7143 18.2908 13.6541 18.4497 13.5469 18.5669C13.4398 18.6842 13.2944 18.75 13.1429 18.75H2.85714C2.70559 18.75 2.56025 18.6842 2.45308 18.5669C2.34592 18.4497 2.28571 18.2908 2.28571 18.125V3.75H13.7143V18.125ZM7.71429 16.875H8.28572C8.36149 16.875 8.43416 16.8421 8.48775 16.7835C8.54133 16.7249 8.57143 16.6454 8.57143 16.5625V5.9375C8.57143 5.85462 8.54133 5.77513 8.48775 5.71653C8.43416 5.65792 8.36149 5.625 8.28572 5.625H7.71429C7.63851 5.625 7.56584 5.65792 7.51226 5.71653C7.45867 5.77513 7.42857 5.85462 7.42857 5.9375V16.5625C7.42857 16.6454 7.45867 16.7249 7.51226 16.7835C7.56584 16.8421 7.63851 16.875 7.71429 16.875Z", fill: fill }, void 0) }), void 0));
 };
 
+var Warning = function (_a) {
+    var height = _a.height, width = _a.width, fill = _a.fill;
+    return (jsxs$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 500, viewBoxY: 500, title: "warning" }, { children: [jsx$1("path", { d: "M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4\n\t\t\tC268.225,344.682,256.925,333.382,243.225,333.382z", fill: fill }, void 0), jsx$1("path", { d: "M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4\n\t\t\tl-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8\n\t\t\tC430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8\n\t\t\tc-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8\n\t\t\tl156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z", fill: fill }, void 0), jsx$1("path", { d: "M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7\n\t\t\tc0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9\n\t\t\tc0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z", fill: fill }, void 0)] }), void 0));
+};
+
 var Edit = function (_a) {
     var height = _a.height, width = _a.width, fill = _a.fill;
     return (jsx$1(IconWrapper, __assign$1({ width: width, height: height, viewBoxX: 25, viewBoxY: 24, title: "Edit" }, { children: jsx$1("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.1753 4.97694C21.6993 4.45768 21.9914 3.85188 22 3.09895C21.9828 2.5018 21.7938 1.94793 21.3815 1.48059C21.1066 1.17769 20.8145 0.892099 20.5139 0.615161C20.0757 0.208407 19.5431 0.00935792 18.9504 0.000703593C18.1945 -0.0166051 17.5759 0.286296 17.0519 0.81421C13.9422 3.94708 10.8239 7.07994 7.69699 10.2042C7.40492 10.5071 7.20734 10.8273 7.09566 11.2427C6.82455 12.2952 6.53308 13.3426 6.24084 14.3928C6.15342 14.7069 6.06594 15.0213 5.97891 15.3362C5.87583 15.691 5.95314 15.9333 6.19367 16.0804C6.37407 16.1929 6.56306 16.1583 6.75205 16.1064C7.11291 16.0054 7.47377 15.9022 7.83484 15.799C8.71151 15.5483 9.58945 15.2972 10.4717 15.0765C11.1246 14.9121 11.6228 14.5919 12.0953 14.1159C15.1105 11.0523 18.1429 8.01461 21.1753 4.97694ZM15.1064 9.43803C13.7813 10.7709 12.4561 12.1037 11.1331 13.4322L8.64193 10.9225C9.96489 9.59399 11.29 8.26118 12.6151 6.92838C13.9401 5.59565 15.2652 4.26292 16.588 2.93452L19.0793 5.44427C17.7564 6.77264 16.4314 8.10533 15.1064 9.43803ZM19.9469 4.67404C19.0793 3.7913 18.2374 2.94317 17.3612 2.06043C17.4173 2.00608 17.4734 1.95064 17.5298 1.89493C17.6978 1.72886 17.8683 1.56041 18.0484 1.41136C18.5123 1.02191 19.2339 1.00461 19.6978 1.39405C20.0328 1.67099 20.3421 1.98254 20.6255 2.32006C20.9949 2.76143 20.9863 3.47109 20.6427 3.92977C20.5826 4.00766 20.5139 4.08555 20.4451 4.15478C20.3581 4.24243 20.2733 4.33231 20.1896 4.42103C20.108 4.5075 20.0275 4.59288 19.9469 4.67404ZM10.0334 14.0464L10.0336 14.0467C9.14877 14.289 8.22959 14.5486 7.26747 14.8256C7.36412 14.4738 7.45852 14.1277 7.55147 13.7868C7.71461 13.1886 7.87331 12.6067 8.03201 12.0389C8.6934 12.6965 9.36338 13.3715 10.0334 14.0464ZM2.85201 22H10.4373C11.5197 22 12.6107 22 13.6931 21.9827C14.0755 21.9827 14.4579 21.9838 14.8402 21.9849C15.9865 21.9881 17.1315 21.9914 18.2718 21.9654C19.6376 21.9394 20.8059 20.7538 20.8317 19.3778C20.8501 18.4446 20.8466 17.5159 20.8431 16.5853C20.8417 16.2126 20.8403 15.8397 20.8403 15.466C20.8403 15.0852 20.8403 14.7044 20.8317 14.3236C20.8231 13.9688 20.4967 13.7265 20.1617 13.8044C19.9125 13.865 19.7493 14.0986 19.7493 14.4102V19.1008C19.7493 20.1913 19.0535 20.8923 17.9797 20.8923H2.8606C2.6802 20.8923 2.4998 20.875 2.328 20.8317C1.52909 20.6153 1.09098 19.9922 1.09098 19.0835V5.0462C1.09098 4.86446 1.09957 4.68272 1.14252 4.50963C1.34869 3.71344 1.97579 3.23745 2.81765 3.23745H7.48223C7.59391 3.23745 7.71417 3.22879 7.81726 3.18552C8.05779 3.08167 8.18665 2.82204 8.1351 2.58837C8.08356 2.31144 7.8688 2.13835 7.54237 2.13835C7.08585 2.13835 6.62932 2.13694 6.1728 2.13552C5.03151 2.13199 3.89022 2.12846 2.74893 2.147C1.1597 2.17297 0 3.35861 0 4.94235C0 9.70223 0 14.4621 0.00859039 19.222C0.00859039 19.5335 0.0601328 19.8538 0.163217 20.148C0.558376 21.3077 1.56345 22 2.85201 22Z", fill: fill }, void 0) }), void 0));
@@ -131,6 +136,7 @@ var Actions = /*#__PURE__*/Object.freeze({
     Question: Question,
     Close: Close,
     Trash: Trash,
+    Warning: Warning,
     Edit: Edit,
     SignOut: SignOut
 });
@@ -4131,8 +4137,8 @@ var TAGS = {
     hero1: newStyled.h1(templateObject_1$16 || (templateObject_1$16 = __makeTemplateObject([""], [""]))),
     hero2: newStyled.h2(templateObject_2$I || (templateObject_2$I = __makeTemplateObject([""], [""]))),
     hero3: newStyled.h3(templateObject_3$v || (templateObject_3$v = __makeTemplateObject([""], [""]))),
-    display1: newStyled.h1(templateObject_4$l || (templateObject_4$l = __makeTemplateObject([""], [""]))),
-    display2: newStyled.h2(templateObject_5$c || (templateObject_5$c = __makeTemplateObject([""], [""]))),
+    display1: newStyled.h1(templateObject_4$m || (templateObject_4$m = __makeTemplateObject([""], [""]))),
+    display2: newStyled.h2(templateObject_5$d || (templateObject_5$d = __makeTemplateObject([""], [""]))),
     heading1: newStyled.h1(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject([""], [""]))),
     heading2: newStyled.h2(templateObject_7$5 || (templateObject_7$5 = __makeTemplateObject([""], [""]))),
     heading3: newStyled.h3(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject([""], [""]))),
@@ -4251,7 +4257,7 @@ var DEFAULTS = {
         size: 'regular',
     },
 };
-var templateObject_1$16, templateObject_2$I, templateObject_3$v, templateObject_4$l, templateObject_5$c, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+var templateObject_1$16, templateObject_2$I, templateObject_3$v, templateObject_4$m, templateObject_5$d, templateObject_6$8, templateObject_7$5, templateObject_8$2, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
 
 var ButtonsContainer = newStyled.div(templateObject_1$15 || (templateObject_1$15 = __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) {
     var inline = _a.inline;
@@ -4498,8 +4504,8 @@ var OutOfStock = function (_a) {
 var CustomRadioGroup = newStyled(lt)(templateObject_1$10 || (templateObject_1$10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 newStyled(lt.Label)(templateObject_2$E || (templateObject_2$E = __makeTemplateObject(["\n  font-size: 0.88rem;\n"], ["\n  font-size: 0.88rem;\n"])));
 var CustomRadioGroupOption = newStyled(lt.Option)(templateObject_3$s || (templateObject_3$s = __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"])));
-var Span = newStyled.span(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
-var OptionsContainer = newStyled.div(templateObject_5$b || (templateObject_5$b = __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"])));
+var Span = newStyled.span(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n  font-weight: 600;\n"], ["\n  font-weight: 600;\n"])));
+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"])));
 var Label$2 = function (_a) {
     var label = _a.label, values = _a.values;
     return (jsxs$1(Text$5, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [label, " ", jsx$1(Span, { children: values }, void 0)] }), void 0));
@@ -4517,7 +4523,7 @@ var ColorRadioGroup$1 = Object.assign(ColorRadioGroup, {
     Option: Option,
     OptionsContainer: OptionsContainer,
 });
-var templateObject_1$10, templateObject_2$E, templateObject_3$s, templateObject_4$k, templateObject_5$b;
+var templateObject_1$10, templateObject_2$E, templateObject_3$s, templateObject_4$l, templateObject_5$c;
 
 var Container$D = newStyled.div(templateObject_1$$ || (templateObject_1$$ = __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) {
     var borderColor = _a.borderColor;
@@ -8912,7 +8918,7 @@ var Container$C = newStyled.div(templateObject_3$r || (templateObject_3$r = __ma
     var position = _a.position;
     return (position == 'horizontal' ? horizontalStyles : verticalStyles);
 });
-var Button$3 = newStyled.button(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"])));
+var Button$3 = newStyled.button(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n  outline: none;\n"])));
 var ImagePreviewList = function (_a) {
     var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId, position = _a.position;
     return (jsx$1(Container$C, __assign$1({ "data-testid": dataTestId, position: position, className: position }, { children: position == 'horizontal' ? (jsx$1("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsx$1(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
@@ -8921,7 +8927,7 @@ var ImagePreviewList = function (_a) {
                     arrowPadding: 1.625,
                 }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key)); })) }), void 0));
 };
-var templateObject_1$Y, templateObject_2$C, templateObject_3$r, templateObject_4$j;
+var templateObject_1$Y, templateObject_2$C, templateObject_3$r, templateObject_4$k;
 
 var propTypes = {exports: {}};
 
@@ -10920,17 +10926,17 @@ var TooltipArrowContainer = newStyled.div(templateObject_3$p || (templateObject_
     var position = _a.position;
     return getArrowContainerMargin(position);
 });
-var TooltipText = newStyled.div(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  color: ", ";\n"])), function (_a) {
+var TooltipText = newStyled.div(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 0.875rem;\n  line-height: 1.125rem;\n  margin: 0;\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var TopSection = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"])));
+var TopSection = newStyled.div(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 0.688rem;\n"])));
 var Title$5 = newStyled.h1(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"], ["\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.375rem;\n  margin: 0;\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
 var IconContainer$5 = newStyled.div(templateObject_7$4 || (templateObject_7$4 = __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"])));
-var templateObject_1$Q, templateObject_2$z, templateObject_3$p, templateObject_4$i, templateObject_5$a, templateObject_6$7, templateObject_7$4;
+var templateObject_1$Q, templateObject_2$z, templateObject_3$p, templateObject_4$j, templateObject_5$b, templateObject_6$7, templateObject_7$4;
 
 var Tooltip = function (_a) {
     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;
@@ -11127,13 +11133,13 @@ var templateObject_1$O, templateObject_2$x;
 var Container$s = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  padding: 0.625rem 1.5rem;\n"], ["\n  padding: 0.625rem 1.5rem;\n"])));
 var Title$4 = newStyled.h1(templateObject_2$w || (templateObject_2$w = __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; });
 var Details$1 = newStyled.span(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 1rem;\n  margin: 0;\n  line-height: 1.5rem;\n  justify-content: center;\n  color: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: 1rem;\n  margin: 0;\n  line-height: 1.5rem;\n  justify-content: center;\n  color: ", ";\n"])), function (props) { return props.color; });
-var PriceContainer$1 = newStyled.span(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"])));
+var PriceContainer$1 = newStyled.span(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"], ["\n  margin: 0 0.313rem;\n  display: flex;\n  align-items: center;\n"])));
 var Simple = function (_a) {
     var title = _a.title, freeShippingText = _a.freeShippingText, price = _a.price, anyQtyForText = _a.anyQtyForText, backgroundColor = _a.backgroundColor, _b = _a.widthAuto, widthAuto = _b === void 0 ? false : _b;
     var theme = useTheme();
     return (jsx$1(Card$2, __assign$1({ backgroundColor: backgroundColor, widthAuto: widthAuto }, { children: jsxs$1(Container$s, { children: [jsx$1(Title$4, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Title" }, { children: title }), void 0), jsxs$1(Details$1, __assign$1({ color: theme.colors.pallete.secondary.color, "data-testid": "Details" }, { children: [anyQtyForText, jsx$1(PriceContainer$1, __assign$1({ "data-testid": "Price" }, { children: jsx$1(PriceLabel, { finalPrice: price, color: "#d3373c", size: ComponentSize.Small }, void 0) }), void 0), "+ ", freeShippingText] }), void 0)] }, void 0) }), void 0));
 };
-var templateObject_1$N, templateObject_2$w, templateObject_3$o, templateObject_4$h;
+var templateObject_1$N, templateObject_2$w, templateObject_3$o, templateObject_4$i;
 
 var Bundle = {
     Minimalistic: Minimalistic,
@@ -11324,11 +11330,11 @@ var Error$1 = function (_a) {
 };
 var templateObject_1$K, templateObject_2$u;
 
-var Container$q = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  input {\n    border-color: ", ";\n  }\n"], ["\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
-    var color = _a.color;
-    return color;
+var Container$q = newStyled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n  position: relative;\n  input {\n    border-color: ", ";\n  }\n"], ["\n  position: relative;\n  input {\n    border-color: ", ";\n  }\n"])), function (_a) {
+    var color = _a.color, hasError = _a.hasError;
+    return (!hasError ? color : '');
 });
-var StyledInput = newStyled.input(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  flex: 1 1 50%;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"], ["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  flex: 1 1 50%;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
+var StyledInput = newStyled.input(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  flex: 1 1 50%;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    ", ";\n    box-shadow: ", ";\n\n    ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  ", ";\n"], ["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  flex: 1 1 50%;\n  height: 100%;\n  width: 100%;\n  box-sizing: border-box;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus {\n    outline: none;\n    border-color: ", ";\n    ", ";\n    box-shadow: ", ";\n\n    ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    border: 0.063rem solid ", ";\n    color: ", ";\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  ", ";\n"])), function (_a) {
     var padding = _a.padding;
     return padding;
 }, function (_a) {
@@ -11338,8 +11344,8 @@ var StyledInput = newStyled.input(templateObject_2$t || (templateObject_2$t = __
     var borderRadius = _a.borderRadius;
     return borderRadius;
 }, function (_a) {
-    var border = _a.border;
-    return border;
+    var border = _a.border, hasError = _a.hasError;
+    return (hasError ? hasError : border);
 }, function (_a) {
     var lineHeight = _a.lineHeight;
     return lineHeight;
@@ -11353,11 +11359,19 @@ var StyledInput = newStyled.input(templateObject_2$t || (templateObject_2$t = __
     var placeholderColor = _a.placeholderColor;
     return placeholderColor;
 }, function (_a) {
-    var highlight = _a.highlight;
-    return highlight;
+    var highlight = _a.highlight, hasError = _a.hasError;
+    return (!hasError ? highlight : '');
+}, function (_a) {
+    var focusBorder = _a.focusBorder, hasError = _a.hasError;
+    return (focusBorder && !hasError ? "border: ".concat(focusBorder) : '');
 }, function (_a) {
     var boxShadow = _a.boxShadow;
     return boxShadow;
+}, function (_a) {
+    var inlinePlaceholder = _a.inlinePlaceholder;
+    return inlinePlaceholder
+        ? "& ~ span {\n            bottom: 1.625rem;\n            font-size: 0.75rem;\n            opacity: 1;\n          }"
+        : '';
 }, function (_a) {
     var disabledBackgroundColor = _a.disabledBackgroundColor;
     return disabledBackgroundColor;
@@ -11370,19 +11384,26 @@ var StyledInput = newStyled.input(templateObject_2$t || (templateObject_2$t = __
 }, function (_a) {
     var disabledColor = _a.disabledColor;
     return disabledColor;
+}, function (_a) {
+    var internalValue = _a.internalValue;
+    return internalValue
+        ? "& ~ span {\n          bottom: 1.625rem;\n          font-size: 0.75rem;\n          opacity: 1;\n        }"
+        : '';
 });
 var InputWrapper = newStyled.div(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  height: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  height: ", ";\n"])), function (_a) {
-    var size = _a.size;
-    return (size === 'small' ? '36px' : '44px');
+    var size = _a.size, inlinePlaceholder = _a.inlinePlaceholder;
+    return !inlinePlaceholder ? (size === 'small' ? '36px' : '44px') : '48px';
 });
-var templateObject_1$J, templateObject_2$t, templateObject_3$n;
+var AnimatedPlaceholder = newStyled.span(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n  color: #8b8b8b;\n  font-weight: 400;\n  left: 0.9375rem;\n  bottom: 0.9375rem;\n  transition: all 0.2s ease;\n  position: absolute;\n  pointer-events: none;\n  font-size: 0.875rem;\n"], ["\n  color: #8b8b8b;\n  font-weight: 400;\n  left: 0.9375rem;\n  bottom: 0.9375rem;\n  transition: all 0.2s ease;\n  position: absolute;\n  pointer-events: none;\n  font-size: 0.875rem;\n"])));
+var ClearInput = newStyled.div(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n  right: 0.75rem;\n  top: 1rem;\n  position: absolute;\n  cursor: pointer;\n"], ["\n  right: 0.75rem;\n  top: 1rem;\n  position: absolute;\n  cursor: pointer;\n"])));
+var templateObject_1$J, templateObject_2$t, templateObject_3$n, templateObject_4$h, templateObject_5$a;
 
 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, rest = __rest(_a, ["value", "onChange", "defaultValue", "label", "children", "required", "onValidation", "size"]);
+    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 _d = useState((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : ''), internalValue = _d[0], setInternalValue = _d[1];
-    var _e = useState(InputValidationType.Empty), status = _e[0], setStatus = _e[1];
+    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];
     var handleChange = function (_a) {
         var target = _a.target;
         if (onChange) {
@@ -11421,18 +11442,31 @@ var BaseInput = function (_a) {
         placeholderColor: theme.component.input.placeholderColor,
         disabledBackgroundColor: theme.colors.background.disabled,
         disabledColor: theme.colors.text.disabled,
-        fontSize: theme.component.input.fontSize,
+        fontSize: inlinePlaceholder
+            ? theme.component.inputPlaceholder.fontSize
+            : theme.component.input.fontSize,
         fontWeight: theme.component.input.fontWeight,
-        padding: theme.component.input.padding,
+        padding: inlinePlaceholder
+            ? theme.component.inputPlaceholder.padding
+            : theme.component.input.padding,
         lineHeight: theme.component.input.lineHeight,
         highlight: theme.colors.border.highlight,
         boxShadow: theme.component.input.boxShadow,
+        internalValue: internalValue,
+        inlinePlaceholder: inlinePlaceholder,
+        focusBorder: inlinePlaceholder ? theme.component.inputPlaceholder.focusBorder : '',
+        hasError: hasError ? theme.component.input.errorBorder : '',
     };
     return (jsxs$1(Container$q, __assign$1({ color: status === InputValidationType.Valid
             ? theme.colors.shades['700'].color
             : status === InputValidationType.Error
                 ? theme.colors.semantic.urgent.color
-                : '' }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign$1({ className: "inputWrapper", size: size }, { children: [jsx$1(StyledInput, __assign$1({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: internalValue }, rest, styling), void 0), children] }), void 0), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
+                : '', 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('');
+                    }
+                    setInternalValue('');
+                }, "data-testid": "clear-value" }, { children: jsx$1(Icon.Actions.ClearLight, { width: 0.75, height: 0.75, fill: theme.colors.shades[550].color }, void 0) }), void 0)), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
 };
 
 var Button$2 = function (_a) {
@@ -16829,16 +16863,22 @@ var SearchNavigation = function (_a) {
 };
 var templateObject_1$2, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5;
 
-var TabContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  flex-direction: column;\n  flex: 1 1 0;\n  font-size: 14px;\n  height: 4.5rem;\n  margin: 0 auto;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  max-width: ", ";\n  border: none;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  flex-direction: column;\n  flex: 1 1 0;\n  font-size: 14px;\n  height: 4.5rem;\n  margin: 0 auto;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  max-width: ", ";\n  border: none;\n\n  ", "\n"])), function (_a) {
+var TabContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  flex-direction: column;\n  flex: 1 1 0;\n  font-size: ", ";\n  height: ", ";\n  margin: 0 auto;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  max-width: ", ";\n  border: none;\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  flex-direction: column;\n  flex: 1 1 0;\n  font-size: ", ";\n  height: ", ";\n  margin: 0 auto;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s;\n  max-width: ", ";\n  border: none;\n\n  ", "\n"])), function (_a) {
+    var titleSize = _a.titleSize;
+    return titleSize;
+}, function (_a) {
+    var height = _a.height;
+    return height;
+}, function (_a) {
     var tabsMaxWidth = _a.tabsMaxWidth;
     return tabsMaxWidth;
 }, function (_a) {
-    var selected = _a.selected, color = _a.color;
-    return selected ? "border-bottom: 3px solid ".concat(color, "; font-weight: 700;") : '';
+    var selected = _a.selected, color = _a.color, selectedTitleWeight = _a.selectedTitleWeight;
+    return selected ? "border-bottom: 3px solid ".concat(color, "; font-weight: ").concat(selectedTitleWeight, ";") : '';
 });
 var Tab = function (_a) {
-    var title = _a.title, selected = _a.selected, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? 'var(--colors-pallete-primary-color)' : _b, _c = _a.tabsMaxWidth, tabsMaxWidth = _c === void 0 ? '11rem' : _c;
-    return (jsx$1(Fragment$1, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
+    var title = _a.title, _b = _a.titleSize, titleSize = _b === void 0 ? '14px' : _b, _c = _a.height, height = _c === void 0 ? '4.5rem' : _c, _d = _a.selectedTitleWeight, selectedTitleWeight = _d === void 0 ? 700 : _d, selected = _a.selected, onClick = _a.onClick, _e = _a.color, color = _e === void 0 ? 'var(--colors-pallete-primary-color)' : _e, _f = _a.tabsMaxWidth, tabsMaxWidth = _f === void 0 ? '11rem' : _f;
+    return (jsx$1(Fragment$1, { children: jsx$1(TabContainer, __assign$1({ selected: selected, onClick: function () { return onClick(title); }, color: color, titleSize: titleSize, height: height, selectedTitleWeight: selectedTitleWeight, tabsMaxWidth: tabsMaxWidth }, { children: title }), title) }, void 0));
 };
 var templateObject_1$1;
 
@@ -16861,5 +16901,5 @@ var Tabs = function (_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
-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, 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, 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, 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 };
 //# sourceMappingURL=index.esm.js.map