@shoplflow/base 0.13.0 → 0.13.2

package/dist/index.d.cts

@@ -0,0 +1,998 @@
+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';
+import * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
+import { $Values } from '@shoplflow/utils';
+import { Middleware } from '@floating-ui/react-dom';
+import { AutoPlacementOptions, Placement } from '@floating-ui/react';
+import { OffsetOptions } from '@floating-ui/core';
+
+declare type DomainType = 'SHOPL' | 'HADA';
+
+interface ShoplflowProviderProps {
+    domain?: DomainType;
+    children: React__default.ReactNode;
+}
+declare const ShoplflowProvider: ({ children, domain }: ShoplflowProviderProps) => react_jsx_runtime.JSX.Element;
+
+declare const ModalPortal: () => react_jsx_runtime.JSX.Element;
+
+declare type UseDomainType = (domain?: DomainType) => [DomainType | undefined];
+declare const useDomain: UseDomainType;
+declare const getDomain: () => "shopl" | "hada";
+
+declare type ModalStateType = {
+    component: ReactNode;
+    id?: string;
+};
+declare type RemoveModalProps = {
+    id?: string;
+    deps?: number;
+};
+declare type ModalContext = ModalStateType[];
+declare const ModalContext: React$1.Context<ModalContext>;
+
+declare const useHandleModal: () => {
+    addModal: (modal: React$1.ReactNode, id?: string | undefined) => void;
+    removeModal: (props?: RemoveModalProps | undefined) => void;
+};
+
+declare const useModalValue: () => {
+    modal: ModalContext;
+};
+
+declare const fontWeightTokens: {
+    fontWeightRegular: string;
+    fontWeightMedium: string;
+    fontWeightBold: string;
+};
+declare const borderRadiusTokens: {
+    borderRadius04: string;
+    borderRadius06: string;
+    borderRadius08: string;
+    borderRadius12: string;
+    borderRadius16: string;
+    borderRadius20: string;
+};
+declare const colorTokens: {
+    coolgray300: string;
+    coolgray200: string;
+    coolgray100: string;
+    coolgray50: string;
+    navy400: string;
+    navy300: string;
+    neutral0: string;
+    neutral100: string;
+    neutral150: string;
+    neutral200: string;
+    neutral300: string;
+    neutral350: string;
+    neutral400: string;
+    neutral500: string;
+    neutral600: string;
+    neutral700: string;
+    neutral400_5: string;
+    red300: string;
+    red200: string;
+    red100: string;
+    ocean300: string;
+    ocean200: string;
+    ocean100: string;
+    purple400: string;
+    purple300: string;
+    purple100: string;
+    yellow300: string;
+    yellow200: string;
+    yellow100: string;
+    green300: string;
+    green200: string;
+    green100: string;
+    shopl400: string;
+    shopl300: string;
+    shopl200: string;
+    shopl150: string;
+    shopl100: string;
+    hada400: string;
+    hada300: string;
+    hada200: string;
+    hada150: string;
+    hada100: string;
+    background: string;
+    primary100: string;
+    primary150: string;
+    primary200: string;
+    primary300: string;
+    primary400: string;
+};
+declare const spacingTokens: {
+    spacing04: string;
+    spacing06: string;
+    spacing08: string;
+    spacing12: string;
+    spacing16: string;
+    spacing20: string;
+    spacing24: string;
+    spacing30: string;
+    spacing32: string;
+    spacing40: string;
+};
+declare const boxShadowTokens: {
+    dropShadow: string;
+};
+declare const typographyTokens: {
+    heading1_700: string;
+    heading1_400: string;
+    heading2_700: string;
+    heading2_400: string;
+    heading3_700: string;
+    heading3_400: string;
+    title1_700: string;
+    title1_400: string;
+    title2_700: string;
+    title2_500: string;
+    title2_400: string;
+    body1_700: string;
+    body1_500: string;
+    body1_400: string;
+    body2_700: string;
+    body2_500: string;
+    body2_400: string;
+    body3_400: string;
+    body3_500: string;
+    caption_700: string;
+    caption_400: string;
+};
+
+declare type ColorTokens = keyof typeof colorTokens;
+declare type SpacingTokens = keyof typeof spacingTokens;
+declare type BorderRadiusTokens = keyof typeof borderRadiusTokens;
+declare type BoxShadowTokens = keyof typeof boxShadowTokens;
+declare type FontWeightTokens = keyof typeof fontWeightTokens;
+declare type TypographyTokens = keyof typeof typographyTokens;
+
+/**
+ * HTML 태그에 대한 타입
+ */
+declare type StringElementType = ElementType;
+declare type HTMLPropsWithoutRef<T extends StringElementType> = ComponentPropsWithoutRef<T>;
+interface DisableProps {
+    /**
+     * 비활성화 여부를 설정합니다.
+     */
+    disabled?: boolean;
+}
+interface ErrorProps {
+    /**
+     * 에러 여부를 설정합니다.
+     */
+    isError?: boolean;
+}
+interface SelectedProps {
+    /**
+     * 외부에서 선택 여부를 설정합니다. 내부에서 컨트롤할 수 없습니다.
+     */
+    isSelected?: boolean;
+}
+interface DefaultSelectedProps {
+    /**
+     * 초기 선택 값을 설정합니다.
+     */
+    defaultSelected?: boolean;
+}
+/**
+ * RadiusBooleanProps는 RadiusProps와 함께 사용할 수 없습니다.
+ */
+interface RadiusBooleanProps {
+    /**
+     * Radius를 토글할 수 있는 옵션입니다.
+     */
+    radius?: boolean;
+}
+declare type RenderConfigProps = {
+    /**
+     * 랜더하려고 하는 HTML tag로 변환할 수 있습니다.
+     *
+     * 예를 들어 a tag로 변환한다면 as='a'로 작성해주세요.
+     *
+     * @see https://emotion.sh/docs/styled#as-prop
+     */
+    as?: StringElementType;
+};
+interface SizeVariantProps<Size> {
+    /**
+     * 컴포넌트의 크기를 설정합니다.
+     */
+    sizeVar?: Size;
+}
+interface StyleVariantProps<Style> {
+    /**
+     * 컴포넌트의 스타일을 설정합니다.
+     */
+    styleVar?: Style;
+}
+interface ChildrenProps<Children = React__default.ReactNode> {
+    /**
+     * 컴포넌트 내부에 들어갈 children을 설정합니다.
+     */
+    children?: Children;
+}
+interface TextProps$1 {
+    /**
+     * 텍스트를 설정합니다.
+     */
+    text?: string;
+}
+interface ColorTokenProps {
+    /**
+     * 텍스트 혹은 아이콘의 색상을 설정합니다.
+     * styleVar이 있는 경우 메인색상을 설정합니다.
+     */
+    color?: ColorTokens;
+}
+interface BackgroundColorProps {
+    /**
+     * 배경의 색상을 설정합니다.
+     */
+    background?: ColorTokens;
+}
+interface IconSourceProps {
+    /**
+     * Icon을 설정합니다.
+     */
+    iconSource?: IconSource | IconSource$1;
+}
+interface LeftNodeProps {
+    /**
+     * 텍스트를 기준으로 왼쪽에 위치할 ReactNode를 설정합니다.
+     */
+    leftSource?: ReactNode;
+}
+interface RightNodeProps {
+    /**
+     * 텍스트를 기준으로 오른쪽에 위치할 ReactNode를 설정합니다.
+     */
+    rightSource?: ReactNode;
+}
+interface LeftAndRightNodeProps extends RightNodeProps, LeftNodeProps {
+}
+interface LeftElementProps {
+    /**
+     * 텍스트를 기준으로 왼쪽에 위치할 ReactElement를 설정합니다.
+     */
+    leftSource?: ReactElement;
+}
+interface RightElementProps {
+    /**
+     * 텍스트를 기준으로 오른쪽에 위치할 ReactElement를 설정합니다.
+     */
+    rightSource?: ReactElement;
+}
+interface LeftAndRightElementProps extends RightElementProps, LeftElementProps {
+}
+
+declare type StackGenericProps<T extends StringElementType = 'div'> = RenderConfigProps & StackProps & HTMLPropsWithoutRef<T>;
+declare type StackComponentType = <T extends StringElementType = 'div'>(props: StackGenericProps<T> & Pick<ComponentPropsWithRef<T>, 'ref'>) => ReactElement | null;
+declare type MotionStackComponentType<T extends StringElementType = 'div'> = CustomDomComponent<RenderConfigProps & HTMLPropsWithoutRef<T> & StackProps>;
+interface StackProps extends StackOptionProps, ChildrenProps {
+}
+interface StackOptionProps {
+    /**
+     * 요소들의 align-items 값
+     */
+    align?: CSSProperties['alignItems'];
+    /**
+     * 요소들의 justify-content 값
+     */
+    justify?: CSSProperties['justifyContent'];
+    /**
+     * 요소들의 flex-direction 값
+     * (값: row, column)
+     */
+    direction?: CSSProperties['flexDirection'];
+    /**
+     * 요소들 사이의 간격
+     */
+    spacing?: SpacingTokens;
+    /**
+     * flex-wrap 설정
+     */
+    flexWrap?: CSSProperties['flexWrap'];
+    /**
+     * width 설정
+     */
+    width?: CSSProperties['width'];
+    /**
+     * height 설정
+     */
+    height?: CSSProperties['height'];
+    /**
+     * flex 설정
+     */
+    flex?: CSSProperties['flex'];
+    /**
+     * background 설정
+     */
+    background?: ColorTokens;
+    /**
+     * border-radius 설정
+     */
+    radius?: BorderRadiusTokens;
+}
+
+interface StackType extends StackComponentType {
+    Vertical: StackComponentType;
+    Horizontal: StackComponentType;
+}
+declare const Stack: StackType;
+interface MotionStackType extends MotionStackComponentType {
+    Vertical: MotionStackComponentType;
+    Horizontal: MotionStackComponentType;
+}
+declare const MotionStack: MotionStackType;
+
+declare const StyledStack: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: React$1.ElementType<any> | undefined;
+} & StackOptionProps, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+interface TextOptionProps {
+    /**
+     * 타이포그레피를 설정합니다.
+     */
+    typography?: TypographyTokens;
+    color?: ColorTokens;
+    /**
+     * 텍스트를 몇 줄까지 보여줄지를 설정합니다.
+     */
+    lineClamp?: number;
+    whiteSpace?: CSSProperties['whiteSpace'];
+    display?: CSSProperties['display'];
+    textAlign?: CSSProperties['textAlign'];
+    textOverflow?: CSSProperties['textOverflow'];
+    textDecorations?: CSSProperties['textDecoration'];
+    opacity?: CSSProperties['opacity'];
+    wordBreak?: CSSProperties['wordBreak'];
+}
+interface TextProps extends TextOptionProps, ChildrenProps, RenderConfigProps, Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+}
+
+declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAttributes<unknown>>;
+
+declare const ModalSize: {
+    readonly XXS: "XXS";
+    readonly XS: "XS";
+    readonly S: "S";
+    readonly M: "M";
+    readonly L: "L";
+    readonly XL: "XL";
+    readonly XXL: "XXL";
+};
+declare type ModalSizeType = $Values<typeof ModalSize>;
+interface ModalContainerProps extends ModalContainerOptionProps, SizeVariantProps<ModalSizeType> {
+    children?: React.ReactNode | React.ReactNode[];
+}
+interface ModalContainerOptionProps {
+    /**
+     * 모달의 높이를 설정합니다.
+     */
+    height?: number;
+    /**
+     * 모달의 외부를 클릭했을 때 실행되는 함수입니다.
+     * @param args
+     */
+    outsideClick?: (args?: any) => void;
+}
+interface ModalHeaderProps extends ModalHeaderOptionProps, ChildrenProps {
+}
+interface ModalHeaderOptionProps {
+}
+declare const MODAL_HEADER_KEY: unique symbol;
+interface ModalHeaderType extends React.FC<ModalHeaderProps> {
+    [MODAL_HEADER_KEY]?: boolean;
+}
+interface ModalBodyProps extends ModalBodyOptionProps, ChildrenProps {
+}
+interface ModalBodyOptionProps {
+    isIncludeHeader?: boolean;
+    isIncludeFooter?: boolean;
+    height?: number;
+    sizeVar?: ModalSizeType;
+}
+interface ModalFooterProps extends ModalFooterOptionProps, ChildrenProps {
+}
+interface ModalFooterOptionProps {
+}
+declare const MODAL_FOOTER_KEY: unique symbol;
+interface ModalFooterType extends React.FC<ModalBodyProps> {
+    [MODAL_FOOTER_KEY]?: boolean;
+}
+
+declare const Modal: {
+    Container: ({ children, outsideClick, ...rest }: ModalContainerProps) => react_jsx_runtime.JSX.Element;
+    Header: ModalHeaderType;
+    Body: ({ children, isIncludeHeader, isIncludeFooter, sizeVar, height: modalContainerHeight, }: ModalBodyProps) => react_jsx_runtime.JSX.Element;
+    Footer: ModalFooterType;
+};
+
+interface BackDropProps extends ChildrenProps, BackDropOptionProps {
+}
+interface BackDropOptionProps {
+}
+
+interface SwitchProps extends SwitchOptionProps, DisableProps, SelectedProps, DefaultSelectedProps, HTMLAttributes<HTMLInputElement> {
+}
+interface SwitchOptionProps {
+    activeColor: ColorTokens;
+}
+
+declare const Switch: ({ onChange, isSelected, disabled, activeColor, defaultSelected, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
+
+declare const ChipToggleStyleVariants: {
+    readonly SOLID: "SOLID";
+};
+declare const ChipToggleSizeVariants: {
+    readonly S: "S";
+    readonly XS: "XS";
+};
+declare type ChipToggleStyleVariantType = $Values<typeof ChipToggleStyleVariants>;
+declare type ChipToggleSizeVariantType = $Values<typeof ChipToggleSizeVariants>;
+interface ChipToggleProps extends ChipToggleOptionProps, SelectedProps, DefaultSelectedProps, ColorTokenProps, StyleVariantProps<ChipToggleStyleVariantType>, SizeVariantProps<ChipToggleSizeVariantType>, LeftAndRightElementProps, RadiusBooleanProps, TextProps$1, DisableProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'> {
+}
+interface ChipToggleOptionProps {
+}
+
+declare const ChipToggle: ({ text, isSelected, defaultSelected, color, styleVar, sizeVar, leftSource, rightSource, onClick, disabled, ...rest }: ChipToggleProps) => react_jsx_runtime.JSX.Element;
+
+declare const ChipButtonStyleVariants: {
+    readonly LINE: "LINE";
+};
+declare const ChipButtonSizeVariants: {
+    readonly S: "S";
+    readonly XS: "XS";
+};
+declare type ChipButtonStyleVariantType = $Values<typeof ChipButtonStyleVariants>;
+declare type ChipButtonSizeVariantType = $Values<typeof ChipButtonSizeVariants>;
+interface ChipButtonProps extends ChipButtonOptionProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'>, TextProps$1, DisableProps, LeftAndRightElementProps, SizeVariantProps<ChipButtonSizeVariantType>, StyleVariantProps<ChipButtonStyleVariantType>, ColorTokenProps, BackgroundColorProps {
+}
+interface ChipButtonOptionProps {
+}
+
+declare const ChipButton: ({ styleVar, color, sizeVar, text, onClick, disabled, ...rest }: ChipButtonProps) => react_jsx_runtime.JSX.Element;
+
+declare type AsProp<T extends React__default.ElementType> = {
+    as?: T;
+};
+declare type PolymorphicRef<T extends React__default.ElementType> = React__default.ComponentPropsWithRef<T>['ref'];
+declare type PolymorphicComponentProps<T extends React__default.ElementType, Props = {}> = AsProp<T> & React__default.ComponentPropsWithoutRef<T> & Props & {
+    ref?: PolymorphicRef<T>;
+};
+
+declare const buttonSizeVar: {
+    readonly S: "S";
+    readonly M: "M";
+};
+declare type ButtonSizeVar = $Values<typeof buttonSizeVar>;
+declare const buttonStyleVar: {
+    readonly PRIMARY: "PRIMARY";
+    readonly SECONDARY: "SECONDARY";
+    readonly SOLID: "SOLID";
+    readonly GHOST: "GHOST";
+};
+declare type ButtonStyleVar = $Values<typeof buttonStyleVar>;
+declare type ButtonOptionProps<T extends ElementType = 'button'> = Omit<ComponentPropsWithoutRef<T>, 'color' | 'disabled'> & SizeVariantProps<ButtonSizeVar> & StyleVariantProps<ButtonStyleVar> & DisableProps & {
+    typography?: TypographyTokens;
+};
+declare type ButtonProps<T extends ElementType = 'button'> = PolymorphicComponentProps<T, ButtonOptionProps> & LeftAndRightNodeProps;
+declare type ButtonComponent = <T extends ElementType = 'button'>(props: ButtonProps<T> & {
+    ref?: ComponentPropsWithRef<T>['ref'];
+}) => ReactElement | null;
+
+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";
+};
+declare type IconButtonSizeVar = $Values<typeof iconButtonSizeVar>;
+declare const iconButtonStyleVar: {
+    readonly SOLID: "SOLID";
+    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 & 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'];
+}) => ReactElement | null;
+
+declare const IconButton: IconButtonComponent;
+
+declare const CalloutTypes: {
+    readonly INFORMATION: "INFORMATION";
+    readonly ALERT: "ALERT";
+};
+declare type CalloutType = $Values<typeof CalloutTypes>;
+interface CalloutProps extends CalloutOptionProps, ChildrenProps, StyleVariantProps<CalloutType> {
+}
+interface CalloutOptionProps {
+}
+
+declare const Callout: {
+    ({ children, styleVar, ...rest }: CalloutProps): react_jsx_runtime.JSX.Element;
+    Text: ({ children, ...rest }: TextProps) => react_jsx_runtime.JSX.Element;
+    Icon: ({ iconSource }: IconSourceProps) => react_jsx_runtime.JSX.Element;
+};
+
+interface PopperProps extends PopperOptionProps {
+}
+interface PopperOptionProps extends ChildrenProps {
+    /**
+     * popper의 offset을 설정합니다.
+     *
+     * Ref: https://floating-ui.com/docs/offset#offset
+     */
+    offset?: OffsetOptions;
+    /**
+     * 화면 뷰에 따라 자동으로 위치를 조정할 수 있습니다.
+     * floating ui의 autoPlacement 미들웨어를 사용합니다.
+     *
+     * Ref: https://floating-ui.com/docs/autoplacement
+     */
+    autoPlacement?: AutoPlacementOptions;
+    /**
+     * popper의 위치를 지정할 수 있습니다.
+     *
+     * Ref: https://floating-ui.com/docs/arrow#placement
+     */
+    placement?: Placement;
+    /**
+     * popper의 속성을 결정할 수 있습니다.
+     */
+    strategy?: 'absolute' | 'fixed';
+    /**
+     * floating ui의 middleware를 넣을 수 있습니다.
+     *
+     * 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> {
+    /**
+     * animation을 넣을 수 있습니다.
+     * framer-motion의 animation을 사용합니다.
+     */
+    animation?: {
+        initial: Record<string, unknown>;
+        animate: Record<string, unknown>;
+        exit: Record<string, unknown>;
+    };
+}
+
+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<PopperTriggerProps, "height" | "width">, React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+declare const dropdownOptionVar: {
+    readonly CLICK: "CLICK";
+    readonly OUTSIDE_CLICK: "OUTSIDE_CLICK";
+    readonly NONE: "NONE";
+};
+declare type DropdownOptionVar = $Values<typeof dropdownOptionVar>;
+interface DropdownProps extends DropdownOptionProps {
+}
+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 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 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;
+}, 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를 설정해요.
+     */
+    maxLength?: number;
+    /**
+     * text area의 높이를 조절해요.
+     */
+    height?: number;
+    /**
+     * text area의 최소 높이를 조절해요.
+     */
+    minHeight?: number;
+}
+declare type TextAreaProps = ComponentPropsWithoutRef<'textarea'> & TextAreaOptionProps;
+
+declare const TextArea: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & TextAreaOptionProps & React__default.RefAttributes<HTMLTextAreaElement>>;
+
+interface MinusBoxProps extends MinusBoxOptionProps, Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'color'> {
+}
+interface MinusBoxOptionProps {
+    /**
+     * 요소 클릭시 실행되는 함수
+     */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * 요소의 배경색
+     */
+    color?: ColorTokens;
+}
+
+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, 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 };