@jenesei-software/jenesei-kit-react 1.0.0 → 1.2.0

package/build/index.d.ts

@@ -9,6 +9,7 @@ import { addSXTypographyProps as addSXTypographyProps_3 } from './component.type
 import { AnimationProps } from 'framer-motion';
 import { AppContextProps as AppContextProps_2 } from './context.types';
 import { Area } from 'react-easy-crop';
+import { BaseObject } from 'styled-components/dist/types';
 import { ButtonHTMLAttributes } from 'react';
 import { ButtonProps as ButtonProps_2 } from './component.types';
 import { ButtonPropsIconGroup as ButtonPropsIconGroup_2 } from './component.types';
@@ -49,9 +50,9 @@ import { InputChildrenProps as InputChildrenProps_2 } from './component.types';
 import { InputHTMLAttributes } from 'react';
 import { InputOTPProps as InputOTPProps_2 } from './component.types';
 import { InputProps as InputProps_2 } from './component.types';
-import { InputProps as InputProps_3 } from '../input';
 import { InputStandardProps as InputStandardProps_2 } from '../input';
 import { InternalNumberFormatBase } from 'react-number-format/types/types';
+import { ISelectItem as ISelectItem_2 } from './component.types';
 import { IServiceKeys as IServiceKeys_2 } from './types';
 import { IStyledComponentBase } from 'styled-components/dist/types';
 import { IThemePaletteKeys as IThemePaletteKeys_2 } from '../..';
@@ -83,8 +84,10 @@ import { ReactNode } from 'react';
 import { ReactNode as ReactNode_2 } from '@tanstack/react-router';
 import { Ref } from 'react';
 import { RefAttributes } from 'react';
+import { RefObject } from 'react';
 import { RippleProps as RippleProps_2 } from './component.types';
 import { RuleSet } from 'styled-components';
+import { SelectProps as SelectProps_2 } from './component.types';
 import { SeparatorProps as SeparatorProps_2 } from './component.types';
 import { SonnerContentStandardProps as SonnerContentStandardProps_2 } from './context.types';
 import { StackProps as StackProps_2 } from '../../components/stack';
@@ -96,8 +99,8 @@ import { SVGProps } from 'react';
 import { SXProps as SXProps_2 } from '../../styles/sx';
 import { TButtonGenre as TButtonGenre_2 } from '../button';
 import { TextareaHTMLAttributes } from 'react';
-import { TextAreaProps as TextAreaProps_2 } from './component.types';
-import { TInputSelect as TInputSelect_2 } from './component.types';
+import { TextAreaProps as TextAreaProps_2 } from '../textarea';
+import { TextAreaProps as TextAreaProps_3 } from './component.types';
 import { TypographySXProps as TypographySXProps_2 } from './component.types';
 import { useDialogProps as useDialogProps_2 } from './context.types';
 
@@ -141,10 +144,16 @@ export declare type AccordionSummaryContentProps = AddDollarSign<Pick<AccordionP
 
 export declare const AccordionWrapper: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 
-export declare const addBorder: RuleSet<object>;
+export declare const addAlwaysOutline: RuleSet<    {
+$isShowAlwaysOutline?: boolean;
+}>;
 
 export declare const addColorTransition: RuleSet<object>;
 
+export declare const addDisabled: RuleSet<    {
+$isDisabled?: boolean;
+}>;
+
 export declare type AddDollarSign<T> = {
     [K in keyof T as `$${string & K}`]: T[K];
 };
@@ -159,10 +168,17 @@ export declare type addErrorStylesProps = AddDollarSign<addErrorProps>;
 
 export declare const addGridTransition: RuleSet<object>;
 
+/****************************************** Placeholder *************************************************/
+export declare const addInputPlaceholder: RuleSet<AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>;
+
 export declare const addNiceNumber: RuleSet<object>;
 
 export declare const addOutline: RuleSet<object>;
 
+export declare const addOutlineChildren: RuleSet<    {
+$isReadOnly?: boolean;
+}>;
+
 export declare const addRemoveOutline: RuleSet<object>;
 
 export declare const addRemoveScrollbar: RuleSet<object>;
@@ -189,6 +205,10 @@ export declare type addSXTypographyProps = {
 
 export declare type addSXTypographyStyleProps = AddDollarSign<addSXTypographyProps>;
 
+export declare const addTextArea: RuleSet<AddDollarSign_2<Pick<TextAreaProps_3, "size" | "isDisabled" | "error" | "genre" | "isLoading" | "isBold" | "isResize" | "isInputEffect"> & {
+lineHeight: number;
+}>>;
+
 export declare const addTooltipBoxSize: RuleSet<PopoverProps>;
 
 export declare const addTooltipBoxSizeConstructor: (props: IThemeSizePropertyDefault) => RuleSet<object>;
@@ -218,6 +238,16 @@ export declare interface AppContextProps {
     historyDescription: (step: number) => void;
 }
 
+declare type AutoHeightTextAreaProps = BaseTextAreaProps & {
+    isAutoHeight: true;
+    maxRows: number;
+    isResize?: false | undefined;
+};
+
+declare type BaseInputProps = CommonInputProps & (ControlledValue | UncontrolledValue);
+
+declare type BaseTextAreaProps = CommonTextAreaProps & (ControlledValue_2 | UncontrolledValue_2);
+
 export declare function BlurIn({ children }: {
     children: ReactNode;
 }): JSX.Element;
@@ -234,12 +264,17 @@ export declare type ButtonGroupProps = {
 
 export declare const ButtonGroupWrapper: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledButtonGroupProps>> & string;
 
+export declare const ButtonList: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign_2<Pick<SelectProps_2<ISelectItem_2>, "size">>>> & string;
+
+export declare type ButtonListProps = AddDollarSign<Pick<SelectProps<ISelectItem>, 'size'>>;
+
 export declare type ButtonProps = ButtonPropsStandard | ButtonPropsIconGroup;
 
 declare type ButtonPropsDefault = PropsWithChildren & {
     size: IThemeSize;
     genre: TButtonGenre;
     id?: string;
+    tabIndex?: number;
     ref?: Ref<HTMLElement | null>;
     className?: string;
     icons?: ((Omit<IconItemProps<'id'>, 'size'> & {
@@ -268,8 +303,10 @@ declare type ButtonPropsDefault = PropsWithChildren & {
     isRadius?: boolean;
     isHiddenBorder?: boolean;
     isPlaystationEffect?: boolean;
+    isNotHoverEffect?: boolean;
     isFullSize?: boolean;
     onClick?: (event: default_2.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseDown?: (event: default_2.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     type?: 'button' | 'submit' | 'reset';
 } & addSXProps & addSXTypographyProps;
 
@@ -357,22 +394,93 @@ export declare const CheckboxSizeConstructor: (props: IThemeSizePropertyDefault
 /****************************************** Default *************************************************/
 export declare const CheckboxWrapper: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledCheckboxProps>> & string;
 
-export declare const ContainerDropdownOption: default_2.MemoExoticComponent<(params: addErrorProps & {
-    genre: keyof IThemeGenreInput;
+declare type CommonInputProps = addErrorProps & addSXProps & {
+    ref?: Ref<HTMLInputElement | null>;
+    name?: string;
+    id?: string;
+    className?: string;
+    isNotShowHoverStyle?: boolean;
+    autoComplete?: HTMLInputAutoCompleteAttribute | string;
+    isAllowEmptyFormatting?: boolean;
+    genre: TInputGenre;
     size: IThemeSize;
-    onClick: () => void;
+    tabIndex?: number;
+    isWidthAsHeight?: boolean;
+    isNiceNumber?: boolean;
+    isDisabled?: boolean;
     isLoading?: boolean;
-    isNotShowHoverStyle?: boolean;
-    isShowDropdownOptionIcon?: boolean;
-    isBold?: boolean;
+    isReadOnly?: boolean;
+    isInputEffect?: boolean;
+    isRequired?: boolean;
     isCenter?: boolean;
+    isNoSpaces?: boolean;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onPaste?: ClipboardEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    placeholder?: string;
+    isBold?: boolean;
     postfixChildren?: InputChildrenProps;
     prefixChildren?: InputChildrenProps;
-    checked: boolean;
+    inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    maxLength?: number;
+    minLength?: number;
+};
+
+declare type CommonTextAreaProps = addErrorProps & addSXProps & {
+    name?: string;
+    autoComplete?: string;
+    id?: string;
+    ref?: RefObject<HTMLTextAreaElement | null>;
+    className?: string;
+    genre: TextAreaGenre;
+    minRows: number;
+    size: IThemeSize;
+    placeholder?: string;
+    maxLength?: number;
+    minLength?: number;
+    isDisabled?: boolean;
+    isResize?: boolean;
+    isLoading?: boolean;
+    isReadOnly?: boolean;
+    isInputEffect?: boolean;
+    isRequired?: boolean;
+    isNoSpaces?: boolean;
+    isBold?: boolean;
+    onFocus?: (event?: FocusEvent_2<HTMLTextAreaElement>) => void;
+    onBlur?: (event?: FocusEvent_2<HTMLTextAreaElement>) => void;
+    onChange?: (value: string) => void;
+    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
+};
+
+export declare const ContainerDropdownListOption: MemoExoticComponent<(<T extends object & ISelectItem>(props: ContainerDropdownListOptionProps<T>) => JSX.Element)>;
+
+export declare type ContainerDropdownListOptionProps<T extends ISelectItem> = Pick<SelectProps<T>, 'genre' | 'size' | 'isCenter' | 'isNotShowHoverStyle' | 'isBold' | 'isShowDropdownOptionIcon'> & {
+    item: T;
+    isChecked?: boolean;
+    isShowScroll?: boolean;
+    onClick: () => void;
     virtualRowSize: number;
     virtualRowStart: number;
-    label: ReactNode;
-}) => JSX.Element>;
+};
+
+export declare const ContainerSelectListOption: MemoExoticComponent<(<T extends object & ISelectItem>(props: ContainerSelectListOptionProps<T>) => JSX.Element)>;
+
+export declare type ContainerSelectListOptionProps<T extends ISelectItem> = Pick<SelectProps<T>, 'genre' | 'size' | 'isCenter' | 'isNotShowHoverStyle' | 'isBold' | 'isWrapSelectOption' | 'isClearWhenClickSelectListOption' | 'isOnlyColorInSelectListOption'> & {
+    item: T;
+    isChecked?: boolean;
+    onClick: () => void;
+};
+
+declare type ControlledValue = {
+    value: string | number | null | undefined;
+    defaultValue?: never;
+};
+
+declare type ControlledValue_2 = {
+    value: string | null | undefined;
+    defaultValue?: never;
+};
 
 export declare type CookieAttributes = default_4.CookieAttributes;
 
@@ -484,21 +592,21 @@ export declare type DatePickerProps = addErrorProps & addSXProps & {
     endDate?: number;
     genre: TDateGenre;
     id?: string;
-    inputProps: Omit<InputStandardProps, 'isDisabled' | 'name' | 'id' | 'genre' | 'size' | 'placeholder' | 'width' | 'value' | 'isInputEffect' | 'error'>;
     isDisabled?: boolean;
     isMinWidth?: boolean;
     isInputEffect?: InputStandardProps['isInputEffect'];
     isOnClickClose?: boolean;
+    labelPlaceholder?: string;
     locale: {
-        months: SelectDateProps['monthsLocale'];
+        months: SelectMonthProps['monthsLocale'];
         weeks: WeekItem[];
         inputs: InputItem;
     };
     mode?: DatePickerMode;
     name?: string;
-    onBlur?: (event?: MouseEvent) => void;
+    onBlur?: () => void;
     onChange: (timestamp: number | null) => void;
-    onFocus?: (event: FocusEvent_2<HTMLDivElement, Element>) => void;
+    onFocus?: () => void;
     size: IThemeSize;
     startDate?: number;
     value: number | null;
@@ -618,56 +726,42 @@ export declare const DialogLayout: IStyledComponentBase<"web", Substitute<Omit<H
 
 export declare type DialogLayoutProps = AddDollarSign<Pick<ProviderDialogProps, 'zIndex'>>;
 
-export declare const DropdownErase: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-
-export declare const DropdownFooter: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, SelectStyledFooterProps>> & string;
-
 export declare const DropdownList: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 
-export declare const DropdownListParent: IStyledComponentBase<"web", Substitute<Omit<HTMLMotionProps<"div">, "ref"> & RefAttributes<HTMLDivElement>, AddDollarSign_2<Pick<InputStandardProps_2, "size" | "genre"> & {
-isShowScroll?: boolean;
-isFooter?: boolean;
-}>>> & string & Omit<ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>, keyof Component<any, {}, any>>;
-
-export declare const DropdownListParentSize: RuleSet<AddDollarSign_2<Pick<InputStandardProps_2, "size" | "genre"> & {
+export declare const DropdownListOption: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, AddDollarSign_2<Pick<SelectProps_2<ISelectItem_2>, "size" | "genre" | "isCenter" | "isNotShowHoverStyle" | "isBold"> & {
+item?: ISelectItem_2;
+isChecked?: boolean;
 isShowScroll?: boolean;
-isFooter?: boolean;
-}>>;
-
-export declare const DropdownListParentSizeConstructor: (props: IThemeSizePropertyDefault) => RuleSet<object>;
-
-export declare const DropdownOption: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, SelectStyledOptionProps>> & string;
-
-export declare const DropdownOptionHoverAndCheckedSize: RuleSet<SelectStyledOptionProps>;
-
-export declare const DropdownOptionHoverAndCheckedSizeConstructor: (props: IThemeSizePropertyDefault) => RuleSet<object>;
+}>>> & string;
 
-export declare const DropdownOptionIcon: IStyledComponentBase<"web", Substitute<    {
+export declare const DropdownListOptionIcon: IStyledComponentBase<"web", Substitute<    {
 type: keyof IconTypeMap_2;
 name: "Radio" | "Square" | "Arrow" | "Heart" | "Close" | "Biometry" | "QR" | "Search" | "Folder" | "Wallet" | "Graph" | "Bookmark" | "Category" | "Home" | "Notification" | "Chat" | "Paper" | "Plus" | "Minus" | "PaperPlus" | "PaperNegative" | "PaperFail" | "PaperDownload" | "PaperUpload" | "Send" | "PasswordMini" | "Swap" | "Work" | "Arrow1" | "Arrow2" | "Arrow3" | "Arrow4" | "ArrowMini1" | "ArrowMini2" | "Scan" | "Activity" | "Calendar" | "Message" | "PlusMini" | "ChartMini" | "Game" | "Bag1" | "Bag2" | "TicketStar" | "MoreCircle" | "MoreSquare" | "Discount" | "Buy" | "Web" | "InfoMini" | "DangerMini" | "DangerTriangle" | "CloseMini" | "TickMini" | "Video" | "Discovery" | "Location" | "Document" | "Setting" | "TimeSquare" | "TimeCircle" | "VolumeUp" | "VolumeDown" | "VolumeOff" | "Star" | "Select" | "Ticket" | "Camera" | "Profile" | "AddUser" | "TwoUser" | "ThreeUser" | "Login" | "Logout" | "Download" | "Upload" | "Voice" | "Voice2" | "Delete" | "Edit" | "EditSquare" | "PlayMini" | "ShieldDone" | "ShieldFail" | "Show" | "Hide" | "Filter" | "Filter2" | "Image" | "Image2" | "Call" | "Calling" | "CallMissed" | "CallSilent" | "Lock" | "Unlock" | "Resources" | "Language" | "Line" | "Circle" | "Blocks" | "Balls" | "Map" | "HomeLikes" | "HomeManagement" | "UserSettings" | "User" | "Jenesei";
 className?: string;
 onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
-size: IThemeSize_3 | "100%";
-primaryColor?: IThemePaletteKeys_3;
-secondColor?: IThemePaletteKeys_3;
+size: IThemeSize_2 | "100%";
+primaryColor?: IThemePaletteKeys_2;
+secondColor?: IThemePaletteKeys_2;
 turn?: number;
 order?: number;
 tabIndex?: number;
-} & addSXProps_3, AddDollarSign_2<    {
+} & addSXProps_3, AddDollarSign_2<Pick<SelectProps_2<ISelectItem_2>, "size" | "genre"> & {
 checked?: boolean;
-genre: TInputSelect_2;
-size: IThemeSize_3;
 }>>> & string & Omit<(<T extends keyof IconTypeMap_2>(props: IconItemProps_2<T>) => JSX.Element | null), keyof Component<any, {}, any>>;
 
-export declare type DropdownOptionIconProps = AddDollarSign<{
+export declare type DropdownListOptionIconProps = AddDollarSign<Pick<SelectProps<ISelectItem>, 'genre' | 'size'> & {
     checked?: boolean;
-    genre: TInputSelect;
-    size: IThemeSize;
 }>;
 
-export declare const DropdownOptionLayout: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SelectStyledOptionProps>> & string;
+export declare type DropdownListOptionProps = AddDollarSign<Pick<SelectProps<ISelectItem>, 'genre' | 'size' | 'isCenter' | 'isNotShowHoverStyle' | 'isBold'> & {
+    item?: ISelectItem;
+    isChecked?: boolean;
+    isShowScroll?: boolean;
+}>;
+
+export declare const DropdownListParent: IStyledComponentBase<"web", Substitute<Omit<HTMLMotionProps<"div">, "ref"> & RefAttributes<HTMLDivElement>, AddDollarSign_2<Pick<SelectProps_2<ISelectItem_2>, "size">>>> & string & Omit<ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>, keyof Component<any, {}, any>>;
 
-export declare const DropdownSelectAll: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare type DropdownListParentProps = AddDollarSign<Pick<SelectProps<ISelectItem>, 'size'>>;
 
 export declare enum ENUM_ICON_CHECKBOX {
     Radio = 0,
@@ -814,6 +908,12 @@ export declare type ErrorMessageProps = {
 
 export declare type ErrorMessagePropsDollar = AddDollarSign<ErrorMessageProps>;
 
+declare type FixedTextAreaProps = BaseTextAreaProps & {
+    isResize?: false | undefined;
+    isAutoHeight?: false | undefined;
+    maxRows?: never;
+};
+
 export declare function formatPhoneNumber(dialCode: string, international: string): {
     format: string;
     placeholder: string;
@@ -1026,43 +1126,8 @@ export declare interface InputChildrenProps extends PropsWithChildren {
     width: string;
 }
 
-declare type InputDefaultProps = addErrorProps & addSXProps & {
-    ref?: Ref<HTMLInputElement | null>;
-    name?: string;
-    id?: string;
-    className?: string;
-    defaultValue?: string;
-    isNotShowHoverStyle?: boolean;
-    autocomplete?: HTMLInputAutoCompleteAttribute;
-    isAllowEmptyFormatting?: boolean;
-    genre: TInputGenre;
-    size: IThemeSize;
-    tabIndex?: number;
-    isWidthAsHeight?: boolean;
-    isNiceNumber?: boolean;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    isReadOnly?: boolean;
-    isInputEffect?: boolean;
-    isRequired?: boolean;
-    isCenter?: boolean;
-    isNoSpaces?: boolean;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    onPaste?: ClipboardEventHandler<HTMLInputElement>;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
-    placeholder?: string;
-    isBold?: boolean;
-    postfixChildren?: InputChildrenProps;
-    prefixChildren?: InputChildrenProps;
-    value?: string | null | number;
-    inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
-    maxLength?: number;
-    minLength?: number;
-};
-
 /****************************************** is isInputEffect *************************************************/
-export declare const InputIsInputEffect: RuleSet<Pick<AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isBold" | "isNiceNumber" | "isNotShowHoverStyle" | "isCenter">>, "$isInputEffect">>;
+export declare const InputIsInputEffect: RuleSet<Pick<AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>, "$isInputEffect">>;
 
 export declare type InputItem = {
     day: string;
@@ -1070,7 +1135,7 @@ export declare type InputItem = {
     year: string;
 };
 
-export declare type InputNumericProps = InputDefaultProps & {
+export declare type InputNumericProps = BaseInputProps & {
     variety: 'numeric';
     onChange?: (value: NumberFormatValues) => void;
     propsNumeric: Pick<NumericFormatProps, 'allowLeadingZeros' | 'thousandSeparator' | 'allowNegative' | 'allowedDecimalSeparators' | 'decimalScale' | 'decimalSeparator' | 'fixedDecimalScale' | 'prefix' | 'thousandsGroupStyle' | 'isAllowed' | 'suffix'>;
@@ -1081,7 +1146,8 @@ export declare const InputOTP: (props: InputOTPProps) => JSX.Element;
 export declare type InputOTPProps = {
     length: number;
     onComplete?: (otp: string) => void;
-    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onFocus?: (event?: FocusEvent_2<HTMLElement>) => void;
+    onBlur?: (event?: FocusEvent_2<HTMLElement>) => void;
 } & Pick<InputStandardProps, 'size' | 'genre' | 'id' | 'sx' | 'error' | 'onChange'>;
 
 /****************************************** Size *************************************************/
@@ -1093,16 +1159,13 @@ export declare const InputOTPWrapper: IStyledComponentBase<"web", Substitute<Det
 
 export declare type InputOTPWrapperProps = AddDollarSign<Pick<InputOTPProps, 'size' | 'sx' | 'error'>>;
 
-export declare type InputPatternProps = InputDefaultProps & {
+export declare type InputPatternProps = BaseInputProps & {
     variety: 'pattern';
     onChange?: (value: NumberFormatValues) => void;
     propsPattern: Pick<PatternFormatProps, 'format' | 'mask' | 'allowEmptyFormatting' | 'patternChar' | 'valueIsNumericString' | 'type'>;
 };
 
-/****************************************** Placeholder *************************************************/
-export declare const InputPlaceholder: RuleSet<AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isBold" | "isNiceNumber" | "isNotShowHoverStyle" | "isCenter">>>;
-
-export declare const InputPlaceholderNiceNumber: RuleSet<AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isBold" | "isNiceNumber" | "isNotShowHoverStyle" | "isCenter">>>;
+export declare const InputPlaceholderNiceNumber: RuleSet<AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>;
 
 export declare const InputPostfixChildren: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign_2<Pick<InputProps_2, "isDisabled"> & Pick<InputChildrenProps_2, "left" | "right" | "width">>>> & string;
 
@@ -1112,11 +1175,11 @@ export declare const InputPrefixChildren: IStyledComponentBase<"web", Substitute
 export declare type InputProps = InputStandardProps | InputPatternProps | InputNumericProps;
 
 /****************************************** Size *************************************************/
-export declare const InputSize: RuleSet<AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isBold" | "isNiceNumber" | "isNotShowHoverStyle" | "isCenter">>>;
+export declare const InputSize: RuleSet<AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>;
 
 export declare const InputSizeConstructor: (props: IThemeSizePropertyDefault) => RuleSet<object>;
 
-export declare type InputStandardProps = InputDefaultProps & {
+export declare type InputStandardProps = BaseInputProps & {
     variety: 'standard';
     onChange?: (value: string) => void;
     type?: HTMLInputTypeAttribute;
@@ -1127,6 +1190,8 @@ export declare type InputStandardProps = InputDefaultProps & {
 
 export declare interface ISelectItem {
     [key: string]: unknown;
+    isDisabled?: boolean;
+    isLoading?: boolean;
     label: string | number | ReactNode;
     value: string | number;
 }
@@ -1562,6 +1627,7 @@ declare type PopoverProps = PropsWithChildren & {
     maxWidth?: string;
     maxHeight?: string;
     isOpen: boolean;
+    isShowAlwaysOutline?: boolean;
     floatingStyles: CSSProperties;
     onClose?: () => void;
     ref?: Ref<HTMLElement | null>;
@@ -1809,6 +1875,12 @@ export declare const RangeWrapper: IStyledComponentBase<"web", Substitute<Detail
 
 export declare type RangeWrapperProps = AddDollarSign<Pick<RangeProps, 'size' | 'sx' | 'error'>>;
 
+declare type ResizableTextAreaProps = BaseTextAreaProps & {
+    isResize: true;
+    isAutoHeight?: false | undefined;
+    maxRows?: never;
+};
+
 export declare const Ripple: FC<RippleProps>;
 
 export declare interface RippleArrayElement {
@@ -1853,39 +1925,29 @@ export declare type ScrollProps = StackProps & DefaultScrollProps;
 
 export declare const Select: <T extends object & ISelectItem>(props: SelectProps<T>) => JSX.Element;
 
-export declare type SelectDateProps = Omit<SelectProps<ISelectItem>, 'option' | 'value' | 'onChange'> & {
-    startDate?: number;
-    endDate?: number;
-    value: number;
-    isShortLabel?: boolean;
-    onChange: (timestamp: number) => void;
-    monthsLocale: MonthItem[];
-};
-
-export declare const SelectInputIcon: IStyledComponentBase<"web", Substitute<    {
-type: keyof IconTypeMap_2;
-name: "Radio" | "Square" | "Arrow" | "Heart" | "Close" | "Biometry" | "QR" | "Search" | "Folder" | "Wallet" | "Graph" | "Bookmark" | "Category" | "Home" | "Notification" | "Chat" | "Paper" | "Plus" | "Minus" | "PaperPlus" | "PaperNegative" | "PaperFail" | "PaperDownload" | "PaperUpload" | "Send" | "PasswordMini" | "Swap" | "Work" | "Arrow1" | "Arrow2" | "Arrow3" | "Arrow4" | "ArrowMini1" | "ArrowMini2" | "Scan" | "Activity" | "Calendar" | "Message" | "PlusMini" | "ChartMini" | "Game" | "Bag1" | "Bag2" | "TicketStar" | "MoreCircle" | "MoreSquare" | "Discount" | "Buy" | "Web" | "InfoMini" | "DangerMini" | "DangerTriangle" | "CloseMini" | "TickMini" | "Video" | "Discovery" | "Location" | "Document" | "Setting" | "TimeSquare" | "TimeCircle" | "VolumeUp" | "VolumeDown" | "VolumeOff" | "Star" | "Select" | "Ticket" | "Camera" | "Profile" | "AddUser" | "TwoUser" | "ThreeUser" | "Login" | "Logout" | "Download" | "Upload" | "Voice" | "Voice2" | "Delete" | "Edit" | "EditSquare" | "PlayMini" | "ShieldDone" | "ShieldFail" | "Show" | "Hide" | "Filter" | "Filter2" | "Image" | "Image2" | "Call" | "Calling" | "CallMissed" | "CallSilent" | "Lock" | "Unlock" | "Resources" | "Language" | "Line" | "Circle" | "Blocks" | "Balls" | "Map" | "HomeLikes" | "HomeManagement" | "UserSettings" | "User" | "Jenesei";
-className?: string;
-onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
-size: IThemeSize_3 | "100%";
-primaryColor?: IThemePaletteKeys_3;
-secondColor?: IThemePaletteKeys_3;
-turn?: number;
-order?: number;
-tabIndex?: number;
-} & addSXProps_3, AddDollarSign_2<    {
-checked?: boolean;
-genre: TInputSelect_2;
-size: IThemeSize_3;
-}>>> & string & Omit<(<T extends keyof IconTypeMap_2>(props: IconItemProps_2<T>) => JSX.Element | null), keyof Component<any, {}, any>>;
+export declare type SelectInputProps = AddDollarSign<Pick<SelectProps<ISelectItem>, 'size' | 'genre'>>;
 
 export declare const SelectLanguage: FC<SelectLanguageProps>;
 
 export declare type SelectLanguageProps = Omit<SelectProps<ISelectItem>, 'option' | 'value' | 'onChange'> & {
-    value: string;
-    onChange: (language: string) => void;
+    value: string | null;
+    onChange: (language: string | null) => void;
 };
 
+export declare const SelectList: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, AddDollarSign_2<Pick<SelectProps_2<ISelectItem_2>, "size" | "isWrapSelectOption">>>> & string;
+
+export declare const SelectListOption: IStyledComponentBase<"web", Substitute<Omit<HTMLMotionProps<"li">, "ref"> & RefAttributes<HTMLLIElement>, AddDollarSign_2<Pick<SelectProps_2<ISelectItem_2>, "size" | "genre" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isWrapSelectOption" | "isClearWhenClickSelectListOption" | "isOnlyColorInSelectListOption"> & {
+item?: ISelectItem_2;
+isChecked?: boolean;
+}>>> & string & Omit<ForwardRefComponent<HTMLLIElement, HTMLMotionProps<"li">>, keyof Component<any, {}, any>>;
+
+export declare type SelectListOptionProps = AddDollarSign<Pick<SelectProps<ISelectItem>, 'genre' | 'size' | 'isCenter' | 'isNotShowHoverStyle' | 'isBold' | 'isWrapSelectOption' | 'isClearWhenClickSelectListOption' | 'isOnlyColorInSelectListOption'> & {
+    item?: ISelectItem;
+    isChecked?: boolean;
+}>;
+
+export declare type SelectListProps = AddDollarSign<Pick<SelectProps<ISelectItem>, 'size' | 'isWrapSelectOption'>>;
+
 export declare const SelectMapTheme: FC<SelectMapThemeProps>;
 
 export declare type SelectMapThemeProps = Omit<SelectProps<ISelectItem>, 'option' | 'value' | 'onChange'> & {
@@ -1893,76 +1955,91 @@ export declare type SelectMapThemeProps = Omit<SelectProps<ISelectItem>, 'option
     onChange: (theme: MapTheme | null) => void;
 };
 
-export declare const SelectMonth: FC<SelectDateProps>;
+export declare const SelectMonth: FC<SelectMonthProps>;
+
+export declare type SelectMonthProps = Omit<SelectProps<ISelectItem>, 'option' | 'value' | 'onChange'> & {
+    startDate?: number;
+    endDate?: number;
+    value: number | null;
+    isShortLabel?: boolean;
+    onChange: (value: number | null) => void;
+    monthsLocale: MonthItem[];
+};
+
+export declare const SelectMonths: FC<SelectMonthsProps>;
+
+export declare type SelectMonthsProps = Omit<SelectProps<ISelectItem>, 'option' | 'value' | 'onChange'> & {
+    startDate?: number;
+    endDate?: number;
+    value: number[];
+    isShortLabel?: boolean;
+    onChange: (value: number[]) => void;
+    monthsLocale: MonthItem[];
+};
 
 export declare type SelectProps<T extends ISelectItem> = addErrorProps & addSXProps & {
-    name?: string;
     id?: string;
     size: IThemeSize;
     genre: TInputSelect;
-    placeholder?: string;
     isDisabled?: boolean;
     isShowDropdownOptionIcon?: boolean;
-    isShowSelectInputIcon?: boolean;
+    isShowIconToggle?: boolean;
+    isShowIconSearchClear?: boolean;
+    isShowIconFetching?: boolean;
+    isShowSelectAll?: boolean;
+    isShowSelectAllLabel?: boolean;
+    isShowAddOption?: boolean;
+    isNotShowDisabledOptions?: boolean;
     isOnClickOptionClose?: boolean;
-    isEmptyOption?: boolean;
-    labelEmptyOption?: string;
-    inputProps?: Omit<InputStandardProps, 'isDisabled' | 'error' | 'name' | 'id' | 'genre' | 'size' | 'placeholder' | 'width'>;
-    optionProps?: Omit<InputStandardProps, 'isDisabled' | 'name' | 'id' | 'genre' | 'size' | 'placeholder' | 'width'>;
+    isNotShowHoverStyle?: boolean;
+    isSortValueAsOption?: boolean;
+    isCenter?: boolean;
+    isStayValueAfterSelect?: boolean;
+    isBold?: boolean;
+    isWrapSelectOption?: boolean;
     isMulti?: boolean;
+    isFetching?: boolean;
+    isClearWhenClickSelectListOption?: boolean;
+    isStaySearchAfterSelect?: boolean;
+    isOnlyColorInSelectListOption?: boolean;
+    labelPlaceholder?: string;
+    labelEmptyOption?: string;
+    labelSelectAll?: string;
+    labelAndMore?: (count: number) => string;
+    labelAddOption?: (value: string) => string;
+    isSearch?: boolean;
+    valueSearch?: string;
+    onChangeSearch?: (value: string) => void;
+    optionAllLength?: number;
     option: T[];
     value: T[];
-    onChange: (option: T[]) => void;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    maxView?: number;
-    minView?: number;
+    maxViewSelect?: number;
+    maxViewDropdown?: number;
+    minViewDropdown?: number;
+    refFloating?: Ref<HTMLElement | null>;
+    refReference?: Ref<HTMLElement | null>;
+    onAddOption?: (value: string) => void;
+    onChange: (value: T[]) => void;
+    onChangeAll?: (value: T[], isAll: boolean) => void;
+    onFocus?: (event?: FocusEvent_2<HTMLElement>) => void;
+    onBlur?: (event?: FocusEvent_2<HTMLElement>) => void;
     fetchNextPage?: () => void;
     getEstimateSize?: (index: number) => number;
-    isFetching?: boolean;
-    footer?: {
-        erase?: {
-            label: string;
-            onCLick?: () => void;
-        };
-        selectAll?: {
-            defaultValue?: boolean;
-            isPagination?: boolean;
-            label: string;
-            onCLick?: () => void;
-        };
-    };
 };
 
-export declare type SelectStyledFooterProps = StyledInputProps & AddDollarSign<{
-    isErase?: boolean;
-    isSelectAll?: boolean;
-}>;
+export declare const SelectTextArea: IStyledComponentBase<"web", Substitute<TextAreaProps_2 & BaseObject, BaseObject>> & string & Omit<(props: TextAreaProps_2) => JSX.Element, keyof Component<any, {}, any>>;
 
-export declare const SelectStyledInput: IStyledComponentBase<"web", Substitute<FastOmit<Omit<HTMLMotionProps<"input">, "ref"> & RefAttributes<HTMLInputElement>, "$sx" | "$isDisabled" | "$size" | "$genre" | "$error" | "$isInputEffect" | "$isLoading" | "$postfixChildren" | "$prefixChildren" | "$isBold" | "$isNiceNumber" | "$isNotShowHoverStyle" | "$isCenter"> & AddDollarSign_2<Pick<InputProps_3, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isBold" | "isNiceNumber" | "isNotShowHoverStyle" | "isCenter">>, AddDollarSign_2<Pick<InputProps_3, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isBold" | "isNiceNumber" | "isNotShowHoverStyle" | "isCenter">>>> & string;
-
-export declare type SelectStyledInputProps = StyledInputProps;
+export declare const SelectWrapper: IStyledComponentBase<"web", Substitute<Omit<HTMLMotionProps<"div">, "ref"> & RefAttributes<HTMLDivElement>, AddDollarSign_2<Pick<SelectProps_2<ISelectItem_2>, "size" | "sx" | "error" | "genre" | "isCenter" | "isNotShowHoverStyle"> & {
+isOpen: boolean;
+}>>> & string & Omit<ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>, keyof Component<any, {}, any>>;
 
-export declare type SelectStyledListProps = AddDollarSign<Pick<InputStandardProps, 'genre' | 'size'> & {
-    isShowScroll?: boolean;
-    isFooter?: boolean;
+export declare type SelectWrapperProps = AddDollarSign<Pick<SelectProps<ISelectItem>, 'genre' | 'sx' | 'size' | 'isNotShowHoverStyle' | 'error' | 'isCenter'> & {
+    isOpen: boolean;
 }>;
 
-export declare type SelectStyledOptionProps = AddDollarSign<{
-    isSelectedItem?: boolean;
-    checked?: boolean;
-}> & StyledInputProps;
-
-export declare const SelectWrapper: IStyledComponentBase<"web", Substitute<Omit<HTMLMotionProps<"div">, "ref"> & RefAttributes<HTMLDivElement>, SelectWrapperProps>> & string & Omit<ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>, keyof Component<any, {}, any>>;
-
-export declare type SelectWrapperProps = AddDollarSign<Pick<InputStandardProps, 'genre'> & {
-    parentListHeight: number;
-    radius: number;
-}> & StyledInputWrapperProps;
-
 export declare const SelectYear: FC<SelectYearProps>;
 
-export declare type SelectYearProps = Omit<SelectDateProps, 'monthsLocale'> & {
+export declare type SelectYearProps = Omit<SelectMonthProps, 'monthsLocale'> & {
     startDate?: number;
     endDate?: number;
     sortOrder?: 'asc' | 'desc';
@@ -1975,11 +2052,12 @@ export declare interface SeparatorProps {
     radius?: string;
     type?: 'horizontal' | 'vertical';
     color?: IThemePaletteKeys;
+    thickness?: string;
 }
 
-export declare const SeparatorWrapper: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign_2<Pick<SeparatorProps_2, "color" | "sx" | "type" | "radius">>>> & string;
+export declare const SeparatorWrapper: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign_2<Pick<SeparatorProps_2, "color" | "sx" | "type" | "radius" | "thickness">>>> & string;
 
-export declare type SeparatorWrapperProps = AddDollarSign<Pick<SeparatorProps, 'sx' | 'radius' | 'color' | 'type'>>;
+export declare type SeparatorWrapperProps = AddDollarSign<Pick<SeparatorProps, 'sx' | 'radius' | 'color' | 'type' | 'thickness'>>;
 
 export declare function setToCookie<T>(key: string, value: T, options?: CookieAttributes): void;
 
@@ -2126,7 +2204,7 @@ export declare type StyledCheckboxProps = AddDollarSign<Pick<CheckboxProps, 'che
 
 export declare type StyledDollarButtonIconsWrapperProps = AddDollarSign<Pick<ButtonProps, 'isIconGroup' | 'size'> & Pick<ButtonPropsIconGroup, 'iconGroupOrder'>>;
 
-export declare type StyledDollarButtonProps = AddDollarSign<Pick<ButtonProps, 'genre' | 'isDisabled' | 'isHidden' | 'isWidthAsHeight' | 'isMinWidthAsContent' | 'isRadius' | 'isHiddenBorder' | 'isPlaystationEffect' | 'size' | 'isFullSize'>> & addSXStyleProps & addSXTypographyStyleProps;
+export declare type StyledDollarButtonProps = AddDollarSign<Pick<ButtonProps, 'genre' | 'isDisabled' | 'isHidden' | 'isWidthAsHeight' | 'isMinWidthAsContent' | 'isRadius' | 'isHiddenBorder' | 'isPlaystationEffect' | 'size' | 'isFullSize' | 'isNotHoverEffect'>> & addSXStyleProps & addSXTypographyStyleProps;
 
 /****************************************** Styled *************************************************/
 export declare const StyledIcon: IStyledComponentBase<"web", Substitute<    {
@@ -2148,12 +2226,12 @@ export declare type StyledIconIdItemProps = AddDollarSign<Pick<IconItemProps<'id
 
 export declare type StyledIconProps = AddDollarSign<Pick<CheckboxProps, 'genre' | 'checked'>>;
 
-export declare const StyledInput: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isBold" | "isNiceNumber" | "isNotShowHoverStyle" | "isCenter">>>> & string;
+export declare const StyledInput: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>> & string;
 
 export declare type StyledInputChildrenProps = AddDollarSign<Pick<InputProps, 'isDisabled'> & Pick<InputChildrenProps, 'left' | 'right' | 'width'>>;
 
 /****************************************** Default *************************************************/
-export declare const StyledInputCSS: RuleSet<AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isBold" | "isNiceNumber" | "isNotShowHoverStyle" | "isCenter">>>;
+export declare const StyledInputCSS: RuleSet<AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>;
 
 export declare const StyledInputNumeric: IStyledComponentBase<"web", Substitute<InternalNumberFormatBase & {
 thousandSeparator?: boolean | string;
@@ -2168,7 +2246,7 @@ suffix?: string;
 prefix?: string;
 } & Omit<InputAttributes, never> & Omit<unknown, "value" | "ref" | "defaultValue" | "prefix" | "inputMode" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onMouseUp" | "type" | "displayType" | "renderText" | "getInputRef" | "valueIsNumericString" | "onValueChange" | "isAllowed" | "thousandSeparator" | "decimalSeparator" | "allowedDecimalSeparators" | "thousandsGroupStyle" | "decimalScale" | "fixedDecimalScale" | "allowNegative" | "allowLeadingZeros" | "suffix"> & {
 customInput?: ComponentType<unknown> | undefined;
-}, AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isBold" | "isNiceNumber" | "isNotShowHoverStyle" | "isCenter">>>> & string & Omit<typeof NumericFormat, keyof Component<any, {}, any>>;
+}, AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>> & string & Omit<typeof NumericFormat, keyof Component<any, {}, any>>;
 
 export declare const StyledInputPattern: IStyledComponentBase<"web", Substitute<InternalNumberFormatBase & {
 format: string;
@@ -2177,7 +2255,7 @@ allowEmptyFormatting?: boolean;
 patternChar?: string;
 } & Omit<InputAttributes, never> & Omit<unknown, "value" | "mask" | "ref" | "defaultValue" | "inputMode" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onMouseUp" | "type" | "format" | "displayType" | "renderText" | "getInputRef" | "valueIsNumericString" | "onValueChange" | "isAllowed" | "allowEmptyFormatting" | "patternChar"> & {
 customInput?: ComponentType<unknown> | undefined;
-}, AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isBold" | "isNiceNumber" | "isNotShowHoverStyle" | "isCenter">>>> & string & Omit<typeof PatternFormat, keyof Component<any, {}, any>>;
+}, AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>> & string & Omit<typeof PatternFormat, keyof Component<any, {}, any>>;
 
 export declare type StyledInputProps = AddDollarSign<Pick<InputProps, 'genre' | 'size' | 'error' | 'isLoading' | 'isInputEffect' | 'isDisabled' | 'postfixChildren' | 'prefixChildren' | 'isBold' | 'isNiceNumber' | 'isNotShowHoverStyle' | 'sx' | 'isCenter'>>;
 
@@ -2186,7 +2264,7 @@ export declare const StyledInputWrapper: IStyledComponentBase<"web", Substitute<
 
 export declare type StyledInputWrapperProps = AddDollarSign<Pick<InputProps, 'isDisabled' | 'isInputEffect' | 'sx' | 'size' | 'isWidthAsHeight'>>;
 
-export declare const StyledMotionInput: IStyledComponentBase<"web", Substitute<Omit<HTMLMotionProps<"input">, "ref"> & RefAttributes<HTMLInputElement>, AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isBold" | "isNiceNumber" | "isNotShowHoverStyle" | "isCenter">>>> & string & Omit<ForwardRefComponent<HTMLInputElement, HTMLMotionProps<"input">>, keyof Component<any, {}, any>>;
+export declare const StyledMotionInput: IStyledComponentBase<"web", Substitute<Omit<HTMLMotionProps<"input">, "ref"> & RefAttributes<HTMLInputElement>, AddDollarSign_2<Pick<InputProps_2, "size" | "sx" | "isDisabled" | "error" | "genre" | "isLoading" | "isCenter" | "isNotShowHoverStyle" | "isBold" | "isInputEffect" | "postfixChildren" | "prefixChildren" | "isNiceNumber">>>> & string & Omit<ForwardRefComponent<HTMLInputElement, HTMLMotionProps<"input">>, keyof Component<any, {}, any>>;
 
 export declare const StyledScroll: IStyledComponentBase<"web", Substitute<StackProps_2, StyledScrollProps>> & string & Omit<FC<StackProps_2>, keyof Component<any, {}, any>>;
 
@@ -2204,17 +2282,13 @@ export declare type StyledStackProps = AddDollarSign<StackProps>;
 
 export declare const StyledSVG: IStyledComponentBase<"web", Substitute<SVGProps<SVGSVGElement>, StyledIconIdItemProps>> & string;
 
-export declare const StyledTextArea: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, AddDollarSign_2<Pick<TextAreaProps_2, "size" | "isDisabled" | "error" | "genre" | "isLoading" | "isBold" | "isTextAreaEffect" | "isResize">>>> & string;
-
-/****************************************** Default *************************************************/
-export declare const StyledTextAreaCSS: RuleSet<AddDollarSign_2<Pick<TextAreaProps_2, "size" | "isDisabled" | "error" | "genre" | "isLoading" | "isBold" | "isTextAreaEffect" | "isResize">>>;
-
-export declare type StyledTextAreaProps = AddDollarSign<Pick<TextAreaProps, 'genre' | 'size' | 'error' | 'isLoading' | 'isTextAreaEffect' | 'isDisabled' | 'isBold' | 'isResize'>>;
-
-/****************************************** Wrapper *************************************************/
-export declare const StyledTextAreaWrapper: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign_2<Pick<TextAreaProps_2, "sx" | "isDisabled" | "isTextAreaEffect">>>> & string;
+export declare const StyledTextArea: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, AddDollarSign_2<Pick<TextAreaProps_3, "size" | "isDisabled" | "error" | "genre" | "isLoading" | "isBold" | "isResize" | "isInputEffect"> & {
+lineHeight: number;
+}>>> & string;
 
-export declare type StyledTextAreaWrapperProps = AddDollarSign<Pick<TextAreaProps, 'isDisabled' | 'isTextAreaEffect' | 'sx'>>;
+export declare type StyledTextAreaProps = AddDollarSign<Pick<TextAreaProps, 'genre' | 'size' | 'error' | 'isLoading' | 'isInputEffect' | 'isDisabled' | 'isBold' | 'isResize'> & {
+    lineHeight: number;
+}>;
 
 export declare type StyledToggleProps = AddDollarSign<Pick<ToggleProps, 'genre' | 'isDisabled' | 'value' | 'size'>> & addErrorStylesProps;
 
@@ -2236,43 +2310,17 @@ export declare type TDateGenre = keyof IThemeGenreDate;
 
 export declare const TextArea: (props: TextAreaProps) => JSX.Element;
 
-/****************************************** is PlaystationEffect *************************************************/
-export declare const TextAreaIsTextAreaEffect: RuleSet<Pick<AddDollarSign_2<Pick<TextAreaProps_2, "size" | "isDisabled" | "error" | "genre" | "isLoading" | "isBold" | "isTextAreaEffect" | "isResize">>, "$isTextAreaEffect">>;
-
-/****************************************** Placeholder *************************************************/
-export declare const TextAreaPlaceholder: RuleSet<AddDollarSign_2<Pick<TextAreaProps_2, "size" | "isDisabled" | "error" | "genre" | "isLoading" | "isBold" | "isTextAreaEffect" | "isResize">>>;
+export declare type TextAreaGenre = keyof IThemeGenreTextArea;
 
-export declare type TextAreaProps = addErrorProps & addSXProps & {
-    name?: string;
-    id?: string;
-    className?: string;
-    defaultValue?: string;
-    isAllowEmptyFormatting?: boolean;
-    genre: TTextAreaGenre;
-    height?: number;
-    maxRows?: number;
-    size: IThemeSize;
-    isDisabled?: boolean;
-    isResize?: boolean;
-    isAutoHeight?: boolean;
-    isLoading?: boolean;
-    isReadOnly?: boolean;
-    isTextAreaEffect?: boolean;
-    isRequired?: boolean;
-    isNoSpaces?: boolean;
-    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-    onChange?: (value: string) => void;
-    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
-    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
-    placeholder?: string;
-    isBold?: boolean;
-    value?: string | null;
-};
+export declare type TextAreaProps = AutoHeightTextAreaProps | ResizableTextAreaProps | FixedTextAreaProps;
 
-/****************************************** Size *************************************************/
-export declare const TextAreaSize: RuleSet<AddDollarSign_2<Pick<TextAreaProps_2, "size" | "isDisabled" | "error" | "genre" | "isLoading" | "isBold" | "isTextAreaEffect" | "isResize">>>;
+export declare const TextAreaWrapper: IStyledComponentBase<"web", Substitute<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AddDollarSign_2<Pick<TextAreaProps_3, "size" | "sx" | "isDisabled" | "genre" | "isReadOnly" | "isInputEffect"> & {
+lineHeight: number;
+}>>> & string;
 
-export declare const TextAreaSizeConstructor: (props: IThemeSizePropertyDefault) => RuleSet<object>;
+export declare type TextAreaWrapperProps = AddDollarSign<Pick<TextAreaProps, 'isDisabled' | 'isInputEffect' | 'sx' | 'size' | 'genre' | 'isReadOnly'> & {
+    lineHeight: number;
+}>;
 
 export declare const ThemeBlack: ITheme;
 
@@ -2324,6 +2372,7 @@ className?: string;
 maxWidth?: string;
 maxHeight?: string;
 isOpen: boolean;
+isShowAlwaysOutline?: boolean;
 floatingStyles: CSSProperties;
 onClose?: () => void;
 ref?: Ref<HTMLElement | null>;
@@ -2346,8 +2395,6 @@ export declare function transformObjectToArray<T>(obj: GenericObject<T>): Array<
 
 export declare function transformObjectValuesToKeys<T>(obj: GenericObject<T>): GenericObject<string>;
 
-export declare type TTextAreaGenre = keyof IThemeGenreTextArea;
-
 export declare type TToggleGenre = keyof IThemeGenreToggle;
 
 export declare function TypingEffect({ text }: {
@@ -2374,7 +2421,7 @@ declare type TypographyDefaultProps = {
     decoration?: CSSProperties['textDecoration'];
     family?: IThemeFontFamily;
     flex?: string;
-    height?: number;
+    height?: number | string;
     isHoverUnderlining?: boolean;
     letterSpacing?: CSSProperties['letterSpacing'];
     line?: number;
@@ -2383,6 +2430,7 @@ declare type TypographyDefaultProps = {
     transform?: CSSProperties['textTransform'];
     weight?: IThemeTypographyWeight;
     wrap?: CSSProperties['textWrap'];
+    isNoUserSelect?: boolean;
 };
 
 export declare const TypographyLink: LinkComponent<    {
@@ -2420,6 +2468,16 @@ declare type TypographyVariantProps = TypographyDefaultProps & {
     variant: IThemeTypographyHeading;
 };
 
+declare type UncontrolledValue = {
+    value?: never;
+    defaultValue: string | number | null | undefined;
+};
+
+declare type UncontrolledValue_2 = {
+    value?: never;
+    defaultValue: string;
+};
+
 export declare function UpdateMapSettings(props: UpdateMapSettingsProps): null;
 
 export declare interface UpdateMapSettingsProps {
@@ -2462,7 +2520,7 @@ export declare const useCookie: () => CookieContextProps;
 
 export declare const useDebouncedCallback: (callback: () => void, delay?: number) => () => void;
 
-export declare const useDeepCompareMemoize: <T extends object | undefined | boolean>(value: T) => T;
+export declare const useDeepCompareMemoize: <T extends object | undefined | boolean | any[]>(value: T) => T;
 
 export declare const useDescription: (defaultDescription: string) => {
     description: string;
@@ -2500,11 +2558,15 @@ declare type UsePopoverProps = {
     hoverCloseDelay?: number;
     hoverOffset?: number;
     isClickOutside?: boolean;
+    isDisabled?: boolean;
     isFloatingHover?: boolean;
     isWidthAsContent?: boolean;
-    mode?: 'click' | 'hover' | 'clickOpen';
+    mode?: 'click' | 'hover' | 'clickOpen' | 'independence';
     offset?: number;
     placement: Placement;
+    refsExcludeClickOutside?: Ref<HTMLElement | null>[];
+    onFocus?: () => void;
+    onBlur?: () => void;
 };
 
 export declare const useRemovePreviewLoader: () => void;