@liner-fe/prism 3.6.2 → 4.0.0

package/lib/index.d.ts

@@ -1,38 +1,98 @@
 import { SystemKeys, TypographyCaptionPrefix, TypographyParagraphPrefix, TypographyHeadingPrefix, TypographyTitlePrefix, TypographyDisplayPrefix, BasicColorType } from '@liner-fe/design-token-primitive';
 import * as react from 'react';
-import react__default, { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, MouseEventHandler, ReactElement, CSSProperties, ElementType } from 'react';
+import react__default, { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, MouseEventHandler, ReactElement } from 'react';
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
 import { IconProps, IconComponentType } from '@liner-fe/icon';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _artsy_fresnel_dist_Media from '@artsy/fresnel/dist/Media';
-import { breakpointOrigin, vars } from '@liner-fe/design-token';
+import { breakpointOrigin } from '@liner-fe/design-token';
 import { Popover as Popover$1, Tooltip as Tooltip$1, Checkbox as Checkbox$1, RadioGroup, Select as Select$1, Label as Label$1, Avatar as Avatar$1, AlertDialog as AlertDialog$1, Dialog as Dialog$1 } from 'radix-ui';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { PopoverProps, PopoverPortalProps } from '@radix-ui/react-popover';
 import { Drawer } from 'vaul';
+export { Box, BoxProps, Container, ContainerProps, Flex, FlexProps, Grid, GridProps, Section, SectionProps } from '@radix-ui/themes';
 
 declare const objectToArray: <T extends Record<string, unknown>>(obj: T) => [keyof T, T[keyof T]][];
 declare const arrayToStyleObject: <T extends SystemKeys>(colorKeys: T[], style: {
     readonly [key: string]: string;
-}, prefix?: string) => Partial<Record<SystemKeys, string>>;
+}, prefix?: string) => Partial<Record<"surface-neutral-lowest" | "surface-neutral-lowest-hover" | "surface-neutral-low" | "surface-neutral-low-hover" | "surface-neutral-mid" | "surface-neutral-mid-hover" | "surface-neutral-high" | "surface-neutral-high-hover" | "surface-neutral-highest" | "surface-neutral-static-lowest" | "surface-neutral-static-lowest-hover" | "surface-neutral-variation-lowest" | "control-fill-neutral-lowest" | "control-fill-neutral-lowest-hover" | "control-fill-neutral-low" | "control-fill-neutral-low-hover" | "control-fill-neutral-mid" | "control-fill-neutral-mid-hover" | "control-fill-neutral-high" | "control-fill-neutral-high-hover" | "control-fill-neutral-highest" | "label-neutral-base" | "label-neutral-secondary" | "label-neutral-tertiary" | "label-neutral-quaternary" | "label-neutral-static" | "border-neutral-alpha-strong" | "border-neutral-alpha-normal" | "border-neutral-alpha-subtle" | "border-neutral-alpha-hint" | "border-neutral-strong" | "border-neutral-normal" | "border-neutral-subtle" | "surface-inverse-lowest" | "surface-inverse-lowest-hover" | "surface-inverse-low" | "surface-inverse-low-hover" | "surface-inverse-mid" | "surface-inverse-mid-hover" | "surface-inverse-high" | "surface-inverse-high-hover" | "surface-inverse-static-high" | "surface-inverse-static-high-hover" | "surface-inverse-highest" | "label-on-inverse-base" | "label-on-inverse-secondary" | "label-on-inverse-tertiary" | "label-on-inverse-quaternary" | "label-on-inverse-static-base" | "label-on-inverse-static-secondary" | "border-on-inverse-alpha-strong" | "border-on-inverse-alpha-normal" | "border-on-inverse-alpha-subtle" | "border-on-inverse-alpha-hint" | "border-on-inverse-strong" | "border-on-inverse-normal" | "border-on-inverse-subtle" | "control-fill-brand" | "control-fill-brand-hover" | "control-fill-brand-strong" | "control-fill-brand-faint" | "control-fill-brand-faint-hover" | "label-brand-base" | "label-brand-secondary" | "border-brand-normal" | "border-brand-strong" | "label-on-brand" | "brandinverse-fill-static-low" | "brandinverse-fill-static-low-hover" | "accent-label-base" | "accent-label-yellow" | "accent-label-mint" | "accent-label-cyan" | "accent-label-purple" | "accent-label-pink" | "accent-control-fill-base" | "positive-strong" | "negative-strong" | "negative-strong-hover" | "caution" | "highlight" | "control-fill-selected" | "control-fill-drag" | "positive-faint" | "negative-faint" | "positive-base" | "negative-base" | "link" | "overlay-dim" | "background-default" | "background-subtle" | "control-fill-neutral-opaque-lowest" | "control-fill-neutral-opaque-lowest-hover" | "control-fill-neutral-opaque-low" | "control-fill-neutral-opaque-low-hover" | "control-fill-neutral-opaque-static-lowest" | "control-fill-neutral-lowest-pressed" | "control-fill-neutral-low-pressed" | "control-fill-neutral-mid-pressed" | "control-fill-neutral-high-pressed" | "control-fill-brand-pressed" | "control-fill-brand-faint-pressed" | "surface-neutral-lowest-pressed" | "surface-neutral-low-pressed" | "surface-neutral-mid-pressed" | "surface-neutral-static-lowest-pressed" | "surface-inverse-lowest-pressed" | "surface-inverse-low-pressed" | "surface-inverse-mid-pressed" | "surface-inverse-high-pressed" | "negative-strong-pressed" | "focus", string>>;
 declare const isEmptyObject: (obj: object) => boolean;
 
 declare const DEFAULT_LEVEL_OPTIONS: readonly ["primary", "secondary", "tertiary", "quaternary", "quinary", "negative", "static", "inverse-static"];
 type DefaultLevelType = (typeof DEFAULT_LEVEL_OPTIONS)[number];
 declare const DEFAULT_SIZE_OPTIONS: readonly ["cta", "l", "m", "s"];
 type ButtonSizeType = (typeof DEFAULT_SIZE_OPTIONS)[number];
-declare const defaultButtonVariants: (props?: ({
-    level?: "primary" | "secondary" | "tertiary" | "quaternary" | "quinary" | "negative" | "static" | "inverse-static" | undefined;
-    size?: "l" | "m" | "s" | "cta" | undefined;
-    width?: "full" | "fit-content" | undefined;
-} & ({
-    class?: cva.ClassValue;
-    className?: never;
-} | {
-    class?: never;
-    className?: cva.ClassValue;
-})) | undefined) => string;
+declare const defaultButtonVariants: cva.CVAComponent<Omit<{
+    base: string;
+    variants: {
+        level: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            quaternary: string;
+            quinary: string;
+            negative: string;
+            static: string;
+            'inverse-static': string;
+        };
+        size: {
+            cta: string[];
+            l: string[];
+            m: string[];
+            s: string[];
+        };
+        width: {
+            full: string;
+            'fit-content': string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        level: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            quaternary: string;
+            quinary: string;
+            negative: string;
+            static: string;
+            'inverse-static': string;
+        };
+        size: {
+            cta: string[];
+            l: string[];
+            m: string[];
+            s: string[];
+        };
+        width: {
+            full: string;
+            'fit-content': string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    level: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        quinary: string;
+        negative: string;
+        static: string;
+        'inverse-static': string;
+    };
+    size: {
+        cta: string[];
+        l: string[];
+        m: string[];
+        s: string[];
+    };
+    width: {
+        full: string;
+        'fit-content': string;
+    };
+}>;
 interface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     asChild?: boolean;
 }
@@ -194,23 +254,14 @@ type TypographyType = (props: Partial<Record<BreakPointsKey, TypoSet>> & {
 }) => JSX.Element;
 declare const Typography: TypographyType;
 
-/**
- * PopoverRoot
- */
 interface PopoverRootProps {
     isOpen?: boolean;
     children?: react.ReactNode;
     onChange?: (isOpen: boolean) => void;
 }
-/**
- * PopoverTrigger
- */
 interface PopoverTriggerProps {
     by?: ReactNode;
 }
-/**
- * PopoverContent
- */
 interface PopoverContentProps extends HTMLAttributes<HTMLDivElement>, Popover$1.PopoverContentProps {
     level?: 'primary' | 'secondary';
     tag?: string;
@@ -313,16 +364,58 @@ declare const Tooltip: (({ children, ...props }: TooltipRootProps) => react_jsx_
 declare const ICON_SIZE_OPTIONS: string[];
 declare const ICON_LEVEL_OPTIONS: readonly ["primary", "secondary", "tertiary", "quaternary", "quinary", "static", "inverse-static"];
 type IconButtonLevelType = (typeof ICON_LEVEL_OPTIONS)[number];
-declare const iconButtonVariants: (props?: ({
-    level?: "primary" | "secondary" | "tertiary" | "quaternary" | "quinary" | "static" | "inverse-static" | undefined;
-    size?: "l" | "m" | "s" | undefined;
-} & ({
-    class?: cva.ClassValue;
-    className?: never;
-} | {
-    class?: never;
-    className?: cva.ClassValue;
-})) | undefined) => string;
+declare const iconButtonVariants: cva.CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        level: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            quaternary: string;
+            static: string;
+            quinary: string;
+            'inverse-static': string;
+        };
+        size: {
+            l: string;
+            m: string;
+            s: string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        level: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            quaternary: string;
+            static: string;
+            quinary: string;
+            'inverse-static': string;
+        };
+        size: {
+            l: string;
+            m: string;
+            s: string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    level: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        static: string;
+        quinary: string;
+        'inverse-static': string;
+    };
+    size: {
+        l: string;
+        m: string;
+        s: string;
+    };
+}>;
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
     asChild?: boolean;
     level?: IconButtonLevelType;
@@ -347,15 +440,28 @@ declare const Radio: react.ForwardRefExoticComponent<Omit<RadioGroup.RadioGroupP
     Item: react.ForwardRefExoticComponent<RadioItemProps & react.RefAttributes<HTMLButtonElement>>;
 };
 
-declare const defaultTextfieldVariants: (props?: ({
-    color?: "neutral-container-lowest" | "neutral-container-mid" | undefined;
-} & ({
-    class?: cva.ClassValue;
-    className?: never;
-} | {
-    class?: never;
-    className?: cva.ClassValue;
-})) | undefined) => string;
+declare const defaultTextfieldVariants: cva.CVAComponent<Omit<{
+    base: string;
+    variants: {
+        color: {
+            'surface-neutral-mid': string;
+            'surface-neutral-lowest': string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        color: {
+            'surface-neutral-mid': string;
+            'surface-neutral-lowest': string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    color: {
+        'surface-neutral-mid': string;
+        'surface-neutral-lowest': string;
+    };
+}>;
 type TextfieldButtonProps = Omit<DefaultButtonProps, 'size'>;
 type TextfieldLabelType = 'in' | 'out' | 'visually-hidden';
 interface TextfieldLabelProps {
@@ -369,7 +475,7 @@ interface TextfieldProps extends InputHTMLAttributes<HTMLInputElement>, VariantP
     error?: string;
     disabled?: boolean;
     button?: TextfieldButtonProps;
-    color?: Extract<BasicColorType, 'neutral-container-mid' | 'neutral-container-lowest'>;
+    color?: Extract<BasicColorType, 'surface-neutral-mid' | 'surface-neutral-lowest'>;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     onClear?: () => void;
 }
@@ -573,20 +679,88 @@ declare const List: react.ForwardRefExoticComponent<ListProps & react.RefAttribu
     Group: react.ForwardRefExoticComponent<ListGroupProps & react.RefAttributes<HTMLDivElement>>;
 };
 
-declare const defaultLabelVariants: (props?: ({
-    level?: "primary" | "secondary" | undefined;
-    position?: "right" | "top" | undefined;
-    size?: "l" | "m" | "s" | undefined;
-    offset?: "medium" | "high" | "low" | undefined;
-    disabled?: boolean | undefined;
-    error?: boolean | undefined;
-} & ({
-    class?: cva.ClassValue;
-    className?: never;
-} | {
-    class?: never;
-    className?: cva.ClassValue;
-})) | undefined) => string;
+declare const defaultLabelVariants: cva.CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        level: {
+            primary: string;
+            secondary: string;
+        };
+        position: {
+            top: string;
+            right: string;
+        };
+        size: {
+            l: string[];
+            m: string[];
+            s: string[];
+        };
+        offset: {
+            high: string;
+            medium: string;
+            low: string;
+        };
+        disabled: {
+            true: string;
+        };
+        error: {
+            true: string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        level: {
+            primary: string;
+            secondary: string;
+        };
+        position: {
+            top: string;
+            right: string;
+        };
+        size: {
+            l: string[];
+            m: string[];
+            s: string[];
+        };
+        offset: {
+            high: string;
+            medium: string;
+            low: string;
+        };
+        disabled: {
+            true: string;
+        };
+        error: {
+            true: string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    level: {
+        primary: string;
+        secondary: string;
+    };
+    position: {
+        top: string;
+        right: string;
+    };
+    size: {
+        l: string[];
+        m: string[];
+        s: string[];
+    };
+    offset: {
+        high: string;
+        medium: string;
+        low: string;
+    };
+    disabled: {
+        true: string;
+    };
+    error: {
+        true: string;
+    };
+}>;
 interface LabelProps extends ComponentPropsWithoutRef<typeof Label$1.Root>, VariantProps<typeof defaultLabelVariants> {
     level?: 'primary' | 'secondary';
     position?: 'top' | 'right';
@@ -601,17 +775,55 @@ declare const TEXT_LEVEL_OPTIONS: readonly ["primary", "secondary", "tertiary"];
 type TextLevelType = (typeof TEXT_LEVEL_OPTIONS)[number];
 declare const TEXT_SIZE_OPTIONS: readonly ["m", "s", "xs"];
 type TextSizeType = (typeof TEXT_SIZE_OPTIONS)[number];
-declare const textButtonVariants: (props?: ({
-    level?: "primary" | "secondary" | "tertiary" | undefined;
-    size?: "m" | "s" | "xs" | undefined;
-    underline?: boolean | undefined;
-} & ({
-    class?: cva.ClassValue;
-    className?: never;
-} | {
-    class?: never;
-    className?: cva.ClassValue;
-})) | undefined) => string;
+declare const textButtonVariants: cva.CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        level: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        size: {
+            m: string[];
+            s: string[];
+            xs: string[];
+        };
+        underline: {
+            true: string;
+        };
+    };
+}, "defaultVariants"> & {
+    variants: {
+        level: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        size: {
+            m: string[];
+            s: string[];
+            xs: string[];
+        };
+        underline: {
+            true: string;
+        };
+    };
+    defaultVariants: Omit<{}, never>;
+}, {
+    level: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    size: {
+        m: string[];
+        s: string[];
+        xs: string[];
+    };
+    underline: {
+        true: string;
+    };
+}>;
 interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {
     asChild?: boolean;
     level?: TextLevelType;
@@ -626,7 +838,7 @@ interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textBut
 declare const TextButton: react.ForwardRefExoticComponent<TextButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 type LoadingSizeType = 'xl' | 'l' | 'm' | 's' | 'xs';
-type LoadingLevelType = 'brand-label-primary' | 'neutral-label-primary' | 'neutral-label-static-primary' | 'inverse-label-primary' | 'inverse-label-static-primary' | 'neutral-label-secondary' | 'inverse-label-secondary';
+type LoadingLevelType = 'label-brand-base' | 'label-neutral-base' | 'label-neutral-static' | 'label-on-inverse-base' | 'label-on-inverse-static-base' | 'label-neutral-secondary' | 'label-on-inverse-secondary';
 interface LoadingProps extends HTMLAttributes<HTMLSpanElement> {
     size?: LoadingSizeType;
     level?: LoadingLevelType;
@@ -675,7 +887,7 @@ interface LogoProps {
      */
     height?: number;
     /**
-     * 단색(테마 적응) 로고의 색 토큰. 기본 `brand-label-secondary`.
+     * 단색(테마 적응) 로고의 색 토큰. 기본 `label-brand-secondary`.
      * 고정색 로고(badge 등)에는 무시된다.
      */
     fill?: BasicColorType;
@@ -837,44 +1049,22 @@ declare const Avatar: react.ForwardRefExoticComponent<Omit<Avatar$1.AvatarProps
     onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
 } & react.RefAttributes<HTMLSpanElement>>;
 
-/**
- * AlertDialogRoot
- *
- * ESC·Overlay 클릭으로 닫히지 않는다. dismiss/confirm 액션이 유일한 탈출구다.
- */
 type AlertDialogRootProps = react.ComponentProps<typeof AlertDialog$1.Root>;
-/**
- * AlertDialogTrigger
- */
 interface AlertDialogTriggerProps {
     by?: react.ReactNode;
 }
-/**
- * AlertDialog의 액션 정의
- */
 interface AlertDialogAction {
-    /** 버튼에 표시할 텍스트 */
     label: string;
-    /** 버튼 클릭 시 실행할 함수. 실행 후 dialog가 닫힌다. */
     onClick?: () => void;
 }
 type AlertDialogConfirmAction = AlertDialogAction & {
-    /** confirm 버튼의 레벨. 복구 비용이 큰(파괴적인) 액션은 negative를 사용한다. */
     level?: 'primary' | 'negative';
 };
-/**
- * AlertDialogContent
- */
 interface AlertDialogContentProps extends react.HTMLAttributes<HTMLDivElement> {
-    /** 제목 (선택). 넘기면 표시되고, 없으면 렌더하지 않는다. aria-labelledby로 연결된다. */
     title?: string;
-    /** 본문. aria-describedby로 연결된다. (필수) */
     description: react.ReactNode;
-    /** 닫기(취소) 액션 (필수) */
     dismiss: AlertDialogAction;
-    /** 확인(주요 처리) 액션 (필수) */
     confirm: AlertDialogConfirmAction;
-    /** Portal이 렌더링될 컨테이너 */
     container?: HTMLElement;
 }
 declare const AlertDialog: ((props: AlertDialogRootProps) => react_jsx_runtime.JSX.Element) & {
@@ -884,53 +1074,25 @@ declare const AlertDialog: ((props: AlertDialogRootProps) => react_jsx_runtime.J
     }) => react_jsx_runtime.JSX.Element;
 };
 
-/**
- * DialogRoot
- *
- * AlertDialog와 달리 ESC·Overlay 클릭으로 닫힌다.
- */
 type DialogRootProps = react.ComponentProps<typeof Dialog$1.Root>;
-/**
- * DialogTrigger
- */
 interface DialogTriggerProps {
     by?: react.ReactNode;
 }
-/**
- * Dialog의 액션 정의
- */
 interface DialogAction {
-    /** 버튼에 표시할 텍스트 */
     label: string;
-    /** 버튼 클릭 시 실행할 함수. 실행 후 dialog가 닫힌다. */
     onClick?: () => void;
 }
 type DialogConfirmAction = DialogAction & {
-    /** confirm 버튼의 레벨. 복구 비용이 큰(파괴적인) 액션은 negative를 사용한다. */
     level?: 'primary' | 'negative';
 };
-/**
- * DialogContent
- */
 interface DialogContentProps extends react.HTMLAttributes<HTMLDivElement> {
-    /**
-     * 상단 일러스트 슬롯 (선택). 일러스트를 넣는다. 없으면 렌더하지 않는다.
-     * content 상단에 가운데 정렬로 노출된다. (full-bleed 아님)
-     */
     illust?: react.ReactNode;
-    /** 제목 (필수). aria-labelledby로 연결된다. */
     title: string;
-    /** 본문. aria-describedby로 연결된다. */
     description?: react.ReactNode;
-    /** 닫기(취소) 액션 (선택). 없으면 해당 버튼을 렌더하지 않는다. */
     dismiss?: DialogAction;
-    /** 확인(주요 처리) 액션 (선택). 없으면 해당 버튼을 렌더하지 않는다. */
     confirm?: DialogConfirmAction;
-    /** 보조 액션 (선택). primary/secondary 아래 가운데 정렬되는 텍스트 버튼. Figma `extra.items` 슬롯. */
     extra?: DialogAction;
-    /** 우상단 닫기(X) 버튼 노출 여부. 기본 true. */
     showClose?: boolean;
-    /** Portal이 렌더링될 컨테이너 */
     container?: HTMLElement;
 }
 declare const Dialog: ((props: DialogRootProps) => react_jsx_runtime.JSX.Element) & {
@@ -1036,220 +1198,4 @@ interface RatioProps extends react.HTMLAttributes<HTMLDivElement> {
  */
 declare const Ratio: react.ForwardRefExoticComponent<RatioProps & react.RefAttributes<HTMLDivElement>>;
 
-/** padding prop 스케일. `component-*`(컴포넌트 내부 여백) / `section-*`(섹션 여백) 계열. */
-type PaddingToken = keyof typeof vars.padding;
-/** gap prop 스케일. `positive-*` 계열(요소 사이 간격). */
-type GapToken = keyof typeof vars.gap;
-/** margin prop 스케일. 원시 size 스케일(`minus*`로 음수 마진 지원). */
-type MarginToken = keyof typeof vars.size;
-/** Section 세로 여백 스케일 — padding 토큰 중 `section-*` 계열만. */
-type SectionPaddingToken = Extract<PaddingToken, `section-${string}`>;
-type BoxDisplay = 'none' | 'inline' | 'inline-block' | 'block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'contents';
-interface PaddingProps {
-    /** 전체 padding */
-    p?: PaddingToken;
-    /** 좌우 padding (padding-inline) */
-    px?: PaddingToken;
-    /** 상하 padding (padding-block) */
-    py?: PaddingToken;
-    /** padding-top */
-    pt?: PaddingToken;
-    /** padding-right */
-    pr?: PaddingToken;
-    /** padding-bottom */
-    pb?: PaddingToken;
-    /** padding-left */
-    pl?: PaddingToken;
-}
-interface MarginProps {
-    /** 전체 margin */
-    m?: MarginToken;
-    /** 좌우 margin (margin-inline) */
-    mx?: MarginToken;
-    /** 상하 margin (margin-block) */
-    my?: MarginToken;
-    /** margin-top */
-    mt?: MarginToken;
-    /** margin-right */
-    mr?: MarginToken;
-    /** margin-bottom */
-    mb?: MarginToken;
-    /** margin-left */
-    ml?: MarginToken;
-}
-interface SizingProps {
-    /** raw CSS 값. 예: `'100%'`, `'320px'` */
-    width?: CSSProperties['width'];
-    height?: CSSProperties['height'];
-    minWidth?: CSSProperties['minWidth'];
-    maxWidth?: CSSProperties['maxWidth'];
-    minHeight?: CSSProperties['minHeight'];
-    maxHeight?: CSSProperties['maxHeight'];
-}
-interface PositionProps {
-    position?: CSSProperties['position'];
-    inset?: CSSProperties['inset'];
-    overflow?: CSSProperties['overflow'];
-}
-interface FlexItemProps {
-    flexBasis?: CSSProperties['flexBasis'];
-    flexGrow?: CSSProperties['flexGrow'];
-    flexShrink?: CSSProperties['flexShrink'];
-}
-interface GridItemProps {
-    gridColumn?: CSSProperties['gridColumn'];
-    gridRow?: CSSProperties['gridRow'];
-    gridArea?: CSSProperties['gridArea'];
-}
-/** Box가 소비하는 모든 레이아웃 prop의 합집합. Flex/Grid/Container/Section이 확장한다. */
-interface LayoutProps extends PaddingProps, MarginProps, SizingProps, PositionProps, FlexItemProps, GridItemProps {
-    display?: BoxDisplay;
-}
-interface BoxProps extends LayoutProps, Omit<HTMLAttributes<HTMLElement>, 'color'> {
-    /** 렌더할 엘리먼트. 기본 `div`. */
-    as?: ElementType;
-    /** true면 자식 엘리먼트에 props를 병합(radix Slot). `as`보다 우선. */
-    asChild?: boolean;
-}
-declare const gapTok: (k?: GapToken) => string | undefined;
-/**
- * Box 레이아웃 prop들을 inline style로 해석한다.
- * 우선순위: 축약(p/px/py, m/mx/my) < 개별 변(pt/pr/pb/pl, mt/mr/mb/ml).
- */
-declare function resolveLayoutStyle(props: LayoutProps): CSSProperties;
-/**
- * LayoutProps를 소비하고 나머지(HTML 속성)만 남긴다.
- * Flex/Grid/Container/Section이 Box에 위임할 때 자기 prop만 뽑고 나머지를 넘기기 위해 쓴다.
- */
-declare function splitLayoutProps<T extends LayoutProps>(props: T): {
-    layout: LayoutProps;
-    rest: Omit<T, keyof LayoutProps>;
-};
-/** align/justify 문자열을 flexbox CSS 값으로 매핑. Flex에서 재사용. */
-declare const FLEX_ALIGN: {
-    readonly start: "flex-start";
-    readonly center: "center";
-    readonly end: "flex-end";
-    readonly baseline: "baseline";
-    readonly stretch: "stretch";
-};
-declare const FLEX_JUSTIFY: {
-    readonly start: "flex-start";
-    readonly center: "center";
-    readonly end: "flex-end";
-    readonly between: "space-between";
-    readonly around: "space-around";
-    readonly evenly: "space-evenly";
-};
-
-/**
- * 토큰 세이프한 spacing(padding/margin)·display·sizing prop을 붙인 범용 레이아웃 블록.
- * 너비 제약이나 정렬 의견이 없다(그건 Container/Flex의 역할). 기본 `div`로 렌더하며
- * `as`로 시맨틱 엘리먼트, `asChild`로 자식에 병합할 수 있다.
- *
- * ```tsx
- * <Box p="component-400" m="8" maxWidth="640px">…</Box>
- * ```
- */
-declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLElement>>;
-
-type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
-type FlexAlign = keyof typeof FLEX_ALIGN;
-type FlexJustify = keyof typeof FLEX_JUSTIFY;
-type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-interface FlexProps extends BoxProps {
-    /** true면 `inline-flex`로 렌더. */
-    inline?: boolean;
-    /** flex-direction. 기본 `row`. */
-    direction?: FlexDirection;
-    /** align-items. `start | center | end | baseline | stretch`. */
-    align?: FlexAlign;
-    /** justify-content. `start | center | end | between | around | evenly`. */
-    justify?: FlexJustify;
-    /** flex-wrap. 기본 `nowrap`. */
-    wrap?: FlexWrap;
-    /** 요소 사이 간격(gap 토큰). */
-    gap?: GapToken;
-    /** 가로 간격(column-gap). `gap`보다 우선. */
-    gapX?: GapToken;
-    /** 세로 간격(row-gap). `gap`보다 우선. */
-    gapY?: GapToken;
-}
-/**
- * flexbox 컨테이너. Box 위에 flex 배치 prop(direction/align/justify/wrap/gap)을 얹는다.
- * 모든 Box prop(padding/margin/sizing/asChild 등)을 그대로 받는다.
- *
- * ```tsx
- * <Flex direction="column" gap="positive-300" align="center" p="component-400">…</Flex>
- * ```
- */
-declare const Flex: react.ForwardRefExoticComponent<FlexProps & react.RefAttributes<HTMLElement>>;
-
-type GridAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
-type GridJustify = 'start' | 'center' | 'end' | 'between';
-type GridFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
-interface GridProps extends BoxProps {
-    /** true면 `inline-grid`로 렌더. */
-    inline?: boolean;
-    /** grid-template-columns. 숫자 N → `repeat(N, minmax(0, 1fr))`, 문자열 → 그대로. */
-    columns?: number | string;
-    /** grid-template-rows. 숫자 N → `repeat(N, minmax(0, 1fr))`, 문자열 → 그대로. */
-    rows?: number | string;
-    /** grid-auto-flow. */
-    flow?: GridFlow;
-    /** align-items. `start | center | end | baseline | stretch`. */
-    align?: GridAlign;
-    /** justify-content. `start | center | end | between`. */
-    justify?: GridJustify;
-    /** 셀 사이 간격(gap 토큰). */
-    gap?: GapToken;
-    /** 가로 간격(column-gap). `gap`보다 우선. */
-    gapX?: GapToken;
-    /** 세로 간격(row-gap). `gap`보다 우선. */
-    gapY?: GapToken;
-}
-/**
- * CSS grid 컨테이너. Box 위에 grid 배치 prop(columns/rows/flow/align/justify/gap)을 얹는다.
- *
- * ```tsx
- * <Grid columns={3} gap="positive-200">…</Grid>
- * <Grid columns="1fr 2fr" rows="auto 1fr">…</Grid>
- * ```
- */
-declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLElement>>;
-
-/** Container 최대 너비 프리셋 — breakpoint 토큰 값을 재사용한다. */
-type ContainerSize = 's' | 'm' | 'l' | 'xl';
-interface ContainerProps extends BoxProps {
-    /** 최대 너비 프리셋. 기본 `l`(1366px). `maxWidth`를 직접 주면 그 값이 우선한다. */
-    size?: ContainerSize;
-}
-/**
- * 콘텐츠를 읽기 좋은 최대 너비로 제한하고 가로 중앙 정렬하는 페이지 레벨 래퍼다.
- * 와이드 스크린에서 본문이 화면 끝까지 늘어나지 않게 감쌀 때 쓴다.
- * (Box와 달리 `max-width` + 중앙정렬 의견을 가진 프리셋이다.)
- *
- * ```tsx
- * <Container size="l" px="component-400">…</Container>
- * ```
- */
-declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLElement>>;
-
-interface SectionProps extends BoxProps {
-    /**
-     * 세로 여백 프리셋(`section-*` 토큰). 기본 `section-400`.
-     * `py`를 직접 주면 그 값이 우선한다.
-     */
-    size?: SectionPaddingToken;
-}
-/**
- * 페이지를 세로로 나누는 구획이다. `section-*` 여백 스케일로 위아래 리듬을 준다.
- * 기본 시맨틱 엘리먼트는 `<section>`이며 `as`로 바꿀 수 있다.
- *
- * ```tsx
- * <Section size="section-500">…</Section>
- * ```
- */
-declare const Section: react.ForwardRefExoticComponent<SectionProps & react.RefAttributes<HTMLElement>>;
-
-export { AlertDialog, type AlertDialogAction, type AlertDialogConfirmAction, type AlertDialogContentProps, Avatar, type AvatarLoadingStatus, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, BottomSheet, type BottomSheetAction, type BottomSheetConfirmAction, type BottomSheetContentProps, type BottomSheetMode, Box, type BoxDisplay, type BoxProps, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, type CompactCoachMarkContentProps, Container, type ContainerProps, type ContainerSize, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Dialog, type DialogAction, type DialogConfirmAction, type DialogContentProps, Display, FLEX_ALIGN, FLEX_JUSTIFY, Flex, type FlexAlign, type FlexDirection, type FlexItemProps, type FlexJustify, type FlexProps, type FlexWrap, type GapToken, Grid, type GridAlign, type GridFlow, type GridItemProps, type GridJustify, type GridProps, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, LOGOS, Label, type LayoutProps, List, type ListGroupProps, ListItem, type ListItemProps, type ListProps, Loading, type LoadingLevelType, Logo, type LogoCategory, type LogoName, type LogoProps, type MarginProps, type MarginToken, Media, MediaContextProvider, type PaddingProps, type PaddingToken, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, type PositionProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, PrimitiveListItem, type PrimitiveListItemProps, type PromiseToastOptions, RATIO, Radio, Ratio, type RatioProps, Section, type SectionPaddingToken, type SectionProps, Select, type SelectButtonSize, type SelectContentProps, type SelectFieldSize, type SelectGroupProps, type SelectItemProps, type SelectPrimitiveItemProps, type SelectProps, type SelectTriggerProps, type SelectTriggerType, type SelectWidthOptions, type SizingProps, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, gapTok as resolveGapToken, resolveLayoutStyle, rootMediaStyle, splitLayoutProps, toast };
+export { AlertDialog, type AlertDialogAction, type AlertDialogConfirmAction, type AlertDialogContentProps, Avatar, type AvatarLoadingStatus, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeIconProps, type BadgeProps, type BadgeSize, type BadgeVariant, BottomSheet, type BottomSheetAction, type BottomSheetConfirmAction, type BottomSheetContentProps, type BottomSheetMode, type BreakPointsKey, Button, type ButtonIconProps, type ButtonProps, type ButtonSizeType, Caption, Checkbox, CoachMark, type CoachMarkContentProps, type CommonButtonProps, CompactCoachMark, type CompactCoachMarkContentProps, DEFAULT_LEVEL_OPTIONS, DEFAULT_SIZE_OPTIONS, DefaultButton, type DefaultButtonProps, type DefaultLevelType, Dialog, type DialogAction, type DialogConfirmAction, type DialogContentProps, Display, Heading, ICON_LEVEL_OPTIONS, ICON_SIZE_OPTIONS, type ICaptionProps, type IDisplayProps, type IHeadingProps, type IPropsAccent, type IPropsAnswer, type IPropsNormal, type IPropsNormalBold, type IPropsPost, type ITitleProps, IconButton, type IconButtonProps, LOGOS, Label, List, type ListGroupProps, ListItem, type ListItemProps, type ListProps, Loading, type LoadingLevelType, Logo, type LogoCategory, type LogoName, type LogoProps, Media, MediaContextProvider, Paragraph, type ParagraphProps, Popover, type PopoverContentProps, PrimitiveCoachMark, type PrimitiveCoachMarkContentProps, type PrimitiveCoachMarkRootProps, PrimitiveListItem, type PrimitiveListItemProps, type PromiseToastOptions, RATIO, Radio, Ratio, type RatioProps, Select, type SelectButtonSize, type SelectContentProps, type SelectFieldSize, type SelectGroupProps, type SelectItemProps, type SelectPrimitiveItemProps, type SelectProps, type SelectTriggerProps, type SelectTriggerType, type SelectWidthOptions, TEXT_LEVEL_OPTIONS, TEXT_SIZE_OPTIONS, Tag, TextButton, type TextButtonProps, type TextSizeType, Textfield, type TextfieldButtonProps, type TextfieldLabelType, type TextfieldProps, Title, type ToastOptions, type ToastType, Toaster, Tooltip, Typography, arrayToStyleObject, isEmptyObject, objectToArray, rootMediaStyle, toast };