@shoplflow/base 0.13.0 → 0.13.2

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ElementType, ComponentPropsWithoutRef, ReactElement, ComponentPropsWithRef, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
+import * as framer_motion from 'framer-motion';
 import { CustomDomComponent } from 'framer-motion';
 import { IconSource } from '@shoplflow/shopl-assets';
 import { IconSource as IconSource$1 } from '@shoplflow/hada-assets';
@@ -493,6 +494,26 @@ declare type ButtonComponent = <T extends ElementType = 'button'>(props: ButtonP
 
 declare const Button: ButtonComponent;
 
+declare const IconSizeVariants: {
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+    readonly L: "L";
+    readonly XL: "XL";
+};
+declare type IconSizeVariantsType = $Values<typeof IconSizeVariants>;
+interface IconProps extends IconOptionProps {
+}
+interface IconOptionProps extends SizeVariantProps<IconSizeVariantsType>, IconSourceProps, ColorTokenProps {
+}
+
+declare const Icon: React__default.ForwardRefExoticComponent<IconProps & React__default.RefAttributes<SVGSVGElement>>;
+
+declare const StyledIcon: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
+
 declare const iconButtonSizeVar: {
     readonly S: "S";
     readonly M: "M";
@@ -503,7 +524,9 @@ declare const iconButtonStyleVar: {
     readonly GHOST: "GHOST";
 };
 declare type IconButtonStyleVar = $Values<typeof iconButtonStyleVar>;
-declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVar> & StyleVariantProps<IconButtonStyleVar> & IconSourceProps;
+declare type IconButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & DisableProps & SizeVariantProps<IconButtonSizeVar> & StyleVariantProps<IconButtonStyleVar> & IconSourceProps & ColorTokenProps & {
+    iconSize?: IconSizeVariantsType;
+};
 declare type IconButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, IconButtonOptionProps>;
 declare type IconButtonComponent = <T extends ElementType = 'button'>(props: IconButtonProps<T> & {
     ref?: ComponentPropsWithRef<T>['ref'];
@@ -529,19 +552,13 @@ declare const Callout: {
 
 interface PopperProps extends PopperOptionProps {
 }
-interface PopperOptionProps {
-    width?: string;
-    height?: string;
+interface PopperOptionProps extends ChildrenProps {
     /**
      * popper의 offset을 설정합니다.
      *
      * Ref: https://floating-ui.com/docs/offset#offset
      */
     offset?: OffsetOptions;
-    /**
-     * popper가 열려있는지 여부를 결정합니다.
-     */
-    isOpen?: boolean;
     /**
      * 화면 뷰에 따라 자동으로 위치를 조정할 수 있습니다.
      * floating ui의 autoPlacement 미들웨어를 사용합니다.
@@ -565,8 +582,18 @@ interface PopperOptionProps {
      * Ref: https://floating-ui.com/docs/useFloating#middleware
      */
     middlewares?: Array<Middleware | null | undefined | false>;
+}
+interface PopperTriggerProps extends ChildrenProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * popper가 열려있는지 여부를 결정합니다.
+     */
+    isOpen?: boolean;
+    width?: string;
+    height?: string;
+}
+interface PopperPortalProps extends ChildrenProps, HTMLAttributes<HTMLDivElement> {
     /**
-     * floating ui의 animation을 넣을 수 있습니다.
+     * animation을 넣을 수 있습니다.
      * framer-motion의 animation을 사용합니다.
      */
     animation?: {
@@ -574,44 +601,368 @@ interface PopperOptionProps {
         animate: Record<string, unknown>;
         exit: Record<string, unknown>;
     };
-    /**
-     * trigger할 요소를 설정합니다.
-     */
-    trigger: ReactNode;
-    /**
-     * pop할 요소를 설정합니다.
-     */
-    popper: ReactNode;
 }
 
-declare const Popper: ({ trigger, popper, isOpen, placement, offset: initialOffset, autoPlacement: initialAutoPlacement, strategy, middlewares, animation: initialAnimation, ...rest }: PopperProps) => react_jsx_runtime.JSX.Element;
+declare const Popper: {
+    ({ placement, offset: initialOffset, autoPlacement: initialAutoPlacement, strategy, middlewares, children, }: PopperProps): react_jsx_runtime.JSX.Element;
+    Trigger: React__default.ForwardRefExoticComponent<PopperTriggerProps & React__default.RefAttributes<HTMLDivElement>>;
+    Portal: React__default.ForwardRefExoticComponent<PopperPortalProps & React__default.RefAttributes<HTMLDivElement>>;
+};
+declare const PopperTrigger: React__default.ForwardRefExoticComponent<PopperTriggerProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const PopperPortal: React__default.ForwardRefExoticComponent<PopperPortalProps & React__default.RefAttributes<HTMLDivElement>>;
 
 declare const StyledPopper: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React$1.ElementType<any> | undefined;
-} & Pick<PopperOptionProps, "height" | "width">, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+} & Pick<PopperTriggerProps, "height" | "width">, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
-declare const IconSizeVariants: {
-    readonly X_SMALL: "X_SMALL";
-    readonly SMALL: "SMALL";
-    readonly MEDIUM: "MEDIUM";
-    readonly LARGE: "LARGE";
-    readonly X_LARGE: "X_LARGE";
+declare const dropdownOptionVar: {
+    readonly CLICK: "CLICK";
+    readonly OUTSIDE_CLICK: "OUTSIDE_CLICK";
+    readonly NONE: "NONE";
 };
-declare type IconSizeVariantsType = $Values<typeof IconSizeVariants>;
-interface IconProps extends IconOptionProps {
+declare type DropdownOptionVar = $Values<typeof dropdownOptionVar>;
+interface DropdownProps extends DropdownOptionProps {
 }
-interface IconOptionProps extends SizeVariantProps<IconSizeVariantsType>, IconSourceProps, ColorTokenProps {
+interface DropdownOptionProps {
+    /**
+     * 외부에서 `isOpen`을 제어할 수 있습니다.
+     */
+    isOpen?: boolean;
+    content: ReactNode;
+    trigger: ReactNode;
+    /**
+     * 드롭다운이 어떻게 닫힐 수 있는지 옵션을 설정합니다.
+     *
+     *
+     * CLICK: 화면을 클릭하면 닫힙니다.
+     * OUTSIDE_CLICK: 컨텐츠 영역 외부를 클릭하면 닫힙니다.
+     * NONE: 클릭으로 닫히지 않습니다.
+     */
+    option?: DropdownOptionVar;
+}
+interface DropdownContentProps extends ChildrenProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * 컨텐츠가 부모 `width`를 따라갈지, 고정될지 결정합니다.
+     */
+    type?: 'FILL' | 'FIXED';
+    /**
+     * 컨텐츠의 `width`를 설정합니다.
+     * type이 `FILL`일 경우 무시됩니다.
+     */
+    width?: string;
+}
+declare const dropdownSizeVariants: {
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type DropdownSizeVariantType = $Values<typeof dropdownSizeVariants>;
+interface DropdownButtonProps extends HTMLAttributes<HTMLButtonElement>, DisableProps, LeftElementProps, SizeVariantProps<DropdownSizeVariantType> {
+    /**
+     * placeholder를 설정합니다.
+     */
+    placeholder?: string;
+    /**
+     * 선택된 값을 노출합니다.
+     */
+    value?: string;
+    /**
+     * width를 설정합니다.
+     */
+    width?: string;
 }
 
-declare const Icon: React__default.ForwardRefExoticComponent<IconProps & React__default.RefAttributes<SVGSVGElement>>;
+declare const Dropdown: {
+    ({ isOpen: initialIsOpen, trigger, content, option }: DropdownProps): react_jsx_runtime.JSX.Element;
+    Button: React__default.ForwardRefExoticComponent<DropdownButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+    Content: React__default.ForwardRefExoticComponent<DropdownContentProps & React__default.RefAttributes<HTMLDivElement>>;
+};
 
-declare const StyledIcon: _emotion_styled.StyledComponent<{
+declare const getDropdownHeightBySizeVar: (size: DropdownSizeVariantType) => "40px" | "32px";
+declare const getDropdownFontSizeBySizeVar: (size: DropdownSizeVariantType) => "body1_400" | "body2_400";
+declare const getDropdownStyleBySizeVar: (size: DropdownSizeVariantType) => _emotion_react.SerializedStyles;
+declare const getDropdownIconSizeBySizeVar: (size: DropdownSizeVariantType) => _emotion_react.SerializedStyles;
+declare const StyledDropdown: _emotion_styled.StyledComponent<{
     theme?: _emotion_react.Theme | undefined;
     as?: React$1.ElementType<any> | undefined;
-} & IconOptionProps, React$1.SVGProps<SVGSVGElement>, {}>;
+}, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const StyledDropdownContent: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & DropdownContentProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const StyledDropdownButton: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & DropdownButtonProps, React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const DropdownButtonIcon: _emotion_styled.StyledComponent<{
+    slot?: string | undefined;
+    title?: string | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    className?: string | undefined;
+    color?: string | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    role?: React$1.AriaRole | undefined;
+    tabIndex?: number | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: React$1.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: React$1.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: React$1.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: React$1.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: React$1.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: React$1.ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: React$1.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: React$1.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: React$1.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: React$1.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: React$1.CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: React$1.CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: React$1.FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: React$1.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: React$1.FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: React$1.FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: React$1.FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: React$1.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: React$1.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: React$1.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: React$1.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: React$1.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: React$1.KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: React$1.DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: React$1.MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: React$1.ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: React$1.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: React$1.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: React$1.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: React$1.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: React$1.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: React$1.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: React$1.TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: React$1.TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: React$1.PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: React$1.UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: React$1.UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: React$1.WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: React$1.WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: React$1.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: React$1.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: React$1.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: React$1.AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: React$1.AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: React$1.TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: React$1.TransitionEventHandler<HTMLDivElement> | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    nonce?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "no" | "yes" | undefined;
+    radioGroup?: string | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+} & framer_motion.MotionProps & React$1.RefAttributes<HTMLDivElement> & {
+    theme?: _emotion_react.Theme | undefined;
+} & DropdownButtonProps, {}, {}>;
 
 interface TextAreaOptionProps extends DisableProps, ErrorProps {
+    width?: string;
     /**
      * maxLength를 설정해요.
      */
@@ -644,4 +995,4 @@ interface MinusBoxOptionProps {
 
 declare const MinusButton: React__default.ForwardRefExoticComponent<MinusBoxProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledIcon, StyledPopper, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };
+export { BackDropOptionProps, BackDropProps, BorderRadiusTokens, BoxShadowTokens, Button, ButtonComponent, ButtonOptionProps, ButtonProps, ButtonSizeVar, ButtonStyleVar, Callout, CalloutOptionProps, CalloutProps, CalloutType, CalloutTypes, ChipButton, ChipButtonOptionProps, ChipButtonProps, ChipButtonSizeVariantType, ChipButtonSizeVariants, ChipButtonStyleVariantType, ChipButtonStyleVariants, ChipToggle, ChipToggleOptionProps, ChipToggleProps, ChipToggleSizeVariantType, ChipToggleSizeVariants, ChipToggleStyleVariantType, ChipToggleStyleVariants, ColorTokens, Dropdown, DropdownButtonIcon, DropdownButtonProps, DropdownContentProps, DropdownOptionProps, DropdownOptionVar, DropdownProps, DropdownSizeVariantType, FontWeightTokens, Icon, IconButton, IconButtonComponent, IconButtonOptionProps, IconButtonProps, IconButtonSizeVar, IconButtonStyleVar, IconOptionProps, IconProps, IconSizeVariants, IconSizeVariantsType, MODAL_FOOTER_KEY, MODAL_HEADER_KEY, MinusBoxOptionProps, MinusBoxProps, MinusButton, Modal, ModalBodyOptionProps, ModalBodyProps, ModalContainerOptionProps, ModalContainerProps, ModalFooterOptionProps, ModalFooterProps, ModalFooterType, ModalHeaderOptionProps, ModalHeaderProps, ModalHeaderType, ModalPortal as ModalProvider, ModalSize, ModalSizeType, MotionStack, MotionStackComponentType, Popper, PopperOptionProps, PopperPortal, PopperPortalProps, PopperProps, PopperTrigger, PopperTriggerProps, ShoplflowProvider, ShoplflowProviderProps, SpacingTokens, Stack, StackComponentType, StackGenericProps, StackOptionProps, StackProps, StyledDropdown, StyledDropdownButton, StyledDropdownContent, StyledIcon, StyledPopper, StyledStack, Switch, SwitchOptionProps, SwitchProps, Text, TextArea, TextAreaOptionProps, TextAreaProps, TextOptionProps, TextProps, TypographyTokens, borderRadiusTokens, boxShadowTokens, buttonSizeVar, buttonStyleVar, colorTokens, fontWeightTokens, getDomain, getDropdownFontSizeBySizeVar, getDropdownHeightBySizeVar, getDropdownIconSizeBySizeVar, getDropdownStyleBySizeVar, iconButtonSizeVar, iconButtonStyleVar, spacingTokens, typographyTokens, useDomain, useHandleModal, useModalValue };