@ceed/ads 1.23.1 → 1.23.3

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

@@ -148,6 +148,23 @@ function ArticlePage() {
 </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

package/dist/components/feedback/Dialog.md

@@ -98,12 +98,16 @@ DialogFrame can be used without a Modal wrapper for embedding dialog-style layou
 
 > ⚠️ **Important** ⚠️
 >
-> When using DialogFrame without Modal, the parent container **must** provide explicit `width` and `height` values.
-> DialogFrame inherits its dimensions from `ModalDialog`, which normally receives sizing from the Modal overlay.
-> Without these constraints, the component will not render with correct dimensions.
+> When using DialogFrame without Modal, the parent container **must** meet the following requirements:
+>
+> - `position: 'relative'` — DialogFrame uses absolute positioning internally
+> - Explicit `width` and `height` — `height` must be an absolute value (e.g., `300`, `'400px'`), not a relative value like `%` or `auto`
+>
+> DialogFrame 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={{
+  position: 'relative',
   width: 480,
   height: 300
 }}>
@@ -124,7 +128,7 @@ import { DialogFrame, Button, Box } from '@ceed/ads';
 // Standalone usage requires explicit container dimensions
 function EmbeddedDialog() {
   return (
-    <Box sx={{ width: 480, height: 300 }}>
+    <Box sx={{ position: 'relative', width: 480, height: 300 }}>
       <DialogFrame
         title="Settings"
         actions={

package/dist/components/feedback/Modal.md

@@ -442,12 +442,16 @@ ModalFrame can be used without a Modal wrapper for embedding dialog-style layout
 
 > ⚠️ **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.
+> When using ModalFrame without Modal, the parent container **must** meet the following requirements:
+>
+> - `position: 'relative'` — ModalFrame uses absolute positioning internally
+> - Explicit `width` and `height` — `height` must be an absolute value (e.g., `300`, `'400px'`), not a relative value like `%` or `auto`
+>
+> 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={{
+  position: 'relative',
   width: 480,
   height: 300
 }}>

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/ads",
-  "version": "1.23.1",
+  "version": "1.23.3",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",