@ceed/cds 1.28.1 → 1.29.1

package/dist/components/inputs/RadioList.md

@@ -165,7 +165,7 @@ function LanguageSetting() {
       <RadioList
         items={[
           { label: 'English', value: 'en' },
-          { label: '한국어', value: 'ko' },
+          { label: 'Korean', value: 'ko' },
           { label: '日本語', value: 'ja' },
         ]}
         value={language}
@@ -233,6 +233,25 @@ function RoleSelector({ roles }: { roles: { id: string; name: string }[] }) {
 
 5. **Use horizontal layout sparingly**: Horizontal orientation works well for 2–4 short options. For longer lists, vertical is more readable.
 
+## Props and Customization
+
+### Key Props
+
+| Prop           | Type                                                           | Default      | Description                                |
+| -------------- | -------------------------------------------------------------- | ------------ | ------------------------------------------ |
+| `items`        | `{ label: ReactNode; value: string }[]`                        | (required)   | Array of radio options                     |
+| `value`        | `string`                                                       | -            | Selected value (controlled mode)           |
+| `defaultValue` | `string`                                                       | -            | Initial selected value (uncontrolled mode) |
+| `onChange`     | `(event: ChangeEvent<HTMLInputElement>) => void`               | -            | Callback when selection changes            |
+| `name`         | `string`                                                       | -            | Groups radios together for form submission |
+| `disabled`     | `boolean`                                                      | `false`      | Disables all radio buttons                 |
+| `orientation`  | `'horizontal' \| 'vertical'`                                   | `'vertical'` | Layout orientation                         |
+| `size`         | `'sm' \| 'md' \| 'lg'`                                         | `'md'`       | Radio button size                          |
+| `color`        | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'`  | Color scheme                               |
+| `sx`           | `SxProps`                                                      | -            | Custom styles using the MUI system         |
+
+> **Note**: RadioList also accepts all Joy UI RadioGroup props.
+
 ## Accessibility
 
 - RadioList renders a `<RadioGroup>` with `role="radiogroup"`, and each option is a `<Radio>` with `role="radio"`.

package/dist/components/inputs/RadioTileGroup.md

@@ -6,10 +6,10 @@ RadioTileGroup is a selection component that displays radio options as visually
 
 The component supports flexible layouts (horizontal, grid, vertical), icons via `startDecorator`, three sizes, and built-in form integration with `label`, `helperText`, `error`, and `required` props. It works in both controlled and uncontrolled modes.
 
-> **Form 구성 시 내장 prop 사용을 권장합니다**
+> **Using built-in props is recommended when building forms**
 >
-> 이 컴포넌트는 `label`, `helperText` 등의 Form 요소를 자체적으로 지원합니다.
-> Form을 구성할 때 Typography로 별도의 label이나 helperText를 만드는 대신, 컴포넌트의 내장 prop을 사용하세요.
+> This component provides built-in form-related props such as `label` and `helperText`.
+> When building a form, use the component's built-in props instead of creating separate labels or helper text with Typography.
 
 ```tsx
 <RadioTileGroup
@@ -499,6 +499,40 @@ Use a vertical layout with `columns={1}` for plan or tier selection.
 
 5. **Always provide an error message.** When `error` is true, update `helperText` to explain the validation issue so users know how to fix it.
 
+## Props and Customization
+
+### Key Props
+
+| Prop           | Type                                             | Default    | Description                                |
+| -------------- | ------------------------------------------------ | ---------- | ------------------------------------------ |
+| `options`      | `RadioTileOption[]`                              | (required) | Array of radio tile options                |
+| `value`        | `T`                                              | -          | Selected value (controlled mode)           |
+| `defaultValue` | `T`                                              | -          | Initial selected value (uncontrolled mode) |
+| `onChange`     | `(event: ChangeEvent<HTMLInputElement>) => void` | -          | Callback when selection changes            |
+| `name`         | `string`                                         | -          | Groups radios together for form submission |
+| `label`        | `ReactNode`                                      | -          | Group label displayed above the tiles      |
+| `helperText`   | `ReactNode`                                      | -          | Helper text displayed below the tiles      |
+| `error`        | `boolean`                                        | `false`    | Applies error styling                      |
+| `required`     | `boolean`                                        | `false`    | Marks the field as required                |
+| `disabled`     | `boolean`                                        | `false`    | Disables all radio tiles                   |
+| `size`         | `'sm' \| 'md' \| 'lg'`                           | `'sm'`     | Tile size                                  |
+| `flex`         | `boolean`                                        | `false`    | Tiles stretch to fill available width      |
+| `columns`      | `number`                                         | -          | Fixed number of columns in grid layout     |
+| `textAlign`    | `'start' \| 'center'`                            | `'center'` | Text alignment within tiles                |
+| `useIndicator` | `boolean`                                        | `false`    | Shows a radio indicator on each tile       |
+| `sx`           | `SxProps`                                        | -          | Custom styles using the MUI system         |
+
+### RadioTileOption
+
+```tsx
+interface RadioTileOption<T = string> {
+  value: T;
+  label: ReactNode;
+  disabled?: boolean;
+  startDecorator?: ReactNode;
+}
+```
+
 ## Accessibility
 
 - RadioTileGroup renders a `<fieldset>` with a `<legend>` derived from the `label` prop, providing proper grouping for screen readers.

package/dist/components/inputs/Select.md

@@ -544,6 +544,62 @@ function LocationSelect() {
 </FormControl>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop             | Type                                                             | Default           | Description                                          |
+| ---------------- | ---------------------------------------------------------------- | ----------------- | ---------------------------------------------------- |
+| `options`        | `OptionType[]`                                                   | `[]`              | Array of options (objects or primitives)             |
+| `value`          | `InferOptionValue<OptionType> \| InferOptionValue<OptionType>[]` | -                 | Selected value(s) for controlled mode                |
+| `defaultValue`   | `InferOptionValue<OptionType> \| InferOptionValue<OptionType>[]` | -                 | Initial value for uncontrolled mode                  |
+| `onChange`       | `(event: { target: { name?, value } }, newValue) => void`        | -                 | Callback when selection changes                      |
+| `multiple`       | `boolean`                                                        | `false`           | Allow multiple selections (value becomes an array)   |
+| `label`          | `string`                                                         | -                 | Form label displayed above the select                |
+| `helperText`     | `string`                                                         | -                 | Helper text displayed below the select               |
+| `error`          | `boolean`                                                        | `false`           | Applies danger color to indicate validation error    |
+| `required`       | `boolean`                                                        | `false`           | Marks the field as required (adds asterisk to label) |
+| `disabled`       | `boolean`                                                        | `false`           | Disables the select                                  |
+| `placeholder`    | `string`                                                         | `'Choose one...'` | Placeholder text when no value is selected           |
+| `size`           | `'sm' \| 'md' \| 'lg'`                                           | `'md'`            | Select size                                          |
+| `variant`        | `'outlined' \| 'plain' \| 'solid' \| 'soft'`                     | `'outlined'`      | Visual style variant                                 |
+| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'`   | `'neutral'`       | Color scheme                                         |
+| `startDecorator` | `ReactNode`                                                      | -                 | Content rendered before the select trigger text      |
+| `endDecorator`   | `ReactNode`                                                      | -                 | Content rendered after the select trigger text       |
+| `sx`             | `SxProps`                                                        | -                 | Custom styles using the MUI system                   |
+
+### Option Type
+
+Options can be objects or primitives:
+
+```tsx
+type OptionType =
+  | { label: string; value: string | number; disabled?: boolean; secondaryText?: string }
+  | string
+  | number;
+```
+
+### Generic Type Support
+
+Select supports TypeScript generics for type-safe value handling:
+
+```tsx
+// Type-safe with object options
+const options = [
+  { value: 1, label: 'Option 1' },
+  { value: 2, label: 'Option 2' },
+] as const;
+
+<Select<typeof options[number], false>
+  options={options}
+  onChange={(e, val) => {
+    // val is typed as number
+  }}
+/>
+```
+
+> **Note**: Select also accepts all Joy UI Select props.
+
 ## Accessibility
 
 - **Label association**: When you use the `label` prop, the component automatically connects the label to the select element via `aria-labelledby`. Always provide a label for screen reader users.

package/dist/components/inputs/Slider.md

@@ -326,6 +326,29 @@ function TemperatureSetting() {
 
 5. **Set a reasonable `step`**: For large ranges (0–1000), use a step > 1 to prevent overwhelming precision. For small ranges (0–1), use decimal steps.
 
+## Props and Customization
+
+### Key Props
+
+| Prop                | Type                                                           | Default        | Description                                         |
+| ------------------- | -------------------------------------------------------------- | -------------- | --------------------------------------------------- |
+| `value`             | `number \| number[]`                                           | -              | Current value (controlled). Array for range sliders |
+| `defaultValue`      | `number \| number[]`                                           | `0`            | Initial value (uncontrolled)                        |
+| `onChange`          | `(event: Event, value: number \| number[]) => void`            | -              | Callback when the value changes                     |
+| `min`               | `number`                                                       | `0`            | Minimum allowed value                               |
+| `max`               | `number`                                                       | `100`          | Maximum allowed value                               |
+| `step`              | `number`                                                       | `1`            | Step increment between values                       |
+| `marks`             | `boolean \| { value: number; label?: string }[]`               | `false`        | Show marks on the slider track                      |
+| `valueLabelDisplay` | `'on' \| 'off' \| 'auto'`                                      | `'auto'`       | When to display the value label                     |
+| `orientation`       | `'horizontal' \| 'vertical'`                                   | `'horizontal'` | Slider orientation                                  |
+| `disabled`          | `boolean`                                                      | `false`        | Disables the slider                                 |
+| `size`              | `'sm' \| 'md' \| 'lg'`                                         | `'md'`         | Slider size                                         |
+| `color`             | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'`    | Color scheme                                        |
+| `variant`           | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'solid'`      | Visual style                                        |
+| `sx`                | `SxProps`                                                      | -              | Custom styles using the MUI system                  |
+
+> **Note**: Slider also accepts all Joy UI Slider props.
+
 ## Accessibility
 
 - Slider renders with `role="slider"` and appropriate `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes.

package/dist/components/inputs/Switch.md

@@ -329,6 +329,26 @@ function FeatureToggle() {
 
 5. **Group related switches logically**: Place related switches under a shared heading and use consistent spacing to create a scannable settings layout.
 
+## Props and Customization
+
+### Key Props
+
+| Prop             | Type                                                           | Default     | Description                           |
+| ---------------- | -------------------------------------------------------------- | ----------- | ------------------------------------- |
+| `checked`        | `boolean`                                                      | -           | Whether the switch is on (controlled) |
+| `defaultChecked` | `boolean`                                                      | `false`     | Initial state (uncontrolled)          |
+| `onChange`       | `(event: ChangeEvent<HTMLInputElement>) => void`               | -           | Callback when the state changes       |
+| `disabled`       | `boolean`                                                      | `false`     | Disables the switch                   |
+| `readOnly`       | `boolean`                                                      | `false`     | Makes the switch read-only            |
+| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'` | Color scheme when checked             |
+| `size`           | `'sm' \| 'md' \| 'lg'`                                         | `'md'`      | Switch size                           |
+| `variant`        | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'solid'`   | Visual style                          |
+| `startDecorator` | `ReactNode`                                                    | -           | Content rendered before the switch    |
+| `endDecorator`   | `ReactNode`                                                    | -           | Content rendered after the switch     |
+| `sx`             | `SxProps`                                                      | -           | Custom styles using the MUI system    |
+
+> **Note**: Switch also accepts all Joy UI Switch props and Framer Motion props.
+
 ## Accessibility
 
 - **Role and state**: The Switch renders an `<input type="checkbox" role="switch">` with `aria-checked` reflecting the current state. Screen readers announce it as a switch, not a checkbox.

package/dist/components/inputs/Textarea.md

@@ -4,7 +4,7 @@
 
 The Textarea component provides a multi-line text input field for collecting longer-form user input such as comments, descriptions, and notes. It is built on top of Joy UI's Textarea and automatically adjusts its height between `minRows` (default 2) and `maxRows` (default 4) as the user types.
 
-Textarea integrates with the form system by wrapping itself in a FormControl, supporting built-in `label`, `helperText`, and `error` props. It also supports decorators, multiple visual variants, sizes, and color themes to fit a wide range of client-facing UI use cases.
+Textarea integrates with the form system by wrapping itself in a FormControl, supporting built-in `label`, `helperText`, and `error` props. It also supports decorators, multiple visual variants, sizes, and color themes to fit a wide range of admin UI use cases.
 
 > **Use built-in form props**
 >
@@ -133,28 +133,28 @@ Use the `required`, `label`, and `helperText` props together to build complete f
 
 ## Common Use Cases
 
-### Service Request Details
+### Feedback Form
 
 ```tsx
 import { Textarea, Button, Stack } from '@ceed/cds';
 
-function ServiceRequestForm() {
+function FeedbackForm() {
   const [value, setValue] = React.useState('');
 
   return (
     <Stack spacing={2}>
       <Textarea
-        name="details"
-        label="Request Details"
-        placeholder="Describe your service request..."
-        helperText="Please provide as much detail as possible."
+        name="feedback"
+        label="Feedback"
+        placeholder="Tell us what you think..."
+        helperText="Your feedback helps us improve the service."
         minRows={3}
         maxRows={6}
         value={value}
         onChange={(e) => setValue(e.target.value)}
         required
       />
-      <Button disabled={!value.trim()}>Submit Request</Button>
+      <Button disabled={!value.trim()}>Submit</Button>
     </Stack>
   );
 }
@@ -259,6 +259,30 @@ function ReadOnlyNotes() {
 <Textarea placeholder="Type here" />
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop           | Type                                                           | Default      | Description                                       |
+| -------------- | -------------------------------------------------------------- | ------------ | ------------------------------------------------- |
+| `label`        | `string`                                                       | -            | Form label displayed above the textarea           |
+| `helperText`   | `ReactNode`                                                    | -            | Helper text displayed below the textarea          |
+| `error`        | `boolean`                                                      | `false`      | Applies danger color to indicate validation error |
+| `minRows`      | `number`                                                       | `2`          | Minimum number of visible text rows               |
+| `maxRows`      | `number`                                                       | `4`          | Maximum number of rows before scrolling           |
+| `value`        | `string`                                                       | -            | Textarea value for controlled mode                |
+| `defaultValue` | `string`                                                       | -            | Initial value for uncontrolled mode               |
+| `onChange`     | `(event: ChangeEvent<HTMLTextAreaElement>) => void`            | -            | Callback when the value changes                   |
+| `placeholder`  | `string`                                                       | -            | Placeholder text when the textarea is empty       |
+| `disabled`     | `boolean`                                                      | `false`      | Disables the textarea                             |
+| `required`     | `boolean`                                                      | `false`      | Marks the field as required                       |
+| `size`         | `'sm' \| 'md' \| 'lg'`                                         | `'md'`       | Textarea size                                     |
+| `variant`      | `'outlined' \| 'solid' \| 'soft' \| 'plain'`                   | `'outlined'` | Visual style variant                              |
+| `color`        | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`  | Color scheme                                      |
+| `sx`           | `SxProps`                                                      | -            | Custom styles using the MUI system                |
+
+> **Note**: Textarea also accepts all Joy UI Textarea props and Framer Motion props.
+
 ## Accessibility
 
 - The component automatically associates the `label` with the textarea element through FormControl, ensuring screen readers announce the label when the field receives focus.

package/dist/components/inputs/Uploader/Uploader.md

@@ -309,6 +309,27 @@ function GalleryUpload({ existingImages }) {
 
 - **Use `minCount` with form validation.** The minimum count check triggers on form submission, not on file selection. Make sure the Uploader is inside a `<form>` element for this validation to work.
 
+## Props and Customization
+
+### Key Props
+
+| Prop               | Type                                                      | Default    | Description                                                 |
+| ------------------ | --------------------------------------------------------- | ---------- | ----------------------------------------------------------- |
+| `accept`           | `string`                                                  | (required) | Accepted file types (e.g., `'image/*'`, `'.pdf,.doc'`)      |
+| `maxFileTotalSize` | `number`                                                  | (required) | Maximum total size of all files in bytes                    |
+| `onChange`         | `(event: { target: { name?, value: File[] } }) => void`   | -          | Callback when files are added                               |
+| `onDelete`         | `(deletedFile: UserUpload) => void`                       | -          | Callback when an uploaded file is removed                   |
+| `uploaded`         | `{ id: string \| number; name: string; size?: number }[]` | -          | Pre-existing uploaded files to display                      |
+| `maxFileSize`      | `number`                                                  | -          | Maximum size per individual file in bytes                   |
+| `maxCount`         | `number`                                                  | -          | Maximum number of files allowed                             |
+| `minCount`         | `number`                                                  | -          | Minimum number of files required (validated on form submit) |
+| `label`            | `string`                                                  | -          | Label displayed above the uploader                          |
+| `helperText`       | `string`                                                  | -          | Helper text displayed below the uploader                    |
+| `error`            | `boolean`                                                 | `false`    | Applies error styling                                       |
+| `disabled`         | `boolean`                                                 | `false`    | Disables the uploader                                       |
+| `name`             | `string`                                                  | -          | HTML name attribute for form submission                     |
+| `size`             | `'sm' \| 'md'`                                            | `'md'`     | Uploader size                                               |
+
 ## Accessibility
 
 - The dropzone is keyboard-accessible and can be activated via **Enter** or **Space** to open the file browser.

package/dist/components/layout/Box.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Box는 가장 기본적이고 중요한 레이아웃 컴포넌트입니다. 다른 컴포넌트들을 감싸는 범용 컨테이너 역할을 하며, CSS-in-JS를 통해 스타일을 직접 적용할 수 있습니다. Framer Motion이 내장되어 있어 애니메이션 효과도 쉽게 추가할 수 있습니다. 모든 HTML 요소로 변환 가능한 다형성(polymorphic) 컴포넌트이기도 합니다.
+Box is the most fundamental and essential layout component. It acts as a general-purpose container that wraps other components, and you can apply styles directly through CSS-in-JS. It also includes built-in Framer Motion support, making it easy to add animations. It is also a polymorphic component that can render as any HTML element.
 
 ```tsx
 <Box {...args} sx={{
@@ -48,7 +48,7 @@ function MyComponent() {
 
 ### Basic Usage
 
-가장 기본적인 Box 사용법입니다.
+The most basic way to use Box.
 
 ```tsx
 <div style={{
@@ -86,7 +86,7 @@ function MyComponent() {
 
 ### Colors
 
-다양한 배경색을 적용할 수 있습니다.
+You can apply various background colors.
 
 ```tsx
 <div style={{
@@ -138,7 +138,7 @@ function MyComponent() {
 
 ### Spacing
 
-패딩과 마진을 조절할 수 있습니다.
+You can adjust padding and margin.
 
 ```tsx
 <div style={{
@@ -215,7 +215,7 @@ function MyComponent() {
 
 ### Border Radius
 
-모서리 둥글기를 다양하게 설정할 수 있습니다.
+You can configure different corner radius values.
 
 ```tsx
 <div style={{
@@ -299,7 +299,7 @@ function MyComponent() {
 
 ### Shadows
 
-그림자 효과를 추가할 수 있습니다.
+You can add shadow effects.
 
 ```tsx
 <div style={{
@@ -390,7 +390,7 @@ function MyComponent() {
 
 ### Flex Layouts
 
-Flexbox를 사용한 레이아웃을 쉽게 만들 수 있습니다.
+You can easily build layouts using Flexbox.
 
 ```tsx
 <div style={{
@@ -499,7 +499,7 @@ Flexbox를 사용한 레이아웃을 쉽게 만들 수 있습니다.
 
 ### Responsive Layout
 
-반응형 레이아웃을 구현할 수 있습니다.
+You can create responsive layouts.
 
 ```tsx
 <div style={{
@@ -551,7 +551,7 @@ Flexbox를 사용한 레이아웃을 쉽게 만들 수 있습니다.
 
 ### Polymorphic Components
 
-component prop을 사용하여 다양한 HTML 요소로 렌더링할 수 있습니다.
+You can render it as different HTML elements using the `component` prop.
 
 ```tsx
 <div style={{
@@ -603,7 +603,7 @@ component prop을 사용하여 다양한 HTML 요소로 렌더링할 수 있습
 
 ### Motion Animations
 
-내장된 Framer Motion을 사용한 애니메이션 효과입니다.
+Animation effects using built-in Framer Motion.
 
 ```tsx
 <div style={{
@@ -655,7 +655,7 @@ component prop을 사용하여 다양한 HTML 요소로 렌더링할 수 있습
 
 ### Complex Layouts
 
-Box를 조합하여 복잡한 레이아웃을 만들 수 있습니다.
+You can combine Box components to build complex layouts.
 
 ```tsx
 <div style={{
@@ -790,17 +790,16 @@ Box를 조합하여 복잡한 레이아웃을 만들 수 있습니다.
 
 ### SX Prop
 
-Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타일을 객체 형태로 직접 적용할 수 있습니다.
+The most powerful feature of Box is the `sx` prop. It allows you to apply CSS styles directly as an object.
 
 ```tsx
 <Box
   sx={{
-    p: 2, // padding: 16px
-    m: { xs: 1, md: 2 }, // 반응형 마진
-    bgcolor: 'primary.50', // 테마 색상
-    borderRadius: 'md', // 테마 border-radius
-    '&:hover': {
-      // hover 상태
+    p: 2,                    // padding: 16px
+    m: { xs: 1, md: 2 },     // responsive margin
+    bgcolor: 'primary.50',   // theme color
+    borderRadius: 'md',      // theme border-radius
+    '&:hover': {            // hover state
       bgcolor: 'primary.100',
     },
   }}
@@ -811,7 +810,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 
 ### Responsive Design
 
-객체 구문을 사용해 브레이크포인트별 스타일을 지정할 수 있습니다.
+You can define styles per breakpoint using object syntax.
 
 ```tsx
 <Box
@@ -827,7 +826,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 
 ### Theme Integration
 
-디자인 시스템의 토큰을 직접 사용할 수 있습니다.
+You can use design system tokens directly.
 
 ```tsx
 <Box
@@ -844,7 +843,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 
 ### Framer Motion
 
-애니메이션 props를 직접 사용할 수 있습니다.
+You can use animation props directly.
 
 ```tsx
 <Box
@@ -908,7 +907,7 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
     gap: 2,
   }}
 >
-  {items.map((item) => (
+  {items.map(item => (
     <Box key={item.id} sx={{ p: 2, bgcolor: 'background.surface' }}>
       {item.content}
     </Box>
@@ -948,34 +947,46 @@ Box의 가장 강력한 기능은 `sx` prop입니다. 이를 통해 CSS 스타
 </Box>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop        | Type          | Default | Description                        |
+| ----------- | ------------- | ------- | ---------------------------------- |
+| `children`  | `ReactNode`   | -       | Content inside the box             |
+| `component` | `ElementType` | `'div'` | Root element type                  |
+| `sx`        | `SxProps`     | -       | Custom styles using the MUI system |
+
+Box is a general-purpose container that renders as a `<div>` by default. It accepts all standard HTML attributes and Joy UI's `sx` prop for responsive styling.
+
 ## Best Practices
 
-1. **의미 있는 HTML 요소 사용**: `component` prop을 활용해 의미론적으로 올바른 HTML 요소를 선택하세요.
+1. **Use meaningful HTML elements**: Use the `component` prop to choose semantically appropriate HTML elements.
 
-2. **테마 토큰 활용**: 하드코딩된 값 대신 테마의 spacing, color, border-radius 등을 사용하세요.
+2. **Use theme tokens**: Use theme spacing, color, border-radius, and similar values instead of hardcoded values.
 
-3. **반응형 고려**: 다양한 화면 크기에서 잘 동작하도록 반응형 값을 사용하세요.
+3. **Design responsively**: Use responsive values so the component works well across different screen sizes.
 
-4. **성능 최적화**:
-   - 인라인 객체 생성을 피하고 가능하면 객체를 메모화하세요
-   - 복잡한 애니메이션은 필요할 때만 사용하세요
+4. **Optimize performance**:
+   - Avoid creating inline objects repeatedly, and memoize them when possible
+   - Use complex animations only when necessary
 
-5. **접근성**:
-   - 적절한 semantic HTML 요소를 선택하세요
-   - 필요시 ARIA 속성을 추가하세요
-   - 충분한 색상 대비를 유지하세요
+5. **Consider accessibility**:
+   - Choose appropriate semantic HTML elements
+   - Add ARIA attributes when needed
+   - Maintain sufficient color contrast
 
-6. **재사용성**:
-   - 자주 사용하는 스타일 조합은 별도 컴포넌트로 분리하세요
-   - 공통 스타일은 테마에 정의하세요
+6. **Promote reusability**:
+   - Extract frequently used style combinations into separate components
+   - Define shared styles in the theme
 
-7. **일관성**:
-   - 팀 내에서 일관된 spacing과 naming convention을 사용하세요
-   - 디자인 시스템의 가이드라인을 따르세요
+7. **Maintain consistency**:
+   - Use consistent spacing and naming conventions across the team
+   - Follow the design system guidelines
 
 ## Spacing Scale
 
-Box에서 사용할 수 있는 spacing 값들:
+Spacing values available in Box:
 
 - `0.5` = 4px
 - `1` = 8px
@@ -988,11 +999,11 @@ Box에서 사용할 수 있는 spacing 값들:
 
 ## Color Tokens
 
-주요 색상 토큰들:
+Primary color tokens:
 
 - **Background**: `background.body`, `background.surface`, `background.level1`
 - **Primary**: `primary.50`, `primary.100`, `primary.500`, `primary.main`
 - **Neutral**: `neutral.50`, `neutral.100`, `neutral.500`, `neutral.main`
 - **Text**: `text.primary`, `text.secondary`, `text.tertiary`
 
-Box는 ADS의 모든 레이아웃과 스타일링의 기초가 되는 컴포넌트입니다. 강력한 sx prop과 내장된 애니메이션 기능을 활용해 다양한 UI 요구사항을 충족할 수 있습니다.
+Box is the foundational component for all layout and styling in ADS. Its powerful `sx` prop and built-in animation support make it flexible enough to satisfy a wide range of UI requirements.