@ceed/cds 1.22.0 → 1.22.2

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

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Typography 컴포넌트는 텍스트를 표시하기 위한 핵심 컴포넌트입니다. Joy UI의 Typography를 기반으로 하며, 다양한 텍스트 레벨과 스타일을 제공합니다. 제목, 본문, 라벨 등 모든 텍스트 요소에 일관된 타이포그래피를 적용할 수 있습니다.
+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.
 
 ```tsx
 <Typography children="Typography" />
@@ -16,15 +16,15 @@ Typography 컴포넌트는 텍스트를 표시하기 위한 핵심 컴포넌트
 ## Usage
 
 ```tsx
-import { Typography } from '@ceed/cds';
+import { Typography } from '@ceed/ads';
 
 function MyComponent() {
   return (
     <div>
-      <Typography level="h1">메인 제목</Typography>
-      <Typography level="body-md">본문 텍스트입니다.</Typography>
+      <Typography level="h1">Main Heading</Typography>
+      <Typography level="body-md">This is body text.</Typography>
       <Typography level="body-sm" color="neutral">
-        보조 설명 텍스트입니다.
+        This is supporting description text.
       </Typography>
     </div>
   );
@@ -35,18 +35,18 @@ function MyComponent() {
 
 ### Headings
 
-제목을 위한 레벨들입니다. 페이지 구조를 명확하게 나타내는 데 사용됩니다.
+Levels for headings. Use them to clearly define page structure.
 
 ```tsx
-<Typography level="h1">H1 - 페이지 메인 제목</Typography>
-<Typography level="h2">H2 - 섹션 제목</Typography>
-<Typography level="h3">H3 - 하위 섹션 제목</Typography>
-<Typography level="h4">H4 - 세부 제목</Typography>
+<Typography level="h1">H1 - Main page heading</Typography>
+<Typography level="h2">H2 - Section heading</Typography>
+<Typography level="h3">H3 - Subsection heading</Typography>
+<Typography level="h4">H4 - Detailed heading</Typography>
 ```
 
 ### Titles
 
-중요한 제목이나 강조할 텍스트에 사용됩니다.
+Used for important titles or emphasized text.
 
 ```tsx
 <Typography level="title-lg">Large Title</Typography>
@@ -56,13 +56,13 @@ function MyComponent() {
 
 ### Body Text
 
-본문 텍스트를 위한 레벨들입니다. 대부분의 읽기 내용에 사용됩니다.
+Levels for body text. Use these for most readable content.
 
 ```tsx
-<Typography level="body-lg">큰 본문 텍스트</Typography>
-<Typography level="body-md">일반 본문 텍스트</Typography>
-<Typography level="body-sm">작은 본문 텍스트</Typography>
-<Typography level="body-xs">매우 작은 텍스트</Typography>
+<Typography level="body-lg">Large body text</Typography>
+<Typography level="body-md">Regular body text</Typography>
+<Typography level="body-sm">Small body text</Typography>
+<Typography level="body-xs">Extra small text</Typography>
 ```
 
 ## Common Use Cases
@@ -74,22 +74,22 @@ function ArticlePage() {
   return (
     <article>
       <Typography level="h1" sx={{ mb: 2 }}>
-        기사 제목
+        Article Title
       </Typography>
 
       <Typography level="body-sm" color="neutral" sx={{ mb: 3 }}>
-        2024년 1월 15일 · 김철수 작성
+        January 15, 2024 · Written by John Doe
       </Typography>
 
       <Typography level="body-md" sx={{ mb: 2 }}>
-        기사의 본문 내용이 여기에 들어갑니다. 이 텍스트는 읽기 쉬운 크기와 줄 간격을 가지고 있습니다.
+        The main content of the article goes here. This text uses a readable size and line spacing.
       </Typography>
 
       <Typography level="h2" sx={{ mt: 4, mb: 2 }}>
-        섹션 제목
+        Section Title
       </Typography>
 
-      <Typography level="body-md">섹션의 내용이 계속됩니다.</Typography>
+      <Typography level="body-md">The section content continues here.</Typography>
     </article>
   );
 }
@@ -101,15 +101,15 @@ function ArticlePage() {
 <Card>
   <CardContent>
     <Typography level="title-md" sx={{ mb: 1 }}>
-      제품명
+      Product Name
     </Typography>
 
     <Typography level="body-sm" color="neutral" sx={{ mb: 2 }}>
-      카테고리: 전자제품
+      Category: Electronics
     </Typography>
 
     <Typography level="body-md" sx={{ mb: 2 }}>
-      제품에 대한 상세 설명이 여기에 들어갑니다.
+      A detailed description of the product goes here.
     </Typography>
 
     <Typography level="title-lg" color="primary">
@@ -125,41 +125,58 @@ function ArticlePage() {
 <Stack spacing={2}>
   <FormControl>
     <Typography level="title-sm" component="label">
-      사용자 이름
+      Username
     </Typography>
-    <Input placeholder="이름을 입력하세요" />
+    <Input placeholder="Enter your name" />
     <Typography level="body-xs" color="neutral">
-      실명으로 입력해 주세요.
+      Please enter your real name.
     </Typography>
   </FormControl>
 
   <FormControl error>
     <Typography level="title-sm" component="label">
-      이메일 주소
+      Email Address
     </Typography>
     <Input placeholder="email@example.com" />
     <Typography level="body-xs" color="danger">
-      올바른 이메일 형식이 아닙니다.
+      The email format is invalid.
     </Typography>
   </FormControl>
 </Stack>
 ```
 
+> 💡 **Tip: Use built-in form props instead**
+>
+> Input, Select, Textarea, DatePicker 등 Input 계열 컴포넌트는 `label`, `helperText` prop을 자체적으로 지원합니다.
+> Form을 구성할 때는 Typography로 직접 label/helperText를 만드는 것보다 각 컴포넌트의 내장 prop을 사용하는 것이 권장됩니다.
+>
+> ```tsx
+> // ✅ Recommended: 컴포넌트 내장 prop 사용
+> <Input label="Username" helperText="Please enter your real name." />
+>
+> // ❌ Not recommended: Typography로 직접 구성
+> <FormControl>
+>   <Typography level="title-sm" component="label">Username</Typography>
+>   <Input placeholder="Enter your name" />
+>   <Typography level="body-xs" color="neutral">Please enter your real name.</Typography>
+> </FormControl>
+> ```
+
 ### Status and Indicators
 
 ```tsx
 <Stack spacing={2}>
   <Box>
-    <Typography level="body-md">서버 상태:</Typography>
+    <Typography level="body-md">Server Status:</Typography>
     <Typography level="body-md" color="success">
-      정상 운영 중
+      Operating Normally
     </Typography>
   </Box>
 
   <Box>
-    <Typography level="body-md">마지막 업데이트:</Typography>
+    <Typography level="body-md">Last Updated:</Typography>
     <Typography level="body-sm" color="neutral">
-      2분 전
+      2 minutes ago
     </Typography>
   </Box>
 </Stack>
@@ -169,7 +186,7 @@ function ArticlePage() {
 
 ```tsx
 <Stack spacing={1}>
-  <Typography level="title-md">할 일 목록</Typography>
+  <Typography level="title-md">Todo List</Typography>
 
   {todoItems.map((item) => (
     <Box key={item.id} sx={{ pl: 2 }}>
@@ -192,39 +209,39 @@ function ArticlePage() {
 
 ## Colors
 
-Typography는 다양한 색상을 지원합니다:
+Typography supports various colors:
 
 ```tsx
 <Stack spacing={1}>
-  <Typography color="primary">Primary 색상</Typography>
-  <Typography color="neutral">Neutral 색상</Typography>
-  <Typography color="danger">Danger 색상</Typography>
-  <Typography color="success">Success 색상</Typography>
-  <Typography color="warning">Warning 색상</Typography>
+  <Typography color="primary">Primary color</Typography>
+  <Typography color="neutral">Neutral color</Typography>
+  <Typography color="danger">Danger color</Typography>
+  <Typography color="success">Success color</Typography>
+  <Typography color="warning">Warning color</Typography>
 </Stack>
 ```
 
 ## Component Prop
 
-다른 HTML 요소나 React 컴포넌트로 렌더링할 수 있습니다:
+You can render it as a different HTML element or React component:
 
 ```tsx
 <Typography level="h1" component="h2">
-  h2 태그로 렌더링되는 h1 스타일
+  h1 style rendered as an h2 tag
 </Typography>
 
 <Typography level="body-md" component="span">
-  인라인 텍스트
+  Inline text
 </Typography>
 
 <Typography level="title-md" component={Link} href="/page">
-  링크 컴포넌트로 렌더링
+  Rendered as a Link component
 </Typography>
 ```
 
 ## Responsive Typography
 
-반응형 레벨을 사용할 수 있습니다:
+You can use responsive levels:
 
 ```tsx
 <Typography
@@ -233,36 +250,36 @@ Typography는 다양한 색상을 지원합니다:
     fontSize: { xs: '1.5rem', sm: '2rem', md: '2.5rem' },
   }}
 >
-  반응형 제목
+  Responsive Heading
 </Typography>
 ```
 
 ## Best Practices
 
-1. **의미적 구조**: 제목 레벨을 순서대로 사용하여 명확한 문서 구조를 만드세요.
+1. **Semantic Structure**: Use heading levels in order to create a clear document structure.
 
 ```tsx
-// ✅ 올바른 순서
-<Typography level="h1">메인 제목</Typography>
-<Typography level="h2">섹션 제목</Typography>
-<Typography level="h3">하위 섹션</Typography>
-
-// ❌ 잘못된 순서
-<Typography level="h1">메인 제목</Typography>
-<Typography level="h3">섹션 제목</Typography>
+// ✅ Correct order
+<Typography level="h1">Main heading</Typography>
+<Typography level="h2">Section heading</Typography>
+<Typography level="h3">Subsection</Typography>
+
+// ❌ Incorrect order
+<Typography level="h1">Main heading</Typography>
+<Typography level="h3">Section heading</Typography>
 ```
 
-2. **일관성**: 같은 용도의 텍스트에는 같은 레벨을 사용하세요.
+2. **Consistency**: Use the same level for text serving the same purpose.
 
-3. **가독성**: 본문 텍스트에는 적절한 줄 간격과 문단 구분을 제공하세요.
+3. **Readability**: Provide proper line spacing and paragraph separation for body text.
 
-4. **색상 대비**: 충분한 색상 대비를 유지하여 접근성을 보장하세요.
+4. **Color Contrast**: Maintain sufficient color contrast to ensure accessibility.
 
 ## Accessibility
 
-- 적절한 HTML 시맨틱 태그 사용
-- 스크린 리더 지원
-- 키보드 탐색 가능 (링크나 버튼으로 사용될 때)
-- 충분한 색상 대비
+- Use appropriate semantic HTML tags
+- Support screen readers
+- Ensure keyboard navigation (when used as a link or button)
+- Maintain sufficient color contrast
 
-Typography는 사용자 인터페이스에서 정보를 효과적으로 전달하고 시각적 계층 구조를 만드는 데 핵심적인 역할을 합니다. 적절한 레벨과 스타일을 선택하여 읽기 쉽고 접근 가능한 콘텐츠를 만들 수 있습니다.
+Typography plays a key role in effectively conveying information and creating visual hierarchy in user interfaces. By choosing appropriate levels and styles, you can create content that is easy to read and accessible.

package/dist/components/feedback/Modal.md

@@ -4,8 +4,25 @@
 
 The Modal component is a dialog overlay that appears on top of the main content, demanding user attention and interaction. Built on Joy UI's Modal, it is used for displaying critical information, capturing user input, or requiring confirmation before proceeding. Modals block interaction with the underlying page until dismissed, making them ideal for important actions that require focused attention.
 
-```
-<Canvas of={Modal.Playground} />
+```tsx
+<>
+  <Button onClick={() => setOpen(true)}>Open Modal</Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalDialog>
+      <ModalClose />
+      <DialogTitle>Modal Title</DialogTitle>
+      <DialogContent>This is the modal content. You can place any content here.</DialogContent>
+      <DialogActions>
+        <Button variant="solid" onClick={() => setOpen(false)}>
+          Confirm
+        </Button>
+        <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
+          Cancel
+        </Button>
+      </DialogActions>
+    </ModalDialog>
+  </Modal>
+</>
 ```
 
 | Field                        | Description | Default |
@@ -24,15 +41,7 @@ The Modal component is a dialog overlay that appears on top of the main content,
 ## Usage
 
 ```tsx
-import {
-  Modal,
-  ModalDialog,
-  ModalClose,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button,
-} from '@ceed/cds';
+import { Modal, ModalDialog, ModalClose, DialogTitle, DialogContent, DialogActions, Button } from '@ceed/cds';
 
 function MyComponent() {
   const [open, setOpen] = useState(false);
@@ -44,9 +53,7 @@ function MyComponent() {
         <ModalDialog>
           <ModalClose />
           <DialogTitle>Modal Title</DialogTitle>
-          <DialogContent>
-            Place your content here.
-          </DialogContent>
+          <DialogContent>Place your content here.</DialogContent>
           <DialogActions>
             <Button onClick={() => setOpen(false)}>Close</Button>
           </DialogActions>
@@ -57,6 +64,28 @@ function MyComponent() {
 }
 ```
 
+### ModalFrame Usage
+
+`ModalFrame` is a convenience component that combines `ModalDialog` + `ModalClose` + `DialogTitle` + `DialogContent` into a single composable unit.
+It provides a concise way to build modals with a title, close button, and content area.
+
+```tsx
+import { Modal, ModalFrame } from '@ceed/cds';
+
+function DetailModal({ open, onClose }) {
+  return (
+    <Modal open={open} onClose={onClose}>
+      <ModalFrame title="Detail" onClose={onClose}>
+        Content goes here.
+      </ModalFrame>
+    </Modal>
+  );
+}
+```
+
+> **Note**: Connect the same handler to both `Modal`'s `onClose` and `ModalFrame`'s `onClose`.
+> `Modal` handles backdrop click and ESC key, while `ModalFrame` handles the X button click.
+
 ## Examples
 
 ### Basic Modal
@@ -64,29 +93,32 @@ function MyComponent() {
 The basic modal with a simple Sheet for custom layouts.
 
 ```tsx
-<Modal aria-labelledby="modal-title" aria-describedby="modal-desc" open sx={{
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-}}>
-<Sheet variant="outlined" sx={{
-  maxWidth: 500,
-  borderRadius: 'md',
-  p: 3,
-  boxShadow: 'lg'
-}}>
-<ModalClose variant="plain" sx={{
-  m: 1
-}} />
-<Typography component="h2" id="modal-title" level="h4" textColor="inherit" fontWeight="lg" mb={2}>
-  This is the modal title
-</Typography>
-<Typography id="modal-desc" textColor="text.tertiary">
-  Make sure to use <code>aria-labelledby</code> on the modal dialog with an optional{' '}
-  <code>aria-describedby</code> attribute.
-</Typography>
+<>
+  <Button onClick={() => setOpen(true)}>Open Basic Modal</Button>
+  <Modal aria-labelledby="modal-title" aria-describedby="modal-desc" open={open} onClose={() => setOpen(false)} sx={{
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }}>
+  <Sheet variant="outlined" sx={{
+    maxWidth: 500,
+    borderRadius: 'md',
+    p: 3,
+    boxShadow: 'lg'
+  }}>
+  <ModalClose variant="plain" sx={{
+    m: 1
+  }} />
+  <Typography component="h2" id="modal-title" level="h4" textColor="inherit" fontWeight="lg" mb={2}>
+    This is the modal title
+  </Typography>
+  <Typography id="modal-desc" textColor="text.tertiary">
+    Make sure to use <code>aria-labelledby</code> on the modal dialog with an optional{' '}
+    <code>aria-describedby</code> attribute.
+  </Typography>
 </Sheet>
 </Modal>
+</>
 ```
 
 ### Modal Dialog
@@ -94,29 +126,34 @@ The basic modal with a simple Sheet for custom layouts.
 Use ModalDialog for structured dialogs with title, content, and actions.
 
 ```tsx
-<Modal open>
-  <ModalDialog>
-    <DialogTitle>Create new project</DialogTitle>
-    <DialogContent>
-      Fill in the information of the project.
-      <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-      }}>
-      <Stack spacing={4}>
-        <FormControl>
-          <FormLabel>Name</FormLabel>
-          <Input required />
-        </FormControl>
-        <FormControl>
-          <FormLabel>Description</FormLabel>
-          <Input required />
-        </FormControl>
-        <Button type="submit">Submit</Button>
-      </Stack>
-    </form>
-  </DialogContent>
-</ModalDialog>
+<>
+  <Button onClick={() => setOpen(true)}>Open Form Modal</Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalDialog>
+      <ModalClose />
+      <DialogTitle>Create new project</DialogTitle>
+      <DialogContent>
+        Fill in the information of the project.
+        <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
+          event.preventDefault();
+          setOpen(false);
+        }}>
+        <Stack spacing={4}>
+          <FormControl>
+            <FormLabel>Name</FormLabel>
+            <Input required />
+          </FormControl>
+          <FormControl>
+            <FormLabel>Description</FormLabel>
+            <Input required />
+          </FormControl>
+          <Button type="submit">Submit</Button>
+        </Stack>
+      </form>
+    </DialogContent>
+  </ModalDialog>
 </Modal>
+</>
 ```
 
 ### Variants
@@ -126,49 +163,61 @@ Modal dialogs support different visual variants.
 #### Plain Variant
 
 ```tsx
-<Modal open>
-  <ModalDialog variant="plain">
-    <ModalClose />
-    <DialogTitle>Modal Dialog</DialogTitle>
-    <DialogContent>This is a `plain` modal dialog.</DialogContent>
-  </ModalDialog>
-</Modal>
+<>
+  <Button onClick={() => setOpen(true)}>Plain Variant</Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalDialog variant="plain">
+      <ModalClose />
+      <DialogTitle>Modal Dialog</DialogTitle>
+      <DialogContent>This is a `plain` modal dialog.</DialogContent>
+    </ModalDialog>
+  </Modal>
+</>
 ```
 
 #### Outlined Variant
 
 ```tsx
-<Modal open>
-  <ModalDialog variant="outlined">
-    <ModalClose />
-    <DialogTitle>Modal Dialog</DialogTitle>
-    <DialogContent>This is an `outlined` modal dialog.</DialogContent>
-  </ModalDialog>
-</Modal>
+<>
+  <Button onClick={() => setOpen(true)}>Outlined Variant</Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalDialog variant="outlined">
+      <ModalClose />
+      <DialogTitle>Modal Dialog</DialogTitle>
+      <DialogContent>This is an `outlined` modal dialog.</DialogContent>
+    </ModalDialog>
+  </Modal>
+</>
 ```
 
 #### Soft Variant
 
 ```tsx
-<Modal open>
-  <ModalDialog variant="soft">
-    <ModalClose />
-    <DialogTitle>Modal Dialog</DialogTitle>
-    <DialogContent>This is a `soft` modal dialog.</DialogContent>
-  </ModalDialog>
-</Modal>
+<>
+  <Button onClick={() => setOpen(true)}>Soft Variant</Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalDialog variant="soft">
+      <ModalClose />
+      <DialogTitle>Modal Dialog</DialogTitle>
+      <DialogContent>This is a `soft` modal dialog.</DialogContent>
+    </ModalDialog>
+  </Modal>
+</>
 ```
 
 #### Solid Variant
 
 ```tsx
-<Modal open>
-  <ModalDialog variant="solid">
-    <ModalClose />
-    <DialogTitle>Modal Dialog</DialogTitle>
-    <DialogContent>This is a `solid` modal dialog.</DialogContent>
-  </ModalDialog>
-</Modal>
+<>
+  <Button onClick={() => setOpen(true)}>Solid Variant</Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalDialog variant="solid">
+      <ModalClose />
+      <DialogTitle>Modal Dialog</DialogTitle>
+      <DialogContent>This is a `solid` modal dialog.</DialogContent>
+    </ModalDialog>
+  </Modal>
+</>
 ```
 
 ### Alert Dialog
@@ -176,24 +225,29 @@ Modal dialogs support different visual variants.
 For critical confirmations that require explicit user decision.
 
 ```tsx
-<Modal open>
-  <ModalDialog variant="outlined" role="alertdialog">
-    <DialogTitle>
-      <WarningRoundedIcon />
-      Confirmation
-    </DialogTitle>
-    <Divider />
-    <DialogContent>Are you sure you want to discard all of your notes?</DialogContent>
-    <DialogActions>
-      <Button variant="solid" color="danger">
-        Discard notes
-      </Button>
-      <Button variant="plain" color="neutral">
-        Cancel
-      </Button>
-    </DialogActions>
-  </ModalDialog>
-</Modal>
+<>
+  <Button color="danger" onClick={() => setOpen(true)}>
+    Delete Item
+  </Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalDialog variant="outlined" role="alertdialog">
+      <DialogTitle>
+        <WarningRoundedIcon />
+        Confirmation
+      </DialogTitle>
+      <Divider />
+      <DialogContent>Are you sure you want to discard all of your notes?</DialogContent>
+      <DialogActions>
+        <Button variant="solid" color="danger" onClick={() => setOpen(false)}>
+          Discard notes
+        </Button>
+        <Button variant="plain" color="neutral" onClick={() => setOpen(false)}>
+          Cancel
+        </Button>
+      </DialogActions>
+    </ModalDialog>
+  </Modal>
+</>
 ```
 
 ### Layouts
@@ -202,16 +256,207 @@ For critical confirmations that require explicit user decision.
 
 For complex content that requires maximum screen space.
 
-```
-<Canvas of={Modal.FullscreenLayout} />
+```tsx
+<>
+  <Button onClick={() => setOpen(true)}>Open Fullscreen Modal</Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalDialog layout="fullscreen">
+      <ModalClose />
+      <DialogTitle>Fullscreen Modal</DialogTitle>
+      <DialogContent>This modal takes up the entire screen.</DialogContent>
+      <DialogActions>
+        <Button variant="solid" onClick={() => setOpen(false)}>
+          Save
+        </Button>
+      </DialogActions>
+    </ModalDialog>
+  </Modal>
+</>
 ```
 
 ### Nested Modals
 
 Modals can be stacked on top of each other when necessary.
 
+```tsx
+<>
+  <Button onClick={() => setFirstOpen(true)}>Open First Modal</Button>
+  <Modal open={firstOpen} onClose={() => setFirstOpen(false)}>
+    <ModalDialog>
+      <ModalClose />
+      <DialogTitle>First Modal</DialogTitle>
+      <DialogContent>This is the first modal. Click the button below to open a nested modal.</DialogContent>
+      <DialogActions>
+        <Button onClick={() => setSecondOpen(true)}>Open Nested Modal</Button>
+      </DialogActions>
+    </ModalDialog>
+  </Modal>
+  <Modal open={secondOpen} onClose={() => setSecondOpen(false)}>
+    <ModalDialog>
+      <ModalClose />
+      <DialogTitle>Nested Modal</DialogTitle>
+      <DialogContent>This is a nested modal on top of the first one.</DialogContent>
+      <DialogActions>
+        <Button onClick={() => setSecondOpen(false)}>Close</Button>
+      </DialogActions>
+    </ModalDialog>
+  </Modal>
+</>
+```
+
+### ModalFrame
+
+ModalFrame is a convenience component that automatically provides a title, close button, and content area.
+
+#### ModalFrame Playground
+
+```tsx
+<>
+  <Button onClick={() => setOpen(true)}>Open ModalFrame</Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalFrame title="ModalFrame Title" onClose={() => setOpen(false)}>
+      <Typography>
+        ModalFrame automatically composes ModalDialog, ModalClose, DialogTitle, and DialogContent. You only need
+        to provide a title, onClose handler, and children.
+      </Typography>
+    </ModalFrame>
+  </Modal>
+</>
 ```
-<Canvas of={Modal.NestedModals} />
+
+#### titleStartDecorator
+
+Display an icon or decorative element before the title.
+
+```tsx
+<>
+  <Button onClick={() => setOpen(true)}>With Decorator</Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalFrame title="Details" titleStartDecorator={<InfoOutlinedIcon />} onClose={() => setOpen(false)}>
+      <Typography>
+        Use the <code>titleStartDecorator</code> prop to display an icon or element before the title.
+      </Typography>
+    </ModalFrame>
+  </Modal>
+</>
+```
+
+#### Form Content
+
+An inline form pattern where the submit button lives inside the content area.
+
+```tsx
+<>
+  <Button onClick={() => setOpen(true)}>Form in ModalFrame</Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalFrame title="Create Project" onClose={() => setOpen(false)}>
+      <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        setOpen(false);
+      }}>
+      <Stack spacing={2}>
+        <FormControl>
+          <FormLabel>Name</FormLabel>
+          <Input required />
+        </FormControl>
+        <FormControl>
+          <FormLabel>Description</FormLabel>
+          <Input required />
+        </FormControl>
+        <Button type="submit">Submit</Button>
+      </Stack>
+    </form>
+  </ModalFrame>
+</Modal>
+</>
+```
+
+#### Sizes
+
+Compare sm / md / lg sizes side by side.
+
+```tsx
+<Stack direction="row" spacing={2}>
+  <Button size="sm" onClick={() => setOpenSm(true)}>
+    Small
+  </Button>
+  <Button size="md" onClick={() => setOpenMd(true)}>
+    Medium
+  </Button>
+  <Button size="lg" onClick={() => setOpenLg(true)}>
+    Large
+  </Button>
+  <Modal open={openSm} onClose={() => setOpenSm(false)}>
+    <ModalFrame title="Small ModalFrame" size="sm" onClose={() => setOpenSm(false)}>
+      <Typography>This is a small ModalFrame.</Typography>
+    </ModalFrame>
+  </Modal>
+  <Modal open={openMd} onClose={() => setOpenMd(false)}>
+    <ModalFrame title="Medium ModalFrame" size="md" onClose={() => setOpenMd(false)}>
+      <Typography>This is a medium ModalFrame.</Typography>
+    </ModalFrame>
+  </Modal>
+  <Modal open={openLg} onClose={() => setOpenLg(false)}>
+    <ModalFrame title="Large ModalFrame" size="lg" onClose={() => setOpenLg(false)}>
+      <Typography>This is a large ModalFrame.</Typography>
+    </ModalFrame>
+  </Modal>
+</Stack>
+```
+
+#### Custom Content
+
+A layout example suited for displaying detailed information.
+
+```tsx
+<>
+  <Button onClick={() => setOpen(true)}>Custom Content</Button>
+  <Modal open={open} onClose={() => setOpen(false)}>
+    <ModalFrame title="Order Details" onClose={() => setOpen(false)}>
+      <Stack spacing={2}>
+        <Box>
+          <Typography level="title-sm">Order ID</Typography>
+          <Typography level="body-sm">ORD-2024-00123</Typography>
+        </Box>
+        <Divider />
+        <Box>
+          <Typography level="title-sm">Customer</Typography>
+          <Typography level="body-sm">John Doe</Typography>
+        </Box>
+        <Divider />
+        <Box>
+          <Typography level="title-sm">Status</Typography>
+          <Typography level="body-sm" color="success">
+            Completed
+          </Typography>
+        </Box>
+      </Stack>
+    </ModalFrame>
+  </Modal>
+</>
+```
+
+#### Standalone
+
+ModalFrame can be used without a Modal wrapper for embedding dialog-style layouts directly within a page.
+
+> ⚠️ **Important** ⚠️
+>
+> When using ModalFrame without Modal, the parent container **must** provide explicit `width` and `height` values.
+> ModalFrame inherits its dimensions from `ModalDialog`, which normally receives sizing from the Modal overlay.
+> Without these constraints, the component will not render with correct dimensions.
+
+```tsx
+<Box sx={{
+  width: 480,
+  height: 300
+}}>
+<ModalFrame title="Standalone ModalFrame" onClose={() => console.log('close')}>
+  <Typography>
+    ModalFrame used without Modal. The parent container must provide explicit width and height.
+  </Typography>
+</ModalFrame>
+</Box>
 ```
 
 ## When to Use
@@ -249,8 +494,7 @@ function DeleteConfirmation({ item, onDelete, onCancel }) {
         </DialogTitle>
         <Divider />
         <DialogContent>
-          This action cannot be undone. All data associated with this item
-          will be permanently removed.
+          This action cannot be undone. All data associated with this item will be permanently removed.
         </DialogContent>
         <DialogActions>
           <Button variant="solid" color="danger" onClick={onDelete}>
@@ -326,8 +570,7 @@ function TermsModal({ open, onAccept, onDecline }) {
         <DialogTitle>Terms of Service</DialogTitle>
         <DialogContent>
           <Typography level="body-sm">
-            Please read and accept the following terms and conditions before
-            proceeding...
+            Please read and accept the following terms and conditions before proceeding...
           </Typography>
           {/* Terms content */}
         </DialogContent>
@@ -355,11 +598,7 @@ function ImagePreviewModal({ image, open, onClose }) {
     <Modal open={open} onClose={onClose}>
       <ModalDialog layout="center" sx={{ p: 0, overflow: 'hidden' }}>
         <ModalClose sx={{ top: 8, right: 8, zIndex: 1 }} />
-        <img
-          src={image.src}
-          alt={image.alt}
-          style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain' }}
-        />
+        <img src={image.src} alt={image.alt} style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain' }} />
       </ModalDialog>
     </Modal>
   );
@@ -390,22 +629,69 @@ function LoadingModal({ open, message }) {
 Modal uses a composition pattern with multiple sub-components:
 
 ```tsx
-<Modal>                    {/* Overlay and backdrop */}
-  <ModalDialog>            {/* Dialog container */}
-    <ModalClose />         {/* Close button (optional) */}
-    <DialogTitle>          {/* Header */}
+<Modal>
+  {/* Overlay and backdrop */}
+  <ModalDialog>
+    {/* Dialog container */}
+    <ModalClose /> {/* Close button (optional) */}
+    <DialogTitle>
+      {/* Header */}
       Title
     </DialogTitle>
-    <DialogContent>        {/* Body */}
+    <DialogContent>
+      {/* Body */}
       Content goes here
     </DialogContent>
-    <DialogActions>        {/* Footer */}
+    <DialogActions>
+      {/* Footer */}
       <Button>Action</Button>
     </DialogActions>
   </ModalDialog>
 </Modal>
 ```
 
+## Component Roles
+
+| Component         | Role                                                            | When to Use                                                      |
+| ----------------- | --------------------------------------------------------------- | ---------------------------------------------------------------- |
+| **Modal**         | Overlay backdrop, open/close state management                   | Always required as the outermost wrapper                         |
+| **ModalDialog**   | Dialog container (variant/size/layout)                          | When you need direct control over layout                         |
+| **ModalClose**    | Close (X) button in the top-right corner                        | When users should be able to close via a button                  |
+| **ModalOverflow** | Scrollable area                                                 | When content exceeds the viewport                                |
+| **ModalFrame**    | Combines ModalDialog + ModalClose + DialogTitle + DialogContent | When you only need a title + close + content (no action buttons) |
+| **DialogTitle**   | Header area (styled padding)                                    | When composing manually                                          |
+| **DialogContent** | Body area (styled padding)                                      | When composing manually                                          |
+| **DialogActions** | Footer action button area                                       | When confirm/cancel buttons are needed                           |
+
+## Choosing the Right Component
+
+### ModalFrame vs DialogFrame
+
+|                    | ModalFrame                                      | DialogFrame                             |
+| ------------------ | ----------------------------------------------- | --------------------------------------- |
+| Close (X) button   | Built-in                                        | None                                    |
+| Title decorator    | `titleStartDecorator`                           | None                                    |
+| Action button area | None                                            | `actions` prop (required)               |
+| Fullscreen         | `layout="fullscreen"`                           | `fullscreen` prop                       |
+| Best for           | Information display, detail views, inline forms | Confirm/cancel dialogs, decision-making |
+
+### Use ModalFrame when
+
+- You need an informational modal with a close button (detail views, previews)
+- The form's submit button lives inside the content area
+- You need an icon next to the title
+
+### Use DialogFrame when
+
+- Explicit action buttons (confirm/cancel) must be pinned to the bottom
+- User decisions are required (delete confirmation, save confirmation)
+- Only explicit choices should be allowed without a close (X) button
+
+### Use manual composition when
+
+- You need a custom layout that doesn't fit the ModalFrame/DialogFrame pattern
+- You want to use both ModalClose and DialogActions together
+
 ## Props and Customization
 
 ### Modal Props
@@ -427,6 +713,17 @@ Modal uses a composition pattern with multiple sub-components:
 | `size`    | `'sm' \| 'md' \| 'lg'`                                         | `'md'`       | Dialog size  |
 | `layout`  | `'center' \| 'fullscreen'`                                     | `'center'`   | Layout mode  |
 
+### ModalFrame Props
+
+| Prop                  | Type         | Default | Description                                |
+| --------------------- | ------------ | ------- | ------------------------------------------ |
+| `title`               | `ReactNode`  | -       | Title displayed in the header              |
+| `children`            | `ReactNode`  | -       | Body content                               |
+| `titleStartDecorator` | `ReactNode`  | -       | Icon or element displayed before the title |
+| `onClose`             | `() => void` | -       | Callback when the close button is clicked  |
+
+ModalFrame accepts all ModalDialog props (`variant`, `color`, `size`, `layout`, `sx`, etc.).
+
 ### Custom Styling
 
 ```tsx
@@ -465,17 +762,10 @@ Modal components include comprehensive accessibility features:
 - `aria-describedby` connects to DialogContent
 
 ```tsx
-<Modal
-  open={open}
-  onClose={onClose}
-  aria-labelledby="modal-title"
-  aria-describedby="modal-description"
->
+<Modal open={open} onClose={onClose} aria-labelledby="modal-title" aria-describedby="modal-description">
   <ModalDialog>
     <DialogTitle id="modal-title">Accessible Title</DialogTitle>
-    <DialogContent id="modal-description">
-      This content is read by screen readers.
-    </DialogContent>
+    <DialogContent id="modal-description">This content is read by screen readers.</DialogContent>
   </ModalDialog>
 </Modal>
 ```
@@ -504,7 +794,9 @@ Modal components include comprehensive accessibility features:
 ```tsx
 // ✅ Good: Clear action buttons
 <DialogActions>
-  <Button variant="solid" color="danger">Delete</Button>
+  <Button variant="solid" color="danger">
+    Delete
+  </Button>
   <Button variant="plain">Cancel</Button>
 </DialogActions>
 ```
@@ -579,15 +871,11 @@ Use `keepMounted` only when the modal needs to preserve state between openings:
 Memoize modal content when it depends on complex data:
 
 ```tsx
-const modalContent = useMemo(() => (
-  <ComplexContent data={data} />
-), [data]);
+const modalContent = useMemo(() => <ComplexContent data={data} />, [data]);
 
 <Modal open={open} onClose={onClose}>
-  <ModalDialog>
-    {modalContent}
-  </ModalDialog>
-</Modal>
+  <ModalDialog>{modalContent}</ModalDialog>
+</Modal>;
 ```
 
 Modal is a powerful component for focused user interactions. Use it thoughtfully to maintain a smooth user experience while capturing important decisions and inputs.

package/dist/components/inputs/Autocomplete.md

@@ -22,6 +22,11 @@ Autocomplete is an enhanced input component that provides real-time suggestions
 > - **Dropdown**: For action menus, not form value selection
 > - **Input**: For free-text entry without predefined options
 
+> 💡 **Use built-in form props**
+>
+> This component natively supports form elements such as `label` and `helperText` props.
+> When building forms, use these built-in props instead of manually composing labels and helper text with Typography.
+
 ## Usage
 
 ```tsx

package/dist/components/inputs/CurrencyInput.md

@@ -2,6 +2,11 @@
 
 ## Introduction
 
+> 💡 **Form 구성 시 내장 prop 사용을 권장합니다**
+>
+> 이 컴포넌트는 `label`, `helperText` 등의 Form 요소를 자체적으로 지원합니다.
+> Form을 구성할 때 Typography로 별도의 label이나 helperText를 만드는 대신, 컴포넌트의 내장 prop을 사용하세요.
+
 ```tsx
 <CurrencyInput
   name="currency-input"

package/dist/components/inputs/DatePicker.md

@@ -37,6 +37,11 @@ DatePicker is a form input component that allows users to select a single date f
 > - **Date validation**: Invalid date strings can cause unexpected behavior
 > - **Timezone considerations**: Be aware of timezone issues when working with dates
 
+> 💡 **Use built-in form props**
+>
+> This component natively supports form elements such as `label` and `helperText` props.
+> When building forms, use these built-in props instead of manually composing labels and helper text with Typography.
+
 ## Usage
 
 ```tsx

package/dist/components/inputs/DateRangePicker.md

@@ -37,6 +37,11 @@ DateRangePicker is a form input component that allows users to select a date ran
 > - **Start/End validation**: Ensure start date is before end date
 > - **Range span**: Consider maximum range limits for performance and UX
 
+> 💡 **Use built-in form props**
+>
+> This component natively supports form elements such as `label` and `helperText` props.
+> When building forms, use these built-in props instead of manually composing labels and helper text with Typography.
+
 ## Usage
 
 ```tsx

package/dist/components/inputs/FilterableCheckboxGroup.md

@@ -4,6 +4,11 @@
 
 FilterableCheckboxGroup 컴포넌트는 대량의 옵션 중에서 여러 항목을 선택할 수 있는 검색 가능한 체크박스 그룹입니다. 검색 필터링과 가상 스크롤링을 통해 많은 수의 옵션을 효율적으로 처리할 수 있으며, "Select all" 기능으로 일괄 선택이 가능합니다. 필터링, 다중 선택 폼, 설정 화면 등에서 유용하게 사용됩니다.
 
+> 💡 **Form 구성 시 내장 prop 사용을 권장합니다**
+>
+> 이 컴포넌트는 `label`, `helperText` 등의 Form 요소를 자체적으로 지원합니다.
+> Form을 구성할 때 Typography로 별도의 label이나 helperText를 만드는 대신, 컴포넌트의 내장 prop을 사용하세요.
+
 ```tsx
 <FilterableCheckboxGroup
   label="Select Fruits"

package/dist/components/inputs/Input.md

@@ -2,6 +2,11 @@
 
 Input 컴포넌트는 사용자로부터 텍스트 입력을 받기 위한 기본 컴포넌트입니다. 다양한 스타일, 크기 및 기능을 지원합니다.
 
+> 💡 **Form 구성 시 내장 prop 사용을 권장합니다**
+>
+> 이 컴포넌트는 `label`, `helperText` 등의 Form 요소를 자체적으로 지원합니다.
+> Form을 구성할 때 Typography로 별도의 label이나 helperText를 만드는 대신, 컴포넌트의 내장 prop을 사용하세요.
+
 ```tsx
 <Input />
 ```

package/dist/components/inputs/MonthPicker.md

@@ -34,6 +34,11 @@ MonthPicker is a form input component that allows users to select a specific mon
 > - **Format consistency**: Ensure your `value` prop matches the `format` prop
 > - **displayFormat options**: Supports special token `MMMM` for full month names
 
+> 💡 **Use built-in form props**
+>
+> This component natively supports form elements such as `label` and `helperText` props.
+> When building forms, use these built-in props instead of manually composing labels and helper text with Typography.
+
 ## Usage
 
 ```tsx

package/dist/components/inputs/MonthRangePicker.md

@@ -34,6 +34,11 @@ MonthRangePicker is a form input component that allows users to select a range o
 > - **Format consistency**: Both months in the range must match the `format` prop
 > - **Month boundaries**: Consider inclusive vs exclusive range interpretations
 
+> 💡 **Use built-in form props**
+>
+> This component natively supports form elements such as `label` and `helperText` props.
+> When building forms, use these built-in props instead of manually composing labels and helper text with Typography.
+
 ## Usage
 
 ```tsx

package/dist/components/inputs/PercentageInput.md

@@ -2,6 +2,11 @@
 
 ## Introduction
 
+> 💡 **Form 구성 시 내장 prop 사용을 권장합니다**
+>
+> 이 컴포넌트는 `label`, `helperText` 등의 Form 요소를 자체적으로 지원합니다.
+> Form을 구성할 때 Typography로 별도의 label이나 helperText를 만드는 대신, 컴포넌트의 내장 prop을 사용하세요.
+
 ```tsx
 <PercentageInput placeholder="Enter a percentage" />
 ```

package/dist/components/inputs/RadioTileGroup.md

@@ -2,6 +2,11 @@
 
 RadioTileGroup 컴포넌트는 타일 형태의 라디오 옵션을 표시하는 컴포넌트입니다. 각 옵션이 타일 형태로 나타나며, 사용자가 선택할 수 있습니다.
 
+> 💡 **Form 구성 시 내장 prop 사용을 권장합니다**
+>
+> 이 컴포넌트는 `label`, `helperText` 등의 Form 요소를 자체적으로 지원합니다.
+> Form을 구성할 때 Typography로 별도의 label이나 helperText를 만드는 대신, 컴포넌트의 내장 prop을 사용하세요.
+
 ```tsx
 <RadioTileGroup
   options={simpleOptions}

package/dist/components/inputs/Select.md

@@ -35,6 +35,11 @@ The Select component is a form input that allows users to choose one or multiple
 > - More than 20 options → Consider Autocomplete with search
 > - Actions/navigation → Use Dropdown with Menu
 
+> 💡 **Use built-in form props**
+>
+> This component natively supports form elements such as `label` and `helperText` props.
+> When building forms, use these built-in props instead of manually composing labels and helper text with Typography.
+
 ## Usage
 
 ```tsx

package/dist/components/inputs/Textarea.md

@@ -2,6 +2,11 @@
 
 ## Introduction
 
+> 💡 **Use built-in form props**
+>
+> This component natively supports form elements such as `label` and `helperText` props.
+> When building forms, use these built-in props instead of manually composing labels and helper text with Typography.
+
 ```tsx
 <Textarea name="Textarea" />
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/cds",
-  "version": "1.22.0",
+  "version": "1.22.2",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",