@trafilea/afrodita-components 4.0.2-beta.8 → 4.0.2-beta.9

package/build/dts/components/index.d.ts

@@ -45,4 +45,5 @@ import { Pagination } from './pagination/Pagination';
 import Text from './text/Text';
 import { SearchBar } from './search-bar';
 import ProductGalleryMobile from './mobile/gallery/ProductGalleryMobile';
-export { Icon, Card, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, SimpleDropdown, SizeSelector, SizeFitGuide, TextButton, DiscountTag, PriceLabel, SingleColorPicker, MultiColorPicker, ProductGallery, Rating, FitPredictor, ProgressBar, IconButton, Tooltip, Accordion, Checkbox, RadioGroupInput, Bundle, CategoryTag, SeasonOfferTag, Timer, Input, PaymentMethod, OfferBanner, Totals, DeliveryDetails, ScrollToTop, OrderBar, SizeTable, SimpleOrderItem, Review, SliderNavigation, DropdownListIcons, Image, AmazonButton, PaypalButton, CrossSell, Collection, StarList, Drawer, Spinner, FilteringTags, FilteringDropdown, Pagination, Text, SearchBar, ProductGalleryMobile, };
+import { RadioInput } from './radio/input/radio';
+export { Icon, Card, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, SimpleDropdown, SizeSelector, SizeFitGuide, TextButton, DiscountTag, PriceLabel, SingleColorPicker, MultiColorPicker, ProductGallery, Rating, FitPredictor, ProgressBar, IconButton, Tooltip, Accordion, Checkbox, RadioGroupInput, RadioInput, Bundle, CategoryTag, SeasonOfferTag, Timer, Input, PaymentMethod, OfferBanner, Totals, DeliveryDetails, ScrollToTop, OrderBar, SizeTable, SimpleOrderItem, Review, SliderNavigation, DropdownListIcons, Image, AmazonButton, PaypalButton, CrossSell, Collection, StarList, Drawer, Spinner, FilteringTags, FilteringDropdown, Pagination, Text, SearchBar, ProductGalleryMobile, };

package/build/dts/components/input/base/BaseInput.d.ts

@@ -1,14 +1,23 @@
 import React from 'react';
 import { InputValidationType } from '../../../types/enums';
-export interface BaseInputProps {
+export interface BaseInputCommmonProps {
     defaultValue?: string;
     maxLength?: number;
     placeholder?: string;
     label?: string;
-    onChange?: (value: string) => void;
     onValidation?: (status: InputValidationType) => void;
     disabled?: boolean;
     required?: string;
     children?: React.ReactNode;
+    size?: 'regular' | 'small';
+}
+export interface BaseInputControlled extends BaseInputCommmonProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+export interface BaseInputUncontrolled extends BaseInputCommmonProps {
+    value?: never;
+    onChange?: (value: string) => void;
 }
-export declare const BaseInput: ({ onChange, defaultValue, label, children, required, onValidation, ...rest }: BaseInputProps) => JSX.Element;
+export declare type BaseInputProps = BaseInputControlled | BaseInputUncontrolled;
+export declare const BaseInput: ({ value, onChange, defaultValue, label, children, required, onValidation, size, ...rest }: BaseInputProps) => JSX.Element;

package/build/dts/components/input/base/BaseInput.stories.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { Story } from '@storybook/react';
-import { BaseInputProps } from './BaseInput';
 declare const _default: {
     title: string;
-    component: ({ onChange, defaultValue, label, children, required, onValidation, ...rest }: BaseInputProps) => JSX.Element;
+    component: ({ value, onChange, defaultValue, label, children, required, onValidation, size, ...rest }: import("./BaseInput").BaseInputProps) => JSX.Element;
 };
 export default _default;
-export declare const Base: Story<BaseInputProps>;
+export declare const Uncontrolled: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;

package/build/dts/components/input/base/Styled.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { BaseInputProps } from './BaseInput';
 export interface StyledInputProps {
     border: string;
     borderRadius: string;
@@ -27,5 +28,5 @@ export declare const StyledInput: import("@emotion/styled").StyledComponent<{
 export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & Pick<BaseInputProps, "size">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/build/dts/components/input/basePlusButton/BasePlusButton.d.ts

@@ -1,13 +1,12 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../base/BaseInput';
-declare type BaseInputPropsWithoutLabel = Omit<BaseInputProps, 'label'>;
-export interface BasePlusButtonProps extends BaseInputPropsWithoutLabel {
-    onClick: () => void;
+export declare type BasePlusButtonProps = BaseInputProps & {
+    label?: undefined;
+    onClick: (value: string) => void;
     onClickEdit: () => void;
     text: string;
     success: boolean;
     editText: string;
     successText: string;
-}
+};
 export declare const BasePlusButton: ({ onClick, onClickEdit, text, success, editText, successText, ...rest }: BasePlusButtonProps) => JSX.Element;
-export {};

package/build/dts/components/input/basePlusButton/Success.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-export interface SuccessProps {
+import { BaseInputProps } from '../base/BaseInput';
+export declare type SuccessProps = {
     children: React.ReactNode;
     successText: string;
-}
-export declare const Success: ({ children, successText }: SuccessProps) => JSX.Element;
+} & Pick<BaseInputProps, 'size'>;
+export declare const Success: ({ children, successText, size }: SuccessProps) => JSX.Element;

package/build/dts/components/input/basePlusIcon/BasePlusIcon.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../base/BaseInput';
 import { IconType } from '../../icons';
-export interface BasePlusIconProps extends BaseInputProps {
+export declare type BasePlusIconProps = BaseInputProps & {
     Icon: IconType;
-}
+};
 export declare const BasePlusIcon: ({ Icon, ...rest }: BasePlusIconProps) => JSX.Element;

package/build/dts/components/input/custom/Custom.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../base/BaseInput';
-export interface CustomProps extends BaseInputProps {
+import { ButtonProps } from 'src/components/shared/button/Button';
+export declare type CustomProps = BaseInputProps & {
     onClick: () => void;
     text: string;
-    type: 'primary' | 'secondary';
-}
-export declare const Custom: ({ onClick, text, type, ...rest }: CustomProps) => JSX.Element;
+    variant: ButtonProps['variant'];
+};
+export declare const Custom: ({ onClick, text, variant, ...rest }: CustomProps) => JSX.Element;

package/build/dts/components/input/custom/Custom.stories.d.ts

@@ -3,7 +3,7 @@ import { Story } from '@storybook/react';
 import { CustomProps } from './Custom';
 declare const _default: {
     title: string;
-    component: ({ onClick, text, type, ...rest }: CustomProps) => JSX.Element;
+    component: ({ onClick, text, variant, ...rest }: CustomProps) => JSX.Element;
 };
 export default _default;
-export declare const Cstm: Story<CustomProps>;
+export declare const Custom: Story<CustomProps>;

package/build/dts/components/input/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const Input: {
-    Simple: ({ onChange, defaultValue, label, children, required, onValidation, ...rest }: import("./base/BaseInput").BaseInputProps) => JSX.Element;
-    Custom: ({ onClick, text, type, ...rest }: import("./custom/Custom").CustomProps) => JSX.Element;
+    Simple: ({ value, onChange, defaultValue, label, children, required, onValidation, size, ...rest }: import("./base/BaseInput").BaseInputProps) => JSX.Element;
+    Custom: ({ onClick, text, variant, ...rest }: import("./custom/Custom").CustomProps) => JSX.Element;
     SimplePlusButton: ({ onClick, onClickEdit, text, success, editText, successText, ...rest }: import("./basePlusButton/BasePlusButton").BasePlusButtonProps) => JSX.Element;
     SimplePlusIcon: ({ Icon, ...rest }: import("./basePlusIcon/BasePlusIcon").BasePlusIconProps) => JSX.Element;
 };

package/build/dts/components/shared/button/Button.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { BaseCTAProps } from 'src/components/cta/BaseCTA';
+export declare type ButtonProps = {
+    variant: 'primary' | 'secondary' | 'secondary-outline';
+} & BaseCTAProps;
+export declare const Button: FC<ButtonProps>;

package/build/index.d.ts

@@ -2,6 +2,7 @@
 import { IconWrapperProps } from 'src/components/Icon-wrapper/IconWrapper';
 import React, { ReactNode, FC, AriaAttributes, CSSProperties, AnchorHTMLAttributes, LabelHTMLAttributes, ElementType, RefObject } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import { ButtonProps } from 'src/components/shared/button/Button';
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import { SearchBarOptionItem as SearchBarOptionItem$1 } from 'src/types/types';
 import { ThemeBreakpoints as ThemeBreakpoints$1 } from 'src/core/theme/Theme';
@@ -675,41 +676,50 @@ interface TimerProps extends TimeProps {
 }
 declare const Timer: ({ onTimeUp, ...rest }: TimerProps) => JSX.Element;
 
-interface BaseInputProps {
+interface BaseInputCommmonProps {
     defaultValue?: string;
     maxLength?: number;
     placeholder?: string;
     label?: string;
-    onChange?: (value: string) => void;
     onValidation?: (status: InputValidationType) => void;
     disabled?: boolean;
     required?: string;
     children?: React.ReactNode;
-}
+    size?: 'regular' | 'small';
+}
+interface BaseInputControlled extends BaseInputCommmonProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+interface BaseInputUncontrolled extends BaseInputCommmonProps {
+    value?: never;
+    onChange?: (value: string) => void;
+}
+declare type BaseInputProps = BaseInputControlled | BaseInputUncontrolled;
 
-interface BasePlusIconProps extends BaseInputProps {
+declare type BasePlusIconProps = BaseInputProps & {
     Icon: IconType;
-}
+};
 
-declare type BaseInputPropsWithoutLabel = Omit<BaseInputProps, 'label'>;
-interface BasePlusButtonProps extends BaseInputPropsWithoutLabel {
-    onClick: () => void;
+declare type BasePlusButtonProps = BaseInputProps & {
+    label?: undefined;
+    onClick: (value: string) => void;
     onClickEdit: () => void;
     text: string;
     success: boolean;
     editText: string;
     successText: string;
-}
+};
 
-interface CustomProps extends BaseInputProps {
+declare type CustomProps = BaseInputProps & {
     onClick: () => void;
     text: string;
-    type: 'primary' | 'secondary';
-}
+    variant: ButtonProps['variant'];
+};
 
 declare const Input: {
-    Simple: ({ onChange, defaultValue, label, children, required, onValidation, ...rest }: BaseInputProps) => JSX.Element;
-    Custom: ({ onClick, text, type, ...rest }: CustomProps) => JSX.Element;
+    Simple: ({ value, onChange, defaultValue, label, children, required, onValidation, size, ...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;
 };
@@ -1102,6 +1112,18 @@ interface ProductGalleryMobileProps {
 }
 declare const ProductGalleryMobile: ({ images, selectedValue, DiscountTagElement, BestSellerTagElement, productImageDataTestId, slideDotsDataTestId, }: ProductGalleryMobileProps) => JSX.Element;
 
+interface RadioProps {
+    name: string;
+    value: string;
+    id: string;
+    label: string;
+    size?: ComponentSize.Small | ComponentSize.Medium | ComponentSize.Large;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: (option: RadioGroupOption) => void;
+}
+declare const RadioInput: ({ name, value, id, label, checked, disabled, onChange, size, }: RadioProps) => JSX.Element;
+
 declare const ThemeProvider: FC<{
     theme: Theme;
     children: ReactNode;
@@ -1493,4 +1515,4 @@ declare const useWindowDimensions: (breakpoints: ThemeBreakpoints$1) => {
     };
 };
 
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps$1 as IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, RadioGroupOption, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, CTAProps, _default as Card, CardSectionType, CategoryTag, Checkbox, Collection, Color, ColorPickerOption, ComponentPosition, ComponentSize, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, IconProps$1 as IconProps, IconWithOpacityProps, Image, ImageType, Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, Pattern, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, RadioGroupOption, RadioInput, Rating, Review, ScrollToTop, SearchBar, SearchBarOptionItem, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text, TextButton, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, WithTestId, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.js

@@ -4439,7 +4439,7 @@ function Disclosure(props) {
 } // ---
 
 var DEFAULT_BUTTON_TAG$1 = 'button';
-var Button$6 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
+var Button$7 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
   var _useDisclosureContext = useDisclosureContext([Disclosure.name, Button.name].join('.')),
       state = _useDisclosureContext[0],
       dispatch = _useDisclosureContext[1];
@@ -4602,7 +4602,7 @@ var Panel = /*#__PURE__*/forwardRefWithAs(function Panel(props, ref) {
   }));
 }); // ---
 
-Disclosure.Button = Button$6;
+Disclosure.Button = Button$7;
 Disclosure.Panel = Panel;
 
 function disposables() {
@@ -4998,7 +4998,7 @@ function Listbox(props) {
 } // ---
 
 var DEFAULT_BUTTON_TAG = 'button';
-var Button$5 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
+var Button$6 = /*#__PURE__*/forwardRefWithAs(function Button(props, ref) {
   var _state$optionsRef$cur;
 
   var _useListboxContext = useListboxContext([Listbox.name, Button.name].join('.')),
@@ -5457,7 +5457,7 @@ function Option$2(props) {
 } // ---
 
 
-Listbox.Button = Button$5;
+Listbox.Button = Button$6;
 Listbox.Label = Label$4;
 Listbox.Options = Options;
 Listbox.Option = Option$2;
@@ -6774,11 +6774,11 @@ var ImageSmallPreview = function (_a) {
 var templateObject_1$O;
 
 var Container$w = newStyled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding-right: 1.25rem;\n  overflow: auto;\n"])));
-var Button$4 = newStyled.button(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
+var Button$5 = newStyled.button(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"], ["\n  padding: 0;\n  border: none;\n  text-decoration: none;\n  background: transparent;\n"])));
 var ImagePreviewList = function (_a) {
     var images = _a.images, selectedImage = _a.selectedImage, onClick = _a.onClick, dataTestId = _a.dataTestId;
     return (jsx(Container$w, __assign({ "data-testid": dataTestId }, { children: images.map(function (item) {
-            return (jsx(Button$4, __assign({ onClick: function () { return onClick(item); } }, { children: jsx(ImageSmallPreview, { css: { marginBottom: '1.25rem' }, imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
+            return (jsx(Button$5, __assign({ onClick: function () { return onClick(item); } }, { children: jsx(ImageSmallPreview, { css: { marginBottom: '1.25rem' }, imageUrl: item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key }, void 0) }), item.key));
         }) }), void 0));
 };
 var templateObject_1$N, templateObject_2$v;
@@ -7525,7 +7525,7 @@ var Container$k = newStyled.div(templateObject_1$y || (templateObject_1$y = __ma
     var color = _a.color;
     return color;
 });
-var StyledInput = newStyled.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n  padding: ", ";\n  font-size: ", ";\n  border-radius: ", ";\n  border: ", ";\n  line-height: ", ";\n  color: ", ";\n  font-weight: ", ";\n  width: 100%;\n  height: 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  width: 100%;\n  height: 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$m || (templateObject_2$m = __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  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  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 padding = _a.padding;
     return padding;
 }, function (_a) {
@@ -7568,34 +7568,49 @@ var StyledInput = newStyled.input(templateObject_2$m || (templateObject_2$m = __
     var disabledColor = _a.disabledColor;
     return disabledColor;
 });
-var InputWrapper = newStyled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  height: 100%;\n"])));
+var InputWrapper = newStyled.div(templateObject_3$f || (templateObject_3$f = __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 templateObject_1$y, templateObject_2$m, templateObject_3$f;
 
 var BaseInput = function (_a) {
-    var onChange = _a.onChange, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, label = _a.label, children = _a.children, required = _a.required, onValidation = _a.onValidation, rest = __rest(_a, ["onChange", "defaultValue", "label", "children", "required", "onValidation"]);
+    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 theme = useTheme();
-    var _c = useState(defaultValue), value = _c[0], setValue = _c[1];
-    var _d = useState(InputValidationType.Empty), status = _d[0], setStatus = _d[1];
+    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 handleChange = function (_a) {
-        var value = _a.target.value;
-        setValue(value);
-        onChange && onChange(value);
+        var target = _a.target;
+        if (onChange) {
+            onChange(target.value);
+        }
+        if (value == null) {
+            setInternalValue(target.value);
+        }
     };
     var validate = function (_a) {
         var value = _a.target.value;
-        var newStatus = handleValidations(value);
-        setStatus(newStatus);
-        onValidation && onValidation(newStatus);
-    };
-    var handleValidations = function (value) {
+        var status = InputValidationType.Valid;
         if (required && isEmpty(value)) {
-            return InputValidationType.Error;
+            status = InputValidationType.Error;
         }
         if (!required && isEmpty(value)) {
-            return InputValidationType.Empty;
+            status = InputValidationType.Empty;
         }
-        return InputValidationType.Valid;
+        setStatus(status);
     };
+    useEffect(function () {
+        if (value == null) {
+            return;
+        }
+        setInternalValue(value);
+    }, [value]);
+    useEffect(function () {
+        if (onValidation != null) {
+            onValidation(status);
+        }
+    }, [onValidation, status]);
     var styling = {
         border: theme.component.input.border,
         borderRadius: theme.component.input.borderRadius,
@@ -7614,39 +7629,57 @@ var BaseInput = function (_a) {
             ? 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({ className: "inputWrapper" }, { children: [jsx$1(StyledInput, __assign({ "data-testid": "base-input", type: "text", onChange: handleChange, onBlur: validate, required: Boolean(required), value: value }, rest, styling), void 0), children] }), void 0), required && status === InputValidationType.Error && jsx$1(Error$1, { error: required }, void 0)] }), void 0));
+                : '' }, { children: [label && (jsx$1(InputLabel, { label: label, isDisabled: rest.disabled, isRequired: Boolean(required) }, void 0)), jsxs$1(InputWrapper, __assign({ className: "inputWrapper", size: size }, { children: [jsx$1(StyledInput, __assign({ "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));
+};
+
+var Button$4 = function (_a) {
+    var variant = _a.variant, props = __rest(_a, ["variant"]);
+    if (variant === 'primary') {
+        return jsx$1(ButtonPrimary, __assign({}, props), void 0);
+    }
+    if (variant === 'secondary') {
+        return jsx$1(ButtonSecondary, __assign({}, props), void 0);
+    }
+    if (variant === 'secondary-outline') {
+        return jsx$1(ButtonSecondary, __assign({}, props), void 0);
+    }
+    throw new Error("Invalid button variant ".concat(variant));
 };
 
-var Container$j = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  input {\n    border-radius: ", ";\n  }\n"], ["\n  input {\n    border-radius: ", ";\n  }\n"])), function (_a) {
+var Container$j = newStyled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n  }\n"], ["\n  overflow: hidden;\n\n  input {\n    border-radius: ", ";\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.inputCustom.input.borderRadius;
 });
-var ButtonContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"], ["\n  width: 7.125rem;\n  height: 100%;\n  position: absolute;\n  right: 0;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"])), function (_a) {
+var ButtonContainer$1 = newStyled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n  max-width: 50%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"], ["\n  max-width: 50%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    border-radius: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.component.inputCustom.button.borderRadius;
 });
 var Custom = function (_a) {
-    var onClick = _a.onClick, text = _a.text, type = _a.type, rest = __rest(_a, ["onClick", "text", "type"]);
+    var onClick = _a.onClick, text = _a.text, variant = _a.variant, rest = __rest(_a, ["onClick", "text", "variant"]);
     var theme = useTheme();
-    var props = {
+    var props = useMemo(function () { return ({
+        variant: variant,
         onClick: onClick,
         text: text,
         disabled: rest.disabled,
-    };
-    return (jsx$1(Container$j, __assign({ theme: theme }, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, __assign({ theme: theme }, { children: type === 'primary' ? jsx$1(ButtonPrimary, __assign({}, props), void 0) : jsx$1(ButtonSecondary, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
+    }); }, [variant, onClick, text, rest.disabled]);
+    return (jsx$1(Container$j, __assign({ theme: theme }, { children: jsx$1(BaseInput, __assign({}, rest, { children: jsx$1(ButtonContainer$1, __assign({ theme: theme }, { children: jsx$1(Button$4, __assign({}, props), void 0) }), void 0) }), void 0) }), void 0));
 };
 var templateObject_1$x, templateObject_2$l;
 
-var SuccessContainer = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  height: 3rem;\n  display: flex;\n"], ["\n  height: 3rem;\n  display: flex;\n"])));
-var SuccessMessage = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"], ["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"])));
+var SuccessContainer = newStyled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n  height: ", ";\n  display: flex;\n"], ["\n  height: ", ";\n  display: flex;\n"])), function (_a) {
+    var size = _a.size;
+    return (size === 'small' ? '36px' : '');
+});
+var SuccessMessage = newStyled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"], ["\n  background-color: #dfefe0;\n  border: 0.063rem solid #5ead63;\n  border-radius: 0.5rem;\n  width: 100%;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  padding: 0 1rem;\n  box-sizing: border-box;\n"])));
 var SuccessText = newStyled.span(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"], ["\n  margin: 0;\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  margin-left: 0.313rem;\n"])));
 var Success = function (_a) {
-    var children = _a.children, successText = _a.successText;
-    return (jsxs$1(SuccessContainer, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }, void 0));
+    var children = _a.children, successText = _a.successText, size = _a.size;
+    return (jsxs$1(SuccessContainer, __assign({ size: size }, { children: [jsxs$1(SuccessMessage, { children: [jsx$1(Icon.Actions.Check, { fill: "#5EAD63", width: 1.375, height: 1.063 }, void 0), jsx$1(SuccessText, { children: successText }, void 0)] }, void 0), children] }), void 0));
 };
 var templateObject_1$w, templateObject_2$k, templateObject_3$e;
 
-var ButtonContainer = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"], ["\n  margin-left: 0.625rem;\n  height: 100%;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"])), function (_a) {
+var ButtonContainer = newStyled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n  margin-left: 0.625rem;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"], ["\n  margin-left: 0.625rem;\n\n  button {\n    width: 100%;\n    height: 100%;\n    background-color: ", ";\n  }\n"])), function (_a) {
     var status = _a.status, type = _a.type, theme = _a.theme;
     return status === InputValidationType.Empty &&
         type === 'primary' &&
@@ -7655,15 +7688,18 @@ var ButtonContainer = newStyled.div(templateObject_1$v || (templateObject_1$v =
 var BasePlusButton = function (_a) {
     var onClick = _a.onClick, onClickEdit = _a.onClickEdit, text = _a.text, success = _a.success, editText = _a.editText, successText = _a.successText, rest = __rest(_a, ["onClick", "onClickEdit", "text", "success", "editText", "successText"]);
     var _b = useState(InputValidationType.Empty), status = _b[0], setStatus = _b[1];
+    var _c = useState(''), inputValue = _c[0], setInputValue = _c[1];
     var theme = useTheme();
-    var SuccessComponent = (jsx$1(Success, __assign({ successText: successText }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "secondary", theme: theme }, { children: jsx$1(ButtonSecondaryOutline, { text: editText, onClick: onClickEdit, disabled: rest.disabled }, void 0) }), void 0) }), void 0));
-    var Input = (jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: onClick, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
-    return success ? SuccessComponent : Input;
+    var onChangeInput = useCallback(function (value) { return setInputValue(value); }, []);
+    if (success) {
+        return (jsx$1(Success, __assign({ successText: successText, size: rest.size }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "secondary", theme: theme }, { children: jsx$1(ButtonSecondaryOutline, { text: editText, onClick: onClickEdit, disabled: rest.disabled }, void 0) }), void 0) }), void 0));
+    }
+    return (jsx$1(BaseInput, __assign({}, rest, { onValidation: setStatus, onChange: onChangeInput }, { children: jsx$1(ButtonContainer, __assign({ status: status, type: "primary", theme: theme }, { children: jsx$1(ButtonSecondary, { text: text, onClick: function () { return onClick(inputValue); }, disabled: rest.disabled || status === InputValidationType.Error }, void 0) }), void 0) }), void 0));
 };
 var templateObject_1$v;
 
 var Container$i = newStyled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n  input {\n    padding-right: 2.688rem;\n  }\n"], ["\n  input {\n    padding-right: 2.688rem;\n  }\n"])));
-var IconContainer$3 = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n\n  svg path {\n    fill: ", ";\n  }\n"])), function (props) { return props.color; });
+var IconContainer$3 = newStyled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  svg path {\n    fill: ", ";\n  }\n"], ["\n  position: absolute;\n  right: 0.875rem;\n  width: 1.125rem;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  svg path {\n    fill: ", ";\n  }\n"])), function (props) { return props.color; });
 var BasePlusIcon = function (_a) {
     var Icon = _a.Icon, rest = __rest(_a, ["Icon"]);
     var theme = useTheme();
@@ -12864,5 +12900,5 @@ var ProductGalleryMobile = function (_a) {
 };
 var templateObject_1;
 
-export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image$1 as Image, Input$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text$3 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { Accordion, AmazonButton, AssetsProvider, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, Card$1 as Card, CardSectionType, CategoryTag, Checkbox, Collection, ComponentPosition, ComponentSize, index as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, FitPredictor, Icon, IconButton, Image$1 as Image, Input$1 as Input, InputValidationType, MultiColorPicker, OfferBanner, OrderBar, Pagination, PaymentMethod, PaypalButton, PriceLabel, ProductGallery, ProductGalleryMobile, ProgressBar, RadioGroupInput, RadioInput, Rating, Review, ScrollToTop, SearchBar, SeasonOfferTag, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spinner, StarList, Text$3 as Text, TextButton, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
 //# sourceMappingURL=index.esm.js.map