file: ./content/react/components/action-button.mdx
# Action Button

사용자가 특정 액션을 실행할 수 있도록 도와주는 컴포넌트입니다.
        
<ComponentExample name="action-button-preview">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonPreview() {
    return <ActionButton>라벨</ActionButton>;
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add action-button
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add action-button
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add action-button
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add action-button
    ```
  </Tab>
</Tabs>

<ManualInstallation name="action-button" />

## Props

<TypeTable
  type={{
    color: {
        "type": "ScopedColorFg | ScopedColorPalette",
        "default": "\"fg.neutral\"",
        description: <><p>{"Color of the label and icons inside the button.\nWorks only when "}<code>{"variant"}</code>{" is "}<code>{"ghost"}</code>{"."}</p></>
    },

    variant: {
        "type": "\"brandSolid\" | \"neutralSolid\" | \"neutralWeak\" | \"criticalSolid\" | \"brandOutline\" | \"neutralOutline\" | \"ghost\"",
        "default": "brandSolid"
    },

    size: {
        "type": "\"xsmall\" | \"small\" | \"medium\" | \"large\"",
        "default": "medium"
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\"",
        "default": "withText"
    },

    loading: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"버튼에 등록된 비동기 작업이 진행 중임을 사용자에게 알립니다."}</p></>
    },

    disabled: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"버튼의 비활성화 여부를 나타냅니다."}</p></>
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    flexGrow: {
        "type": "0 | 1 | (number & {})",
        "default": undefined
    },

    bleedX: {
        "type": "0 | \"asPadding\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | \"asPadding\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    }
}}
/>

## Examples

### Brand Solid

<ComponentExample name="action-button-brand-solid">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonBrandSolid() {
    return <ActionButton variant="brandSolid">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Neutral Solid

<ComponentExample name="action-button-neutral-solid">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonNeutralSolid() {
    return <ActionButton variant="neutralSolid">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Neutral Weak

<ComponentExample name="action-button-neutral-weak">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonNeutralWeak() {
    return <ActionButton variant="neutralWeak">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Critical Solid

<ComponentExample name="action-button-critical-solid">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonCriticalSolid() {
    return <ActionButton variant="criticalSolid">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Brand Outline

<ComponentExample name="action-button-brand-outline">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonBrandOutline() {
    return <ActionButton variant="brandOutline">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Neutral Outline

<ComponentExample name="action-button-neutral-outline">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonNeutralOutline() {
    return <ActionButton variant="neutralOutline">라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Ghost

Ghost variant는 `color` 속성을 사용해 레이블과 아이콘의 색상을 변경할 수 있습니다.

<ComponentExample name="action-button-ghost">
  ```tsx
  import { HStack, Text, VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonGhost() {
    return (
      <HStack gap="x2">
        <ActionButton variant="ghost">Default</ActionButton>
        <ActionButton variant="ghost" color="fg.neutralSubtle">
          Neutral Subtle
        </ActionButton>
        <ActionButton variant="ghost" color="fg.brand">
          Brand
        </ActionButton>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Icon Only

<ComponentExample name="action-button-icon-only">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { Icon } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonIconOnly() {
    return (
      <ActionButton layout="iconOnly">
        <Icon svg={<IconPlusFill />} />
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Prefix Icon

<ComponentExample name="action-button-prefix-icon">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonPrefixIcon() {
    return (
      <ActionButton>
        <PrefixIcon svg={<IconPlusFill />} />
        라벨
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Suffix Icon

<ComponentExample name="action-button-suffix-icon">
  ```tsx
  import { IconChevronRightFill } from "@karrotmarket/react-monochrome-icon";
  import { SuffixIcon } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonSuffixIcon() {
    return (
      <ActionButton>
        라벨
        <SuffixIcon svg={<IconChevronRightFill />} />
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="action-button-disabled">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonDisabled() {
    return <ActionButton disabled>라벨</ActionButton>;
  }
  ```
</ComponentExample>

### Loading

<ComponentExample name="action-button-loading">
  ```tsx
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonLoading() {
    const [loading, setLoading] = useState(false);

    function handleClick() {
      setLoading(true);
      setTimeout(() => setLoading(false), 2000);
    }

    // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
    return (
      <ActionButton loading={loading} onClick={handleClick}>
        시간이 걸리는 액션
      </ActionButton>
    );
  }
  ```
</ComponentExample>

### Bleed

`bleedX`, `bleedY` 속성을 사용해 버튼이 레이아웃에서 "빠져나오게" 할 수 있습니다.

Ghost variant를 시각적으로 정렬해야 할 때 유용합니다.

<ComponentExample name="action-button-bleed">
  ```tsx
  import { HStack, Text, VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";

  export default function ActionButtonBleed() {
    return (
      <VStack width="100%" gap="x4">
        <HStack align="center" justify="space-between" borderWidth={1} borderColor="palette.red600">
          <Text fontSize="t6">Bleed Example</Text>
          <ActionButton bleedY="asPadding" variant="brandSolid">
            Bleed Y
          </ActionButton>
        </HStack>
        <HStack align="center" justify="space-between" borderWidth={1} borderColor="palette.red600">
          <Text fontSize="t6">Bleed Example</Text>
          <ActionButton bleedX="asPadding" bleedY="asPadding" variant="ghost">
            Bleed X and Y
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/action-chip.mdx
# Action Chip

사용자가 특정 액션을 실행할 수 있도록 도와주는 Pill 형태의 컴포넌트입니다.
        
<ComponentExample name="action-chip-preview">
  ```tsx
  import { ActionChip } from "@seed-design/react";

  export default function ActionChipPreview() {
    return <ActionChip>라벨</ActionChip>;
  }
  ```
</ComponentExample>

## Usage

```tsx
import { ActionChip } from "@seed-design/react";
```

```tsx
<ActionChip />
```

## Props

<TypeTable
  type={{
    size: {
        "type": "\"medium\" | \"small\"",
        "default": "medium"
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\"",
        "default": "withText"
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Medium

<ComponentExample name="action-chip-medium">
  ```tsx
  import { ActionChip } from "@seed-design/react";

  export default function ActionChipMedium() {
    return <ActionChip size="medium">라벨</ActionChip>;
  }
  ```
</ComponentExample>

### Small

<ComponentExample name="action-chip-small">
  ```tsx
  import { ActionChip } from "@seed-design/react";

  export default function ActionChipSmall() {
    return <ActionChip size="small">라벨</ActionChip>;
  }
  ```
</ComponentExample>

### Icon Only

<ComponentExample name="action-chip-icon-only">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { ActionChip, Icon } from "@seed-design/react";

  export default function ActionChipIconOnly() {
    return (
      <ActionChip layout="iconOnly">
        <Icon svg={<IconPlusFill />} />
      </ActionChip>
    );
  }
  ```
</ComponentExample>

### Prefix Icon

<ComponentExample name="action-chip-prefix-icon">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { ActionChip, PrefixIcon } from "@seed-design/react";

  export default function ActionChipPrefixIcon() {
    return (
      <ActionChip>
        <PrefixIcon svg={<IconPlusFill />} />
        라벨
      </ActionChip>
    );
  }
  ```
</ComponentExample>

### Suffix Icon

<ComponentExample name="action-chip-suffix-icon">
  ```tsx
  import { IconChevronDownFill } from "@karrotmarket/react-monochrome-icon";
  import { ActionChip, SuffixIcon } from "@seed-design/react";

  export default function ActionChipSuffixIcon() {
    return (
      <ActionChip>
        라벨
        <SuffixIcon svg={<IconChevronDownFill />} />
      </ActionChip>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/action-sheet.mdx
# Action Sheet

Action Sheet는 사용자의 작업과 관련된 선택지를 제공하는 시트 형태의 컴포넌트입니다.
        
<ComponentExample name="action-sheet-preview">
  ```tsx
  import {
    ActionSheetContent,
    ActionSheetItem,
    ActionSheetRoot,
    ActionSheetTrigger,
  } from "seed-design/ui/action-sheet";
  import { ActionButton } from "seed-design/ui/action-button";

  const ActionSheetPreview = () => {
    return (
      <ActionSheetRoot>
        <ActionSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </ActionSheetTrigger>
        <ActionSheetContent aria-label="Action Sheet">
          <ActionSheetItem label="Action 1" />
          <ActionSheetItem label="Action 2" />
          <ActionSheetItem tone="critical" label="Action 3" />
        </ActionSheetContent>
      </ActionSheetRoot>
    );
  };

  export default ActionSheetPreview;
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add action-sheet
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add action-sheet
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add action-sheet
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add action-sheet
    ```
  </Tab>
</Tabs>

<ManualInstallation name="action-sheet" />

## Props

### `ActionSheetRoot`

<TypeTable
  type={{
    children: {
        "type": "ReactNode",
        "default": undefined
    },

    role: {
        "type": "\"dialog\" | \"alertdialog\"",
        "default": "\"dialog\"",
        description: <><p>{"The role of the dialog."}</p></>
    },

    closeOnInteractOutside: {
        "type": "boolean",
        "default": "true",
        description: <><p>{"Whether to close the dialog when the outside is clicked"}</p></>
    },

    closeOnEscape: {
        "type": "boolean",
        "default": "true",
        description: <><p>{"Whether to close the dialog when the escape key is pressed"}</p></>
    },

    lazyMount: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether to enable lazy mounting"}</p></>
    },

    unmountOnExit: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether to unmount on exit."}</p></>
    },

    open: {
        "type": "boolean",
        "default": undefined
    },

    defaultOpen: {
        "type": "boolean",
        "default": undefined
    },

    onOpenChange: {
        "type": "((open: boolean) => void)",
        "default": undefined
    }
}}
/>

### `ActionSheetContent`

<TypeTable
  type={{
    title: {
        "type": "ReactNode",
        "default": undefined
    },

    description: {
        "type": "ReactNode",
        "default": undefined
    },

    layerIndex: {
        "type": "number",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `ActionSheetItem`

<TypeTable
  type={{
    label: {
        "type": "ReactNode",
        "default": undefined
    },

    tone: {
        "type": "\"neutral\" | \"critical\"",
        "default": "neutral"
    }
}}
/>

## Examples

### Portalled

`<Portal>`으로 `<ActionSheetContent>`를 감싸서 컨텐츠를 원하는 요소에 렌더링할 수 있습니다.

Portal은 기본적으로 `document.body`에 렌더링됩니다.

<ComponentExample name="action-sheet-portalled">
  ```tsx
  import { Portal } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    ActionSheetContent,
    ActionSheetItem,
    ActionSheetRoot,
    ActionSheetTrigger,
  } from "seed-design/ui/action-sheet";

  const ActionSheetPortalled = () => {
    return (
      <ActionSheetRoot>
        <ActionSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </ActionSheetTrigger>
        <Portal>
          <ActionSheetContent aria-label="Action Sheet">
            <ActionSheetItem label="Action 1" />
            <ActionSheetItem label="Action 2" />
            <ActionSheetItem tone="critical" label="Action 3" />
          </ActionSheetContent>
        </Portal>
      </ActionSheetRoot>
    );
  };

  export default ActionSheetPortalled;
  ```
</ComponentExample>


file: ./content/react/components/alert-dialog.mdx
# Alert Dialog

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="alert-dialog-preview">
  ```tsx
  import { ResponsivePair } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogSingle = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton>열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>주의</AlertDialogTitle>
            <AlertDialogDescription>이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <ResponsivePair gap="x2">
              <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
              <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
            </ResponsivePair>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogSingle;
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add alert-dialog
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add alert-dialog
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add alert-dialog
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add alert-dialog
    ```
  </Tab>
</Tabs>

<ManualInstallation name="alert-dialog" />

## Props

<TypeTable
  type={{
    children: {
        "type": "ReactNode",
        "default": undefined
    },

    role: {
        "type": "\"dialog\" | \"alertdialog\"",
        "default": "\"dialog\"",
        description: <><p>{"The role of the dialog."}</p></>
    },

    closeOnInteractOutside: {
        "type": "boolean",
        "default": "true",
        description: <><p>{"Whether to close the dialog when the outside is clicked"}</p></>
    },

    closeOnEscape: {
        "type": "boolean",
        "default": "true",
        description: <><p>{"Whether to close the dialog when the escape key is pressed"}</p></>
    },

    lazyMount: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether to enable lazy mounting"}</p></>
    },

    unmountOnExit: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether to unmount on exit."}</p></>
    },

    open: {
        "type": "boolean",
        "default": undefined
    },

    defaultOpen: {
        "type": "boolean",
        "default": undefined
    },

    onOpenChange: {
        "type": "((open: boolean) => void)",
        "default": undefined
    }
}}
/>

## Examples

### Responsive Wrapping

`<ResponsivePair>` 컴포넌트를 사용해 버튼 컨텐츠가 길어지는 경우 레이아웃을 세로로 접을 수 있습니다.

<ComponentExample name="alert-dialog-wrap">
  ```tsx
  import { PrefixIcon, ResponsivePair } from "@seed-design/react";
  import { IconCheckFill } from "@seed-design/react-icon";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogWrap = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton>열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>Wrapping</AlertDialogTitle>
            <AlertDialogDescription>
              ResponsivePair 컴포넌트를 사용해 버튼 컨텐츠가 길어지는 경우 레이아웃을 세로로 접을 수
              있습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <ResponsivePair gap="x2">
              <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
              <AlertDialogAction variant="neutralSolid">
                <PrefixIcon svg={<IconCheckFill />} />긴 레이블 예시
              </AlertDialogAction>
            </ResponsivePair>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogWrap;
  ```
</ComponentExample>

### Single Action

<ComponentExample name="alert-dialog-single">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogSingle = () => {
    // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
    return (
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton>열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>제목</AlertDialogTitle>
            <AlertDialogDescription>단일 선택지를 제공합니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogSingle;
  ```
</ComponentExample>

### Neutral Secondary Action

<ComponentExample name="alert-dialog-neutral">
  ```tsx
  import { ResponsivePair } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogNeutral = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton>열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>제목</AlertDialogTitle>
            <AlertDialogDescription>중립적인 선택지를 제공합니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            {/* ResponsivePair component wraps layout if button content is too long. */}
            <ResponsivePair gap="x2">
              <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
              <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
            </ResponsivePair>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogNeutral;
  ```
</ComponentExample>

### Critical Action

<ComponentExample name="alert-dialog-critical">
  ```tsx
  import { ResponsivePair } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogCritical = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton>열기</ActionButton>
        </AlertDialogTrigger>
        <AlertDialogContent layerIndex={50}>
          <AlertDialogHeader>
            <AlertDialogTitle>제목</AlertDialogTitle>
            <AlertDialogDescription>파괴적, 비가역적 작업을 경고합니다.</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            {/* ResponsivePair component wraps layout if button content is too long. */}
            <ResponsivePair gap="x2">
              <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
              <AlertDialogAction variant="criticalSolid">확인</AlertDialogAction>
            </ResponsivePair>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogCritical;
  ```
</ComponentExample>

### Controlled

Trigger 외의 방식으로 AlertDialog를 열고 닫을 수 있습니다. 이 경우 `open` prop을 사용하여 AlertDialog의 상태를 제어합니다.

<ComponentExample name="alert-dialog-controlled">
  ```tsx
  import { ResponsivePair } from "@seed-design/react";
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogControlled = () => {
    const [open, setOpen] = useState(false);

    return (
      <>
        <ActionButton onClick={() => setOpen(true)}>열기</ActionButton>
        <AlertDialogRoot open={open} onOpenChange={setOpen}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>주의</AlertDialogTitle>
              <AlertDialogDescription>이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <ResponsivePair gap="x2">
                <AlertDialogAction variant="neutralWeak" onClick={() => setOpen(false)}>
                  취소
                </AlertDialogAction>
                <AlertDialogAction variant="neutralSolid" onClick={() => setOpen(false)}>
                  확인
                </AlertDialogAction>
              </ResponsivePair>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialogRoot>
      </>
    );
  };

  export default AlertDialogControlled;
  ```
</ComponentExample>

### Portalled

Portal은 기본적으로 `document.body`에 렌더링됩니다.

<ComponentExample name="alert-dialog-portalled">
  ```tsx
  import { ResponsivePair, Portal } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
    AlertDialogTrigger,
  } from "seed-design/ui/alert-dialog";

  const AlertDialogPortalled = () => {
    return (
      // You can set z-index dialog with "--layer-index" custom property. useful for stackflow integration.
      <AlertDialogRoot>
        <AlertDialogTrigger asChild>
          <ActionButton>열기</ActionButton>
        </AlertDialogTrigger>
        <Portal>
          <AlertDialogContent layerIndex={50}>
            <AlertDialogHeader>
              <AlertDialogTitle>주의</AlertDialogTitle>
              <AlertDialogDescription>이 작업은 되돌릴 수 없습니다.</AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <ResponsivePair gap="x2">
                <AlertDialogAction variant="neutralWeak">취소</AlertDialogAction>
                <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
              </ResponsivePair>
            </AlertDialogFooter>
          </AlertDialogContent>
        </Portal>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogPortalled;
  ```
</ComponentExample>

### Stackflow

<StackflowExample names={["alert-dialog-stackflow"]}>
  ```tsx
  import { useActivity } from "@stackflow/react";
  import { ActivityComponentType, useFlow } from "@stackflow/react/future";
  import {
    AlertDialogAction,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogRoot,
    AlertDialogTitle,
  } from "seed-design/ui/alert-dialog";

  declare module "@stackflow/config" {
    interface Register {
      "alert-dialog-stackflow": unknown;
    }
  }

  const AlertDialogStackflow: ActivityComponentType<"alert-dialog-stackflow"> = () => {
    const activity = useActivity();
    const { pop } = useFlow();

    return (
      <AlertDialogRoot defaultOpen onOpenChange={(open) => !open && pop()}>
        <AlertDialogContent layerIndex={activity.zIndex * 5}>
          <AlertDialogHeader>
            <AlertDialogTitle>제목</AlertDialogTitle>
            <AlertDialogDescription>Stackflow</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction variant="neutralSolid">확인</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialogRoot>
    );
  };

  export default AlertDialogStackflow;
  ```
</StackflowExample>


file: ./content/react/components/avatar.mdx
# Avatar

Avatar는 사용자, 조직과 같은 고유한 아이덴티티를 표현하는 컴포넌트입니다.
        
<ComponentExample name="avatar-preview">
  ```tsx
  import { Flex } from "@seed-design/react";
  import { Avatar, AvatarBadge } from "seed-design/ui/avatar";
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

  export default function AvatarPreview() {
    return (
      <Flex gap="x4">
        <Avatar
          size="80"
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        >
          <AvatarBadge>
            <div style={{ background: "green", width: 20, height: 20, borderRadius: 9999 }} />
          </AvatarBadge>
        </Avatar>
        <Avatar size="80" src={undefined} fallback={<IdentityPlaceholder />} />
      </Flex>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add avatar
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add avatar
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add avatar
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add avatar
    ```
  </Tab>
</Tabs>

<ManualInstallation name="avatar" />

## Props

<TypeTable
  type={{
    src: {
        "type": "string",
        "default": undefined
    },

    alt: {
        "type": "string",
        "default": undefined
    },

    fallback: {
        "type": "ReactNode",
        "default": undefined
    },

    size: {
        "type": "\"20\" | \"24\" | \"36\" | \"42\" | \"48\" | \"64\" | \"80\" | \"96\"",
        "default": "48"
    },

    badgeMask: {
        "type": "\"none\" | \"circle\" | \"flower\" | \"shield\"",
        "default": "none"
    },

    onLoadingStatusChange: {
        "type": "((status: LoadingStatus) => void)",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Size

<ComponentExample name="avatar-size">
  ```tsx
  import { Flex } from "@seed-design/react";
  import { Avatar } from "seed-design/ui/avatar";

  export default function AvatarSize() {
    return (
      <Flex gap="x4">
        <Avatar size="20" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="24" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="36" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="48" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="64" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="80" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
        <Avatar size="96" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
      </Flex>
    );
  }
  ```
</ComponentExample>

### Badge (Circle)

<ComponentExample name="avatar-badge-circle">
  ```tsx
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
  import { Avatar, AvatarBadge } from "seed-design/ui/avatar";
  import { Box } from "@seed-design/react";

  export default function AvatarBadgeCircle() {
    return (
      <Avatar
        size="80"
        badgeMask="circle"
        src="https://avatars.githubusercontent.com/u/54893898?v=4"
        fallback={<IdentityPlaceholder />}
      >
        <AvatarBadge asChild>
          <Box bg="palette.green600" borderRadius="full" />
        </AvatarBadge>
      </Avatar>
    );
  }
  ```
</ComponentExample>

### Badge (Flower)

<ComponentExample name="avatar-badge-flower">
  ```tsx
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
  import { Avatar, AvatarBadge } from "seed-design/ui/avatar";

  export default function AvatarBadgeFlower() {
    return (
      <Avatar
        size="80"
        badgeMask="flower"
        src="https://avatars.githubusercontent.com/u/54893898?v=4"
        fallback={<IdentityPlaceholder />}
      >
        <AvatarBadge asChild>
          <img
            src="/flower_green_checkmark.svg"
            alt="뱃지를 설명하는 대체 텍스트를 제공해야 합니다."
          />
        </AvatarBadge>
      </Avatar>
    );
  }
  ```
</ComponentExample>

### Badge (Shield)

<ComponentExample name="avatar-badge-shield">
  ```tsx
  import { Avatar, AvatarBadge } from "seed-design/ui/avatar";
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

  export default function AvatarBadgeShield() {
    return (
      <Avatar
        size="80"
        badgeMask="shield"
        src="https://avatars.githubusercontent.com/u/54893898?v=4"
        fallback={<IdentityPlaceholder />}
      >
        <AvatarBadge asChild>
          <img
            src="/shield_blue_checkmark.svg"
            alt="뱃지를 설명하는 대체 텍스트를 제공해야 합니다."
          />
        </AvatarBadge>
      </Avatar>
    );
  }
  ```
</ComponentExample>

### Stack

<ComponentExample name="avatar-stack">
  ```tsx
  import { Avatar, AvatarStack } from "seed-design/ui/avatar";
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

  export default function AvatarStackExample() {
    return (
      <AvatarStack size="64">
        <Avatar
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        />
        <Avatar
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        />
        <Avatar
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        />
        <Avatar
          src="https://avatars.githubusercontent.com/u/54893898?v=4"
          fallback={<IdentityPlaceholder />}
        />
      </AvatarStack>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/badge.mdx
# Badge

Badge는 객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨입니다. 사용자의 주의를 끌고 콘텐츠의 빠른 인지와 탐색을 돕기 위해 사용됩니다.
        
<ComponentExample name="badge-preview">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgePreview() {
    return <Badge>라벨</Badge>;
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Badge } from "@seed-design/react";
```

```tsx
<Badge>Badge</Badge>
```

## Props

<TypeTable
  type={{
    size: {
        "type": "\"medium\" | \"large\"",
        "default": "medium"
    },

    variant: {
        "type": "\"weak\" | \"solid\" | \"outline\"",
        "default": "solid"
    },

    tone: {
        "type": "\"neutral\" | \"brand\" | \"informative\" | \"positive\" | \"critical\"",
        "default": "neutral"
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Medium

<ComponentExample name="badge-medium">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgeMedium() {
    return <Badge size="medium">라벨</Badge>;
  }
  ```
</ComponentExample>

### Large

<ComponentExample name="badge-large">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgeLarge() {
    return <Badge size="large">라벨</Badge>;
  }
  ```
</ComponentExample>

### Weak

<ComponentExample name="badge-weak">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgeWeak() {
    return <Badge variant="weak">라벨</Badge>;
  }
  ```
</ComponentExample>

### Solid

<ComponentExample name="badge-solid">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgeSolid() {
    return <Badge variant="solid">라벨</Badge>;
  }
  ```
</ComponentExample>

### Outline

<ComponentExample name="badge-outline">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgeOutline() {
    return <Badge variant="outline">라벨</Badge>;
  }
  ```
</ComponentExample>

### Neutral

<ComponentExample name="badge-neutral">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgeNeutral() {
    return <Badge tone="neutral">라벨</Badge>;
  }
  ```
</ComponentExample>

### Brand

<ComponentExample name="badge-brand">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgeBrand() {
    return <Badge tone="brand">라벨</Badge>;
  }
  ```
</ComponentExample>

### Informative

<ComponentExample name="badge-informative">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgeInformative() {
    return <Badge tone="informative">라벨</Badge>;
  }
  ```
</ComponentExample>

### Positive

<ComponentExample name="badge-positive">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgePositive() {
    return <Badge tone="positive">라벨</Badge>;
  }
  ```
</ComponentExample>

### Critical

<ComponentExample name="badge-critical">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgeCritical() {
    return <Badge tone="critical">라벨</Badge>;
  }
  ```
</ComponentExample>

### asChild

<ComponentExample name="badge-as-child">
  ```tsx
  import { Badge } from "@seed-design/react";

  export default function BadgeAsChild() {
    return (
      <Badge asChild>
        <a href="https://example.com" target="_blank" rel="noreferrer">
          링크
        </a>
      </Badge>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/bottom-sheet.mdx
# Bottom Sheet

Bottom sheet는 화면 하단에 고정되어 이전 화면과 관련된 콘텐츠를 표시합니다. 사용자에게 추가적인 정보, 작업 또는 메뉴를 제공하는 데 사용됩니다.
        
<ComponentExample name="bottom-sheet-preview">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetPreview = () => {
    return (
      <BottomSheetRoot>
        <BottomSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
          {/* If you need to omit padding, pass px={0}. */}
          <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetPreview;
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add bottom-sheet
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add bottom-sheet
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add bottom-sheet
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add bottom-sheet
    ```
  </Tab>
</Tabs>

<ManualInstallation name="bottom-sheet" />

## Props

<TypeTable
  type={{
    headerAlign: {
        "type": "\"left\" | \"center\"",
        "default": "left"
    },

    children: {
        "type": "ReactNode",
        "default": undefined
    },

    role: {
        "type": "\"dialog\" | \"alertdialog\"",
        "default": "\"dialog\"",
        description: <><p>{"The role of the dialog."}</p></>
    },

    closeOnInteractOutside: {
        "type": "boolean",
        "default": "true",
        description: <><p>{"Whether to close the dialog when the outside is clicked"}</p></>
    },

    closeOnEscape: {
        "type": "boolean",
        "default": "true",
        description: <><p>{"Whether to close the dialog when the escape key is pressed"}</p></>
    },

    lazyMount: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether to enable lazy mounting"}</p></>
    },

    unmountOnExit: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether to unmount on exit."}</p></>
    },

    open: {
        "type": "boolean",
        "default": undefined
    },

    defaultOpen: {
        "type": "boolean",
        "default": undefined
    },

    onOpenChange: {
        "type": "((open: boolean) => void)",
        "default": undefined
    }
}}
/>

## Examples

### Trigger

`<BottomSheetTrigger>`는 `asChild` 패턴을 사용해 자식 요소가 BottomSheet를 열 수 있도록 합니다.

`<BottomSheetTrigger>`는 `BottomSheet`의 `open` 상태에 따라 `aria-expanded` 속성을 자동으로 설정합니다. 이 속성은 스크린 리더와 같은 보조 기술에 유용합니다.

<ComponentExample name="bottom-sheet-trigger">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetTriggerExample = () => {
    return (
      <BottomSheetRoot>
        <BottomSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent title="제목">
          <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetTriggerExample;
  ```
</ComponentExample>

### Controlled

Trigger 외의 방식으로 BottomSheet를 열고 닫을 수 있습니다. 이 경우 `open` prop을 사용하여 BottomSheet의 상태를 제어합니다.

<ComponentExample name="bottom-sheet-controlled">
  ```tsx
  import { useState } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetControlled = () => {
    const [open, setOpen] = useState(false);

    const scheduleOpen = () => {
      setTimeout(() => {
        setOpen(true);
      }, 1000);
    };

    return (
      <>
        <ActionButton onClick={scheduleOpen}>1초 후 열기</ActionButton>
        <BottomSheetRoot open={open} onOpenChange={setOpen}>
          <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
            {/* If you need to omit padding, pass px={0}. */}
            <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
            <BottomSheetFooter>
              <ActionButton variant="neutralSolid">확인</ActionButton>
            </BottomSheetFooter>
          </BottomSheetContent>
        </BottomSheetRoot>
      </>
    );
  };

  export default BottomSheetControlled;
  ```
</ComponentExample>

### Max Height

`<BottomSheetBody>`에 `maxHeight` prop을 전달하여 BottomSheet의 최대 높이를 설정할 수 있습니다.

<ComponentExample name="bottom-sheet-max-height">
  ```tsx
  import { Box, VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetMaxHeight = () => {
    return (
      <BottomSheetRoot>
        <BottomSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent title="제목" description="설명을 작성할 수 있어요">
          {/* If you need to omit padding, pass px={0}. */}
          <BottomSheetBody>
            <VStack maxHeight="300px" overflowY="auto">
              <VStack justifyContent="center" alignItems="center" gap="x4" height="100%">
                <Box width="100%" height="100px" bg="bg.layerBasement" />
                <Box width="100%" height="100px" bg="bg.layerBasement" />
                <Box width="100%" height="100px" bg="bg.layerBasement" />
                <Box width="100%" height="100px" bg="bg.layerBasement" />
              </VStack>
            </VStack>
          </BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetMaxHeight;
  ```
</ComponentExample>

### Bottom Inset

`<BottomSheetContent>`에 `style` prop을 전달하여 아래 여백을 주기 위해 사용합니다.

<ComponentExample name="bottom-sheet-bottom-inset">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    BottomSheetBody,
    BottomSheetContent,
    BottomSheetFooter,
    BottomSheetRoot,
    BottomSheetTrigger,
  } from "seed-design/ui/bottom-sheet";

  const BottomSheetBottomInset = () => {
    return (
      <BottomSheetRoot>
        <BottomSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </BottomSheetTrigger>
        <BottomSheetContent
          title="제목"
          description="설명을 작성할 수 있어요"
          // 모바일 브라우저에서 아래 여백을 주기 위해 사용
          style={{ paddingBottom: "var(--seed-safe-area-bottom)" }}
        >
          {/* If you need to omit padding, pass px={0}. */}
          <BottomSheetBody minHeight="x16">Content</BottomSheetBody>
          <BottomSheetFooter>
            <ActionButton variant="neutralSolid">확인</ActionButton>
          </BottomSheetFooter>
        </BottomSheetContent>
      </BottomSheetRoot>
    );
  };

  export default BottomSheetBottomInset;
  ```
</ComponentExample>


file: ./content/react/components/callout.mdx
# Callout

사용자의 주목을 끌어 중요한 정보를 강조하는 컴포넌트에요.
        
<ComponentExample name="callout-preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutPreview() {
    return (
      <VStack gap="x4" width="full">
        <Callout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
        <ActionableCallout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
        <DismissibleCallout description="Aute nulla proident tempor minim eiusmod. In nostrud officia irure laborum." />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add callout
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add callout
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add callout
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add callout
    ```
  </Tab>
</Tabs>

<ManualInstallation name="callout" />

## Props

### `Callout`

<TypeTable
  type={{
    prefixIcon: {
        "type": "ReactNode",
        "default": undefined
    },

    title: {
        "type": "ReactNode",
        "default": undefined
    },

    description: {
        "type": "ReactNode",
        "default": undefined
    },

    linkProps: {
        "type": "CalloutLinkProps",
        "default": undefined
    },

    tone: {
        "type": "\"neutral\" | \"informative\" | \"warning\" | \"critical\" | \"magic\"",
        "default": "neutral"
    }
}}
/>

### `ActionableCallout`

<TypeTable
  type={{
    title: {
        "type": "ReactNode",
        "default": undefined
    },

    description: {
        "type": "ReactNode",
        "default": undefined
    },

    tone: {
        "type": "\"neutral\" | \"informative\" | \"warning\" | \"critical\" | \"magic\"",
        "default": "neutral"
    }
}}
/>

### `DismissibleCallout`

<TypeTable
  type={{
    title: {
        "type": "ReactNode",
        "default": undefined
    },

    description: {
        "type": "ReactNode",
        "default": undefined
    },

    linkProps: {
        "type": "CalloutLinkProps",
        "default": undefined
    },

    tone: {
        "type": "\"neutral\" | \"informative\" | \"warning\" | \"critical\" | \"magic\"",
        "default": "neutral"
    },

    defaultOpen: {
        "type": "boolean",
        "default": undefined
    },

    open: {
        "type": "boolean",
        "default": undefined
    },

    onDismiss: {
        "type": "(() => void)",
        "default": undefined
    }
}}
/>

## Examples

### Content Layout

#### Text Only

<ComponentExample name="callout-text-only">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutTextOnly() {
    return (
      <VStack gap="x4" width="full">
        <Callout description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요." />
        <ActionableCallout description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요." />
        <DismissibleCallout description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요." />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With Icon

<Callout type="warn">
  `icon` prop은 `Callout`에서만 제공돼요.
</Callout>

<ComponentExample name="callout-with-icon">
  ```tsx
  import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
  import { Callout } from "seed-design/ui/callout";

  export default function CalloutWithIcon() {
    return (
      <Callout
        prefixIcon={<IconCalendarFill />}
        description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
      />
    );
  }
  ```
</ComponentExample>

#### With Title Text

<ComponentExample name="callout-with-title-text">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutWithTitleText() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          title="타이틀"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          title="타이틀"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          title="타이틀"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With Link Label

<Callout type="warn">
  `linkProps` prop은 `Callout`과 `DismissibleCallout`에서만 제공돼요.
</Callout>

<ComponentExample name="callout-with-link-label">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutWithLinkLabel() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          linkProps={{ children: "시도해 보기" }}
        />
        <DismissibleCallout
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          linkProps={{ children: "시도해 보기" }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With All

<ComponentExample name="callout-with-all">
  ```tsx
  import { IconCalendarFill } from "@karrotmarket/react-monochrome-icon";
  import { Callout } from "seed-design/ui/callout";

  export default function CalloutWithAll() {
    return (
      <Callout
        title="타이틀"
        prefixIcon={<IconCalendarFill />}
        description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        linkProps={{ children: "시도해 보기" }}
      />
    );
  }
  ```
</ComponentExample>

### Customizable Parts

#### Rendering Link Label as Child

<ComponentExample name="callout-link-label-as-child">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutLinkLabelAsChild() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          linkProps={{
            asChild: true,
            children: (
              <a href="https://www.daangn.com" target="_blank" rel="noreferrer">
                시도해 보기
              </a>
            ),
          }}
        />
        <DismissibleCallout
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          linkProps={{
            asChild: true,
            children: (
              <a href="https://www.daangn.com" target="_blank" rel="noreferrer">
                시도해 보기
              </a>
            ),
          }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Tones

#### Neutral (Default)

<ComponentExample name="callout-neutral">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutNeutral() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          tone="neutral"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          tone="neutral"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          tone="neutral"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Informative

<ComponentExample name="callout-informative">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutInformative() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          tone="informative"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          tone="informative"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          tone="informative"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Warning

<ComponentExample name="callout-warning">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutWarning() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          tone="warning"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          tone="warning"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          tone="warning"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Critical

<ComponentExample name="callout-critical">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutCritical() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          tone="critical"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <ActionableCallout
          tone="critical"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          tone="critical"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Magic

<ComponentExample name="callout-magic">
  ```tsx
  import { IconSparkle2 } from "@karrotmarket/react-multicolor-icon";
  import { VStack } from "@seed-design/react";
  import { ActionableCallout, Callout, DismissibleCallout } from "seed-design/ui/callout";

  export default function CalloutMagic() {
    return (
      <VStack gap="x4" width="full">
        <Callout
          tone="magic"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
          prefixIcon={<IconSparkle2 />}
        />
        <ActionableCallout
          tone="magic"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
        <DismissibleCallout
          tone="magic"
          description="기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/checkbox.mdx
# Checkbox

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="checkbox-preview">
  ```tsx
  import { Checkbox } from "seed-design/ui/checkbox";

  export default function CheckboxPreview() {
    return <Checkbox label="Hello World" />;
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add checkbox
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add checkbox
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add checkbox
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add checkbox
    ```
  </Tab>
</Tabs>

<ManualInstallation name="checkbox" />

## Props

<TypeTable
  type={{
    inputProps: {
        "type": "InputHTMLAttributes<HTMLInputElement>",
        "default": undefined
    },

    rootRef: {
        "type": "Ref<HTMLLabelElement>",
        "default": undefined
    },

    label: {
        "type": "ReactNode",
        "default": undefined
    },

    weight: {
        "type": "\"default\" | \"stronger\"",
        "default": "default"
    },

    variant: {
        "type": "\"square\" | \"ghost\"",
        "default": "square"
    },

    size: {
        "type": "\"large\" | \"medium\"",
        "default": "medium"
    },

    disabled: {
        "type": "boolean",
        "default": undefined
    },

    invalid: {
        "type": "boolean",
        "default": undefined
    },

    required: {
        "type": "boolean",
        "default": undefined
    },

    checked: {
        "type": "boolean",
        "default": undefined
    },

    defaultChecked: {
        "type": "boolean",
        "default": undefined
    },

    onCheckedChange: {
        "type": "((checked: boolean) => void)",
        "default": undefined
    },

    indeterminate: {
        "type": "boolean",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Size

<ComponentExample name="checkbox-size">
  ```tsx
  import { Checkbox } from "seed-design/ui/checkbox";

  export default function CheckboxSize() {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
        <Checkbox label="Medium (default)" size="medium" />
        <Checkbox label="Large" size="large" />
      </div>
    );
  }
  ```
</ComponentExample>

### Variant

<ComponentExample name="checkbox-variant">
  ```tsx
  import { Checkbox } from "seed-design/ui/checkbox";

  export default function CheckboxVariant() {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
        <Checkbox label="Square (default)" variant="square" />
        <Checkbox label="Ghost" variant="ghost" />
      </div>
    );
  }
  ```
</ComponentExample>

### Indeterminate

<ComponentExample name="checkbox-indeterminate">
  ```tsx
  import { Checkbox } from "seed-design/ui/checkbox";

  export default function CheckboxIndeterminate() {
    return <Checkbox defaultChecked label="indeterminate" indeterminate />;
  }
  ```
</ComponentExample>

### Weight=stronger

<ComponentExample name="checkbox-stronger">
  ```tsx
  import { Checkbox } from "seed-design/ui/checkbox";

  export default function CheckboxStronger() {
    return <Checkbox label="Bold Label Text" weight="stronger" />;
  }
  ```
</ComponentExample>

### Long Text

<ComponentExample name="checkbox-long-text">
  ```tsx
  import { Checkbox } from "seed-design/ui/checkbox";

  export default function CheckboxLongText() {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
        <Checkbox
          size="medium"
          label="Lorem ipsum dolor sit, amet consectetur adipisicing elit. At a eaque fugiat sint sapiente.
            Id, hic ex, blanditiis totam animi amet delectus temporibus quae fugiat magnam, quos eaque
            dolorum a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus labore unde
            minus temporibus beatae commodi et nesciunt iure in dignissimos suscipit, alias ab
            voluptatem facilis tempora numquam. Veritatis, dolorum suscipit! Lorem ipsum dolor sit,
            amet consectetur adipisicing elit. Explicabo fugiat molestias iusto, ipsum distinctio
            officia ad id ratione esse ducimus architecto deleniti illum reiciendis rerum, at
            blanditiis molestiae. Cupiditate, nobis? Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Ab, magni. Aliquid inventore quaerat nemo architecto harum earum quas
            porro repudiandae explicabo repellat repellendus magni, corporis omnis laborum, velit
            dicta blanditiis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
            eveniet quas. Accusamus facere veritatis expedita delectus, asperiores numquam placeat
            necessitatibus assumenda, nesciunt in dolorem sit provident repellendus, voluptatem earum!
            Consequatur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut earum
            asperiores aliquam magnam est delectus veritatis numquam sint porro tenetur dolores nobis,
            deleniti voluptas quaerat, quia voluptatum soluta autem perspiciatis? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Facilis possimus eaque aliquam maxime? Quidem enim,
            sed itaque at veritatis nihil officia esse qui provident ipsa adipisci necessitatibus
            officiis distinctio laborum!"
        />
        <Checkbox
          size="large"
          label="Lorem ipsum dolor sit, amet consectetur adipisicing elit. At a eaque fugiat sint sapiente.
            Id, hic ex, blanditiis totam animi amet delectus temporibus quae fugiat magnam, quos eaque
            dolorum a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus labore unde
            minus temporibus beatae commodi et nesciunt iure in dignissimos suscipit, alias ab
            voluptatem facilis tempora numquam. Veritatis, dolorum suscipit! Lorem ipsum dolor sit,
            amet consectetur adipisicing elit. Explicabo fugiat molestias iusto, ipsum distinctio
            officia ad id ratione esse ducimus architecto deleniti illum reiciendis rerum, at
            blanditiis molestiae. Cupiditate, nobis? Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Ab, magni. Aliquid inventore quaerat nemo architecto harum earum quas
            porro repudiandae explicabo repellat repellendus magni, corporis omnis laborum, velit
            dicta blanditiis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
            eveniet quas. Accusamus facere veritatis expedita delectus, asperiores numquam placeat
            necessitatibus assumenda, nesciunt in dolorem sit provident repellendus, voluptatem earum!
            Consequatur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut earum
            asperiores aliquam magnam est delectus veritatis numquam sint porro tenetur dolores nobis,
            deleniti voluptas quaerat, quia voluptatum soluta autem perspiciatis? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Facilis possimus eaque aliquam maxime? Quidem enim,
            sed itaque at veritatis nihil officia esse qui provident ipsa adipisci necessitatibus
            officiis distinctio laborum!"
        />
      </div>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="checkbox-disabled">
  ```tsx
  import { Checkbox } from "seed-design/ui/checkbox";

  export default function CheckboxDisabled() {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
        <Checkbox defaultChecked label="Disabled Checked, Square" disabled />
        <Checkbox checked={false} label="Disabled without Checked, Square" disabled />
        <Checkbox variant="ghost" defaultChecked label="Disabled Checked, Ghost" disabled />
        <Checkbox variant="ghost" checked={false} label="Disabled without Checked, Ghost" disabled />
      </div>
    );
  }
  ```
</ComponentExample>

### Use Cases

#### React Hook Form

<ComponentExample name="checkbox-react-hook-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, type FormEvent } from "react";
  import { useController, useForm } from "react-hook-form";
  import { ActionButton } from "seed-design/ui/action-button";
  import { Checkbox } from "seed-design/ui/checkbox";

  const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const;

  type FormValues = Record<(typeof POSSIBLE_FRUIT_VALUES)[number], boolean>;

  export default function CheckboxReactHookForm() {
    const { handleSubmit, reset, setValue, control } = useForm<FormValues>({
      defaultValues: {
        apple: false,
        melon: true,
        mango: false,
      },
    });

    const onValid = useCallback((data: FormValues) => {
      window.alert(JSON.stringify(data, null, 2));
    }, []);

    const onReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();
        reset();
      },
      [reset],
    );

    return (
      <VStack gap="x3" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
        <VStack>
          {POSSIBLE_FRUIT_VALUES.map((name) => {
            const {
              field: { value, ...restProps },
              fieldState: { invalid },
            } = useController({ name, control });
            return (
              <Checkbox
                key={name}
                label={name}
                checked={value}
                inputProps={restProps}
                invalid={invalid}
              />
            );
          })}
        </VStack>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton
            type="button"
            variant="neutralWeak"
            flexGrow={1}
            onClick={() => setValue("mango", true)}
          >
            mango 선택
          </ActionButton>
          <ActionButton type="submit" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/contextual-floating-button.mdx
# Contextual Floating Button

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="contextual-floating-button-preview">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonPreview() {
    return (
      <ContextualFloatingButton>
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ContextualFloatingButton>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add contextual-floating-button
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add contextual-floating-button
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add contextual-floating-button
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add contextual-floating-button
    ```
  </Tab>
</Tabs>

<ManualInstallation name="contextual-floating-button" />

## Props

<TypeTable
  type={{
    variant: {
        "type": "\"solid\" | \"layer\"",
        "default": "solid"
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\"",
        "default": "withText"
    },

    loading: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"버튼에 등록된 비동기 작업이 진행 중임을 사용자에게 알립니다."}</p></>
    },

    disabled: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"버튼의 비활성화 여부를 나타냅니다."}</p></>
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Float Composition

Contextual Floating Button은 `<Float>` 컴포넌트와 함께 사용하면 편리합니다.

<ComponentExample name="contextual-floating-button-float-composition">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { Box, Float, PrefixIcon } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonFloatComposition() {
    return (
      <Box
        position="relative"
        width="300px"
        height="500px"
        borderWidth={1}
        borderColor="stroke.neutral"
      >
        <Float placement="bottom-center" offsetY="x4">
          <ContextualFloatingButton>
            <PrefixIcon svg={<IconBellFill />} />
            알림 설정
          </ContextualFloatingButton>
        </Float>
      </Box>
    );
  }
  ```
</ComponentExample>

### Solid Variant

<ComponentExample name="contextual-floating-button-solid">
  ```tsx
  import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonSolid() {
    return (
      <ContextualFloatingButton variant="solid">
        <PrefixIcon svg={<IconPlusLine />} />
        Solid Variant
      </ContextualFloatingButton>
    );
  }
  ```
</ComponentExample>

### Layer Variant

<ComponentExample name="contextual-floating-button-layer">
  ```tsx
  import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonLayer() {
    return (
      <ContextualFloatingButton variant="layer">
        <PrefixIcon svg={<IconPlusLine />} />
        Layer Variant
      </ContextualFloatingButton>
    );
  }
  ```
</ComponentExample>

### Icon Only

<ComponentExample name="contextual-floating-button-icon-only">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { Icon } from "@seed-design/react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonIconOnly() {
    return (
      <ContextualFloatingButton layout="iconOnly">
        <Icon svg={<IconPlusFill />} />
      </ContextualFloatingButton>
    );
  }
  ```
</ComponentExample>

### Loading

<ComponentExample name="contextual-floating-button-loading">
  ```tsx
  import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { useState } from "react";
  import { ContextualFloatingButton } from "seed-design/ui/contextual-floating-button";

  export default function ContextualFloatingButtonLoading() {
    const [loading, setLoading] = useState(false);

    function handleClick() {
      setLoading(true);
      setTimeout(() => setLoading(false), 2000);
    }

    // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
    return (
      <ContextualFloatingButton loading={loading} onClick={handleClick}>
        <PrefixIcon svg={<IconPlusLine />} />
        시간이 걸리는 액션
      </ContextualFloatingButton>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/control-chip.mdx
# Control Chip

Control Chip은 사용자가 선택, 필터링, 전환과 같은 제어 작업을 수행할 수 있도록 돕는 Pill 형태의 컴포넌트입니다.
        
<ComponentExample name="control-chip-preview">
  ```tsx
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ControlChipPreview() {
    return <ControlChip.Toggle>라벨</ControlChip.Toggle>;
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add control-chip
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add control-chip
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add control-chip
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add control-chip
    ```
  </Tab>
</Tabs>

<ManualInstallation name="control-chip" />

## Props

### ControlChip.Button

<TypeTable
  type={{
    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    size: {
        "type": "\"medium\" | \"small\"",
        "default": "medium"
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\"",
        "default": "withText"
    }
}}
/>

### ControlChip.Toggle

<TypeTable
  type={{
    inputProps: {
        "type": "InputHTMLAttributes<HTMLInputElement>",
        "default": undefined
    },

    rootRef: {
        "type": "Ref<HTMLLabelElement>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    size: {
        "type": "\"medium\" | \"small\"",
        "default": "medium"
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\"",
        "default": "withText"
    },

    disabled: {
        "type": "boolean",
        "default": undefined
    },

    invalid: {
        "type": "boolean",
        "default": undefined
    },

    required: {
        "type": "boolean",
        "default": undefined
    },

    checked: {
        "type": "boolean",
        "default": undefined
    },

    defaultChecked: {
        "type": "boolean",
        "default": undefined
    },

    onCheckedChange: {
        "type": "((checked: boolean) => void)",
        "default": undefined
    },

    indeterminate: {
        "type": "boolean",
        "default": undefined
    }
}}
/>

### ControlChip.RadioRoot

<TypeTable
  type={{
    disabled: {
        "type": "boolean",
        "default": undefined
    },

    name: {
        "type": "string",
        "default": undefined
    },

    form: {
        "type": "string",
        "default": undefined
    },

    value: {
        "type": "string",
        "default": undefined
    },

    defaultValue: {
        "type": "string",
        "default": undefined
    },

    onValueChange: {
        "type": "((value: string) => void)",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### ControlChip.RadioItem

<TypeTable
  type={{
    inputProps: {
        "type": "InputHTMLAttributes<HTMLInputElement>",
        "default": undefined
    },

    rootRef: {
        "type": "Ref<HTMLLabelElement>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    size: {
        "type": "\"medium\" | \"small\"",
        "default": "medium"
    },

    layout: {
        "type": "\"withText\" | \"iconOnly\"",
        "default": "withText"
    },

    value: {
        "type": "string",
        "default": undefined
    },

    disabled: {
        "type": "boolean",
        "default": undefined
    },

    invalid: {
        "type": "boolean",
        "default": undefined
    }
}}
/>

## Examples

### Medium

<ComponentExample name="control-chip-medium">
  ```tsx
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ActionChipMedium() {
    return <ControlChip.Toggle size="medium">라벨</ControlChip.Toggle>;
  }
  ```
</ComponentExample>

### Small

<ComponentExample name="control-chip-small">
  ```tsx
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ActionChipSmall() {
    return <ControlChip.Toggle size="small">라벨</ControlChip.Toggle>;
  }
  ```
</ComponentExample>

### Icon Only

<ComponentExample name="control-chip-icon-only">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { Icon } from "@seed-design/react";
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ControlChipIconOnly() {
    return (
      <ControlChip.Toggle layout="iconOnly">
        <Icon svg={<IconPlusFill />} />
      </ControlChip.Toggle>
    );
  }
  ```
</ComponentExample>

### Prefix Icon

<ComponentExample name="control-chip-prefix-icon">
  ```tsx
  import { IconPlusFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ControlChipPrefixIcon() {
    return (
      <ControlChip.Toggle>
        <PrefixIcon svg={<IconPlusFill />} />
        라벨
      </ControlChip.Toggle>
    );
  }
  ```
</ComponentExample>

### Suffix Icon

<ComponentExample name="control-chip-suffix-icon">
  ```tsx
  import { IconChevronDownFill } from "@karrotmarket/react-monochrome-icon";
  import { SuffixIcon } from "@seed-design/react";
  import { ControlChip } from "seed-design/ui/control-chip";

  export default function ControlChipSuffixIcon() {
    return (
      <ControlChip.Toggle>
        라벨
        <SuffixIcon svg={<IconChevronDownFill />} />
      </ControlChip.Toggle>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/divider.mdx
# Divider

Divider는 구분선을 표시하는 컴포넌트입니다.
        
<ComponentExample name="divider-preview">
  ```tsx
  import { Box, Divider, VStack } from "@seed-design/react";

  export default function DividerPreview() {
    return (
      <VStack width="full">
        <Box bg="bg.layerDefault" height="100px" />
        <Divider />
        <Box bg="bg.layerDefault" height="100px" />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Divider } from "@seed-design/react";
```

```tsx
<Divider />
```

## Props

<TypeTable
  type={{
    as: {
        "type": "\"hr\" | \"div\"",
        "default": "\"hr\""
    },

    color: {
        "type": "ScopedColorStroke | ScopedColorPalette | (string & {})",
        "default": "\"stroke.neutral\""
    },

    thickness: {
        "type": "0 | (string & {}) | 1",
        "default": "1"
    }
}}
/>


file: ./content/react/components/error-state.mdx
# Error State

사용자에게 오류 혹은 조회 결과가 없음을 알리는 컴포넌트입니다.
        
<ComponentExample name="error-state-preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ErrorState } from "seed-design/ui/error-state";

  export default function ErrorStatePreview() {
    return (
      <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutral">
        <ErrorState
          title="에러 타이틀"
          description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
          primaryActionProps={{
            children: "메인 액션",
          }}
          secondaryActionProps={{
            children: "보조 액션",
          }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add error-state
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add error-state
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add error-state
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add error-state
    ```
  </Tab>
</Tabs>

<ManualInstallation name="error-state" />

## Props

<TypeTable
  type={{
    title: {
        "type": "ReactNode",
        "default": undefined
    },

    description: {
        "type": "ReactNode",
        "default": undefined
    },

    primaryActionProps: {
        "type": "ActionButtonProps",
        "default": undefined
    },

    secondaryActionProps: {
        "type": "ButtonHTMLAttributes<HTMLButtonElement>",
        "default": undefined
    },

    variant: {
        "type": "\"default\" | \"basement\"",
        "default": "\"default\""
    }
}}
/>

## Examples

### Basement

layer-basement 배경 위에서는 basement variant를 사용합니다.

<ComponentExample name="error-state-basement">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ErrorState } from "seed-design/ui/error-state";

  export default function ErrorStateBasement() {
    return (
      <VStack minHeight="480px" width="320px" borderWidth={1} borderColor="stroke.neutral">
        <ErrorState
          variant="basement"
          title="에러 타이틀"
          description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
          primaryActionProps={{
            children: "메인 액션",
          }}
          secondaryActionProps={{
            children: "보조 액션",
          }}
        />
      </VStack>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/extended-action-sheet.mdx
# Extended Action Sheet

Extended Action Sheet는 사용자가 특정 작업에 관한 선택지뿐만 아니라 추가적인 선택지를 제공할 때 사용하는 시트 형태의 컴포넌트입니다.
        
<ComponentExample name="extended-action-sheet-preview">
  ```tsx
  import { IconEyeSlashLine } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    ExtendedActionSheetContent,
    ExtendedActionSheetGroup,
    ExtendedActionSheetItem,
    ExtendedActionSheetRoot,
    ExtendedActionSheetTrigger,
  } from "seed-design/ui/extended-action-sheet";

  const ExtendedActionSheetPreview = () => {
    return (
      <ExtendedActionSheetRoot>
        <ExtendedActionSheetTrigger asChild>
          <ActionButton>Open</ActionButton>
        </ExtendedActionSheetTrigger>
        <ExtendedActionSheetContent aria-label="Extended Action Sheet">
          <ExtendedActionSheetGroup>
            <ExtendedActionSheetItem>
              <PrefixIcon svg={<IconEyeSlashLine />} />
              Action 1
            </ExtendedActionSheetItem>
            <ExtendedActionSheetItem>
              <PrefixIcon svg={<IconEyeSlashLine />} />
              Action 2
            </ExtendedActionSheetItem>
            <ExtendedActionSheetItem>
              <PrefixIcon svg={<IconEyeSlashLine />} />
              Action 3
            </ExtendedActionSheetItem>
          </ExtendedActionSheetGroup>
          <ExtendedActionSheetGroup>
            <ExtendedActionSheetItem>
              <PrefixIcon svg={<IconEyeSlashLine />} />
              Action 4
            </ExtendedActionSheetItem>
            <ExtendedActionSheetItem tone="critical">
              <PrefixIcon svg={<IconEyeSlashLine />} />
              Action 5
            </ExtendedActionSheetItem>
          </ExtendedActionSheetGroup>
        </ExtendedActionSheetContent>
      </ExtendedActionSheetRoot>
    );
  };

  export default ExtendedActionSheetPreview;
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add extended-action-sheet
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add extended-action-sheet
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add extended-action-sheet
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add extended-action-sheet
    ```
  </Tab>
</Tabs>

<ManualInstallation name="extended-action-sheet" />

## Props

### `ExtendedActionSheetRoot`

<TypeTable
  type={{
    children: {
        "type": "ReactNode",
        "default": undefined
    },

    role: {
        "type": "\"dialog\" | \"alertdialog\"",
        "default": "\"dialog\"",
        description: <><p>{"The role of the dialog."}</p></>
    },

    closeOnInteractOutside: {
        "type": "boolean",
        "default": "true",
        description: <><p>{"Whether to close the dialog when the outside is clicked"}</p></>
    },

    closeOnEscape: {
        "type": "boolean",
        "default": "true",
        description: <><p>{"Whether to close the dialog when the escape key is pressed"}</p></>
    },

    lazyMount: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether to enable lazy mounting"}</p></>
    },

    unmountOnExit: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether to unmount on exit."}</p></>
    },

    open: {
        "type": "boolean",
        "default": undefined
    },

    defaultOpen: {
        "type": "boolean",
        "default": undefined
    },

    onOpenChange: {
        "type": "((open: boolean) => void)",
        "default": undefined
    }
}}
/>

### `ExtendedActionSheetContent`

<TypeTable
  type={{
    title: {
        "type": "ReactNode",
        "default": undefined
    },

    layerIndex: {
        "type": "number",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `ExtendedActionSheetItem`

<TypeTable
  type={{
    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    tone: {
        "type": "\"neutral\" | \"critical\"",
        "default": "neutral"
    }
}}
/>


file: ./content/react/components/extended-fab.mdx
# Extended FAB (Deprecated)

Deprecated. `ContextualFloatingButton`을 사용하세요.
        
<ComponentExample name="extended-fab-preview">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { ExtendedFab, PrefixIcon } from "@seed-design/react";

  export default function ExtendedFabPreview() {
    return (
      <ExtendedFab>
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ExtendedFab>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { ExtendedFab, PrefixIcon } from "@seed-design/react";
```

```tsx
<ExtendedFab>
  <PrefixIcon svg={<IconPlusLine />} />
  라벨
</ExtendedFab>
```

## Props

<TypeTable
  type={{
    variant: {
        "type": "\"neutralSolid\" | \"layerFloating\"",
        "default": "neutralSolid"
    },

    size: {
        "type": "\"small\" | \"medium\"",
        "default": "medium"
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Medium

<ComponentExample name="extended-fab-medium">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { ExtendedFab, PrefixIcon } from "@seed-design/react";

  export default function ExtendedFabMedium() {
    return (
      <ExtendedFab size="medium">
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ExtendedFab>
    );
  }
  ```
</ComponentExample>

### Small

<ComponentExample name="extended-fab-small">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { ExtendedFab, PrefixIcon } from "@seed-design/react";

  export default function ExtendedFabSmall() {
    return (
      <ExtendedFab size="small">
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ExtendedFab>
    );
  }
  ```
</ComponentExample>

### Neutral Solid

<ComponentExample name="extended-fab-neutral-solid">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { ExtendedFab, PrefixIcon } from "@seed-design/react";

  export default function ExtendedFabNeutralSolid() {
    return (
      <ExtendedFab variant="neutralSolid">
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ExtendedFab>
    );
  }
  ```
</ComponentExample>

### Layer Floating

<ComponentExample name="extended-fab-layer-floating">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { ExtendedFab, PrefixIcon } from "@seed-design/react";

  export default function ExtendedFabLayerFloating() {
    return (
      <ExtendedFab variant="layerFloating">
        <PrefixIcon svg={<IconBellFill />} />
        알림 설정
      </ExtendedFab>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/fab.mdx
# FAB (Deprecated)

Deprecated. `ContextualFloatingButton` 혹은 `FloatingActionButton`을 사용하세요.
        
<ComponentExample name="fab-preview">
  ```tsx
  import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";
  import { Fab, Icon } from "@seed-design/react";

  export default function FabPreview() {
    return (
      <Fab aria-label="Example FAB">
        <Icon svg={<IconPlusLine />} />
      </Fab>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Fab, Icon } from "@seed-design/react";
import { IconPlusLine } from "@karrotmarket/react-monochrome-icon";
```

```tsx
<Fab>
  <Icon svg={<IconPlusLine />} />
</Fab>
```

## Props

<TypeTable
  type={{
    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>


file: ./content/react/components/floating-action-button.mdx
# Floating Action Button

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="floating-action-button-preview">
  ```tsx
  import { FloatingActionButton } from "@/registry/ui/floating-action-button";
  import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";

  export default function FloatingActionButtonPreview() {
    return <FloatingActionButton icon={<IconPlusLine />} label="Example FAB" />;
  }
  ```
</ComponentExample>

## Props

<TypeTable
  type={{
    icon: {
        "type": "ReactNode",
        "default": undefined
    },

    label: {
        "type": "ReactNode",
        "default": undefined
    },

    extended: {
        "type": "boolean",
        "default": "true"
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Extended

`extended` prop을 사용하여 label 표시 여부 및 레이아웃을 제어할 수 있습니다.

`extended` 사용 유무에 관계없이 `label`은 접근성을 위해 필수 prop으로 지정되어 있습니다.

<ComponentExample name="floating-action-button-extended">
  ```tsx
  import { FloatingActionButton } from "@/registry/ui/floating-action-button";
  import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";
  import { HStack } from "@seed-design/react";

  export default function FloatingActionButtonExtended() {
    return (
      <HStack gap="x2">
        <FloatingActionButton icon={<IconPlusLine />} label="Extended" extended={true} />
        <FloatingActionButton icon={<IconPlusLine />} label="Extended" extended={false} />
      </HStack>
    );
  }
  ```
</ComponentExample>

### Float Composition

Floating Action Button은 `<Float>` 컴포넌트와 함께 사용하면 편리합니다.

<ComponentExample name="floating-action-button-float-composition">
  ```tsx
  import { FloatingActionButton } from "@/registry/ui/floating-action-button";
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { Box, Float } from "@seed-design/react";

  export default function FloatingActionButtonFloatComposition() {
    return (
      <Box
        position="relative"
        width="300px"
        height="500px"
        borderWidth={1}
        borderColor="stroke.neutral"
      >
        <Float placement="bottom-end" offsetX="x4" offsetY="x4">
          <FloatingActionButton icon={<IconBellFill />} label="알림 설정" />
        </Float>
      </Box>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/help-bubble.mdx
# Help Bubble

Help Bubble은 사용자에게 컴포넌트의 상태나 특정 기능에 대한 추가 정보를 제공하는 부가적인 도움말 컴포넌트입니다.
        
<ComponentExample name="help-bubble-preview">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

  export default function HelpBubblePreview() {
    return (
      <HelpBubbleTrigger
        defaultOpen
        flip={true}
        title="타이틀"
        description="설명을 추가할 수 있어요."
      >
        <ActionButton>열기</ActionButton>
      </HelpBubbleTrigger>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add help-bubble
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add help-bubble
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add help-bubble
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add help-bubble
    ```
  </Tab>
</Tabs>

<ManualInstallation name="help-bubble" />

## Props

<TypeTable
  type={{
    title: {
        "type": "string",
        "default": undefined
    },

    description: {
        "type": "string",
        "default": undefined
    },

    showCloseButton: {
        "type": "boolean",
        "default": undefined
    },

    children: {
        "type": "ReactNode",
        "default": undefined
    },

    contentProps: {
        "type": "HelpBubbleContentProps",
        "default": undefined
    },

    defaultOpen: {
        "type": "boolean",
        "default": undefined,
        description: <><p>{"Whether the floating element is initially open"}</p></>
    },

    open: {
        "type": "boolean",
        "default": undefined,
        description: <><p>{"Whether the floating element is open"}</p></>
    },

    onOpenChange: {
        "type": "((open: boolean) => void)",
        "default": undefined,
        description: <><p>{"Callback when the floating element is opened or closed"}</p></>
    },

    strategy: {
        "type": "\"absolute\" | \"fixed\"",
        "default": "\"absolute\"",
        description: <><p>{"The strategy to use for positioning"}</p></>
    },

    placement: {
        "type": "Placement",
        "default": "\"bottom\"",
        description: <><p>{"The initial placement of the floating element"}</p></>
    },

    gutter: {
        "type": "number",
        "default": undefined,
        description: <><p>{"The gutter between the floating element and the reference element"}</p></>
    },

    flip: {
        "type": "boolean | Placement[]",
        "default": "true",
        description: <><p>{"Whether to flip the placement"}</p></>
    },

    slide: {
        "type": "boolean",
        "default": "true",
        description: <><p>{"Whether the popover should slide when it overflows."}</p></>
    },

    overflowPadding: {
        "type": "number",
        "default": "8",
        description: <><p>{"The virtual padding around the viewport edges to check for overflow"}</p></>
    },

    arrowPadding: {
        "type": "number",
        "default": "4",
        description: <><p>{"The minimum padding between the arrow and the floating element's corner."}</p></>
    }
}}
/>

## Examples

### Anchor

<ComponentExample name="help-bubble-anchor">
  ```tsx
  import { Avatar } from "seed-design/ui/avatar";
  import { HelpBubbleAnchor } from "seed-design/ui/help-bubble";

  export default function HelpBubbleAnchorExample() {
    return (
      <HelpBubbleAnchor
        open
        title="Anchor"
        description="클릭으로 열고 닫는 동작 없이 위치만 지정합니다."
      >
        <Avatar size="96" src="https://avatars.githubusercontent.com/u/54893898?v=4" fallback="L" />
      </HelpBubbleAnchor>
    );
  }
  ```
</ComponentExample>

### Placement

<ComponentExample name="help-bubble-placement">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

  export default function HelpBubblePreview() {
    return (
      <HelpBubbleTrigger
        open
        placement="bottom"
        title="Placement"
        description="Placement로 기본 위치를 설정할 수 있어요."
      >
        <ActionButton>열기</ActionButton>
      </HelpBubbleTrigger>
    );
  }
  ```
</ComponentExample>

### Flip

<ComponentExample name="help-bubble-flip">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

  export default function HelpBubbleFlip() {
    return (
      <HelpBubbleTrigger
        open
        flip={false}
        title="Flip"
        description="Flip을 끄면 화면 경계에서 방향이 바뀌지 않아요."
      >
        <ActionButton>열기</ActionButton>
      </HelpBubbleTrigger>
    );
  }
  ```
</ComponentExample>

### Close Button

<ComponentExample name="help-bubble-close-button">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

  export default function HelpBubbleCloseButton() {
    return (
      <HelpBubbleTrigger
        defaultOpen
        showCloseButton
        title="Close Button"
        description="showCloseButton으로 닫기 버튼을 추가할 수 있어요."
      >
        <ActionButton>열기</ActionButton>
      </HelpBubbleTrigger>
    );
  }
  ```
</ComponentExample>

### Title Only

<ComponentExample name="help-bubble-title-only">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { HelpBubbleTrigger } from "seed-design/ui/help-bubble";

  export default function HelpBubbleTitleOnly() {
    return (
      <HelpBubbleTrigger open title="Title Only">
        <ActionButton>열기</ActionButton>
      </HelpBubbleTrigger>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/identity-placeholder.mdx
# Identity Placeholder

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="identity-placeholder-preview">
  ```tsx
  import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";

  export default function IdentityPlaceholderPreview() {
    return <IdentityPlaceholder />;
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add identity-placeholder
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add identity-placeholder
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add identity-placeholder
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add identity-placeholder
    ```
  </Tab>
</Tabs>

<ManualInstallation name="identity-placeholder" />

## Props

<TypeTable
  type={{
    identity: {
        "type": "\"person\"",
        "default": "person"
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>


file: ./content/react/components/inline-banner.mdx
# Inline Banner

사용자가 꼭 알아야 하는 경고 메시지나 현재 상태를 전달하는 컴포넌트에요.
        
<ComponentExample name="inline-banner-preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerPreview() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
        <ActionableInlineBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
        <DismissibleInlineBanner description="Ut veniam in ea ea anim laborum magna dolore ea laborum duis ut aute mollit amet." />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add inline-banner
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add inline-banner
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add inline-banner
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add inline-banner
    ```
  </Tab>
</Tabs>

<ManualInstallation name="inline-banner" />

## Props

### `InlineBanner`

<TypeTable
  type={{
    prefixIcon: {
        "type": "ReactNode",
        "default": undefined
    },

    title: {
        "type": "ReactNode",
        "default": undefined
    },

    description: {
        "type": "ReactNode",
        "default": undefined
    },

    linkProps: {
        "type": "InlineBannerLinkProps",
        "default": undefined
    },

    variant: {
        "type": "\"neutralWeak\" | \"positiveWeak\" | \"informativeWeak\" | \"warningWeak\" | \"warningSolid\" | \"criticalWeak\" | \"criticalSolid\"",
        "default": "neutralWeak"
    }
}}
/>

### `ActionableInlineBanner`

<TypeTable
  type={{
    prefixIcon: {
        "type": "ReactNode",
        "default": undefined
    },

    title: {
        "type": "ReactNode",
        "default": undefined
    },

    description: {
        "type": "ReactNode",
        "default": undefined
    },

    variant: {
        "type": "\"neutralWeak\" | \"positiveWeak\" | \"informativeWeak\" | \"warningWeak\" | \"warningSolid\" | \"criticalWeak\" | \"criticalSolid\"",
        "default": "neutralWeak"
    }
}}
/>

### `DismissibleInlineBanner`

<TypeTable
  type={{
    prefixIcon: {
        "type": "ReactNode",
        "default": undefined
    },

    title: {
        "type": "ReactNode",
        "default": undefined
    },

    description: {
        "type": "ReactNode",
        "default": undefined
    },

    variant: {
        "type": "\"neutralWeak\" | \"positiveWeak\" | \"informativeWeak\" | \"warningWeak\" | \"warningSolid\"",
        "default": undefined
    },

    defaultOpen: {
        "type": "boolean",
        "default": undefined
    },

    open: {
        "type": "boolean",
        "default": undefined
    },

    onDismiss: {
        "type": "(() => void)",
        "default": undefined
    }
}}
/>

## Examples

### Content Layout

#### With Link Label

<Callout type="warn">
  `linkProps` prop은 `InlineBanner`에서만 제공돼요.
</Callout>

<ComponentExample name="inline-banner-with-link-label">
  ```tsx
  import { InlineBanner } from "seed-design/ui/inline-banner";

  export default function InlineBannerWithLinkLabel() {
    return (
      <InlineBanner
        description="사업자 정보를 등록해주세요."
        linkProps={{ children: "자세히 보기" }}
      />
    );
  }
  ```
</ComponentExample>

#### Text Only

<ComponentExample name="inline-banner-text-only">
  ```tsx
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerTextOnly() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner description="사업자 정보를 등록해주세요." />
        <ActionableInlineBanner description="사업자 정보를 등록해주세요." />
        <DismissibleInlineBanner description="사업자 정보를 등록해주세요." />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With Icon

<ComponentExample name="inline-banner-with-icon">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerWithIcon() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner prefixIcon={<IconBellFill />} description="사업자 정보를 등록해주세요." />
        <ActionableInlineBanner
          prefixIcon={<IconBellFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          prefixIcon={<IconBellFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With Title Text

<ComponentExample name="inline-banner-with-title-text">
  ```tsx
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerWithTitleText() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner title="타이틀" description="사업자 정보를 등록해주세요." />
        <ActionableInlineBanner title="타이틀" description="사업자 정보를 등록해주세요." />
        <DismissibleInlineBanner title="타이틀" description="사업자 정보를 등록해주세요." />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### With All

<ComponentExample name="inline-banner-with-all">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerWithAll() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          prefixIcon={<IconBellFill />}
          title="타이틀"
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          prefixIcon={<IconBellFill />}
          title="타이틀"
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          prefixIcon={<IconBellFill />}
          title="타이틀"
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

### Customizable Parts

#### Rendering `LinkInlineBanner`’s Link Label as Child

<ComponentExample name="inline-banner-link-label-as-child">
  ```tsx
  import { InlineBanner } from "seed-design/ui/inline-banner";

  export default function InlineBannerLinkLabelAsChild() {
    return (
      <InlineBanner
        description="사업자 정보를 등록해주세요."
        linkProps={{
          asChild: true,
          children: (
            <a href="https://www.daangn.com" target="_blank" rel="noreferrer">
              자세히 보기
            </a>
          ),
        }}
      />
    );
  }
  ```
</ComponentExample>

### Variants

#### Neutral Weak (Default)

<ComponentExample name="inline-banner-neutral-weak">
  ```tsx
  import { IconBellFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerNeutralWeak() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="neutralWeak"
          prefixIcon={<IconBellFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="neutralWeak"
          prefixIcon={<IconBellFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          variant="neutralWeak"
          prefixIcon={<IconBellFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Positive Weak

<ComponentExample name="inline-banner-positive-weak">
  ```tsx
  import { IconCheckmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerPositiveWeak() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="positiveWeak"
          prefixIcon={<IconCheckmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="positiveWeak"
          prefixIcon={<IconCheckmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          variant="positiveWeak"
          prefixIcon={<IconCheckmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Informative Weak

<ComponentExample name="inline-banner-informative-weak">
  ```tsx
  import { IconILowercaseSerifCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerInformativeWeak() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="informativeWeak"
          prefixIcon={<IconILowercaseSerifCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="informativeWeak"
          prefixIcon={<IconILowercaseSerifCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          variant="informativeWeak"
          prefixIcon={<IconILowercaseSerifCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Warning Weak

<ComponentExample name="inline-banner-warning-weak">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerWarningWeak() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="warningWeak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="warningWeak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          variant="warningWeak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Warning Solid

<ComponentExample name="inline-banner-warning-solid">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import {
    ActionableInlineBanner,
    DismissibleInlineBanner,
    InlineBanner,
  } from "seed-design/ui/inline-banner";

  export default function InlineBannerWarningSolid() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="warningSolid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="warningSolid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <DismissibleInlineBanner
          variant="warningSolid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Critical Weak

<ComponentExample name="inline-banner-critical-weak">
  ```tsx
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";
  import { ActionableInlineBanner, InlineBanner } from "seed-design/ui/inline-banner";

  export default function InlineBannerCriticalWeak() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="criticalWeak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="criticalWeak"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Critical Solid

<Callout type="warn">
  `criticalWeak`과 `criticalSolid` variant는 `InlineBanner`와 `ActionableInlineBanner`에서만 제공돼요.
</Callout>

<Callout type="warn">
  variant가 `criticalWeak`이나 `criticalSolid`인 경우 `position: sticky` 등을 활용하여 화면을 스크롤했을 때도 인라인 배너가 상단에 고정되도록 해 주세요.
</Callout>

<ComponentExample name="inline-banner-critical-solid">
  ```tsx
  import { ActionableInlineBanner, InlineBanner } from "seed-design/ui/inline-banner";
  import { IconExclamationmarkCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { VStack } from "@seed-design/react";

  export default function InlineBannerCriticalSolid() {
    return (
      <VStack gap="x4" width="full">
        <InlineBanner
          variant="criticalSolid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
        <ActionableInlineBanner
          variant="criticalSolid"
          prefixIcon={<IconExclamationmarkCircleFill />}
          description="사업자 정보를 등록해주세요."
        />
      </VStack>
    );
  }
  ```
</ComponentExample>

<StackflowExample names={["inline-banner-activity"]}>
  ```tsx
  import * as React from "react";

  import { ActionButton } from "seed-design/ui/action-button";
  import { InlineBanner, type InlineBannerProps } from "seed-design/ui/inline-banner";

  import AppScreen from "@/components/stackflow/ActivityLayout";
  import type { ActivityComponentType } from "@stackflow/react/future";

  declare module "@stackflow/config" {
    interface Register {
      "inline-banner": unknown;
    }
  }

  const InlineBannerActivity: ActivityComponentType<"inline-banner"> = () => {
    const [variant, setVariant] =
      React.useState<Extract<InlineBannerProps["variant"], "neutralWeak" | "criticalSolid">>(
        "criticalSolid",
      );

    return (
      <AppScreen>
        <InlineBanner
          description="Lorem ipsum dolor sit amet consectetur adipisicing elit."
          variant={variant}
          {...(variant === "criticalSolid" && { style: { position: "sticky", top: 0 } })}
        />
        <div style={{ display: "flex", flexDirection: "column", padding: "1rem", gap: "0.75rem" }}>
          <ActionButton
            onClick={() =>
              setVariant((prev) => (prev === "criticalSolid" ? "neutralWeak" : "criticalSolid"))
            }
          >
            Toggle tone
          </ActionButton>
          <p style={{ marginBlock: 0, lineHeight: 1.35 }}>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. At a eaque fugiat sint sapiente.
            Id, hic ex, blanditiis totam animi amet delectus temporibus quae fugiat magnam, quos eaque
            dolorum a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus labore unde
            minus temporibus beatae commodi et nesciunt iure in dignissimos suscipit, alias ab
            voluptatem facilis tempora numquam. Veritatis, dolorum suscipit! Lorem ipsum dolor sit,
            amet consectetur adipisicing elit. Explicabo fugiat molestias iusto, ipsum distinctio
            officia ad id ratione esse ducimus architecto deleniti illum reiciendis rerum, at
            blanditiis molestiae. Cupiditate, nobis? Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Ab, magni. Aliquid inventore quaerat nemo architecto harum earum quas
            porro repudiandae explicabo repellat repellendus magni, corporis omnis laborum, velit
            dicta blanditiis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
            eveniet quas. Accusamus facere veritatis expedita delectus, asperiores numquam placeat
            necessitatibus assumenda, nesciunt in dolorem sit provident repellendus, voluptatem earum!
            Consequatur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut earum
            asperiores aliquam magnam est delectus veritatis numquam sint porro tenetur dolores nobis,
            deleniti voluptas quaerat, quia voluptatum soluta autem perspiciatis? Lorem ipsum dolor
            sit amet consectetur adipisicing elit. Facilis possimus eaque aliquam maxime? Quidem enim,
            sed itaque at veritatis nihil officia esse qui provident ipsa adipisci necessitatibus
            officiis distinctio laborum!
          </p>
        </div>
      </AppScreen>
    );
  };

  export default InlineBannerActivity;
  ```
</StackflowExample>


file: ./content/react/components/link-content.mdx
# Link Content

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="link-content-preview">
  ```tsx
  import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
  import { LinkContent, SuffixIcon } from "@seed-design/react";

  export default function LinkContentPreview() {
    return (
      <LinkContent>
        새 글
        <SuffixIcon svg={<IconChevronRightLine />} />
      </LinkContent>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { LinkContent, SuffixIcon } from "@seed-design/react";
import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
```

```tsx
<LinkContent>
  Label
  <SuffixIcon svg={<IconChevronRightLine />} />
</LinkContent>
```

## Props

<TypeTable
  type={{
    weight: {
        "type": "\"bold\" | \"regular\"",
        "default": "regular"
    },

    size: {
        "type": "\"t6\" | \"t5\" | \"t4\"",
        "default": "t4"
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {})",
        "default": undefined
    }
}}
/>

## Examples

### Size

<ComponentExample name="link-content-size">
  ```tsx
  import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
  import { LinkContent, SuffixIcon, VStack } from "@seed-design/react";

  export default function LinkContentSize() {
    return (
      <VStack>
        <LinkContent size="t4">
          추가
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
        <LinkContent size="t5">
          추가
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
        <LinkContent size="t6">
          추가
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
      </VStack>
    );
  }
  ```
</ComponentExample>

### Color

<ComponentExample name="link-content-color">
  ```tsx
  import { IconChevronRightLine } from "@karrotmarket/react-monochrome-icon";
  import { LinkContent, VStack, SuffixIcon } from "@seed-design/react";

  export default function LinkContentColor() {
    return (
      <VStack>
        <LinkContent color="fg.neutral">
          더보기
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
        <LinkContent color="fg.neutralSubtle">
          더보기
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
        <LinkContent color="fg.brand">
          더보기
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
        <LinkContent color="fg.informative">
          더보기
          <SuffixIcon svg={<IconChevronRightLine />} />
        </LinkContent>
      </VStack>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/manner-temp-badge.mdx
# Manner Temp Badge

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="manner-temp-badge-preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { MannerTempBadge } from "seed-design/ui/manner-temp-badge";

  export default function BadgePreview() {
    return (
      <VStack gap="x1">
        <MannerTempBadge temperature={12.5} />
        <MannerTempBadge temperature={36.2} />
        <MannerTempBadge temperature={36.5} />
        <MannerTempBadge temperature={41.9} />
        <MannerTempBadge temperature={51.9} />
        <MannerTempBadge temperature={52} />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add manner-temp-badge
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add manner-temp-badge
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add manner-temp-badge
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add manner-temp-badge
    ```
  </Tab>
</Tabs>

<ManualInstallation name="manner-temp-badge" />

## Props

<TypeTable
  type={{
    temperature: {
        "type": "number",
        "default": undefined,
        description: <><p>{"The manner temperature of the badge.\nLevel will be calculated based on this value.\nIf level is provided, this will be ignored."}</p></>
    },

    level: {
        "type": "\"l1\" | \"l2\" | \"l3\" | \"l4\" | \"l5\" | \"l6\"",
        "default": "l1"
    }
}}
/>


file: ./content/react/components/manner-temp.mdx
# Manner Temp

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="manner-temp-preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { MannerTemp } from "seed-design/ui/manner-temp";

  export default function MannerTempPreview() {
    return (
      <VStack gap="x1">
        <MannerTemp temperature={12.5} />
        <MannerTemp temperature={36.2} />
        <MannerTemp temperature={36.5} />
        <MannerTemp temperature={41.9} />
        <MannerTemp temperature={51.9} />
        <MannerTemp temperature={52} />
      </VStack>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add manner-temp
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add manner-temp
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add manner-temp
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add manner-temp
    ```
  </Tab>
</Tabs>

<ManualInstallation name="manner-temp" />

## Props

<TypeTable
  type={{
    temperature: {
        "type": "number",
        "default": undefined,
        description: <><p>{"The manner temperature of the MannerTemp component.\nLevel will be calculated based on this value.\nIf level is provided, this will be ignored."}</p></>
    },

    level: {
        "type": "\"l1\" | \"l2\" | \"l3\" | \"l4\" | \"l5\" | \"l6\"",
        "default": "l1"
    }
}}
/>


file: ./content/react/components/progress-circle.mdx
# Progress Circle

작업이 진행 중임을 알리거나 작업 시간을 시각적으로 나타내는 데 사용됩니다.
        
<ComponentExample name="progress-circle-preview">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCirclePreview() {
    return <ProgressCircle tone="neutral" size="40" />;
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add progress-circle
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add progress-circle
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add progress-circle
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add progress-circle
    ```
  </Tab>
</Tabs>

<ManualInstallation name="progress-circle" />

## Props

<TypeTable
  type={{
    value: {
        "type": "number",
        "default": undefined,
        description: <><p>{"The current value of the progress. if undefined, it will be indeterminate."}</p></>
    },

    minValue: {
        "type": "number",
        "default": "0",
        description: <><p>{"The minimum value allowed of the progress."}</p></>
    },

    maxValue: {
        "type": "number",
        "default": "100",
        description: <><p>{"The maximum value allowed of the progress."}</p></>
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    tone: {
        "type": "\"inherit\" | \"neutral\" | \"brand\" | \"staticWhite\"",
        "default": "neutral"
    },

    size: {
        "type": "\"inherit\" | \"24\" | \"40\"",
        "default": "40"
    }
}}
/>

## Examples

### Neutral

<ComponentExample name="progress-circle-neutral">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircleNeutral() {
    return <ProgressCircle tone="neutral" />;
  }
  ```
</ComponentExample>

### Brand

<ComponentExample name="progress-circle-brand">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircleBrand() {
    return <ProgressCircle tone="brand" />;
  }
  ```
</ComponentExample>

### Static White

<ComponentExample name="progress-circle-static-white">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircleStaticWhite() {
    return (
      <div
        style={{
          display: "flex",
          flex: 1,
          width: "100vw",
          height: "300px",
          alignItems: "center",
          justifyContent: "center",
          background: "black",
        }}
      >
        <ProgressCircle tone="staticWhite" />
      </div>
    );
  }
  ```
</ComponentExample>

### Size=40

<ComponentExample name="progress-circle-40">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircle40() {
    return <ProgressCircle size="40" />;
  }
  ```
</ComponentExample>

### Size=24

<ComponentExample name="progress-circle-24">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircle24() {
    return <ProgressCircle size="24" />;
  }
  ```
</ComponentExample>

### Determinate

<ComponentExample name="progress-circle-determinate">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCircleDeterminate() {
    return <ProgressCircle minValue={0} maxValue={100} value={40} />;
  }
  ```
</ComponentExample>

### Indeterminate

<ComponentExample name="progress-circle-indeterminate">
  ```tsx
  import { ProgressCircle } from "seed-design/ui/progress-circle";

  export default function ProgressCirclePreview() {
    // if you want to show an indeterminate progress circle, you can pass `undefined` or omit the `value` prop
    return <ProgressCircle value={undefined} />;
  }
  ```
</ComponentExample>


file: ./content/react/components/pull-to-refresh.mdx
# Pull To Refresh

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<StackflowExample names={["pull-to-refresh-preview"]}>
  ```tsx
  import { AppBar, AppScreen } from "@seed-design/stackflow";
  import { ActivityComponentType } from "@stackflow/react/future";
  import { VStack } from "@seed-design/react";
  import {
    PullToRefreshContent,
    PullToRefreshIndicator,
    PullToRefreshRoot,
  } from "seed-design/ui/pull-to-refresh";

  declare module "@stackflow/config" {
    interface Register {
      "pull-to-refresh-preview": unknown;
    }
  }

  const PullToRefreshPreview: ActivityComponentType<"pull-to-refresh-preview"> = () => {
    // AppScreen is imported from @seed-design/stackflow instead of snippet for demo purpose.
    // AppScreen snippet is integrating PullToRefresh, so it's not necessary to use it here.
    return (
      <AppScreen.Root>
        <AppBar.Root divider>
          <AppBar.Main>
            <AppBar.Title>Pull To Refresh</AppBar.Title>
          </AppBar.Main>
        </AppBar.Root>
        <PullToRefreshRoot
          asChild
          onPtrReady={() => {}}
          onPtrRefresh={async () => {
            await new Promise((resolve) => setTimeout(resolve, 1000));
          }}
        >
          <AppScreen.Layer>
            <PullToRefreshIndicator />
            <PullToRefreshContent asChild>
              <VStack px="spacingX.globalGutter">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam autem deserunt
                reprehenderit ducimus sunt. Quod laudantium excepturi tempora fuga repellendus
                accusantium nam maiores? Quas debitis, neque ullam eligendi minus sit?
              </VStack>
            </PullToRefreshContent>
          </AppScreen.Layer>
        </PullToRefreshRoot>
      </AppScreen.Root>
    );
  };

  export default PullToRefreshPreview;
  ```
</StackflowExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add pull-to-refresh
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add pull-to-refresh
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add pull-to-refresh
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add pull-to-refresh
    ```
  </Tab>
</Tabs>

<ManualInstallation name="pull-to-refresh" />

## Props

### PullToRefreshRoot

<TypeTable
  type={{
    threshold: {
        "type": "number",
        "default": "44",
        description: <><p>{"The threshold value to trigger the refresh. (px)"}</p></>
    },

    displacementMultiplier: {
        "type": "number",
        "default": "0.5",
        description: <><p>{"The multiplier to calculate displacement from the touch movement."}</p></>
    },

    onPtrPullStart: {
        "type": "((ctx: PullToRefreshContext) => void)",
        "default": undefined,
        description: <><p>{"Callback when the pull-to-refresh has started to pull."}</p></>
    },

    onPtrPullMove: {
        "type": "((ctx: PullToRefreshContext) => void)",
        "default": undefined,
        description: <><p>{"Callback when the pull-to-refresh is moving during the pull."}</p></>
    },

    onPtrPullEnd: {
        "type": "((ctx: PullToRefreshContext) => void)",
        "default": undefined,
        description: <><p>{"Callback when the pull-to-refresh is released.\nIt does not matter if it is ready or not. If you want to handle the refresh, use "}<code>{"onPtrRefresh"}</code>{"."}</p></>
    },

    onPtrReady: {
        "type": "(() => void)",
        "default": undefined,
        description: <><p>{"Callback when the pull-to-refresh is pulled over the threshold."}</p></>
    },

    onPtrRefresh: {
        "type": "(() => Promise<void>)",
        "default": undefined,
        description: <><p>{"Callback when the pull-to-refresh is released after ready."}</p></>
    },

    disabled: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether to disable the pull-to-refresh."}</p></>
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### PullToRefreshIndicator

<TypeTable type={{}} />

### PullToRefreshContent

<TypeTable
  type={{
    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### PTR in Tabs

<StackflowExample names={["pull-to-refresh-tabs"]}>
  ```tsx
  import { VStack } from "@seed-design/react";
  import { ActivityComponentType } from "@stackflow/react/future";
  import { AppBar, AppBarMain } from "seed-design/ui/app-bar";
  import { AppScreen, AppScreenContent } from "seed-design/ui/app-screen";
  import {
    PullToRefreshContent,
    PullToRefreshIndicator,
    PullToRefreshRoot,
  } from "seed-design/ui/pull-to-refresh";
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  declare module "@stackflow/config" {
    interface Register {
      "pull-to-refresh-tabs": unknown;
    }
  }

  const PullToRefreshTabs: ActivityComponentType<"pull-to-refresh-tabs"> = () => {
    return (
      <AppScreen>
        <AppBar>
          <AppBarMain>Pull To Refresh</AppBarMain>
        </AppBar>
        <AppScreenContent>
          <TabsRoot defaultValue="1" contentLayout="fill">
            <TabsList>
              <TabsTrigger value="1">Tab 1</TabsTrigger>
              <TabsTrigger value="2">Tab 2</TabsTrigger>
            </TabsList>
            <TabsContent value="1">
              <PullToRefreshRoot
                onPtrReady={() => {}}
                onPtrRefresh={async () => {
                  await new Promise((resolve) => setTimeout(resolve, 1000));
                }}
              >
                <PullToRefreshIndicator />
                <PullToRefreshContent asChild>
                  <VStack px="spacingX.globalGutter">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam autem deserunt
                    reprehenderit ducimus sunt. Quod laudantium excepturi tempora fuga repellendus
                    accusantium nam maiores? Quas debitis, neque ullam eligendi minus sit?
                  </VStack>
                </PullToRefreshContent>
              </PullToRefreshRoot>
            </TabsContent>
            <TabsContent value="2">
              <VStack px="spacingX.globalGutter">PTR is not available in this tab.</VStack>
            </TabsContent>
          </TabsRoot>
        </AppScreenContent>
      </AppScreen>
    );
  };

  export default PullToRefreshTabs;
  ```
</StackflowExample>

### Disabled

`disabled` 속성을 사용하여 PTR를 비활성화할 수 있습니다.

<ComponentExample name="pull-to-refresh-disabled">
  ```tsx
  import { Box, HStack, Text } from "@seed-design/react";
  import { useState } from "react";
  import {
    PullToRefreshContent,
    PullToRefreshIndicator,
    PullToRefreshRoot,
  } from "seed-design/ui/pull-to-refresh";
  import { Switch } from "seed-design/ui/switch";

  const PullToRefreshDisabled = () => {
    const [disabled, setDisabled] = useState(false);

    return (
      <Box width="300px" height="500px" borderColor="stroke.neutral" borderWidth={1}>
        <PullToRefreshRoot
          onPtrReady={() => {}}
          onPtrRefresh={async () => {
            await new Promise((resolve) => setTimeout(resolve, 1000));
          }}
          disabled={disabled}
        >
          <PullToRefreshIndicator />
          <PullToRefreshContent asChild>
            <HStack px="spacingX.globalGutter" py="x4" align="center" justify="space-between">
              <Text>Disabled</Text>
              <Switch checked={disabled} onCheckedChange={setDisabled} />
            </HStack>
          </PullToRefreshContent>
        </PullToRefreshRoot>
      </Box>
    );
  };

  export default PullToRefreshDisabled;
  ```
</ComponentExample>


file: ./content/react/components/reaction-button.mdx
# Reaction Button

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="reaction-button-preview">
  ```tsx
  import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { Count, PrefixIcon } from "@seed-design/react";
  import { ReactionButton } from "seed-design/ui/reaction-button";

  export default function ReactionButtonPreview() {
    return (
      <ReactionButton>
        <PrefixIcon svg={<IconFaceSmileCircleFill />} />
        도움돼요
        <Count>1</Count>
      </ReactionButton>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add reaction-button
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add reaction-button
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add reaction-button
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add reaction-button
    ```
  </Tab>
</Tabs>

<ManualInstallation name="reaction-button" />

## Props

<TypeTable
  type={{
    size: {
        "type": "\"xsmall\" | \"small\"",
        "default": "small"
    },

    loading: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"버튼에 등록된 비동기 작업이 진행 중임을 사용자에게 알립니다."}</p></>
    },

    disabled: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"버튼의 비활성화 여부를 나타냅니다."}</p></>
    },

    pressed: {
        "type": "boolean",
        "default": undefined
    },

    defaultPressed: {
        "type": "boolean",
        "default": undefined
    },

    onPressedChange: {
        "type": "((pressed: boolean) => void)",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Small

<ComponentExample name="reaction-button-small">
  ```tsx
  import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { Count, PrefixIcon } from "@seed-design/react";
  import { ReactionButton } from "seed-design/ui/reaction-button";

  export default function ReactionButtonSmall() {
    return (
      <ReactionButton size="small">
        <PrefixIcon svg={<IconFaceSmileCircleFill />} />
        도움돼요
        <Count>1</Count>
      </ReactionButton>
    );
  }
  ```
</ComponentExample>

### Xsmall

<ComponentExample name="reaction-button-xsmall">
  ```tsx
  import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { Count, PrefixIcon } from "@seed-design/react";
  import { ReactionButton } from "seed-design/ui/reaction-button";

  export default function ReactionButtonXsmall() {
    return (
      <ReactionButton size="xsmall">
        <PrefixIcon svg={<IconFaceSmileCircleFill />} />
        도움돼요
        <Count>1</Count>
      </ReactionButton>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="reaction-button-disabled">
  ```tsx
  import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { ReactionButton } from "seed-design/ui/reaction-button";

  export default function ReactionButtonDisabled() {
    return (
      <ReactionButton disabled>
        <PrefixIcon svg={<IconFaceSmileCircleFill />} />
        비활성
      </ReactionButton>
    );
  }
  ```
</ComponentExample>

### Loading

<ComponentExample name="reaction-button-loading">
  ```tsx
  import { IconFaceSmileCircleFill } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { useState } from "react";
  import { ReactionButton } from "seed-design/ui/reaction-button";

  export default function ReactionButtonLoading() {
    const [pressed, setPressed] = useState(false);
    const [loading, setLoading] = useState(false);

    function handleToggle() {
      setLoading(true);
      setTimeout(() => {
        setLoading(false);
        setPressed((prev) => !prev);
      }, 2000);
    }

    // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
    return (
      <ReactionButton loading={loading} pressed={pressed} onPressedChange={handleToggle}>
        <PrefixIcon svg={<IconFaceSmileCircleFill />} />
        시간이 걸리는 토글
      </ReactionButton>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/segmented-control.mdx
# Segmented Control

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="segmented-control-preview">
  ```tsx
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

  export default function SegmentedControlPreview() {
    return (
      <SegmentedControl defaultValue="Hot" aria-label="Sort by">
        <SegmentedControlItem value="Hot">Hot</SegmentedControlItem>
        <SegmentedControlItem value="New">New</SegmentedControlItem>
      </SegmentedControl>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add segmented-control
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add segmented-control
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add segmented-control
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add segmented-control
    ```
  </Tab>
</Tabs>

<ManualInstallation name="segmented-control" />

## Props

### `SegmentedControl`

<Callout type="info">
  `value`와 `defaultValue` 중 적어도 하나를 제공해야 해요.
</Callout>

<TypeTable
  type={{
    disabled: {
        "type": "boolean",
        "default": undefined
    },

    name: {
        "type": "string",
        "default": undefined
    },

    form: {
        "type": "string",
        "default": undefined
    },

    value: {
        "type": "string",
        "default": undefined
    },

    defaultValue: {
        "type": "string",
        "default": undefined
    },

    onValueChange: {
        "type": "((value: string) => void)",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `SegmentedControlItem`

<TypeTable
  type={{
    inputProps: {
        "type": "InputHTMLAttributes<HTMLInputElement>",
        "default": undefined
    },

    rootRef: {
        "type": "Ref<HTMLLabelElement>",
        "default": undefined
    },

    children: {
        "type": "string",
        "default": undefined,
        description: <><p>{"The label of the item.\nType is restricted to string for consistent width between font-weight changes.\nIf you need to render a React element, use each element separately."}</p></>
    },

    value: {
        "type": "string",
        "default": undefined
    },

    disabled: {
        "type": "boolean",
        "default": undefined
    },

    invalid: {
        "type": "boolean",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Disabled

<ComponentExample name="segmented-control-disabled">
  ```tsx
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

  export default function SegmentedControlPreview() {
    return (
      <SegmentedControl defaultValue="Hot" disabled aria-label="Sort by">
        <SegmentedControlItem value="Hot">Hot</SegmentedControlItem>
        <SegmentedControlItem value="New">New</SegmentedControlItem>
      </SegmentedControl>
    );
  }
  ```
</ComponentExample>

### Long Label

Pill 형태의 `SegmentedControlItem` 한 개는 86px의 최소 너비를 가져요. 제공한 옵션 중 이 너비를 초과하는 옵션이 있다면, 가장 긴 옵션의 너비에 모든 옵션의 너비가 맞춰져요.

<ComponentExample name="segmented-control-long-label">
  ```tsx
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

  export default function SegmentedControlLongLabel() {
    return (
      <SegmentedControl defaultValue="price" aria-label="정렬 기준">
        <SegmentedControlItem value="price">가격 높은 순</SegmentedControlItem>
        <SegmentedControlItem value="discount">할인율 높은 순</SegmentedControlItem>
        <SegmentedControlItem value="popularity">인기 많은 순</SegmentedControlItem>
      </SegmentedControl>
    );
  }
  ```
</ComponentExample>

### Fixed Width

`SegmentedControl`의 `style` prop에 `width`를 제공해서 직접 너비를 설정할 수 있어요.

<Callout type="info" title="지정한 너비가 무시되는 경우">
  직접 설정한 너비 안에서 모든 레이블을 overflow 없이 표시할 수 없는 경우, 직접
  지정한 너비 대신 overflow 없이 표시할 수 있는 최소 너비로 자동 조정돼요.
</Callout>

<ComponentExample name="segmented-control-fixed-width">
  ```tsx
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

  export default function SegmentedControlFixedWidth() {
    return (
      <SegmentedControl defaultValue="new" style={{ width: "600px" }} aria-label="Sort by">
        <SegmentedControlItem value="new">New</SegmentedControlItem>
        <SegmentedControlItem value="hot">Hot</SegmentedControlItem>
      </SegmentedControl>
    );
  }
  ```
</ComponentExample>

### Long Label & Fixed Width

<ComponentExample name="segmented-control-long-label-fixed-width">
  ```tsx
  import { SegmentedControl, SegmentedControlItem } from "seed-design/ui/segmented-control";

  export default function SegmentedControlLongLabelFixedWidth() {
    return (
      <SegmentedControl defaultValue="price" style={{ width: "600px" }} aria-label="정렬 기준">
        <SegmentedControlItem value="price">가격 높은 순</SegmentedControlItem>
        <SegmentedControlItem value="discount">할인율 높은 순</SegmentedControlItem>
        <SegmentedControlItem value="popularity">인기 많은 순</SegmentedControlItem>
      </SegmentedControl>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/skeleton.mdx
# Skeleton

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="skeleton-preview">
  ```tsx
  import { Skeleton, VStack } from "@seed-design/react";

  export default function SkeletonPreview() {
    return (
      <VStack gap="x4" align="center">
        <Skeleton radius="full" width="x12" height="x12" />
        <VStack direction="column" gap="x2">
          <Skeleton radius="8" height="x4" width="250px" />
          <Skeleton radius="8" height="x4" width="250px" />
        </VStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Skeleton } from "@seed-design/react";
```

```tsx
<Skeleton />
```

## Props

<TypeTable
  type={{
    radius: {
        "type": "\"0\" | \"8\" | \"16\" | \"full\"",
        "default": "8"
    },

    tone: {
        "type": "\"neutral\" | \"magic\"",
        "default": "neutral"
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    height: {
        "type": "\"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined
    },

    width: {
        "type": "\"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined
    }
}}
/>

## Examples

### Radius

<ComponentExample name="skeleton-radius">
  ```tsx
  import { Flex, Skeleton } from "@seed-design/react";

  export default function SkeletonRadius() {
    return (
      <Flex gap="x4" align="center">
        <Skeleton radius="0" width="x12" height="x12" />
        <Skeleton radius="8" width="x12" height="x12" />
        <Skeleton radius="16" width="x12" height="x12" />
        <Skeleton radius="full" width="x12" height="x12" />
      </Flex>
    );
  }
  ```
</ComponentExample>

### Tone

<ComponentExample name="skeleton-tone">
  ```tsx
  import { Box, Skeleton, VStack } from "@seed-design/react";

  export default function SkeletonTone() {
    return (
      <VStack gap="x4" alignItems="flex-start" width="full">
        <Skeleton tone="neutral" radius="16" width="full" height="x12" />
        <Skeleton tone="magic" radius="16" width="full" height="x12" />
      </VStack>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/snackbar.mdx
# Snackbar

Snackbar는 사용자 액션의 결과나 프로세스의 결과를 알려주는 일시적인 알림 요소입니다. 화면 하단에 표시되며 자동으로 사라집니다.
        
<ComponentExample name="snackbar-preview">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

  function Component() {
    const adapter = useSnackbarAdapter();

    return (
      <ActionButton
        onClick={() =>
          adapter.create({
            timeout: 5000,
            onClose: () => {},
            render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
          })
        }
      >
        실행
      </ActionButton>
    );
  }

  export default function SnackbarPreview() {
    return (
      <SnackbarProvider>
        <Component />
      </SnackbarProvider>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add snackbar
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add snackbar
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add snackbar
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add snackbar
    ```
  </Tab>
</Tabs>

<ManualInstallation name="snackbar" />

## Props

### Snackbar

<TypeTable
  type={{
    message: {
        "type": "string",
        "default": undefined,
        description: <><p>{"스낵바에 표시할 메시지"}</p></>
    },

    actionLabel: {
        "type": "string",
        "default": undefined,
        description: <><p>{"스낵바에 표시할 액션 버튼의 라벨"}</p></>
    },

    onAction: {
        "type": "(() => void)",
        "default": undefined,
        description: <><p>{"액션 버튼 클릭 시 호출되는 콜백"}</p></>
    },

    shouldCloseOnAction: {
        "type": "boolean",
        "default": "true",
        description: <><p>{"액션 버튼 클릭 시 스낵바를 닫을지 여부"}</p></>
    },

    variant: {
        "type": "\"default\" | \"positive\" | \"critical\"",
        "default": "default"
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### SnackbarAdapter.create

<TypeTable
  type={{
    timeout: {
        "type": "number",
        "default": "5000",
        description: <><p>{"The duration the snackbar will be visible"}</p></>
    },

    removeDelay: {
        "type": "number",
        "default": "200",
        description: <><p>{"The duration for the snackbar to kept alive before it is removed.\nUseful for exit transitions."}</p></>
    },

    onClose: {
        "type": "(() => void)",
        "default": undefined,
        description: <><p>{"Function called when the snackbar has been closed and removed"}</p></>
    },

    render: {
        "type": "() => ReactNode",
        "default": undefined,
        description: <><p>{"The content to render in the snackbar region"}</p></>
    }
}}
/>

## Examples

### Positive

<ComponentExample name="snackbar-positive">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

  function Component() {
    const adapter = useSnackbarAdapter();

    return (
      <ActionButton
        onClick={() =>
          adapter.create({
            timeout: 5000,
            onClose: () => {},
            render: () => (
              <Snackbar
                variant="positive"
                message="알림 메세지"
                actionLabel="확인"
                onAction={() => {}}
              />
            ),
          })
        }
      >
        실행
      </ActionButton>
    );
  }

  export default function SnackbarPositive() {
    return (
      <SnackbarProvider>
        <Component />
      </SnackbarProvider>
    );
  }
  ```
</ComponentExample>

### Critical

<ComponentExample name="snackbar-critical">
  ```tsx
  import { ActionButton } from "seed-design/ui/action-button";
  import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar";

  function Component() {
    const adapter = useSnackbarAdapter();

    return (
      <ActionButton
        onClick={() =>
          adapter.create({
            timeout: 50000000,
            onClose: () => {},
            render: () => (
              <Snackbar
                variant="critical"
                message="알림 메세지"
                actionLabel="확인"
                onAction={() => {}}
              />
            ),
          })
        }
      >
        실행
      </ActionButton>
    );
  }

  export default function SnackbarNegative() {
    return (
      <SnackbarProvider>
        <Component />
      </SnackbarProvider>
    );
  }
  ```
</ComponentExample>

### Avoid Overlap

`<SnackbarAvoidOverlap />` 컴포넌트를 사용하여 스낵바가 겹치지 않아야 하는 영역을 지정할 수 있습니다.
`<SnackbarAvoidOverlap />`의 자식 컴포넌트는 forwardRef(\~React 18) 혹은 ref prop(React 19\~)으로 ref를 전달받아야 합니다.
offset은 다음 상황에서 갱신됩니다.

* SnackbarAvoidOverlap의 자식 컴포넌트가 mount될 때
* SnackbarAvoidOverlap의 자식 컴포넌트가 unmount될 때
* SnackbarAvoidOverlap의 자식 컴포넌트의 높이가 변경될 때
* SnackbarRegion의 높이가 변경될 때

<ComponentExample name="snackbar-avoid-overlap">
  ```tsx
  import { Flex, VStack } from "@seed-design/react";
  import { ActionButton } from "seed-design/ui/action-button";
  import {
    Snackbar,
    SnackbarAvoidOverlap,
    SnackbarProvider,
    useSnackbarAdapter,
  } from "seed-design/ui/snackbar";

  function Component() {
    const adapter = useSnackbarAdapter();

    return (
      <VStack gap="x4">
        <ActionButton
          onClick={() =>
            adapter.create({
              timeout: 5000,
              onClose: () => {},
              render: () => <Snackbar message="알림 메세지" actionLabel="확인" onAction={() => {}} />,
            })
          }
        >
          실행
        </ActionButton>
        <SnackbarAvoidOverlap>
          <Flex width="full" height="x16" bg="bg.criticalWeak" justify="center" align="center">
            Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.
          </Flex>
        </SnackbarAvoidOverlap>
      </VStack>
    );
  }

  export default function SnackbarPreview() {
    return (
      <SnackbarProvider>
        <Component />
      </SnackbarProvider>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/switch.mdx
# Switch

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="switch-preview">
  ```tsx
  import { useState } from "react";
  import { Switch } from "seed-design/ui/switch";

  export default function SwitchPreview() {
    const [isChecked, setIsChecked] = useState(false);

    return <Switch checked={isChecked} onCheckedChange={setIsChecked} />;
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add switch
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add switch
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add switch
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add switch
    ```
  </Tab>
</Tabs>

<ManualInstallation name="switch" />

## Props

<TypeTable
  type={{
    inputProps: {
        "type": "InputHTMLAttributes<HTMLInputElement>",
        "default": undefined
    },

    rootRef: {
        "type": "Ref<HTMLLabelElement>",
        "default": undefined
    },

    label: {
        "type": "ReactNode",
        "default": undefined,
        description: <><p>{"label is supported in small size only currently."}</p></>
    },

    size: {
        "type": "\"medium\" | \"small\"",
        "default": "medium"
    },

    disabled: {
        "type": "boolean",
        "default": undefined
    },

    invalid: {
        "type": "boolean",
        "default": undefined
    },

    required: {
        "type": "boolean",
        "default": undefined
    },

    checked: {
        "type": "boolean",
        "default": undefined
    },

    defaultChecked: {
        "type": "boolean",
        "default": undefined
    },

    onCheckedChange: {
        "type": "((checked: boolean) => void)",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Medium

<ComponentExample name="switch-medium">
  ```tsx
  import { useState } from "react";
  import { Switch } from "seed-design/ui/switch";

  export default function SwitchMedium() {
    const [isChecked, setIsChecked] = useState(false);

    return <Switch size="medium" checked={isChecked} onCheckedChange={setIsChecked} />;
  }
  ```
</ComponentExample>

### Small

<ComponentExample name="switch-small">
  ```tsx
  import { useState } from "react";
  import { Switch } from "seed-design/ui/switch";

  export default function SwitchSmall() {
    const [isChecked, setIsChecked] = useState(false);

    return <Switch size="small" label="라벨" checked={isChecked} onCheckedChange={setIsChecked} />;
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="switch-disabled">
  ```tsx
  import { Switch } from "seed-design/ui/switch";

  export default function SwitchDisabled() {
    return (
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <Switch disabled />
        <Switch checked disabled />
      </div>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/toggle-button.mdx
# Toggle Button

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="toggle-button-preview">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonPreview() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton pressed={pressed} onPressedChange={setPressed}>
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add toggle-button
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add toggle-button
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add toggle-button
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add toggle-button
    ```
  </Tab>
</Tabs>

<ManualInstallation name="toggle-button" />

## Props

<TypeTable
  type={{
    variant: {
        "type": "\"brandSolid\" | \"neutralWeak\"",
        "default": "brandSolid"
    },

    size: {
        "type": "\"xsmall\" | \"small\"",
        "default": "small"
    },

    loading: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"버튼에 등록된 비동기 작업이 진행 중임을 사용자에게 알립니다."}</p></>
    },

    disabled: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"버튼의 비활성화 여부를 나타냅니다."}</p></>
    },

    pressed: {
        "type": "boolean",
        "default": undefined
    },

    defaultPressed: {
        "type": "boolean",
        "default": undefined
    },

    onPressedChange: {
        "type": "((pressed: boolean) => void)",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### Brand Solid

<ComponentExample name="toggle-button-brand-solid">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonBrandSolid() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton variant="brandSolid" pressed={pressed} onPressedChange={setPressed}>
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

### Neutral Weak

<ComponentExample name="toggle-button-neutral-weak">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonBrandSolid() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton variant="neutralWeak" pressed={pressed} onPressedChange={setPressed}>
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

### Small

<ComponentExample name="toggle-button-small">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonSmall() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton size="small" pressed={pressed} onPressedChange={setPressed}>
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

### Xsmall

<ComponentExample name="toggle-button-xsmall">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonXsmall() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton size="xsmall" pressed={pressed} onPressedChange={setPressed}>
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

### Prefix Icon

<ComponentExample name="toggle-button-prefix-icon">
  ```tsx
  import { IconCheckmarkLine, IconPlusLine } from "@karrotmarket/react-monochrome-icon";
  import { PrefixIcon } from "@seed-design/react";
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonPrefixIcon() {
    const [pressed, setPressed] = useState(false);

    return (
      <ToggleButton pressed={pressed} onPressedChange={setPressed}>
        <PrefixIcon svg={pressed ? <IconPlusLine /> : <IconCheckmarkLine />} />
        {pressed ? "선택됨" : "미선택"}
      </ToggleButton>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="toggle-button-disabled">
  ```tsx
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonDisabled() {
    return <ToggleButton disabled>비활성</ToggleButton>;
  }
  ```
</ComponentExample>

### Loading

<ComponentExample name="toggle-button-loading">
  ```tsx
  import { useState } from "react";
  import { ToggleButton } from "seed-design/ui/toggle-button";

  export default function ToggleButtonLoading() {
    const [pressed, setPressed] = useState(false);
    const [loading, setLoading] = useState(false);

    function handleToggle() {
      setLoading(true);
      setTimeout(() => {
        setLoading(false);
        setPressed((prev) => !prev);
      }, 2000);
    }

    // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.
    return (
      <ToggleButton loading={loading} pressed={pressed} onPressedChange={handleToggle}>
        시간이 걸리는 토글
      </ToggleButton>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/(layout)/box.mdx
# Box

Box 컴포넌트는 가장 기초적인 레이아웃 컴포넌트입니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.
        
<ComponentExample name="box-preview">
  ```tsx
  import { Box } from "@seed-design/react";

  export default function BoxPreview() {
    return (
      <Box
        bg="bg.neutralWeak"
        borderWidth="2px"
        borderColor="stroke.brand"
        borderRadius="r2"
        px="x3"
        py="x2"
      >
        Box Example
      </Box>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Box } from "@seed-design/react";
```

```tsx
<Box />
```

## Props

<TypeTable
  type={{
    as: {
        "type": "ElementType<any, keyof IntrinsicElements>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": undefined
    },

    bg: {
        "type": "ScopedColorBg | ScopedColorPalette | (string & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorBg | ScopedColorPalette | (string & {})",
        "default": undefined
    },

    bgGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    color: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorFg",
        "default": undefined
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke",
        "default": undefined
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    top: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    left: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    right: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    bottom: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    display: {
        "type": "\"block\" | \"flex\" | \"inline-flex\" | \"inline\" | \"inline-block\" | \"none\" | \"inlineFlex\" | \"inlineBlock\"",
        "default": undefined
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\"",
        "default": undefined
    },

    overflowX: {
        "type": "\"hidden\" | \"visible\" | \"scroll\" | \"auto\"",
        "default": undefined
    },

    overflowY: {
        "type": "\"hidden\" | \"visible\" | \"scroll\" | \"auto\"",
        "default": undefined
    },

    zIndex: {
        "type": "number | (string & {})",
        "default": undefined
    },

    flexGrow: {
        "type": "0 | 1 | (number & {})",
        "default": undefined
    },

    flexShrink: {
        "type": "0 | (number & {})",
        "default": undefined
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\"",
        "default": undefined
    },

    flexWrap: {
        "type": "\"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    unstable_transform: {
        "type": "string",
        "default": undefined
    },

    _active: {
        "type": "{ bg?: ScopedColorBg | ScopedColorPalette | (string & {}) | undefined; background?: ScopedColorBg | ScopedColorPalette | (string & {}) | undefined; }",
        "default": undefined
    }
}}
/>

## Examples

### Gradient

<ComponentExample name="box-gradient">
  ```tsx
  import { Box, VStack } from "@seed-design/react";

  export default function BoxGradient() {
    return (
      <VStack gap="x2">
        <Box
          backgroundGradient="highlightMagic"
          backgroundGradientDirection="43deg"
          borderRadius="r2"
          color="palette.staticWhite"
          px="x3"
          py="x2"
        >
          Box Gradient
        </Box>
        <Box
          backgroundGradient="highlightMagic"
          backgroundGradientDirection="to bottom"
          borderRadius="r2"
          color="palette.staticWhite"
          px="x3"
          py="x2"
        >
          Box Gradient
        </Box>
      </VStack>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/(layout)/columns.mdx
# Columns (Deprecated)

여러 열로 구성된 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다. (Deprecated)
        
<ComponentExample name="columns-preview">
  ```tsx
  import { Column, Columns } from "@seed-design/react";

  /**
   * @deprecated use `HStack` instead.
   */
  export default function ColumnsPreview() {
    return (
      <Columns bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Column bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          1
        </Column>
        <Column bg="bg.brandSolid" px="x4" py="x3" width="content" borderRadius="r2">
          Content Width
        </Column>
        <Column bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          2
        </Column>
      </Columns>
    );
  }
  ```
</ComponentExample>

## Deprecated

`Columns` 컴포넌트는 더 이상 사용되지 않습니다. 대신 `HStack`을 사용하세요.

## Usage

```tsx
import { Columns, Column } from "@seed-design/react";
```

```tsx
<Columns />
```

## Props

### `Columns`

<TypeTable
  type={{
    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {})",
        "default": undefined
    },

    as: {
        "type": "ElementType<any, keyof IntrinsicElements>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": undefined
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined
    },

    bgGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke",
        "default": undefined
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    top: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    left: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    right: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    bottom: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\"",
        "default": undefined
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    zIndex: {
        "type": "number | (string & {})",
        "default": undefined
    },

    flexGrow: {
        "type": "0 | 1 | (number & {})",
        "default": undefined
    },

    flexShrink: {
        "type": "0 | (number & {})",
        "default": undefined
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\"",
        "default": undefined
    },

    flexWrap: {
        "type": "\"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    unstable_transform: {
        "type": "string",
        "default": undefined
    },

    _active: {
        "type": "{ bg?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; background?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; }",
        "default": undefined
    }
}}
/>

### `Column`

<TypeTable
  type={{
    width: {
        "type": "\"content\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {})",
        "default": undefined
    },

    color: {
        "type": "(string & {}) | ScopedColorFg | ScopedColorPalette",
        "default": undefined
    },

    as: {
        "type": "ElementType<any, keyof IntrinsicElements>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": undefined
    },

    bg: {
        "type": "(string & {}) | ScopedColorPalette | ScopedColorBg",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "(string & {}) | ScopedColorPalette | ScopedColorBg",
        "default": undefined
    },

    bgGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "(string & {}) | ScopedColorPalette | ScopedColorStroke",
        "default": undefined
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\"",
        "default": undefined
    },

    borderTopLeftRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\"",
        "default": undefined
    },

    borderTopRightRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\"",
        "default": undefined
    },

    borderBottomRightRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\"",
        "default": undefined
    },

    borderBottomLeftRadius: {
        "type": "0 | \"full\" | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\"",
        "default": undefined
    },

    minWidth: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {})",
        "default": undefined
    },

    maxWidth: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {})",
        "default": undefined
    },

    height: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {})",
        "default": undefined
    },

    minHeight: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {})",
        "default": undefined
    },

    maxHeight: {
        "type": "Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"full\" | (string & {})",
        "default": undefined
    },

    top: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    left: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    right: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    bottom: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    padding: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined
    },

    p: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined
    },

    px: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined
    },

    py: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined
    },

    pt: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined
    },

    pr: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined
    },

    pb: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined
    },

    pl: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {}) | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\"",
        "default": undefined
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    zIndex: {
        "type": "number | (string & {})",
        "default": undefined
    },

    flexGrow: {
        "type": "0 | 1 | (number & {})",
        "default": undefined
    },

    flexShrink: {
        "type": "0 | (number & {})",
        "default": undefined
    },

    flexWrap: {
        "type": "\"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    gap: {
        "type": "0 | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | (string & {})",
        "default": undefined
    },

    unstable_transform: {
        "type": "string",
        "default": undefined
    },

    _active: {
        "type": "{ bg?: (string & {}) | ScopedColorPalette | ScopedColorBg | undefined; background?: (string & {}) | ScopedColorPalette | ScopedColorBg | undefined; }",
        "default": undefined
    }
}}
/>


file: ./content/react/components/(layout)/flex.mdx
# Flex

Flex 컴포넌트는 flexbox를 사용하며 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.
        
<ComponentExample name="flex-preview">
  ```tsx
  import { Flex } from "@seed-design/react";

  export default function FlexPreview() {
    return (
      <Flex direction="row" bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Flex
          direction="column"
          bg="bg.brandSolid"
          gap="x1_5"
          px="x2"
          py="x2"
          flexGrow={1}
          borderRadius="r2"
        >
          <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
            1
          </Flex>
          <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
            2
          </Flex>
        </Flex>
        <Flex
          direction="row"
          bg="bg.brandSolid"
          gap="x1_5"
          px="x2"
          py="x2"
          flexGrow={1}
          borderRadius="r2"
        >
          <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
            3
          </Flex>
          <Flex bg="bg.neutralWeak" px="x4" py="x3" borderRadius="r1">
            4
          </Flex>
        </Flex>
        <Flex bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          5
        </Flex>
      </Flex>
    );
  }
  ```
</ComponentExample>

## Props

<TypeTable
  type={{
    display: {
        "type": "\"flex\" | \"none\"",
        "default": "\"flex\""
    },

    direction: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexDirection"}</code>{"."}</p></>
    },

    wrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexWrap"}</code>{".\nIf true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    align: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"alignItems"}</code>{"."}</p></>
    },

    justify: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"flexStart\" | \"flexEnd\" | \"space-between\" | \"space-around\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"justifyContent"}</code>{"."}</p></>
    },

    grow: {
        "type": "true | 0 | 1 | (number & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexGrow"}</code>{".\nIf true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    shrink: {
        "type": "0 | (number & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexShrink"}</code>{"."}</p></>
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {})",
        "default": undefined
    },

    as: {
        "type": "ElementType<any, keyof IntrinsicElements>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": undefined
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined
    },

    bgGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke",
        "default": undefined
    },

    borderWidth: {
        "type": "0 | 1 | (string & {})",
        "default": undefined
    },

    borderTopWidth: {
        "type": "0 | 1 | (string & {})",
        "default": undefined
    },

    borderRightWidth: {
        "type": "0 | 1 | (string & {})",
        "default": undefined
    },

    borderBottomWidth: {
        "type": "0 | 1 | (string & {})",
        "default": undefined
    },

    borderLeftWidth: {
        "type": "0 | 1 | (string & {})",
        "default": undefined
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    top: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    left: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    right: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    bottom: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\"",
        "default": undefined
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    zIndex: {
        "type": "number | (string & {})",
        "default": undefined
    },

    flexGrow: {
        "type": "0 | 1 | (number & {})",
        "default": undefined
    },

    flexShrink: {
        "type": "0 | (number & {})",
        "default": undefined
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\"",
        "default": undefined
    },

    flexWrap: {
        "type": "\"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined
    },

    justifyContent: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"flexStart\" | \"flexEnd\" | \"space-between\" | \"space-around\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined
    },

    alignItems: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\"",
        "default": undefined
    },

    alignContent: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\"",
        "default": undefined
    },

    alignSelf: {
        "type": "\"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"flexStart\" | \"flexEnd\"",
        "default": undefined
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    unstable_transform: {
        "type": "string",
        "default": undefined
    },

    _active: {
        "type": "{ bg?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; background?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; }",
        "default": undefined
    }
}}
/>


file: ./content/react/components/(layout)/float.mdx
# Float

Float 컴포넌트는 특정 위치에 고정된 요소를 배치할 때 사용합니다.
        
<ComponentExample name="float-preview">
  ```tsx
  import { Box, ContextualFloatingButton, Float } from "@seed-design/react";

  export default function FloatPreview() {
    return (
      <Box
        position="relative"
        width="480px"
        height="480px"
        borderWidth={1}
        borderColor="stroke.neutral"
      >
        <Float placement="top-start">
          <ContextualFloatingButton>Top Start</ContextualFloatingButton>
        </Float>
        <Float placement="top-center">
          <ContextualFloatingButton>Top Center</ContextualFloatingButton>
        </Float>
        <Float placement="top-end">
          <ContextualFloatingButton>Top End</ContextualFloatingButton>
        </Float>
        <Float placement="middle-start">
          <ContextualFloatingButton>Middle Start</ContextualFloatingButton>
        </Float>
        <Float placement="middle-center">
          <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
        </Float>
        <Float placement="middle-end">
          <ContextualFloatingButton>Middle End</ContextualFloatingButton>
        </Float>
        <Float placement="bottom-start">
          <ContextualFloatingButton>Bottom Start</ContextualFloatingButton>
        </Float>
        <Float placement="bottom-center">
          <ContextualFloatingButton>Bottom Center</ContextualFloatingButton>
        </Float>
        <Float placement="bottom-end">
          <ContextualFloatingButton>Bottom End</ContextualFloatingButton>
        </Float>
      </Box>
    );
  }
  ```
</ComponentExample>

## Props

<TypeTable
  type={{
    display: {
        "type": "\"flex\" | \"none\"",
        "default": "\"flex\""
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {})",
        "default": undefined
    },

    as: {
        "type": "ElementType<any, keyof IntrinsicElements>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": undefined
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined
    },

    bgGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke",
        "default": undefined
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    top: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    left: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    right: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    bottom: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\"",
        "default": undefined
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    zIndex: {
        "type": "number | (string & {})",
        "default": undefined
    },

    flexGrow: {
        "type": "0 | 1 | (number & {})",
        "default": undefined
    },

    flexShrink: {
        "type": "0 | (number & {})",
        "default": undefined
    },

    flexWrap: {
        "type": "\"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    unstable_transform: {
        "type": "string",
        "default": undefined
    },

    _active: {
        "type": "{ bg?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; background?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; }",
        "default": undefined
    },

    direction: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexDirection"}</code>{"."}</p></>
    },

    wrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexWrap"}</code>{".\nIf true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    align: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"alignItems"}</code>{"."}</p></>
    },

    justify: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"justifyContent"}</code>{"."}</p></>
    },

    grow: {
        "type": "true | 0 | 1 | (number & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexGrow"}</code>{".\nIf true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    shrink: {
        "type": "0 | (number & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexShrink"}</code>{"."}</p></>
    }
}}
/>

## Examples

### Offset X

`offsetX` 속성을 사용하면 좌우 방향으로 위치를 조정할 수 있습니다.

`start`, `middle`에서는 우측 방향으로 조정되고, `end`에서는 좌측 방향으로 조정됩니다.

<ComponentExample name="float-offset-x">
  ```tsx
  import { Box, ContextualFloatingButton, Float } from "@seed-design/react";

  export default function FloatOffsetX() {
    return (
      <Box
        position="relative"
        width="480px"
        height="480px"
        borderWidth={1}
        borderColor="stroke.neutral"
      >
        <Float placement="middle-start" offsetX="x4">
          <ContextualFloatingButton>Middle Start</ContextualFloatingButton>
        </Float>
        <Float placement="middle-center" offsetX="x4">
          <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
        </Float>
        <Float placement="middle-end" offsetX="x4">
          <ContextualFloatingButton>Middle End</ContextualFloatingButton>
        </Float>
      </Box>
    );
  }
  ```
</ComponentExample>

### Offset Y

`offsetY` 속성을 사용하면 상하 방향으로 위치를 조정할 수 있습니다.

`top`, `middle`에서는 하측 방향으로 조정되고, `bottom`에서는 상측 방향으로 조정됩니다.

<ComponentExample name="float-offset-y">
  ```tsx
  import { Box, ContextualFloatingButton, Float } from "@seed-design/react";

  export default function FloatOffsetY() {
    return (
      <Box
        position="relative"
        width="480px"
        height="480px"
        borderWidth={1}
        borderColor="stroke.neutral"
      >
        <Float placement="top-center" offsetY="x4">
          <ContextualFloatingButton>Top Center</ContextualFloatingButton>
        </Float>
        <Float placement="middle-center" offsetY="x4">
          <ContextualFloatingButton>Middle Center</ContextualFloatingButton>
        </Float>
        <Float placement="bottom-center" offsetY="x4">
          <ContextualFloatingButton>Bottom Center</ContextualFloatingButton>
        </Float>
      </Box>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/(layout)/h-stack.mdx
# HStack

가로로 쌓이는 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.
        
<ComponentExample name="h-stack-preview">
  ```tsx
  import { Box, HStack } from "@seed-design/react";

  export default function HStackPreview() {
    return (
      <HStack bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          1
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          2
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          3
        </Box>
      </HStack>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { HStack } from "@seed-design/react";
```

```tsx
<HStack />
```

## Props

<TypeTable
  type={{
    display: {
        "type": "\"flex\" | \"none\"",
        "default": "\"flex\""
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {})",
        "default": undefined
    },

    as: {
        "type": "ElementType<any, keyof IntrinsicElements>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": undefined
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined
    },

    bgGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke",
        "default": undefined
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    top: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    left: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    right: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    bottom: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\"",
        "default": undefined
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    zIndex: {
        "type": "number | (string & {})",
        "default": undefined
    },

    flexGrow: {
        "type": "0 | 1 | (number & {})",
        "default": undefined
    },

    flexShrink: {
        "type": "0 | (number & {})",
        "default": undefined
    },

    flexWrap: {
        "type": "\"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    unstable_transform: {
        "type": "string",
        "default": undefined
    },

    _active: {
        "type": "{ bg?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; background?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; }",
        "default": undefined
    },

    direction: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexDirection"}</code>{"."}</p></>
    },

    wrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexWrap"}</code>{".\nIf true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    align: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"alignItems"}</code>{"."}</p></>
    },

    justify: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"justifyContent"}</code>{"."}</p></>
    },

    grow: {
        "type": "true | 0 | 1 | (number & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexGrow"}</code>{".\nIf true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    shrink: {
        "type": "0 | (number & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexShrink"}</code>{"."}</p></>
    }
}}
/>


file: ./content/react/components/(layout)/inline.mdx
# Inline (Deprecated)

인라인 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다. (Deprecated)
        
<ComponentExample name="inline-preview">
  ```tsx
  import { Box, Inline } from "@seed-design/react";

  /**
   * @deprecated Use `HStack` instead.
   */
  export default function InlinePreview() {
    return (
      <Inline bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          1
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          2
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          3
        </Box>
      </Inline>
    );
  }
  ```
</ComponentExample>

## Deprecated

`Inline` 컴포넌트는 더 이상 사용되지 않습니다. 대신 `HStack`과 `wrap` prop을 사용하세요.

## Usage

```tsx
import { Inline } from "@seed-design/react";
```

```tsx
<Inline />
```

## Props

<TypeTable
  type={{
    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {})",
        "default": undefined
    },

    as: {
        "type": "ElementType<any, keyof IntrinsicElements>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": undefined
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined
    },

    bgGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke",
        "default": undefined
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    top: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    left: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    right: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    bottom: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\"",
        "default": undefined
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    zIndex: {
        "type": "number | (string & {})",
        "default": undefined
    },

    flexGrow: {
        "type": "0 | 1 | (number & {})",
        "default": undefined
    },

    flexShrink: {
        "type": "0 | (number & {})",
        "default": undefined
    },

    flexDirection: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\"",
        "default": undefined
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    unstable_transform: {
        "type": "string",
        "default": undefined
    },

    _active: {
        "type": "{ bg?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; background?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; }",
        "default": undefined
    }
}}
/>


file: ./content/react/components/(layout)/stack.mdx
# Stack (Deprecated)

세로로 쌓이는 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다. (Deprecated)
        
<ComponentExample name="stack-preview">
  ```tsx
  import { Box, Stack } from "@seed-design/react";

  /**
   * @deprecated Use `VStack` instead.
   */
  export default function StackPreview() {
    return (
      <Stack bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          1
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          2
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          3
        </Box>
      </Stack>
    );
  }
  ```
</ComponentExample>

## Deprecated

`Stack` 컴포넌트는 더 이상 사용되지 않습니다. 대신 `VStack`을 사용하세요.

## Usage

```tsx
import { Stack } from "@seed-design/react";
```

```tsx
<Stack />
```

## Props

<TypeTable
  type={{
    display: {
        "type": "\"flex\" | \"none\"",
        "default": "\"flex\""
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {})",
        "default": undefined
    },

    as: {
        "type": "ElementType<any, keyof IntrinsicElements>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": undefined
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined
    },

    bgGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke",
        "default": undefined
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    top: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    left: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    right: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    bottom: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\"",
        "default": undefined
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    zIndex: {
        "type": "number | (string & {})",
        "default": undefined
    },

    flexGrow: {
        "type": "0 | 1 | (number & {})",
        "default": undefined
    },

    flexShrink: {
        "type": "0 | (number & {})",
        "default": undefined
    },

    flexWrap: {
        "type": "\"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    unstable_transform: {
        "type": "string",
        "default": undefined
    },

    _active: {
        "type": "{ bg?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; background?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; }",
        "default": undefined
    },

    direction: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexDirection"}</code>{"."}</p></>
    },

    wrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexWrap"}</code>{".\nIf true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    align: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"alignItems"}</code>{"."}</p></>
    },

    justify: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"justifyContent"}</code>{"."}</p></>
    },

    grow: {
        "type": "true | 0 | 1 | (number & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexGrow"}</code>{".\nIf true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    shrink: {
        "type": "0 | (number & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexShrink"}</code>{"."}</p></>
    }
}}
/>


file: ./content/react/components/(layout)/v-stack.mdx
# VStack

세로로 쌓이는 레이아웃을 구성합니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.
        
<ComponentExample name="v-stack-preview">
  ```tsx
  import { Box, VStack } from "@seed-design/react";

  export default function VStackPreview() {
    return (
      <VStack bg="bg.layerDefault" gap="x2" width="full" borderRadius="r2">
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          1
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          2
        </Box>
        <Box bg="bg.brandSolid" px="x4" py="x3" borderRadius="r2">
          3
        </Box>
      </VStack>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { VStack } from "@seed-design/react";
```

```tsx
<VStack />
```

## Props

<TypeTable
  type={{
    display: {
        "type": "\"flex\" | \"none\"",
        "default": "\"flex\""
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette | (string & {})",
        "default": undefined
    },

    as: {
        "type": "ElementType<any, keyof IntrinsicElements>",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": undefined
    },

    bg: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"background"}</code>{"."}</p></>
    },

    background: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorBg",
        "default": undefined
    },

    bgGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradient"}</code>{"."}</p></>
    },

    backgroundGradient: {
        "type": "\"shimmerNeutral\" | \"shimmerMagic\" | \"fadeNeutral\" | \"glowMagic\" | \"glowMagicPressed\" | \"highlightMagic\"",
        "default": undefined
    },

    bgGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"backgroundGradientDirection"}</code>{".\ne.g. "}<code>{"43deg"}</code></p></>
    },

    backgroundGradientDirection: {
        "type": "(string & {}) | \"to right\" | \"to left\" | \"to top\" | \"to bottom\" | \"to top right\" | \"to top left\" | \"to bottom right\" | \"to bottom left\"",
        "default": undefined,
        description: <><p>{"e.g. "}<code>{"43deg"}</code></p></>
    },

    borderColor: {
        "type": "ScopedColorPalette | (string & {}) | ScopedColorStroke",
        "default": undefined
    },

    borderWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderTopWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRightWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderBottomWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderLeftWidth: {
        "type": "0 | (string & {}) | 1",
        "default": undefined
    },

    borderRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderTopRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomRightRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    borderBottomLeftRadius: {
        "type": "0 | (string & {}) | \"r0_5\" | \"r1\" | \"r1_5\" | \"r2\" | \"r2_5\" | \"r3\" | \"r3_5\" | \"r4\" | \"r5\" | \"r6\" | \"full\"",
        "default": undefined
    },

    width: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxWidth: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    height: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    minHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    maxHeight: {
        "type": "(string & {}) | \"full\" | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    top: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    left: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    right: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    bottom: {
        "type": "0 | (string & {})",
        "default": undefined
    },

    padding: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    p: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"padding"}</code>{"."}</p></>
    },

    paddingX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    px: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingX"}</code>{"."}</p></>
    },

    paddingY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    py: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingY"}</code>{"."}</p></>
    },

    paddingTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pt: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingTop"}</code>{"."}</p></>
    },

    paddingRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pr: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingRight"}</code>{"."}</p></>
    },

    paddingBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pb: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingBottom"}</code>{"."}</p></>
    },

    paddingLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    pl: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"paddingLeft"}</code>{"."}</p></>
    },

    bleedX: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative x-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedY: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative y-axis margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedTop: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative top margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedRight: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative right margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedBottom: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative bottom margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    bleedLeft: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\" | \"asPadding\"",
        "default": undefined,
        description: <><p>{"Negative left margin to extend the element outside its parent.\nIf set to \"asPadding\", it will use the padding value in the same direction."}</p></>
    },

    position: {
        "type": "\"relative\" | \"absolute\" | \"fixed\" | \"sticky\"",
        "default": undefined
    },

    overflowX: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    overflowY: {
        "type": "\"hidden\" | \"auto\" | \"visible\" | \"scroll\"",
        "default": undefined
    },

    zIndex: {
        "type": "number | (string & {})",
        "default": undefined
    },

    flexGrow: {
        "type": "0 | 1 | (number & {})",
        "default": undefined
    },

    flexShrink: {
        "type": "0 | (number & {})",
        "default": undefined
    },

    flexWrap: {
        "type": "\"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined
    },

    justifyContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined
    },

    alignItems: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignContent: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    alignSelf: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined
    },

    gap: {
        "type": "0 | (string & {}) | Dimension | \"spacingX.betweenChips\" | \"spacingX.globalGutter\" | \"spacingY.componentDefault\" | \"spacingY.navToTitle\" | \"spacingY.screenBottom\" | \"spacingY.betweenText\"",
        "default": undefined
    },

    unstable_transform: {
        "type": "string",
        "default": undefined
    },

    _active: {
        "type": "{ bg?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; background?: ScopedColorPalette | (string & {}) | ScopedColorBg | undefined; }",
        "default": undefined
    },

    direction: {
        "type": "\"row\" | \"column\" | \"row-reverse\" | \"column-reverse\" | \"rowReverse\" | \"columnReverse\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexDirection"}</code>{"."}</p></>
    },

    wrap: {
        "type": "true | \"wrap\" | \"wrap-reverse\" | \"nowrap\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexWrap"}</code>{".\nIf true, flex-wrap will be set to "}<code>{"wrap"}</code>{"."}</p></>
    },

    align: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"flexStart\" | \"flexEnd\" | \"stretch\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"alignItems"}</code>{"."}</p></>
    },

    justify: {
        "type": "\"center\" | \"flex-start\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"flexStart\" | \"flexEnd\" | \"spaceBetween\" | \"spaceAround\"",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"justifyContent"}</code>{"."}</p></>
    },

    grow: {
        "type": "true | 0 | 1 | (number & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexGrow"}</code>{".\nIf true, flex-grow will be set to "}<code>{"1"}</code>{"."}</p></>
    },

    shrink: {
        "type": "0 | (number & {})",
        "default": undefined,
        description: <><p>{"Shorthand for "}<code>{"flexShrink"}</code>{"."}</p></>
    }
}}
/>


file: ./content/react/components/(select-box)/check-select-box.mdx
# Check Select Box

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="check-select-box-preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { CheckSelectBox, CheckSelectBoxGroup } from "seed-design/ui/select-box";

  export default function CheckSelectBoxPreview() {
    return (
      <CheckSelectBoxGroup>
        <VStack gap="spacingY.componentDefault">
          <CheckSelectBox label="Apple" defaultChecked />
          <CheckSelectBox
            label="Melon"
            description="Elit cupidatat dolore fugiat enim veniam culpa."
          />
          <CheckSelectBox label="Mango" />
        </VStack>
      </CheckSelectBoxGroup>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add select-box
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add select-box
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add select-box
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add select-box
    ```
  </Tab>
</Tabs>

<ManualInstallation name="select-box" />

## Props

### `CheckSelectBox`

<TypeTable
  type={{
    label: {
        "type": "string",
        "default": undefined
    },

    description: {
        "type": "string",
        "default": undefined
    },

    inputProps: {
        "type": "InputHTMLAttributes<HTMLInputElement>",
        "default": undefined
    },

    rootRef: {
        "type": "Ref<HTMLLabelElement>",
        "default": undefined
    },

    disabled: {
        "type": "boolean",
        "default": undefined
    },

    invalid: {
        "type": "boolean",
        "default": undefined
    },

    required: {
        "type": "boolean",
        "default": undefined
    },

    checked: {
        "type": "boolean",
        "default": undefined
    },

    defaultChecked: {
        "type": "boolean",
        "default": undefined
    },

    onCheckedChange: {
        "type": "((checked: boolean) => void)",
        "default": undefined
    },

    indeterminate: {
        "type": "boolean",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### React Hook Form

<ComponentExample name="check-select-box-react-hook-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, type FormEvent } from "react";
  import { useController, useForm } from "react-hook-form";
  import { ActionButton } from "seed-design/ui/action-button";
  import { CheckSelectBox, CheckSelectBoxGroup } from "seed-design/ui/select-box";

  const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const;

  type FormValues = Record<(typeof POSSIBLE_FRUIT_VALUES)[number], boolean>;

  export default function CheckSelectBoxReactHookForm() {
    const { handleSubmit, reset, setValue, control } = useForm<FormValues>({
      defaultValues: {
        apple: false,
        melon: true,
        mango: false,
      },
    });

    const onValid = useCallback((data: FormValues) => {
      window.alert(JSON.stringify(data, null, 2));
    }, []);

    const onReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();
        reset();
      },
      [reset],
    );

    return (
      <VStack gap="x3" width="full" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
        <CheckSelectBoxGroup>
          <VStack gap="spacingY.componentDefault">
            {POSSIBLE_FRUIT_VALUES.map((name) => {
              const {
                field: { value, ...restProps },
                fieldState: { invalid },
              } = useController({ name, control });

              return (
                <CheckSelectBox
                  key={name}
                  label={name}
                  checked={value}
                  inputProps={restProps}
                  invalid={invalid}
                />
              );
            })}
          </VStack>
        </CheckSelectBoxGroup>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton type="button" variant="neutralWeak" onClick={() => setValue("mango", true)}>
            mango 선택
          </ActionButton>
          <ActionButton type="submit" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/(select-box)/radio-select-box.mdx
# Radio Select Box

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="radio-select-box-preview">
  ```tsx
  import { VStack } from "@seed-design/react";
  import { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box";

  export default function RadioSelectBoxPreview() {
    return (
      <RadioSelectBoxRoot defaultValue="apple" aria-label="Fruit">
        <VStack gap="spacingY.componentDefault">
          <RadioSelectBoxItem value="apple" label="Apple" />
          <RadioSelectBoxItem
            value="melon"
            label="Melon"
            description="Elit cupidatat dolore fugiat enim veniam culpa."
          />
          <RadioSelectBoxItem value="mango" label="Mango" />
        </VStack>
      </RadioSelectBoxRoot>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add select-box
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add select-box
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add select-box
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add select-box
    ```
  </Tab>
</Tabs>

<ManualInstallation name="select-box" />

## Props

### `RadioSelectBoxRoot`

<TypeTable
  type={{
    disabled: {
        "type": "boolean",
        "default": undefined
    },

    name: {
        "type": "string",
        "default": undefined
    },

    form: {
        "type": "string",
        "default": undefined
    },

    value: {
        "type": "string",
        "default": undefined
    },

    defaultValue: {
        "type": "string",
        "default": undefined
    },

    onValueChange: {
        "type": "((value: string) => void)",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `RadioSelectBoxItem`

<TypeTable
  type={{
    label: {
        "type": "string",
        "default": undefined
    },

    description: {
        "type": "string",
        "default": undefined
    },

    inputProps: {
        "type": "InputHTMLAttributes<HTMLInputElement>",
        "default": undefined
    },

    rootRef: {
        "type": "Ref<HTMLLabelElement>",
        "default": undefined
    },

    value: {
        "type": "string",
        "default": undefined
    },

    disabled: {
        "type": "boolean",
        "default": undefined
    },

    invalid: {
        "type": "boolean",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### React Hook Form

<ComponentExample name="radio-select-box-react-hook-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, type FormEvent } from "react";
  import { useController, useForm } from "react-hook-form";
  import { ActionButton } from "seed-design/ui/action-button";
  import { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box";

  const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const;

  interface FormValues {
    fruit: (typeof POSSIBLE_FRUIT_VALUES)[number];
  }

  export default function RadioSelectBoxReactHookForm() {
    const { handleSubmit, reset, setValue, control } = useForm<FormValues>({
      defaultValues: {
        fruit: "melon",
      },
    });
    const { field } = useController({ name: "fruit", control });

    const onValid = useCallback((data: FormValues) => {
      window.alert(JSON.stringify(data, null, 2));
    }, []);

    const onReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();
        reset();
      },
      [reset],
    );

    return (
      <VStack gap="x3" width="full" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
        <RadioSelectBoxRoot aria-label="Fruit" {...field}>
          <VStack gap="spacingY.componentDefault">
            {POSSIBLE_FRUIT_VALUES.map((value) => (
              <RadioSelectBoxItem key={value} value={value} label={value} />
            ))}
          </VStack>
        </RadioSelectBoxRoot>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton
            type="button"
            variant="neutralWeak"
            onClick={() => setValue("fruit", "mango")}
          >
            mango 선택
          </ActionButton>
          <ActionButton type="submit" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/(tabs)/chip-tabs.mdx
# Chip Tabs

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="chip-tabs-preview">
  ```tsx
  import * as React from "react";
  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

  export default function ChipTabsPreview() {
    const [value, setValue] = React.useState("1");
    return (
      <>
        <ChipTabsRoot
          variant="neutralSolid"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div>content 1</div>}
        {value === "2" && <div>content 2</div>}
        {value === "3" && <div>content 3</div>}
      </>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add chip-tabs
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add chip-tabs
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add chip-tabs
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add chip-tabs
    ```
  </Tab>
</Tabs>

<ManualInstallation name="chip-tabs" />

## Props

### `ChipTabsRoot`

<TypeTable
  type={{
    variant: {
        "type": "\"neutralSolid\" | \"brandSolid\"",
        "default": "neutralSolid"
    },

    contentLayout: {
        "type": "\"fill\" | \"hug\"",
        "default": "hug"
    },

    stickyList: {
        "type": "boolean",
        "default": "false"
    },

    orientation: {
        "type": "\"horizontal\" | \"vertical\"",
        "default": undefined
    },

    value: {
        "type": "string",
        "default": undefined
    },

    defaultValue: {
        "type": "string",
        "default": undefined
    },

    onValueChange: {
        "type": "((value: string) => void)",
        "default": undefined
    },

    lazyMount: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be mounted lazily."}</p></>
    },

    unmountOnExit: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be unmounted when it's not selected."}</p></>
    },

    present: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be mounted."}</p></>
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `ChipTabsList`

<TypeTable
  type={{
    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `ChipTabsTrigger`

<TypeTable
  type={{
    value: {
        "type": "string",
        "default": undefined
    },

    disabled: {
        "type": "boolean",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `ChipTabsCarousel`

<TypeTable
  type={{
    swipeable: {
        "type": "boolean",
        "default": undefined
    },

    autoHeight: {
        "type": "boolean",
        "default": undefined
    },

    loop: {
        "type": "boolean",
        "default": undefined
    },

    dragThreshold: {
        "type": "number",
        "default": undefined
    },

    onSettle: {
        "type": "(() => void)",
        "default": undefined
    }
}}
/>

### `ChipTabsContent`

<TypeTable
  type={{
    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    value: {
        "type": "string",
        "default": undefined
    }
}}
/>

## Examples

### Neutral Solid

<ComponentExample name="chip-tabs-variant-neutral-solid">
  ```tsx
  import * as React from "react";
  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

  export default function ChipTabsVariantNeutralSolid() {
    const [value, setValue] = React.useState("1");
    return (
      <>
        <ChipTabsRoot
          variant="neutralSolid"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div>content 1</div>}
        {value === "2" && <div>content 2</div>}
        {value === "3" && <div>content 3</div>}
      </>
    );
  }
  ```
</ComponentExample>

### Brand Solid

<ComponentExample name="chip-tabs-variant-brand-solid">
  ```tsx
  import * as React from "react";
  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

  export default function ChipTabsVariantBrandSolid() {
    const [value, setValue] = React.useState("1");
    return (
      <>
        <ChipTabsRoot
          variant="brandSolid"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div>content 1</div>}
        {value === "2" && <div>content 2</div>}
        {value === "3" && <div>content 3</div>}
      </>
    );
  }
  ```
</ComponentExample>

### Stackflow

<StackflowExample names={["chip-tabs-basic-activity"]}>
  ```tsx
  import * as React from "react";

  import { ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from "seed-design/ui/chip-tabs";

  import AppScreen from "@/components/stackflow/ActivityLayout";
  import type { ActivityComponentType } from "@stackflow/react/future";

  declare module "@stackflow/config" {
    interface Register {
      "chip-tabs-basic": unknown;
    }
  }

  const ChipTabsBasicActivity: ActivityComponentType<"chip-tabs-basic"> = () => {
    const [value, setValue] = React.useState("1");

    const commonStyle = {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "#eeeeee",
      height: "100%",
    };

    return (
      <AppScreen>
        <ChipTabsRoot
          variant="neutralSolid"
          defaultValue="1"
          value={value}
          onValueChange={(value) => setValue(value)}
        >
          <ChipTabsList>
            <ChipTabsTrigger value="1">라벨1</ChipTabsTrigger>
            <ChipTabsTrigger value="2">라벨2</ChipTabsTrigger>
            <ChipTabsTrigger value="3">라벨3</ChipTabsTrigger>
          </ChipTabsList>
        </ChipTabsRoot>
        {value === "1" && <div style={commonStyle}>content 1</div>}
        {value === "2" && <div style={commonStyle}>content 2</div>}
        {value === "3" && <div style={commonStyle}>content 3</div>}
      </AppScreen>
    );
  };

  export default ChipTabsBasicActivity;
  ```
</StackflowExample>


file: ./content/react/components/(tabs)/tabs.mdx
# Tabs

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="tabs-preview">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsPreview() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add tabs
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add tabs
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add tabs
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add tabs
    ```
  </Tab>
</Tabs>

<ManualInstallation name="tabs" />

## Props

### TabsRoot

<TypeTable
  type={{
    triggerLayout: {
        "type": "\"fill\" | \"hug\"",
        "default": "fill"
    },

    contentLayout: {
        "type": "\"fill\" | \"hug\"",
        "default": "hug"
    },

    size: {
        "type": "\"small\" | \"medium\"",
        "default": "small"
    },

    stickyList: {
        "type": "boolean",
        "default": "false"
    },

    orientation: {
        "type": "\"horizontal\" | \"vertical\"",
        "default": undefined
    },

    value: {
        "type": "string",
        "default": undefined
    },

    defaultValue: {
        "type": "string",
        "default": undefined
    },

    onValueChange: {
        "type": "((value: string) => void)",
        "default": undefined
    },

    lazyMount: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be mounted lazily."}</p></>
    },

    unmountOnExit: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be unmounted when it's not selected."}</p></>
    },

    present: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"If "}<code>{"true"}</code>{", the component will be mounted."}</p></>
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### TabsList

<TypeTable
  type={{
    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### TabsTrigger

<TypeTable
  type={{
    notification: {
        "type": "boolean",
        "default": undefined
    },

    value: {
        "type": "string",
        "default": undefined
    },

    disabled: {
        "type": "boolean",
        "default": undefined
    }
}}
/>

### TabsCarousel

<TypeTable
  type={{
    swipeable: {
        "type": "boolean",
        "default": undefined
    },

    autoHeight: {
        "type": "boolean",
        "default": undefined
    },

    loop: {
        "type": "boolean",
        "default": undefined
    },

    dragThreshold: {
        "type": "number",
        "default": undefined
    },

    onSettle: {
        "type": "(() => void)",
        "default": undefined
    }
}}
/>

### TabsContent

<TypeTable
  type={{
    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    value: {
        "type": "string",
        "default": undefined
    }
}}
/>

## Examples

### Layout Fill (Default)

<ComponentExample name="tabs-layout-fill">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsLayoutFill() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="2" triggerLayout="fill">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Layout Hug

<ComponentExample name="tabs-layout-hug">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsLayoutHug() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1" triggerLayout="hug">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Size Medium

<ComponentExample name="tabs-size-medium">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsSizeMedium() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1" size="medium">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Size Small (Default)

<ComponentExample name="tabs-size-small">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsSizeSmall() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1" size="small">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Transition

`TabsCarousel` 컴포넌트로 `TabsContent` 컴포넌트들을 감싸면 탭 변경시 컨텐츠가 자연스럽게 전환됩니다.

<ComponentExample name="tabs-transition">
  ```tsx
  import { TabsRoot, TabsList, TabsTrigger, TabsCarousel, TabsContent } from "seed-design/ui/tabs";

  export default function TabsTransition() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="2">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsCarousel>
            <TabsContent value="1">
              <Content>Content 1</Content>
            </TabsContent>
            <TabsContent value="2">
              <Content>Content 2</Content>
            </TabsContent>
            <TabsContent value="3">
              <Content>Content 3</Content>
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Swipeable

`TabsCarousel` 컴포넌트에 `swipeable` 속성을 추가하면 스와이프 제스처로 탭을 이동할 수 있습니다.

<ComponentExample name="tabs-swipeable">
  ```tsx
  import { TabsRoot, TabsList, TabsTrigger, TabsCarousel, TabsContent } from "seed-design/ui/tabs";

  export default function TabsSwipeable() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="2">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsCarousel swipeable>
            <TabsContent value="1">
              <Content>Content 1</Content>
            </TabsContent>
            <TabsContent value="2">
              <Content>Content 2</Content>
            </TabsContent>
            <TabsContent value="3">
              <Content>Content 3</Content>
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Carousel Prevent Drag

`Tabs.carouselPreventDrag`를 사용하면 특정 요소가 드래그 제스처에 반응하지 않도록 설정할 수 있습니다.

<ComponentExample name="tabs-carousel-prevent-drag">
  ```tsx
  import { Box, Tabs } from "@seed-design/react";
  import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsCarouselPreventDrag() {
    return (
      <Box width="360px" height="480px">
        <TabsRoot contentLayout="fill" defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">Tab 1</TabsTrigger>
            <TabsTrigger value="2">Tab 2</TabsTrigger>
          </TabsList>
          <TabsCarousel swipeable>
            <TabsContent value="1">
              <Box overflowX="scroll" {...Tabs.carouselPreventDrag}>
                <Box width="1000px" height="100px" bg="bg.criticalWeak">
                  Scrollable area
                </Box>
              </Box>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reiciendis ab ex accusantium
              sit. Amet maxime eum molestiae nemo. Beatae sint omnis aut cumque doloremque fugit
              perspiciatis rerum possimus, reiciendis eaque?
            </TabsContent>
            <TabsContent value="2">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
      </Box>
    );
  }
  ```
</ComponentExample>

### Disabled

<ComponentExample name="tabs-disabled">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsDisabled() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2" disabled>
              라벨2
            </TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Notification

<ComponentExample name="tabs-notification">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsNotification() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1">
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2" notification>
              라벨2
            </TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content>Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content>Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content>Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Sticky List

<Callout type="info">
  탭이 전체화면을 차지하고, Tabs.List가 top에 고정되어 있는 경우 사용하는 예시입니다.
</Callout>

<ComponentExample name="tabs-sticky-list">
  ```tsx
  import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsStickyList() {
    return (
      // 600은 화면 높이라고 가정합니다.
      <div style={{ width: "360px", height: "600px" }}>
        <TabsRoot
          defaultValue="1"
          size="medium"
          stickyList
          style={{ height: "100%" }} // 탭 영역을 전체 화면으로 설정합니다.
        >
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsContent value="1">
            <Content height="1000px">Content 1</Content>
          </TabsContent>
          <TabsContent value="2">
            <Content height="1000px">Content 2</Content>
          </TabsContent>
          <TabsContent value="3">
            <Content height="1000px">Content 3</Content>
          </TabsContent>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren<{ height: string }>) => {
    const { height, children } = props;
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height,
          background: "linear-gradient(to bottom, white, gray)",
        }}
      >
        {children}
      </div>
    );
  };
  ```
</ComponentExample>

### Standalone

<Callout type="info">
  TabContent를 사용하지 않고, 컨텐츠 영역을 온전히 소유하고 싶을 때 사용하는 예시입니다.
</Callout>

<Callout type="warn">
  탭에서 제공하는 Swipe 기능을 사용할 수 없습니다.
</Callout>

<ComponentExample name="tabs-standalone">
  ```tsx
  import { useState } from "react";
  import { TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsStandalone() {
    const [activeTab, setActiveTab] = useState("1");

    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1" onValueChange={setActiveTab}>
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          {activeTab === "1" && (
            <div>
              <Content>Content 1</Content>
            </div>
          )}
          {activeTab === "2" && (
            <div>
              <Content>Content 2</Content>
            </div>
          )}
          {activeTab === "3" && (
            <div>
              <Content>Content 3</Content>
            </div>
          )}
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren) => {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "300px",
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {props.children}
      </div>
    );
  };
  ```
</ComponentExample>

### Dynamic Height

<Callout type="info">
  각 탭의 높이가 다를 때, 아래의 컨텐츠를 탭 아래에 바로 맞추기 위해서 사용하는 예시입니다.
</Callout>

<Callout type="warn">
  탭이 자주 바뀌고, 탭에 네트워크 요청이 많은 경우 캐싱을 잘 고려해주세요.
</Callout>

<ComponentExample name="tabs-dynamic-height">
  ```tsx
  import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsDynamicHeight() {
    return (
      <div style={{ width: "360px" }}>
        <TabsRoot defaultValue="1" lazyMount unmountOnExit>
          <TabsList>
            <TabsTrigger value="1">라벨1</TabsTrigger>
            <TabsTrigger value="2">라벨2</TabsTrigger>
            <TabsTrigger value="3">라벨3</TabsTrigger>
          </TabsList>
          <TabsCarousel autoHeight>
            <TabsContent value="1">
              <Content height="100px">Content 1</Content>
            </TabsContent>
            <TabsContent value="2">
              <Content height="200px">Content 2</Content>
            </TabsContent>
            <TabsContent value="3">
              <Content height="300px">Content 3</Content>
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
        <div style={{ height: "100px", backgroundColor: "gray" }}>아래 컨텐츠</div>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren<{ height: string }>) => {
    const { height, children } = props;
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height,
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {children}
      </div>
    );
  };
  ```
</ComponentExample>

### Scroll to Top

<ComponentExample name="tabs-scroll-top">
  ```tsx
  import { RefObject, useRef, useState } from "react";
  import { TabsCarousel, TabsContent, TabsList, TabsRoot, TabsTrigger } from "seed-design/ui/tabs";

  export default function TabsScrollTop() {
    const [currentTab, setCurrentTab] = useState("1");
    const contentRefs: Record<string, RefObject<HTMLDivElement | null>> = {
      "1": useRef(null),
      "2": useRef(null),
    };

    const handleTriggerClick = (value: string) => {
      if (value === currentTab) {
        contentRefs[value].current?.scrollTo({ top: 0, behavior: "smooth" });
      }
    };

    return (
      <div style={{ width: "360px" }}>
        <TabsRoot triggerLayout="fill" value={currentTab} onValueChange={setCurrentTab}>
          <TabsList>
            <TabsTrigger onClick={() => handleTriggerClick("1")} value="1">
              라벨1
            </TabsTrigger>
            <TabsTrigger onClick={() => handleTriggerClick("2")} value="2">
              라벨2
            </TabsTrigger>
          </TabsList>
          <TabsCarousel swipeable>
            <TabsContent ref={contentRefs["1"]} value="1" style={{ maxHeight: "200px" }}>
              <Content height="1000px">Content 1</Content>
            </TabsContent>
            <TabsContent ref={contentRefs["2"]} value="2" style={{ maxHeight: "200px" }}>
              <Content height="1000px">Content 2</Content>
            </TabsContent>
          </TabsCarousel>
        </TabsRoot>
      </div>
    );
  }

  const Content = (props: React.PropsWithChildren<{ height: string }>) => {
    const { height, children } = props;
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          height,
          backgroundColor: "var(--seed-color-bg-layer-default)",
        }}
      >
        {children}
      </div>
    );
  };
  ```
</ComponentExample>


file: ./content/react/components/(text-field)/multiline-text-field.mdx
# Multiline Text Field

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="multiline-text-field-preview">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldPreview() {
    return (
      <TextField>
        <TextFieldTextarea autoFocus />
      </TextField>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add text-field
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add text-field
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add text-field
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add text-field
    ```
  </Tab>
</Tabs>

<ManualInstallation name="text-field" />

## Props

### `TextField`

<TypeTable
  type={{
    label: {
        "type": "ReactNode",
        "default": undefined
    },

    indicator: {
        "type": "ReactNode",
        "default": undefined
    },

    prefixIcon: {
        "type": "ReactNode",
        "default": undefined
    },

    prefix: {
        "type": "ReactNode",
        "default": undefined
    },

    suffixIcon: {
        "type": "ReactNode",
        "default": undefined
    },

    suffix: {
        "type": "ReactNode",
        "default": undefined
    },

    description: {
        "type": "ReactNode",
        "default": undefined
    },

    errorMessage: {
        "type": "ReactNode",
        "default": undefined
    },

    hideCharacterCount: {
        "type": "boolean",
        "default": undefined
    },

    size: {
        "type": "\"xlarge\" | \"large\" | \"medium\"",
        "default": "medium"
    },

    value: {
        "type": "string",
        "default": undefined
    },

    defaultValue: {
        "type": "string",
        "default": undefined
    },

    required: {
        "type": "boolean",
        "default": "false"
    },

    disabled: {
        "type": "boolean",
        "default": "false"
    },

    readOnly: {
        "type": "boolean",
        "default": "false"
    },

    invalid: {
        "type": "boolean",
        "default": "false"
    },

    name: {
        "type": "string",
        "default": undefined
    },

    onValueChange: {
        "type": "((values: { value: string; graphemes: string[]; slicedValue: string; slicedGraphemes: string[]; }) => void)",
        "default": undefined
    },

    maxGraphemeCount: {
        "type": "number",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `TextFieldTextarea`

<TypeTable
  type={{
    autoresize: {
        "type": "boolean",
        "default": "true",
        description: <><p>{"If true, the textarea will automatically resize based on its content."}</p></>
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### State

#### Enabled

<ComponentExample name="multiline-text-field-enabled">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldEnabled() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요">
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
        >
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Disabled

<ComponentExample name="multiline-text-field-disabled">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldDisabled() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요" disabled>
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          disabled
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
        >
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Read Only

<ComponentExample name="multiline-text-field-read-only">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldReadOnly() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요" readOnly>
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          readOnly
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
        >
          <TextFieldTextarea placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Sizing

#### Fixed Height

<ComponentExample name="multiline-text-field-fixed-height">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldSpecifiedHeight() {
    return (
      <TextField label="라벨" description="설명을 써주세요">
        <TextFieldTextarea placeholder="플레이스홀더" style={{ height: "250px" }} />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Auto Height with Constraints

<ComponentExample name="multiline-text-field-constraints">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldConstraints() {
    return (
      <TextField label="라벨" description="설명을 써주세요">
        <TextFieldTextarea
          placeholder="플레이스홀더"
          style={{ minHeight: "200px", maxHeight: "300px" }}
        />
      </TextField>
    );
  }
  ```
</ComponentExample>

### Customizable Parts

#### Required Indicator

<ComponentExample name="multiline-text-field-required">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldRequired() {
    return (
      <TextField label="라벨" description="설명을 써주세요" required indicator="(필수)">
        <TextFieldTextarea placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Optional Indicator

<ComponentExample name="multiline-text-field-optional">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldOptional() {
    return (
      <TextField label="라벨" description="설명을 써주세요" indicator="(선택)">
        <TextFieldTextarea placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Grapheme Count

<ComponentExample name="multiline-text-field-grapheme-count">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldGraphemeCount() {
    return (
      <TextField label="라벨" description="설명을 써주세요" maxGraphemeCount={8}>
        <TextFieldTextarea placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

### Size

#### XLarge

<ComponentExample name="multiline-text-field-xlarge">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldXlarge() {
    return (
      <TextField label="라벨" description="설명을 써주세요" size="xlarge">
        <TextFieldTextarea placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Large

<ComponentExample name="multiline-text-field-large">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldLarge() {
    return (
      <TextField label="라벨" description="설명을 써주세요" size="large">
        <TextFieldTextarea placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Medium

<ComponentExample name="multiline-text-field-medium">
  ```tsx
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldMedium() {
    return (
      <TextField label="라벨" description="설명을 써주세요" size="medium">
        <TextFieldTextarea placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

### Use Cases

#### Form

<ComponentExample name="multiline-text-field-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, useState, type FormEvent } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  interface FormValues {
    bio: string;
    address: string;
  }

  type FieldErrors = Record<keyof FormValues, string | null>;

  export default function MultilineTextFieldForm() {
    const [formValues, setFormValues] = useState<FormValues>({
      bio: "",
      address: "",
    });

    const [fieldErrors, setFieldStates] = useState<FieldErrors>({
      bio: null,
      address: null,
    });

    const validateForm = useCallback((): boolean => {
      let isValid = true;

      const newFieldErrors: FieldErrors = {
        bio: null,
        address: null,
      };

      // Name validation
      if (!formValues.bio) {
        newFieldErrors.bio = "필수 입력 항목입니다";
        isValid = false;
      }

      if (!formValues.address.startsWith("대한민국")) {
        newFieldErrors.address = "대한민국으로 시작해주세요";
        isValid = false;
      }

      if (!formValues.address) {
        newFieldErrors.address = "필수 입력 항목입니다";
        isValid = false;
      }

      setFieldStates(newFieldErrors);

      return isValid;
    }, [formValues]);

    const handleSubmit = useCallback(
      (event: FormEvent) => {
        event.preventDefault();

        if (validateForm()) {
          window.alert(JSON.stringify(formValues, null, 2));
        }
      },
      [formValues, validateForm],
    );

    const handleReset = useCallback((event: FormEvent) => {
      event.preventDefault();

      setFormValues({ bio: "", address: "" });
      setFieldStates({ bio: null, address: null });
    }, []);

    const handleNameChange = (value: string) => {
      setFormValues((prev) => ({ ...prev, bio: value }));
      setFieldStates((prev) => ({ ...prev, name: null }));
    };

    const handleAddressChange = (value: string) => {
      setFormValues((prev) => ({ ...prev, address: value }));
      setFieldStates((prev) => ({ ...prev, address: null }));
    };

    return (
      <VStack gap="x3" width="full" as="form" onSubmit={handleSubmit} onReset={handleReset}>
        <HStack gap="x2">
          <TextField
            label="자기소개"
            indicator="(필수)"
            description="자기소개를 써주세요"
            required
            value={formValues.bio}
            onValueChange={({ value }) => handleNameChange(value)}
            {...(fieldErrors.bio && { invalid: true, errorMessage: fieldErrors.bio })}
          >
            <TextFieldTextarea placeholder="저는…" />
          </TextField>
          <TextField
            label="주소"
            indicator="(필수)"
            description="주소를 써주세요"
            maxGraphemeCount={30}
            required
            value={formValues.address}
            onValueChange={({ slicedValue }) => handleAddressChange(slicedValue)}
            {...(fieldErrors.address && { invalid: true, errorMessage: fieldErrors.address })}
          >
            <TextFieldTextarea placeholder="대한민국" />
          </TextField>
        </HStack>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton type="submit" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### React Hook Form

<ComponentExample name="multiline-text-field-react-hook-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, type FormEvent, type KeyboardEvent } from "react";
  import { useController, useForm } from "react-hook-form";
  import { ActionButton } from "seed-design/ui/action-button";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  interface FormValues {
    bio: string;
    address: string;
  }

  export default function MultilineTextFieldReactHookForm() {
    const { handleSubmit, reset, control } = useForm<FormValues>({
      defaultValues: {
        bio: "",
        address: "",
      },
      shouldFocusError: true,
    });

    const { field: bioField, fieldState: bioFieldState } = useController({
      name: "bio",
      control,
      rules: {
        required: "필수 입력 항목입니다",
      },
    });
    const {
      field: { onChange: addressOnChange, ...addressField },
      fieldState: addressFieldState,
    } = useController({
      name: "address",
      control,
      rules: {
        required: "필수 입력 항목입니다",
        pattern: { value: /^대한민국/, message: "대한민국으로 시작해주세요" },
      },
    });

    const onValid = useCallback((data: FormValues) => {
      window.alert(JSON.stringify(data, null, 2));
    }, []);

    const onReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();
        reset();
      },
      [reset],
    );

    const onMetaReturn = useCallback(
      (event: KeyboardEvent) => {
        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
          event.preventDefault();
          handleSubmit(onValid)();
        }
      },
      [handleSubmit, onValid],
    );

    return (
      <VStack gap="x3" width="full" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
        <HStack gap="x2">
          <TextField
            label="자기소개"
            indicator="(필수)"
            description="자기소개를 써주세요"
            invalid={bioFieldState.invalid}
            errorMessage={bioFieldState.error?.message}
            required
            {...bioField}
          >
            <TextFieldTextarea placeholder="저는…" onKeyDown={onMetaReturn} />
          </TextField>
          <TextField
            label="주소"
            indicator="(필수)"
            description="주소를 써주세요"
            invalid={addressFieldState.invalid}
            errorMessage={addressFieldState.error?.message}
            maxGraphemeCount={30}
            onValueChange={({ slicedValue }) => addressOnChange(slicedValue)}
            required
            {...addressField}
          >
            <TextFieldTextarea placeholder="대한민국" onKeyDown={onMetaReturn} />
          </TextField>
        </HStack>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton type="submit" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Formatting

<ComponentExample name="multiline-text-field-formatting">
  ```tsx
  import { useMemo, useState } from "react";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldFormatting() {
    const [value, setValue] = useState("");

    const formattedValue = useMemo(
      () =>
        value
          .split("")
          .filter((char) => char !== " ")
          .join(""),
      [value],
    );

    return (
      <TextField
        label="레이블"
        description="공백을 입력할 수 없어요"
        value={formattedValue}
        onValueChange={({ value }) => setValue(value)}
      >
        <TextFieldTextarea placeholder="공백을 입력해보세요" />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Slicing

<ComponentExample name="multiline-text-field-slicing">
  ```tsx
  import { useState } from "react";
  import { TextField, TextFieldTextarea } from "seed-design/ui/text-field";

  export default function MultilineTextFieldSlicing() {
    const [value, setValue] = useState("");

    return (
      <TextField
        label="라벨"
        description="6글자까지 입력 가능합니다"
        maxGraphemeCount={6}
        value={value}
        onValueChange={({ slicedValue }) => setValue(slicedValue)}
      >
        <TextFieldTextarea placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/(text-field)/text-field.mdx
# Text Field

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="text-field-preview">
  ```tsx
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldPreview() {
    return (
      <TextField>
        <TextFieldInput autoFocus />
      </TextField>
    );
  }
  ```
</ComponentExample>

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add text-field
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add text-field
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add text-field
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add text-field
    ```
  </Tab>
</Tabs>

<ManualInstallation name="text-field" />

## Props

### `TextField`

<TypeTable
  type={{
    label: {
        "type": "ReactNode",
        "default": undefined
    },

    indicator: {
        "type": "ReactNode",
        "default": undefined
    },

    prefixIcon: {
        "type": "ReactNode",
        "default": undefined
    },

    prefix: {
        "type": "ReactNode",
        "default": undefined
    },

    suffixIcon: {
        "type": "ReactNode",
        "default": undefined
    },

    suffix: {
        "type": "ReactNode",
        "default": undefined
    },

    description: {
        "type": "ReactNode",
        "default": undefined
    },

    errorMessage: {
        "type": "ReactNode",
        "default": undefined
    },

    hideCharacterCount: {
        "type": "boolean",
        "default": undefined
    },

    size: {
        "type": "\"xlarge\" | \"large\" | \"medium\"",
        "default": "medium"
    },

    value: {
        "type": "string",
        "default": undefined
    },

    defaultValue: {
        "type": "string",
        "default": undefined
    },

    required: {
        "type": "boolean",
        "default": "false"
    },

    disabled: {
        "type": "boolean",
        "default": "false"
    },

    readOnly: {
        "type": "boolean",
        "default": "false"
    },

    invalid: {
        "type": "boolean",
        "default": "false"
    },

    name: {
        "type": "string",
        "default": undefined
    },

    onValueChange: {
        "type": "((values: { value: string; graphemes: string[]; slicedValue: string; slicedGraphemes: string[]; }) => void)",
        "default": undefined
    },

    maxGraphemeCount: {
        "type": "number",
        "default": undefined
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### `TextFieldInput`

<TypeTable
  type={{
    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

## Examples

### State

#### Enabled

<ComponentExample name="text-field-enabled">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldEnabled() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요">
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
        >
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Disabled

<ComponentExample name="text-field-disabled">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldDisabled() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요" disabled>
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          disabled
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
        >
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Read Only

<ComponentExample name="text-field-read-only">
  ```tsx
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldReadOnly() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요" readOnly>
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          readOnly
          invalid
          errorMessage="오류가 발생한 이유를 써주세요"
        >
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

### Customizable Parts

#### Prefix

<ComponentExample name="text-field-prefix">
  ```tsx
  import { IconMagnifyingglassLine } from "@karrotmarket/react-monochrome-icon";
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldPrefix() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요" prefix="https://">
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          prefixIcon={<IconMagnifyingglassLine />}
        >
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Suffix

<ComponentExample name="text-field-suffix">
  ```tsx
  import { IconWonLine } from "@karrotmarket/react-monochrome-icon";
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldSuffix() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요" suffix="cm">
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
        <TextField label="라벨" description="설명을 써주세요" suffixIcon={<IconWonLine />}>
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Both Affixes

<ComponentExample name="text-field-both-affixes">
  ```tsx
  import { IconPlusCircleLine, IconWonLine } from "@karrotmarket/react-monochrome-icon";
  import { HStack } from "@seed-design/react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldSuffix() {
    return (
      <HStack width="full" gap="x3">
        <TextField label="라벨" description="설명을 써주세요" prefix="만" suffix="세">
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
        <TextField
          label="라벨"
          description="설명을 써주세요"
          prefixIcon={<IconPlusCircleLine />}
          suffixIcon={<IconWonLine />}
        >
          <TextFieldInput placeholder="플레이스홀더" />
        </TextField>
      </HStack>
    );
  }
  ```
</ComponentExample>

#### Indicator

<ComponentExample name="text-field-indicator">
  ```tsx
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldIndicator() {
    return (
      <TextField label="라벨" description="설명을 써주세요" indicator="(선택)">
        <TextFieldInput placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Grapheme Count

<ComponentExample name="text-field-grapheme-count">
  ```tsx
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldGraphemeCount() {
    return (
      <TextField label="라벨" description="설명을 써주세요" maxGraphemeCount={8}>
        <TextFieldInput placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

### Size

#### XLarge

<ComponentExample name="text-field-xlarge">
  ```tsx
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldXlarge() {
    return (
      <TextField label="라벨" description="설명을 써주세요" size="xlarge">
        <TextFieldInput placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Large

<ComponentExample name="text-field-large">
  ```tsx
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldLarge() {
    return (
      <TextField label="라벨" description="설명을 써주세요" size="large">
        <TextFieldInput placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Medium

<ComponentExample name="text-field-medium">
  ```tsx
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldMedium() {
    return (
      <TextField label="라벨" description="설명을 써주세요" size="medium">
        <TextFieldInput placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>

### Use Cases

#### Form

<ComponentExample name="text-field-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, useState, type FormEvent } from "react";
  import { ActionButton } from "seed-design/ui/action-button";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  interface FormValues {
    name: string;
    address: string;
  }

  type FieldErrors = Record<keyof FormValues, string | null>;

  export default function TextFieldForm() {
    const [formValues, setFormValues] = useState<FormValues>({
      name: "",
      address: "",
    });

    const [fieldErrors, setFieldStates] = useState<FieldErrors>({
      name: null,
      address: null,
    });

    const validateForm = useCallback((): boolean => {
      let isValid = true;

      const newFieldErrors: FieldErrors = {
        name: null,
        address: null,
      };

      // Name validation
      if (!formValues.name) {
        newFieldErrors.name = "필수 입력 항목입니다";
        isValid = false;
      }

      if (!formValues.address.startsWith("대한민국")) {
        newFieldErrors.address = "대한민국으로 시작해주세요";
        isValid = false;
      }

      if (!formValues.address) {
        newFieldErrors.address = "필수 입력 항목입니다";
        isValid = false;
      }

      setFieldStates(newFieldErrors);

      return isValid;
    }, [formValues]);

    const handleSubmit = useCallback(
      (event: FormEvent) => {
        event.preventDefault();

        if (validateForm()) {
          window.alert(JSON.stringify(formValues, null, 2));
        }
      },
      [formValues, validateForm],
    );

    const handleReset = useCallback((event: FormEvent) => {
      event.preventDefault();

      setFormValues({ name: "", address: "" });
      setFieldStates({ name: null, address: null });
    }, []);

    const handleNameChange = (value: string) => {
      setFormValues((prev) => ({ ...prev, name: value }));
      setFieldStates((prev) => ({ ...prev, name: null }));
    };

    const handleAddressChange = (value: string) => {
      setFormValues((prev) => ({ ...prev, address: value }));
      setFieldStates((prev) => ({ ...prev, address: null }));
    };

    return (
      <VStack gap="x3" width="full" as="form" onSubmit={handleSubmit} onReset={handleReset}>
        <HStack gap="x2">
          <TextField
            label="이름"
            indicator="(필수)"
            description="이름을 써주세요"
            required
            value={formValues.name}
            onValueChange={({ value }) => handleNameChange(value)}
            {...(fieldErrors.name && { invalid: true, errorMessage: fieldErrors.name })}
          >
            <TextFieldInput placeholder="홍길동" />
          </TextField>
          <TextField
            label="주소"
            indicator="(필수)"
            description="주소를 써주세요"
            maxGraphemeCount={30}
            required
            value={formValues.address}
            onValueChange={({ slicedValue }) => handleAddressChange(slicedValue)}
            {...(fieldErrors.address && { invalid: true, errorMessage: fieldErrors.address })}
          >
            <TextFieldInput placeholder="대한민국" />
          </TextField>
        </HStack>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton type="submit" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### React Hook Form

<ComponentExample name="text-field-react-hook-form">
  ```tsx
  import { HStack, VStack } from "@seed-design/react";
  import { useCallback, type FormEvent } from "react";
  import { useController, useForm } from "react-hook-form";
  import { ActionButton } from "seed-design/ui/action-button";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  interface FormValues {
    name: string;
    address: string;
  }

  export default function TextFieldReactHookForm() {
    const { handleSubmit, reset, control } = useForm<FormValues>({
      defaultValues: {
        name: "",
        address: "",
      },
    });

    const { field: nameField, fieldState: nameFieldState } = useController({
      name: "name",
      control,
      rules: {
        required: "필수 입력 항목입니다",
      },
    });
    const {
      field: { onChange: addressOnChange, ...addressField },
      fieldState: addressFieldState,
    } = useController({
      name: "address",
      control,
      rules: {
        required: "필수 입력 항목입니다",
        pattern: { value: /^대한민국/, message: "대한민국으로 시작해주세요" },
      },
    });

    const onValid = useCallback((data: FormValues) => {
      window.alert(JSON.stringify(data, null, 2));
    }, []);

    const onReset = useCallback(
      (event: FormEvent) => {
        event.preventDefault();
        reset();
      },
      [reset],
    );

    return (
      <VStack gap="x3" width="full" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
        <HStack gap="x2">
          <TextField
            label="이름"
            indicator="(필수)"
            description="이름을 써주세요"
            invalid={nameFieldState.invalid}
            errorMessage={nameFieldState.error?.message}
            required
            {...nameField}
          >
            <TextFieldInput placeholder="홍길동" />
          </TextField>
          <TextField
            label="주소"
            indicator="(필수)"
            description="주소를 써주세요"
            invalid={addressFieldState.invalid}
            errorMessage={addressFieldState.error?.message}
            maxGraphemeCount={30}
            onValueChange={({ slicedValue }) => addressOnChange(slicedValue)}
            required
            {...addressField}
          >
            <TextFieldInput placeholder="대한민국" />
          </TextField>
        </HStack>
        <HStack gap="x2">
          <ActionButton type="reset" variant="neutralWeak">
            초기화
          </ActionButton>
          <ActionButton type="submit" flexGrow={1}>
            제출
          </ActionButton>
        </HStack>
      </VStack>
    );
  }
  ```
</ComponentExample>

#### Number Formatting

<ComponentExample name="text-field-number-formatting">
  ```tsx
  import { useMemo, useState } from "react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldNumberFormatting() {
    const [value, setValue] = useState("1000");

    const formattedValue = useMemo(() => {
      if (value === "") return value;

      const number = Number(value.replace(/,/g, ""));
      if (Number.isNaN(number)) return "";

      return number.toLocaleString();
    }, [value]);

    return (
      <TextField
        label="금액"
        description="금액을 써주세요"
        value={formattedValue}
        onValueChange={({ value }) => setValue(value)}
      >
        <TextFieldInput placeholder="9,999,999" />
      </TextField>
    );
  }
  ```
</ComponentExample>

#### Slicing

<ComponentExample name="text-field-slicing">
  ```tsx
  import { useState } from "react";
  import { TextField, TextFieldInput } from "seed-design/ui/text-field";

  export default function TextFieldSlicing() {
    const [value, setValue] = useState("");

    return (
      <TextField
        label="라벨"
        description="6글자까지 입력 가능합니다"
        maxGraphemeCount={6}
        value={value}
        onValueChange={({ slicedValue }) => setValue(slicedValue)}
      >
        <TextFieldInput placeholder="플레이스홀더" />
      </TextField>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/(typography)/text.mdx
# Text

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<ComponentExample name="text-preview">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextPreview() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" textStyle="t1Regular">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t2Regular">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t3Regular">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t4Regular">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t5Regular">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t6Bold">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t7Bold">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t8Bold">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t9Bold">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t10Bold">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

## Usage

```tsx
import { Text } from "@seed-design/react";
```

```tsx
<Text />
```

## Props

<TypeTable
  type={{
    as: {
        "type": "\"dt\" | \"dd\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"p\" | \"span\" | \"strong\" | \"legend\"",
        "default": "\"span\"",
        description: <><p>{"The element to render as"}</p></>
    },

    color: {
        "type": "ScopedColorFg | ScopedColorPalette",
        "default": undefined,
        description: <><p>{"The color of the text."}</p></>
    },

    fontSize: {
        "type": "\"t1\" | \"t2\" | \"t3\" | \"t4\" | \"t5\" | \"t6\" | \"t7\" | \"t8\" | \"t9\" | \"t10\" | \"t2Static\" | \"t5Static\" | \"t6Static\"",
        "default": undefined,
        description: <><p>{"The font size of the text. Partially overrides the textStyle."}</p></>
    },

    lineHeight: {
        "type": "\"t1\" | \"t2\" | \"t3\" | \"t4\" | \"t5\" | \"t6\" | \"t7\" | \"t8\" | \"t9\" | \"t10\"",
        "default": undefined,
        description: <><p>{"The line height of the text. Partially overrides the textStyle."}</p></>
    },

    fontWeight: {
        "type": "\"regular\" | \"medium\" | \"bold\"",
        "default": undefined,
        description: <><p>{"The font weight of the text. Partially overrides the textStyle."}</p></>
    },

    maxLines: {
        "type": "number",
        "default": undefined,
        description: <><p>{"The maximum number of lines to display. If the text overflows, it will be truncated."}</p></>
    },

    align: {
        "type": "\"left\" | \"center\" | \"right\"",
        "default": undefined,
        description: <><p>{"The alignment of the text."}</p></>
    },

    textStyle: {
        "type": "\"screenTitle\" | \"articleBody\" | \"t1Regular\" | \"t1Medium\" | \"t1Bold\" | \"t2Regular\" | \"t2Medium\" | \"t2Bold\" | \"t3Regular\" | \"t3Medium\" | \"t3Bold\" | \"t4Regular\" | \"t4Medium\" | \"t4Bold\" | ... 12 more ...",
        "default": "t5Regular"
    },

    textDecorationLine: {
        "type": "\"none\" | \"line-through\"",
        "default": "none"
    }
}}
/>

## Examples

### Text Styles

Figma의 Text Style과 대응되는 `textStyle` 속성을 사용하는 것이 기본 방법입니다.

<ComponentExample name="text-text-styles">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextTextStyles() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" textStyle="t1Regular">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t2Regular">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t3Regular">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t4Regular">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t5Regular">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t6Bold">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t7Bold">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t8Bold">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t9Bold">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" textStyle="t10Bold">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

### Font Sizes

세밀한 제어가 필요한 경우 `fontSize` 및 `lineHeight` 속성을 각각 사용할 수 있습니다.

`lineHeight` 속성은 `fontSize`에 대응되는 기본값으로 설정되며, `lineHeight` 속성으로 변경이 가능합니다.

<ComponentExample name="text-font-sizes">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextFontSizes() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" fontSize="t1">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" fontSize="t2">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" fontSize="t3">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" fontSize="t4">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" fontSize="t5">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" fontSize="t6">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" fontSize="t7">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" fontSize="t8">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" fontSize="t9">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" fontSize="t10">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

### Font Weights

세밀한 제어가 필요한 경우 `fontWeight` 속성을 사용할 수 있습니다.

<ComponentExample name="text-font-weights">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextFontWeights() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" fontSize="t5" fontWeight="regular">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" fontSize="t5" fontWeight="medium">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
        <Text color="fg.neutral" fontSize="t5" fontWeight="bold">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>

### Line Through

`textDecorationLine` 속성을 사용하여 텍스트에 취소선을 추가할 수 있습니다.

<ComponentExample name="text-line-through">
  ```tsx
  import { Flex, Text } from "@seed-design/react";

  export default function TextLineThrough() {
    return (
      <Flex direction="column" gap="x2">
        <Text color="fg.neutral" textStyle="t5Regular" textDecorationLine="line-through">
          다람쥐 헌 쳇바퀴에 타고파
        </Text>
      </Flex>
    );
  }
  ```
</ComponentExample>


file: ./content/react/components/concepts/composition.mdx
# Composition

컴포넌트를 조합하여 복잡한 UI를 구성하는 방법과 원칙을 설명합니다.
        
## `as` Prop

`as` prop은 React 컴포넌트가 렌더링하는 기본 HTML 요소를 변경하는 데 사용됩니다. 컴포넌트의 기능은 유지하면서 기본 요소를 변경할 수 있는 간단한 방법을 제공합니다.

```jsx
<Text as="p">단락 텍스트</Text>
<Text as="span">인라인 텍스트</Text>
<Text as="h3">제목 텍스트</Text>
```

## `asChild` Prop

`asChild` prop은 컴포넌트의 기능을 자식 요소에 합성하는 데 사용됩니다. 이를 활용해 HTML 태그를 변경하거나, 다른 컴포넌트에 기능을 주입할 수 있습니다.
[Radix UI](https://www.radix-ui.com/primitives/docs/utilities/slot)에서 제공하는 asChild 패턴과 동일한 기능을 제공합니다.

### 요소 타입 변경하기

```jsx
// FAB는 기본적으로 button 태그를 사용하지만, asChild를 사용해 링크로 변경할 수 있습니다.
<FAB asChild>
  <a href="/create">
    <Icon svg={<IconPlusLine />} />
  </a>
</FAB>
```

> 기본 요소 타입을 변경하는 경우, 해당 요소가 접근성을 유지하고 올바르게 작동하는지 확인하는 것은 개발자의 책임입니다. 예를 들어, 버튼을 `div`로 변경하면 더 이상 키보드로 접근할 수 없게 될 수 있습니다.

### React 컴포넌트와 조합하기

```jsx
// 라우터 라이브러리에서 제공하는 Link 컴포넌트에 기능을 합성할 수 있습니다.
<Button asChild>
  <Link to="/create">
    <Icon svg={<IconPlusLine />} />
  </Link>
</Button>
```

`asChild`를 사용하여 컴포넌트를 조합할 때는 두 가지 원칙을 따라야 합니다.

#### 1. 컴포넌트는 props를 전개해야 합니다

asChild는 기능을 제공하고 접근성을 유지하기 위한 고유의 props와 이벤트 핸들러를 전달합니다. 컴포넌트가 이러한 props를 지원하지 않으면 제대로 작동하지 않습니다.

```jsx
// 잘못된 방법
const MyButton = () => <button />;

// 올바른 방법
const MyButton = (props) => <button {...props} />;
```

asChild의 자식 컴포넌트에 대해서는 항상 모든 props를 전개(spread)하는 것이 좋은 방법입니다.

#### 2. 컴포넌트는 ref를 전달해야 합니다

컴포넌트에 `ref`를 전달해야 할 수 있습니다(예: 요소 크기 측정). 컴포넌트가 `ref`를 받지 않으면 제대로 작동하지 않을 수 있습니다.

```jsx
// 잘못된 방법
const MyButton = (props) => <button {...props} />;

// 올바른 방법
const MyButton = React.forwardRef((props, forwardedRef) => (
  <button {...props} ref={forwardedRef} />
));
```

모든 경우에 필수는 아니지만, 항상 `React.forwardRef`를 사용하는 것이 가장 안전합니다.


file: ./content/react/components/concepts/icon.mdx
# Icon

아이콘을 사용하는 방법을 설명합니다.
        
## 개요

[당근 아이콘 라이브러리](/react/iconography/library)는 디자인 시스템에 독립적(agnostic)으로 설계되었으며 SEED Design의 의견이 포함되어 있지 않습니다. 때로는 라이브러리에 없는 커스텀 아이콘을 사용하면서도 아이콘 합성 패턴을 활용해야 하는 경우가 있습니다.

이를 위해 `svg` 속성을 통해 아이콘을 받아 디자인 시스템에 연결하는 유틸리티 컴포넌트를 제공합니다:

* `Icon`: 아이콘을 독립적으로 사용하거나 아이콘만 표시하는 컴포넌트에서 사용합니다.
* `PrefixIcon`, `SuffixIcon`: 컴포넌트 내에 아이콘과 텍스트를 함께 배치할 때 사용합니다.

## Icon 컴포넌트

`Icon` 컴포넌트는 아이콘을 독립적으로 사용하거나 아이콘만 표시하는 컴포넌트에서 사용합니다.

```jsx
import { Icon } from "@seed-design/react";
import { IconHeartFill } from "@karrotmarket/react-monochrome-icon";

// 독립형 아이콘
<Icon svg={<IconHeartFill />} />

// 아이콘만 표시하는 버튼
<ActionButton layout="iconOnly">
  <Icon svg={<IconPlusLine />} />
</ActionButton>
```

## PrefixIcon과 SuffixIcon

컴포넌트 내에 아이콘과 텍스트를 함께 배치할 때는 `PrefixIcon`, `SuffixIcon` 컴포넌트를 children으로 배치합니다.

```jsx
import { PrefixIcon, SuffixIcon } from "@seed-design/react";
import { ActionButton } from "seed-design/ui/action-button";
import { IconPlusFill, IconChevronRightFill } from "@karrotmarket/react-monochrome-icon";

// 앞에 아이콘 배치
<ActionButton>
  <PrefixIcon svg={<IconPlusFill />} />
  라벨
</ActionButton>

// 뒤에 아이콘 배치
<ActionButton>
  라벨
  <SuffixIcon svg={<IconChevronRightFill />} />
</ActionButton>

// 아이콘 양쪽에 배치
<ActionButton>
  <PrefixIcon svg={<IconPlusFill />} />
  라벨
  <SuffixIcon svg={<IconChevronRightFill />} />
</ActionButton>
```

이 패턴은 다음과 같은 컴포넌트에서 일관되게 사용됩니다:

* `ActionButton`: 버튼 내 아이콘 배치
* `Button`: 일반 버튼 내 아이콘 배치
* `ToggleButton`: 토글 버튼 내 아이콘 배치
* `ActionChip`: 액션 칩 내 아이콘 배치
* `ControlChip`: 컨트롤 칩 내 아이콘 배치


file: ./content/react/components/concepts/snippet.mdx
# Snippet

자주 사용되는 UI 패턴을 스니펫으로 제공하여 개발 효율성을 높이는 방법을 안내합니다.
        
## 개요

Snippet은 **Compound Components**를 기본으로 채택하면서도 개발자 경험(DX)을 최적화하기 위한 해결책입니다. 복잡한 compound components를 간단하게 사용할 수 있도록 도와주는 패턴입니다.

## **Compound Components**란?

기존의 닫힌 컴포넌트 방식에서는 컴포넌트의 커스터마이징이 제한적이었습니다. 예를 들어, 다음과 같은 닫힌 컴포넌트는:

```tsx
<Checkbox>Click me</Checkbox>
```

내부 구현이 숨겨져 있어 다음과 같은 커스터마이징 요구사항을 해결하기 어려웠습니다:

* label에 스타일을 추가하는 방법
* 체크박스의 아이콘을 변경하는 방법
* ref를 div와 input에 각각 전달하는 방법

이러한 문제를 해결하기 위해 compound components 패턴을 도입했습니다:

```tsx
<Checkbox.Root>
  <Checkbox.Control>
    <Checkbox.Indicator />
  </Checkbox.Control>
  <Checkbox.Label>Click me</Checkbox.Label>
  <Checkbox.HiddenInput />
</Checkbox.Root>
```

## Snippet의 필요성

Compound components는 뛰어난 유연성을 제공하지만, 매번 이렇게 자세한 구현을 작성하는 것은 번거로울 수 있습니다. 이러한 유연성과 DX간의 trade-off를 해결하기 위해 Snippet 개념이 도입되었습니다.

## Snippet 사용하기

### 1. CLI 실행

다음 명령어를 통해 필요한 컴포넌트의 snippet을 프로젝트에 추가할 수 있습니다:

```bash
npx @seed-design/cli add
```

### 2. 생성된 Snippet 활용

CLI 실행 후, `seed-design/ui/*` 디렉토리에 snippet이 생성됩니다. 예를 들어:

```tsx
// seed-design/ui/checkbox.tsx
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  ({ inputProps, rootRef, label, variant = "square", ...otherProps }, ref) => {
    return (
      <SeedCheckbox.Root ref={rootRef} variant={variant} {...otherProps}>
        <SeedCheckbox.Control>
          <SeedCheckbox.Indicator
            unchecked={variant === "ghost" ? <IconCheckmarkFatFill /> : null}
            checked={<IconCheckmarkFatFill />}
            indeterminate={<IconMinusFatFill />}
          />
        </SeedCheckbox.Control>
        <SeedCheckbox.Label>{label}</SeedCheckbox.Label>
        <SeedCheckbox.HiddenInput ref={ref} {...inputProps} />
      </SeedCheckbox.Root>
    );
  },
);
```

### 3. 간단한 사용법

Snippet을 통해 복잡한 compound components를 간단하게 사용할 수 있습니다:

```tsx
import { Checkbox } from "@/seed-design/ui/checkbox"

const Demo = () => <Checkbox>Click me</Checkbox>
```


file: ./content/react/components/stackflow/app-screen.mdx
# App Screen

이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
        
<StackflowExample names={["app-screen-preview"]} />

## Installation

<Tabs groupId="package-manager" persist items={}>
  <Tab value="npm">
    ```bash
    npx @seed-design/cli@latest add app-screen
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dlx @seed-design/cli@latest add app-screen
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dlx @seed-design/cli@latest add app-screen
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun x @seed-design/cli@latest add app-screen
    ```
  </Tab>
</Tabs>

<ManualInstallation name="app-screen" />

## Props

### AppScreen

<TypeTable
  type={{
    theme: {
        "type": "\"cupertino\" | \"android\"",
        "default": "cupertino"
    },

    transitionStyle: {
        "type": "\"slideFromRightIOS\" | \"fadeFromBottomAndroid\"",
        "default": "slideFromRightIOS"
    },

    layerOffsetTop: {
        "type": "\"none\" | \"safeArea\" | \"appBar\"",
        "default": "appBar"
    },

    layerOffsetBottom: {
        "type": "\"none\" | \"safeArea\"",
        "default": "none"
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    },

    swipeBackDisplacementRatioThreshold: {
        "type": "number",
        "default": "0.4",
        description: <><p>{"The threshold to determine whether the swipe back is intentional."}</p></>
    },

    swipeBackVelocityThreshold: {
        "type": "number",
        "default": "1",
        description: <><p>{"The threshold to determine whether the swipe back is intentional."}</p></>
    },

    onSwipeBackStart: {
        "type": "(() => void)",
        "default": undefined
    },

    onSwipeBackMove: {
        "type": "((props: { displacement: number; displacementRatio: number; }) => void)",
        "default": undefined
    },

    onSwipeBackEnd: {
        "type": "((props: { swiped: boolean; }) => void)",
        "default": undefined
    }
}}
/>

### AppBar

<TypeTable
  type={{
    theme: {
        "type": "\"cupertino\" | \"android\"",
        "default": "cupertino"
    },

    transitionStyle: {
        "type": "\"slideFromRightIOS\" | \"fadeFromBottomAndroid\"",
        "default": "slideFromRightIOS"
    },

    tone: {
        "type": "\"layer\" | \"transparent\"",
        "default": "layer"
    },

    divider: {
        "type": "boolean",
        "default": "false"
    },

    asChild: {
        "type": "boolean",
        "default": "false",
        description: <><p>{"Whether the element should be rendered as a child of a slot."}</p></>
    }
}}
/>

### AppBarMain

<TypeTable
  type={{
    title: {
        "type": "string",
        "default": undefined,
        description: <><p>{"The title of the app bar.\nIf children is provided as ReactElement, this prop will be ignored."}</p></>
    },

    subtitle: {
        "type": "string",
        "default": undefined,
        description: <><p>{"The subtitle of the app bar.\nIf children is provided as ReactElement, this prop will be ignored."}</p></>
    },

    layout: {
        "type": "\"titleOnly\" | \"withSubtitle\"",
        "default": "titleOnly"
    },

    theme: {
        "type": "\"cupertino\" | \"android\"",
        "default": "cupertino"
    },

    transitionStyle: {
        "type": "\"slideFromRightIOS\" | \"fadeFromBottomAndroid\"",
        "default": "slideFromRightIOS"
    },

    tone: {
        "type": "\"layer\" | \"transparent\"",
        "default": "layer"
    }
}}
/>

## Examples

### Transparent app bar

<StackflowExample names={["app-screen-transparent-bar"]} />