@ceed/cds 1.29.0 → 1.30.0

package/dist/components/data-display/Typography.md

@@ -4,8 +4,6 @@
 
 The Typography component is a core component for displaying text. It is based on Joy UI Typography and provides a variety of text levels and styles. You can apply consistent typography across all text elements such as headings, body text, and labels.
 
-CDS extends the default typography system with **marketing levels** (`marketing-lg`, `marketing-md`, `marketing-sm`) for landing pages and promotional content, and uses **Poppins** as the display font family.
-
 ```tsx
 <Typography children="Typography" />
 ```
@@ -37,12 +35,11 @@ function MyComponent() {
 
 ### Overview
 
-Typography levels are divided into four groups: **Headings**, **Titles**, **Body**, and **Marketing**. The default level is `body-md`.
+Typography levels are divided into three groups: **Headings**, **Titles**, and **Body**. The default level is `body-md`.
 
-- **Headings** (`h1`–`h4`): Used for page and section headings. Uses the display font family (Poppins).
+- **Headings** (`h1`–`h4`): Used for page and section headings. Uses the display font family (Inter).
 - **Titles** (`title-lg`, `title-md`, `title-sm`): Used for UI labels, card titles, and emphasized text. Uses the body font family (Inter).
 - **Body** (`body-lg`, `body-md`, `body-sm`, `body-xs`): Used for readable content and descriptions. Uses the body font family (Inter).
-- **Marketing** (`marketing-lg`, `marketing-md`, `marketing-sm`): Used for landing pages, hero banners, and promotional content. Uses the display font family (Poppins).
 
 ```tsx
 <>
@@ -107,26 +104,23 @@ Typography levels are divided into four groups: **Headings**, **Titles**, **Body
 
 ### Style Reference
 
-| Level        | Font Family       | Font Size       | Font Weight    | Line Height | Letter Spacing | Default Color  | HTML Tag |
-| ------------ | ----------------- | --------------- | -------------- | ----------- | -------------- | -------------- | -------- |
-| h1           | display (Poppins) | 2.25rem (36px)  | 700 (Bold)     | 1.333       | -0.025em       | text.primary   | `<h1>`   |
-| h2           | display (Poppins) | 1.875rem (30px) | 700 (Bold)     | 1.333       | -0.025em       | text.primary   | `<h2>`   |
-| h3           | display (Poppins) | 1.5rem (24px)   | 600 (SemiBold) | 1.333       | -0.025em       | text.primary   | `<h3>`   |
-| h4           | display (Poppins) | 1.25rem (20px)  | 600 (SemiBold) | 1.5         | -0.025em       | text.primary   | `<h4>`   |
-| title-lg     | body (Inter)      | 1.125rem (18px) | 600 (SemiBold) | 1.333       | -              | text.primary   | `<p>`    |
-| title-md     | body (Inter)      | 1rem (16px)     | 500 (Medium)   | 1.5         | -              | text.primary   | `<p>`    |
-| title-sm     | body (Inter)      | 0.875rem (14px) | 500 (Medium)   | 1.429       | -              | text.primary   | `<p>`    |
-| body-lg      | body (Inter)      | 1.125rem (18px) | inherit        | 1.5         | -              | text.secondary | `<p>`    |
-| body-md      | body (Inter)      | 1rem (16px)     | inherit        | 1.5         | -              | text.secondary | `<p>`    |
-| body-sm      | body (Inter)      | 0.875rem (14px) | inherit        | 1.5         | -              | text.tertiary  | `<p>`    |
-| body-xs      | body (Inter)      | 0.75rem (12px)  | 500 (Medium)   | 1.5         | -              | text.tertiary  | `<span>` |
-| marketing-lg | display (Poppins) | 2.625rem (42px) | 600 (SemiBold) | 1.333       | -0.025em       | text.primary   | `<div>`  |
-| marketing-md | display (Poppins) | 2rem (32px)     | 600 (SemiBold) | 1.333       | -0.025em       | text.primary   | `<div>`  |
-| marketing-sm | display (Poppins) | 1.5rem (24px)   | 500 (Medium)   | 1.333       | -0.025em       | text.primary   | `<div>`  |
+| Level    | Font Family     | Font Size       | Font Weight    | Line Height | Letter Spacing | Default Color  | HTML Tag |
+| -------- | --------------- | --------------- | -------------- | ----------- | -------------- | -------------- | -------- |
+| h1       | display (Inter) | 2.25rem (36px)  | 700 (Bold)     | 1.333       | -0.025em       | text.primary   | `<h1>`   |
+| h2       | display (Inter) | 1.875rem (30px) | 700 (Bold)     | 1.333       | -0.025em       | text.primary   | `<h2>`   |
+| h3       | display (Inter) | 1.5rem (24px)   | 600 (SemiBold) | 1.333       | -0.025em       | text.primary   | `<h3>`   |
+| h4       | display (Inter) | 1.25rem (20px)  | 600 (SemiBold) | 1.5         | -0.025em       | text.primary   | `<h4>`   |
+| title-lg | body (Inter)    | 1.125rem (18px) | 600 (SemiBold) | 1.333       | -              | text.primary   | `<p>`    |
+| title-md | body (Inter)    | 1rem (16px)     | 500 (Medium)   | 1.5         | -              | text.primary   | `<p>`    |
+| title-sm | body (Inter)    | 0.875rem (14px) | 500 (Medium)   | 1.429       | -              | text.primary   | `<p>`    |
+| body-lg  | body (Inter)    | 1.125rem (18px) | inherit        | 1.5         | -              | text.secondary | `<p>`    |
+| body-md  | body (Inter)    | 1rem (16px)     | inherit        | 1.5         | -              | text.secondary | `<p>`    |
+| body-sm  | body (Inter)    | 0.875rem (14px) | inherit        | 1.5         | -              | text.tertiary  | `<p>`    |
+| body-xs  | body (Inter)    | 0.75rem (12px)  | 500 (Medium)   | 1.5         | -              | text.tertiary  | `<span>` |
 
 ### Headings
 
-Heading levels define page structure and hierarchy. In CDS, they use the **Poppins** display font family with heavier weights for visual prominence.
+Heading levels define page structure and hierarchy. They use the display font family with heavier weights for visual prominence.
 
 ```tsx
 <>
@@ -182,30 +176,6 @@ Body levels are used for readable content and descriptions. The default level `b
 <Typography level="body-xs">Extra small text</Typography>
 ```
 
-### Marketing Levels
-
-Marketing levels are designed for landing pages, hero banners, and promotional content. They use the **Poppins** display font family for a distinctive marketing look.
-
-```tsx
-<>
-  <Typography level="marketing-lg">
-    marketing-lg - Large marketing text
-  </Typography>
-  <Typography level="marketing-md">
-    marketing-md - Medium marketing text
-  </Typography>
-  <Typography level="marketing-sm">
-    marketing-sm - Small marketing text
-  </Typography>
-</>
-```
-
-```tsx
-<Typography level="marketing-lg">Large marketing text</Typography>
-<Typography level="marketing-md">Medium marketing text</Typography>
-<Typography level="marketing-sm">Small marketing text</Typography>
-```
-
 ## Design Token Reference
 
 ### Font Size Scale
@@ -243,7 +213,7 @@ Marketing levels are designed for landing pages, hero banners, and promotional c
 ### Font Families
 
 - **body**: `"Inter"`, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
-- **display**: `"Poppins"`, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
+- **display**: `"Inter"`, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
 - **code**: `"Source Code Pro"`, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
 
 ## Colors
@@ -305,22 +275,19 @@ Use the `component` prop to render Typography as a different HTML element or Rea
 
 **Default HTML tag mapping:**
 
-| Level        | Default HTML Tag |
-| ------------ | ---------------- |
-| h1           | `<h1>`           |
-| h2           | `<h2>`           |
-| h3           | `<h3>`           |
-| h4           | `<h4>`           |
-| title-lg     | `<p>`            |
-| title-md     | `<p>`            |
-| title-sm     | `<p>`            |
-| body-lg      | `<p>`            |
-| body-md      | `<p>`            |
-| body-sm      | `<p>`            |
-| body-xs      | `<span>`         |
-| marketing-lg | `<div>`          |
-| marketing-md | `<div>`          |
-| marketing-sm | `<div>`          |
+| Level    | Default HTML Tag |
+| -------- | ---------------- |
+| h1       | `<h1>`           |
+| h2       | `<h2>`           |
+| h3       | `<h3>`           |
+| h4       | `<h4>`           |
+| title-lg | `<p>`            |
+| title-md | `<p>`            |
+| title-sm | `<p>`            |
+| body-lg  | `<p>`            |
+| body-md  | `<p>`            |
+| body-sm  | `<p>`            |
+| body-xs  | `<span>`         |
 
 ## Decorators
 
@@ -482,14 +449,14 @@ function ArticlePage() {
 
 > 💡 **Tip: Use built-in form props instead**
 >
-> Input, Select, Textarea, DatePicker 등 Input 계열 컴포넌트는 `label`, `helperText` prop을 자체적으로 지원합니다.
-> Form을 구성할 때는 Typography로 직접 label/helperText를 만드는 것보다 각 컴포넌트의 내장 prop을 사용하는 것이 권장됩니다.
+> Input-family components such as Input, Select, Textarea, and DatePicker support `label` and `helperText` props natively.
+> When building forms, it is recommended to use each component's built-in props rather than creating labels and helper text manually with Typography.
 >
 > ```tsx
-> // ✅ Recommended: 컴포넌트 내장 prop 사용
+> // ✅ Recommended: use the component's built-in props
 > <Input label="Username" helperText="Please enter your real name." />
 >
-> // ❌ Not recommended: Typography로 직접 구성
+> // ❌ Not recommended: manually composing with Typography
 > <FormControl>
 >   <Typography level="title-sm" component="label">Username</Typography>
 >   <Input placeholder="Enter your name" />
@@ -542,6 +509,25 @@ function ArticlePage() {
 </Stack>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop             | Type                                                                                                                         | Default     | Description                                       |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |
+| `children`       | `ReactNode`                                                                                                                  | -           | Text content                                      |
+| `level`          | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'title-lg' \| 'title-md' \| 'title-sm' \| 'body-lg' \| 'body-md' \| 'body-sm' \| 'body-xs'` | `'body-md'` | Typography level (maps to semantic HTML elements) |
+| `component`      | `ElementType`                                                                                                                | auto        | Override the root element type                    |
+| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'`                                                               | `'neutral'` | Color scheme                                      |
+| `variant`        | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                                                                                 | -           | Visual style (optional)                           |
+| `noWrap`         | `boolean`                                                                                                                    | `false`     | Truncate text with ellipsis                       |
+| `startDecorator` | `ReactNode`                                                                                                                  | -           | Content before the text                           |
+| `endDecorator`   | `ReactNode`                                                                                                                  | -           | Content after the text                            |
+| `textColor`      | `string`                                                                                                                     | -           | Direct text color override                        |
+| `sx`             | `SxProps`                                                                                                                    | -           | Custom styles                                     |
+
+> **Note**: Typography also accepts all Joy UI Typography props.
+
 ## Best Practices
 
 1. **Semantic Structure**: Use heading levels in order (`h1` → `h2` → `h3`) to create a clear document hierarchy.
@@ -567,7 +553,6 @@ function ArticlePage() {
    - **Headings** (`h1`–`h4`): Use for document structure and section titles.
    - **Titles** (`title-lg/md/sm`): Use for UI labels, card headers, and emphasized text.
    - **Body** (`body-lg/md/sm/xs`): Use for content, descriptions, and supporting text.
-   - **Marketing** (`marketing-lg/md/sm`): Use exclusively for marketing and landing pages — not for general UI.
 
 6. **Avoid inline style overrides**: Prefer the `level` prop over `sx` for font sizing. Use `level` for consistent design tokens.
 
@@ -575,8 +560,6 @@ function ArticlePage() {
 
 8. **Use `body-xs` sparingly**: Reserve `body-xs` (12px) for auxiliary information such as timestamps, counters, and footnotes — not for primary content.
 
-9. **Marketing vs Heading levels**: Marketing levels are intended for landing pages and promotional content only. For standard application UI, use heading and title levels instead. Be aware that `h1`–`h4` and `marketing-*` levels use the Poppins display font, while `title-*` and `body-*` use Inter.
-
 ## Accessibility
 
 - Use sequential heading levels (`h1` → `h2` → `h3`). Do not skip levels.

package/dist/components/feedback/Alert.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Alert 컴포넌트는 사용자에게 중요한 정보, 성공 메시지, 경고, 오류 등을 전달하는 피드백 컴포넌트입니다. Joy UI의 Alert를 기반으로 하며, 다양한 색상과 변형을 통해 메시지의 중요도와 성격을 시각적으로 구분할 수 있습니다. 시스템 알림, 폼 검증 결과, 작업 완료 상태 등을 사용자에게 명확하게 전달하는 데 사용됩니다.
+The Alert component is a feedback component used to communicate important information, success messages, warnings, errors, and more to users. It is based on Joy UI Alert and uses a variety of colors and variants to visually distinguish the importance and nature of a message. It is used to clearly communicate system notifications, form validation results, task completion states, and similar feedback.
 
 ```tsx
 <Alert
@@ -30,10 +30,10 @@ import { Alert } from '@ceed/cds';
 function MyComponent() {
   return (
     <div>
-      {/* 기본 알림 */}
+      {/* Basic alert */}
       <Alert content="이것은 기본 알림입니다." />
 
-      {/* 성공 메시지 */}
+      {/* Success message */}
       <Alert
         color="success"
         title="저장 완료"
@@ -41,7 +41,7 @@ function MyComponent() {
         startDecorator={<CheckCircleIcon />}
       />
 
-      {/* 오류 메시지 */}
+      {/* Error message */}
       <Alert
         color="danger"
         title="오류 발생"
@@ -58,7 +58,7 @@ function MyComponent() {
 
 ### Basic Usage
 
-가장 기본적인 Alert 사용법입니다.
+The most basic Alert usage.
 
 ```tsx
 <Alert
@@ -69,7 +69,7 @@ function MyComponent() {
 
 ### Colors
 
-다양한 색상을 통해 메시지의 성격을 구분할 수 있습니다.
+You can distinguish message types through various colors.
 
 ```tsx
 <div style={{
@@ -124,15 +124,15 @@ function MyComponent() {
 </div>
 ```
 
-- **primary**: 일반적인 정보 메시지
-- **success**: 성공, 완료 메시지
-- **warning**: 주의, 경고 메시지
-- **danger**: 오류, 위험 메시지
-- **neutral**: 중립적인 메시지
+- **primary**: General informational message
+- **success**: Success or completion message
+- **warning**: Caution or warning message
+- **danger**: Error or risk message
+- **neutral**: Neutral message
 
 ### With Start Decorator
 
-아이콘이나 다른 요소를 메시지 앞에 추가할 수 있습니다.
+You can add an icon or another element before the message.
 
 ```tsx
 <Alert
@@ -144,7 +144,7 @@ function MyComponent() {
 
 ### With Title
 
-제목을 추가하여 메시지를 구조화할 수 있습니다.
+You can structure the message by adding a title.
 
 ```tsx
 <Alert
@@ -156,7 +156,7 @@ function MyComponent() {
 
 ### With Actions
 
-사용자가 수행할 수 있는 액션을 추가할 수 있습니다.
+You can add actions the user can take.
 
 ```tsx
 <Alert
@@ -168,7 +168,7 @@ function MyComponent() {
 
 ### Complete Alert
 
-모든 요소를 포함한 완전한 Alert입니다.
+A complete Alert containing all elements.
 
 ```tsx
 <Alert
@@ -184,7 +184,7 @@ function MyComponent() {
 
 ### Form Validation
 
-폼 검증 결과를 표시할 때 사용합니다.
+Used to display form validation results.
 
 ```tsx
 function LoginForm() {
@@ -218,9 +218,17 @@ function LoginForm() {
         />
       )}
 
-      {success && <Alert color="success" content="로그인이 완료되었습니다." startDecorator={<CheckCircleIcon />} />}
+      {success && (
+        <Alert
+          color="success"
+          content="로그인이 완료되었습니다."
+          startDecorator={<CheckCircleIcon />}
+        />
+      )}
 
-      <form onSubmit={handleSubmit}>{/* 폼 필드들 */}</form>
+      <form onSubmit={handleSubmit}>
+        {/* Form fields */}
+      </form>
     </Stack>
   );
 }
@@ -228,7 +236,7 @@ function LoginForm() {
 
 ### System Notifications
 
-시스템 상태나 알림을 표시할 때 사용합니다.
+Used to display system status or notifications.
 
 ```tsx
 function SystemStatus() {
@@ -276,7 +284,7 @@ function SystemStatus() {
 
 ### Data Processing Status
 
-데이터 처리 상태를 보여줄 때 사용합니다.
+Used to display data processing status.
 
 ```tsx
 function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
@@ -288,18 +296,14 @@ function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
           title: '데이터 처리 중',
           content: `진행률: ${progress}%`,
           startDecorator: <CircularProgress size="sm" />,
-          actions: (
-            <Button size="sm" onClick={onCancel}>
-              취소
-            </Button>
-          ),
+          actions: <Button size="sm" onClick={onCancel}>취소</Button>
         };
       case 'completed':
         return {
           color: 'success',
           title: '처리 완료',
           content: '모든 데이터가 성공적으로 처리되었습니다.',
-          startDecorator: <CheckCircleIcon />,
+          startDecorator: <CheckCircleIcon />
         };
       case 'failed':
         return {
@@ -307,11 +311,7 @@ function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
           title: '처리 실패',
           content: '데이터 처리 중 오류가 발생했습니다.',
           startDecorator: <ErrorIcon />,
-          actions: (
-            <Button size="sm" onClick={onRetry}>
-              다시 시도
-            </Button>
-          ),
+          actions: <Button size="sm" onClick={onRetry}>다시 시도</Button>
         };
       default:
         return null;
@@ -326,7 +326,7 @@ function DataProcessingStatus({ status, progress, onCancel, onRetry }) {
 
 ### Feature Announcements
 
-새로운 기능 소개나 중요한 공지사항을 표시할 때 사용합니다.
+Used to display new feature announcements or important notices.
 
 ```tsx
 function FeatureAnnouncement() {
@@ -357,7 +357,7 @@ function FeatureAnnouncement() {
 
 ### Permission Requests
 
-권한 요청이나 설정 변경을 안내할 때 사용합니다.
+Used to guide permission requests or settings changes.
 
 ```tsx
 function PermissionAlert() {
@@ -398,7 +398,7 @@ function PermissionAlert() {
 
 ### Inline Messages
 
-폼 필드나 특정 섹션에 인라인으로 표시하는 메시지입니다.
+Messages displayed inline within form fields or specific sections.
 
 ```tsx
 function InlineMessages() {
@@ -434,7 +434,7 @@ function InlineMessages() {
 
 ### Dismissible Alerts
 
-사용자가 닫을 수 있는 Alert 구현 예제입니다.
+An implementation example of Alerts that users can dismiss.
 
 ```tsx
 function DismissibleAlerts() {
@@ -445,19 +445,23 @@ function DismissibleAlerts() {
   ]);
 
   const dismissAlert = (id) => {
-    setAlerts((prev) => prev.filter((alert) => alert.id !== id));
+    setAlerts(prev => prev.filter(alert => alert.id !== id));
   };
 
   return (
     <Stack spacing={2}>
-      {alerts.map((alert) => (
+      {alerts.map(alert => (
         <Alert
           key={alert.id}
           color={getAlertColor(alert.type)}
           content={alert.message}
           startDecorator={getAlertIcon(alert.type)}
           actions={
-            <IconButton size="sm" variant="plain" onClick={() => dismissAlert(alert.id)}>
+            <IconButton
+              size="sm"
+              variant="plain"
+              onClick={() => dismissAlert(alert.id)}
+            >
               <CloseIcon />
             </IconButton>
           }
@@ -472,13 +476,13 @@ function DismissibleAlerts() {
 
 ### Content Types
 
-Alert는 다양한 형태의 콘텐츠를 지원합니다.
+Alert supports various forms of content.
 
 ```tsx
-// 단순 텍스트
+// Plain text
 <Alert content="간단한 메시지" />
 
-// React 요소
+// React element
 <Alert
   content={
     <div>
@@ -488,7 +492,7 @@ Alert는 다양한 형태의 콘텐츠를 지원합니다.
   }
 />
 
-// 제목과 내용 분리
+// Separate title and content
 <Alert
   title="업데이트 완료"
   content="애플리케이션이 최신 버전으로 업데이트되었습니다."
@@ -497,7 +501,7 @@ Alert는 다양한 형태의 콘텐츠를 지원합니다.
 
 ### Variants
 
-다양한 시각적 스타일을 제공합니다.
+Provides various visual styles.
 
 ```tsx
 <Stack spacing={2}>
@@ -510,7 +514,7 @@ Alert는 다양한 형태의 콘텐츠를 지원합니다.
 
 ### Sizes
 
-Alert의 크기를 조절할 수 있습니다.
+You can adjust the Alert size.
 
 ```tsx
 <Stack spacing={2}>
@@ -522,7 +526,7 @@ Alert의 크기를 조절할 수 있습니다.
 
 ### Custom Styling
 
-sx prop을 사용해 커스텀 스타일을 적용할 수 있습니다.
+You can apply custom styles using the `sx` prop.
 
 ```tsx
 <Alert
@@ -540,61 +544,65 @@ sx prop을 사용해 커스텀 스타일을 적용할 수 있습니다.
 
 ## Accessibility
 
-Alert 컴포넌트는 다음과 같은 접근성 기능을 제공합니다:
+The Alert component provides the following accessibility features:
 
-### ARIA 속성
+### ARIA Attributes
 
-자동으로 적절한 ARIA 속성이 적용됩니다.
+Appropriate ARIA attributes are applied automatically.
 
-- `role="alert"`: 즉시 사용자에게 알려야 하는 중요한 메시지
-- `aria-live="polite"`: 덜 긴급한 메시지의 경우
+- `role="alert"`: For important messages that should be announced to the user immediately
+- `aria-live="polite"`: For less urgent messages
 
-### 키보드 탐색
+### Keyboard Navigation
 
-Alert 내의 액션 버튼들은 키보드로 탐색 가능합니다.
+Action buttons inside an Alert can be navigated by keyboard.
 
-### 스크린 리더 지원
+### Screen Reader Support
 
-제목과 내용이 적절히 구조화되어 스크린 리더가 읽을 수 있습니다.
+The title and content are structured appropriately for screen readers.
 
 ```tsx
 <Alert
   title="오류 발생"
   content="입력하신 정보를 다시 확인해주세요."
   startDecorator={<ErrorIcon aria-hidden="true" />}
-  actions={<Button aria-label="오류 메시지 닫기">닫기</Button>}
+  actions={
+    <Button aria-label="오류 메시지 닫기">
+      닫기
+    </Button>
+  }
 />
 ```
 
 ## Best Practices
 
-1. **적절한 색상 사용**: 메시지의 성격에 맞는 색상을 사용하세요.
+1. **Use appropriate colors**: Use colors that match the nature of the message.
 
 ```tsx
-// ✅ 좋은 예
+// ✅ Good example
 <Alert color="success" content="저장 완료" />
 <Alert color="danger" content="오류 발생" />
 <Alert color="warning" content="주의 필요" />
 
-// ❌ 나쁜 예
-<Alert color="success" content="오류 발생" /> // 잘못된 색상
+// ❌ Bad example
+<Alert color="success" content="오류 발생" /> // Incorrect color
 ```
 
-2. **명확한 메시지**: 사용자가 이해하기 쉬운 명확한 메시지를 작성하세요.
+2. **Clear messaging**: Write clear messages that are easy for users to understand.
 
 ```tsx
-// ✅ 명확한 메시지
+// ✅ Clear message
 <Alert
   color="danger"
   title="업로드 실패"
   content="파일이 너무 큽니다. 10MB 이하의 파일을 선택해주세요."
 />
 
-// ❌ 모호한 메시지
+// ❌ Vague message
 <Alert content="오류가 발생했습니다." />
 ```
 
-3. **적절한 액션**: 사용자가 취할 수 있는 다음 단계를 제공하세요.
+3. **Appropriate actions**: Provide the next step the user can take.
 
 ```tsx
 <Alert
@@ -608,9 +616,9 @@ Alert 내의 액션 버튼들은 키보드로 탐색 가능합니다.
 />
 ```
 
-4. **과도한 사용 금지**: 너무 많은 Alert가 동시에 표시되지 않도록 하세요.
+4. **Avoid overuse**: Do not show too many Alerts at the same time.
 
-5. **자동 해제**: 일시적인 메시지는 자동으로 해제되도록 구현하세요.
+5. **Auto-dismiss**: Implement temporary messages so they dismiss automatically.
 
 ```tsx
 function AutoDismissAlert() {
@@ -626,22 +634,30 @@ function AutoDismissAlert() {
 
   if (!visible) return null;
 
-  return <Alert color="success" content="저장이 완료되었습니다." startDecorator={<CheckIcon />} />;
+  return (
+    <Alert
+      color="success"
+      content="저장이 완료되었습니다."
+      startDecorator={<CheckIcon />}
+    />
+  );
 }
 ```
 
 ## Performance Considerations
 
-1. **조건부 렌더링**: 필요할 때만 Alert를 렌더링하세요.
+1. **Conditional rendering**: Render Alerts only when needed.
 
-2. **메모이제이션**: 복잡한 Alert 내용은 메모이제이션을 고려하세요.
+2. **Memoization**: Consider memoizing complex Alert content.
 
 ```tsx
-const alertContent = useMemo(() => <ComplexAlertContent data={data} />, [data]);
+const alertContent = useMemo(() => (
+  <ComplexAlertContent data={data} />
+), [data]);
 
-<Alert content={alertContent} />;
+<Alert content={alertContent} />
 ```
 
-3. **배치 처리**: 여러 Alert를 효율적으로 관리하세요.
+3. **Batch handling**: Manage multiple Alerts efficiently.
 
-Alert는 사용자와의 커뮤니케이션에서 핵심적인 역할을 하는 컴포넌트입니다. 적절한 색상, 명확한 메시지, 유용한 액션을 통해 우수한 사용자 경험을 제공할 수 있습니다.
+Alert is a core component for communicating with users. With appropriate colors, clear messaging, and useful actions, it can provide an excellent user experience.

package/dist/components/feedback/CircularProgress.md

@@ -226,6 +226,23 @@ function SubmitButton({ isSubmitting }: { isSubmitting: boolean }) {
 }
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop          | Type                                                           | Default     | Description                                  |
+| ------------- | -------------------------------------------------------------- | ----------- | -------------------------------------------- |
+| `determinate` | `boolean`                                                      | `false`     | Show determinate progress (requires `value`) |
+| `value`       | `number`                                                       | -           | Progress value (0-100) for determinate mode  |
+| `size`        | `'sm' \| 'md' \| 'lg'`                                         | `'md'`      | Progress indicator size                      |
+| `variant`     | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'soft'`    | Visual style                                 |
+| `color`       | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'primary'` | Color scheme                                 |
+| `thickness`   | `number`                                                       | -           | Stroke width of the circle                   |
+| `children`    | `ReactNode`                                                    | -           | Content rendered in the center               |
+| `sx`          | `SxProps`                                                      | -           | Custom styles                                |
+
+> **Note**: CircularProgress also accepts all Joy UI CircularProgress props.
+
 ## Best Practices
 
 1. **Use indeterminate for unknown durations**: When you cannot estimate progress, use the default spinning mode. Switch to determinate only when you can track actual progress.