@design-ai/cli 4.55.0

package/examples/component-fade.md

@@ -0,0 +1,87 @@
+# `Fade` — spec
+
+> Synthesized from MUI `Fade`. Opacity-only enter/exit transition. The lightest motion primitive — for elements that should appear/disappear without movement (Dialogs' default scrim, Tooltip enter, conditional content).
+
+## When to use
+
+- Mounting/unmounting content where motion would distract.
+- Default transition for Modal / Dialog backdrops.
+- Conditional hide/show of inline content (e.g., loading spinner appearing while data fetches).
+
+## When NOT to use
+
+- Page transitions → use `Slide` (directional context).
+- Stack-of-cards scenarios → use `Grow` (origin-aware scale).
+- Anything where reduced-motion users would still feel jolted (very-small fades are fine; full-screen white-flash fades are not).
+
+## API
+
+```tsx
+<Fade in={open} timeout={200}>
+  <Box>Mounted only when in=true (or with mountOnEnter/unmountOnExit)</Box>
+</Fade>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `in` | `boolean` | required | Trigger enter/exit |
+| `timeout` | `number \| { enter, exit }` | `{ enter: 225, exit: 195 }` | Duration in ms |
+| `easing` | `string \| { enter, exit }` | theme default | CSS easing |
+| `addEndListener` | `(node, done) => void` | — | Custom transition-end logic |
+| `appear` | `boolean` | `true` | Animate on initial mount |
+| `mountOnEnter` | `boolean` | `false` | Don't render until first `in=true` |
+| `unmountOnExit` | `boolean` | `false` | Remove from DOM after exit |
+
+## Tokens consumed
+
+```
+--motion-duration-200         /* default ~225ms ≈ 200 token */
+--motion-easing-out
+--motion-easing-in
+```
+
+## Accessibility
+
+- Respect `prefers-reduced-motion`. MUI's transitions auto-disable when the user has the system preference set (returns immediately to final state).
+- For decorative fades, no aria; for content that becomes meaningful (e.g., error message), pair with `aria-live="polite"` on the destination so the screen reader reads it.
+- Keep timeout under 250ms to avoid feeling sluggish.
+
+## Edge cases
+
+- **Long timeouts** — > 400ms feels slow. For elaborate enters, prefer `Grow` or stage with a stagger.
+- **Reduced-motion users** — verified-correct: MUI snaps to final state. Don't override unless intentional.
+- **Mount + immediate `in=true`** — without `appear=true` (the default), the first render skips animation. Set `appear={false}` to disable.
+
+## Code example
+
+```tsx
+<Fade in={!isLoading} unmountOnExit>
+  <List>...</List>
+</Fade>
+
+// Loading + content swap
+<Box position="relative">
+  <Fade in={isLoading} unmountOnExit>
+    <CircularProgress sx={{ position: 'absolute', inset: 0, m: 'auto' }} />
+  </Fade>
+  <Fade in={!isLoading}>
+    <DataTable rows={rows} />
+  </Fade>
+</Box>
+```
+
+## Don't
+
+- Don't use for fully reusable elements that frequently mount/unmount — adds runtime cost.
+- Don't fade-in critical alerts — they should appear immediately.
+
+## References
+
+- MUI: [`Fade`](../refs/mui/packages/mui-material/src/Fade/)
+
+## Cross-reference
+
+- [`component-grow.md`](component-grow.md)
+- [`component-slide.md`](component-slide.md)
+- [`component-zoom.md`](component-zoom.md)
+- [`knowledge/motion/principles.md`](../knowledge/motion/principles.md)

package/examples/component-feature-grid.md

@@ -0,0 +1,201 @@
+# `FeatureGrid` (3-up / 4-up feature display) — spec
+
+> Marketing-page primitive. Renders 3–6 feature cells in a grid below the hero. Each cell: icon + headline + 1-line description.
+
+## Purpose
+
+Communicate **3–6 things the product does** in a scannable layout. Used after the hero on most landing pages.
+
+## Anatomy
+
+```
+┌──────────────────────────────────────────────────────┐
+│ Section title (optional)                              │
+│ Section sub-headline (optional)                       │
+├──────────────────────────────────────────────────────┤
+│ ┌────────┐  ┌────────┐  ┌────────┐                   │
+│ │ [icon] │  │ [icon] │  │ [icon] │                   │
+│ │        │  │        │  │        │                   │
+│ │ Title  │  │ Title  │  │ Title  │                   │
+│ │        │  │        │  │        │                   │
+│ │ Desc   │  │ Desc   │  │ Desc   │                   │
+│ │        │  │        │  │        │                   │
+│ └────────┘  └────────┘  └────────┘                   │
+└──────────────────────────────────────────────────────┘
+```
+
+## API
+
+```tsx
+<FeatureGrid
+  title="왜 우리 가계부인가요?"
+  features={[
+    {
+      icon: <BankIcon />,
+      title: "30개 은행 자동 연동",
+      description: "한 번 연결하면 자동으로 거래내역이 들어옵니다.",
+    },
+    {
+      icon: <CategoryIcon />,
+      title: "AI 자동 분류",
+      description: "거래마다 카테고리가 자동으로 정리됩니다.",
+    },
+    {
+      icon: <ShieldIcon />,
+      title: "은행급 보안",
+      description: "AES-256 암호화 + 본인인증으로 안전합니다.",
+    },
+  ]}
+  columns={{ default: 1, md: 3 }}
+/>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string \| ReactNode` | — | Section heading |
+| `subtitle` | `string \| ReactNode` | — | Section sub-headline |
+| `features` | `Feature[]` | — | 3–6 features |
+| `columns` | `number \| { default, md, lg, ... }` | `{ default: 1, md: 3 }` | Column count per breakpoint |
+| `cardStyle` | `"plain" \| "outlined" \| "elevated"` | `"plain"` | Visual treatment |
+| `iconStyle` | `"colored-bg" \| "plain" \| "outline"` | `"colored-bg"` | Icon container |
+| `align` | `"left" \| "center"` | `"left"` | Per-cell content alignment |
+
+```ts
+type Feature = {
+  icon?: ReactNode;
+  title: string;
+  description: string;
+  ctaLabel?: string;
+  ctaHref?: string;
+};
+```
+
+## Layout variants
+
+### 3-up grid (default)
+
+Most landing pages. Each cell has equal weight. Mobile: stacks vertically.
+
+### 2-up grid
+
+When you have 4 features. Visually distinct from 3-up (less "feature catalog" feel).
+
+### 4-up grid
+
+Tighter cells. Use when you have exactly 4 strong features. More than 4 → split into multiple sections.
+
+### Alternating "zig-zag"
+
+Each feature alternates: left-image right-text, then right-image left-text. Used for richer feature explanations (1 cell ≈ 1 row, image takes ~50%).
+
+```
+┌──────────────────────────────────────┐
+│ [image]            Title             │
+│                    Description       │
+├──────────────────────────────────────┤
+│ Title              [image]           │
+│ Description                          │
+├──────────────────────────────────────┤
+│ [image]            Title             │
+│                    Description       │
+└──────────────────────────────────────┘
+```
+
+For richer features: zig-zag works. For a tight 3-up: standard grid.
+
+## Cell anatomy
+
+| Slot | Required | Notes |
+| --- | --- | --- |
+| Icon | usually | 32–48px, brand-colored bg or plain |
+| Title | yes | 1 line ideal, weight 600 |
+| Description | yes | 1–2 lines, body color |
+| Optional CTA | optional | "Learn more" link |
+
+For Korean: title 6-12자 typical. Description 한 문장 (~25 자).
+
+## Tokens consumed
+
+```
+--color-bg-default
+--color-bg-elevated          (cardStyle elevated)
+--color-bg-subtle             (icon bg when colored-bg)
+--color-primary-default       (icon color when plain/outline)
+--color-primary-subtle-bg     (icon container bg)
+--color-text-primary          (title)
+--color-text-secondary        (description)
+--space-md, --space-lg, --space-xl
+--radius-md, --radius-lg
+--shadow-card                  (elevated)
+--font-size-base, --font-size-lg, --font-size-xl
+--font-weight-semibold
+```
+
+## Sizes
+
+| Element | Mobile | Desktop |
+| --- | --- | --- |
+| Cell padding | 24px | 32px |
+| Icon size | 32px | 40–48px |
+| Title font | 16px | 18–20px |
+| Description font | 14px | 14–16px |
+| Cell min-height | auto | ~280px (so cells equalize) |
+
+## Accessibility
+
+- Wrap in `<section>` with `<h2>` for section title.
+- Each feature cell: `<article>` with `<h3>` for title.
+- Icons: `aria-hidden="true"` (title carries meaning).
+- For interactive cells (with CTAs): the CTA button gets focus, not the whole cell.
+
+## Korean conventions
+
+- Section title: question or declarative. "왜 우리 가계부인가요?" / "이런 기능들이 있어요"
+- Feature title: 짧은 명사구 ("자동 연동", "AI 분류").
+- Description: 한 문장. 문장형 끝맺음 ("정리됩니다", "안전합니다") matches ~합니다 voice.
+
+## Code example
+
+```tsx
+<FeatureGrid
+  title="왜 우리 가계부인가요?"
+  subtitle="번거로운 가계부 입력은 이제 그만"
+  features={[
+    {
+      icon: <BankIcon />,
+      title: "30개 은행 자동 연동",
+      description: "한 번 연결하면 자동으로 거래내역이 들어옵니다.",
+    },
+    {
+      icon: <CategoryIcon />,
+      title: "AI 자동 분류",
+      description: "거래마다 카테고리가 자동으로 정리됩니다.",
+    },
+    {
+      icon: <ShieldIcon />,
+      title: "은행급 보안",
+      description: "AES-256 암호화 + 본인인증으로 안전합니다.",
+    },
+  ]}
+  columns={{ default: 1, md: 3 }}
+  iconStyle="colored-bg"
+/>
+```
+
+## Don't
+
+- Don't show 7+ features in one grid — overwhelming.
+- Don't use generic stock icons that don't match the feature.
+- Don't make each cell a different visual weight — equal-by-design.
+- Don't put long descriptions (3+ lines). Trim or move to a dedicated explainer page.
+- Don't omit icons for visual rhythm — but don't force icons that aren't meaningful.
+
+## References
+
+No upstream component matches exactly. Each marketing-page builder (Webflow, Framer) has variants. The 3-up grid is the universal pattern.
+
+## Cross-reference
+
+- [`examples/component-hero-block.md`](component-hero-block.md) — hero comes before
+- [`examples/component-testimonial-carousel.md`](component-testimonial-carousel.md) — social proof comes after
+- [`knowledge/patterns/landing-page-patterns.md`](../knowledge/patterns/landing-page-patterns.md) — full landing structure

package/examples/component-field.md

@@ -0,0 +1,266 @@
+# `Field` — spec
+
+> Synthesized from shadcn-ui `field` (an opinionated form-field wrapper). The "Field family" — `Field`, `FieldLabel`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldSet`, `FieldLegend` — ship as a set, providing a consistent layout for labeled form inputs. Pairs with [`examples/component-form.md`](component-form.md) for the broader form composition.
+
+## When to use
+
+- **Wrapping any form input** (Input, Textarea, Select, Checkbox, Switch) with consistent label / description / error layout.
+- **Replacing ad-hoc div+label markup** with a semantic, a11y-correct primitive.
+- **As the building block** for higher-level form patterns (Form skill in design-ai).
+
+When NOT to use:
+- Pure presentation labels (use a `<label>` directly).
+- Complex multi-input compositions — use `FieldGroup`.
+
+## Field family
+
+```
+FieldSet (multi-field section, optional)
+└─ FieldLegend (section heading)
+   └─ FieldGroup (related fields, e.g., First + Last name)
+      └─ Field (single labeled control)
+         ├─ FieldLabel
+         ├─ <Input> | <Select> | <Checkbox> | etc.
+         ├─ FieldDescription (helper text, optional)
+         └─ FieldError (validation message, conditional)
+```
+
+## Anatomy
+
+```
+Email                        ← FieldLabel
+[ user@example.com  ]        ← <Input>
+We'll never share your...    ← FieldDescription
+Email is required            ← FieldError (when invalid)
+```
+
+## API
+
+```tsx
+<Field>
+  <FieldLabel htmlFor="email">Email</FieldLabel>
+  <Input id="email" type="email" {...register("email")} />
+  <FieldDescription>We'll never share your email.</FieldDescription>
+  <FieldError>{errors.email?.message}</FieldError>
+</Field>
+
+<FieldGroup>
+  <Field>
+    <FieldLabel htmlFor="first">First name</FieldLabel>
+    <Input id="first" {...register("first")} />
+  </Field>
+  <Field>
+    <FieldLabel htmlFor="last">Last name</FieldLabel>
+    <Input id="last" {...register("last")} />
+  </Field>
+</FieldGroup>
+
+<FieldSet>
+  <FieldLegend>Notification preferences</FieldLegend>
+  <Field>
+    <FieldLabel htmlFor="email-notif">
+      <Checkbox id="email-notif" />
+      Email notifications
+    </FieldLabel>
+  </Field>
+  <Field>
+    <FieldLabel htmlFor="sms-notif">
+      <Checkbox id="sms-notif" />
+      SMS notifications
+    </FieldLabel>
+  </Field>
+</FieldSet>
+```
+
+## Composition
+
+| Part | Purpose | Semantic element |
+| --- | --- | --- |
+| `Field` | Wrapper for one labeled input | `<div>` |
+| `FieldLabel` | Label for the input | `<label>` |
+| `FieldDescription` | Helper text below | `<p>` (linked via `aria-describedby`) |
+| `FieldError` | Validation error | `<p role="alert">` (linked via `aria-describedby`) |
+| `FieldGroup` | Visual grouping of related fields (no semantic) | `<div role="group">` |
+| `FieldSet` | Semantic group with shared legend | `<fieldset>` |
+| `FieldLegend` | Heading for `FieldSet` | `<legend>` |
+
+## Variants
+
+### Layout direction
+
+| Layout | Use |
+| --- | --- |
+| Vertical (default) | Label above input; mobile-friendly |
+| Horizontal | Label left of input (rare; tight tabular forms) |
+| Inline | Single-line for short inputs (search, toggle) |
+
+```tsx
+<Field orientation="horizontal">
+  <FieldLabel>Country</FieldLabel>
+  <Select>...</Select>
+</Field>
+```
+
+### Required indicator
+
+```tsx
+<Field required>
+  <FieldLabel>Email *</FieldLabel>
+  <Input ... />
+</Field>
+```
+
+The `required` prop on Field auto-adds:
+- `aria-required="true"` on the wrapped input
+- Visual asterisk on FieldLabel
+- Optional: required marker on the right OR text "(required)"
+
+### Optional indicator (Korean / Japanese style)
+
+For markets that mark optional vs required: `<Field optional>` adds "(선택)" / "(任意)".
+
+## States
+
+| State | Visual |
+| --- | --- |
+| Default | Resting |
+| Focused | Input shows focus ring |
+| Filled | Input has value |
+| Disabled | Reduced opacity; input non-interactive |
+| Read-only | No focus ring; muted bg |
+| Error | Input border red; FieldError visible; FieldDescription dims |
+| Success | Optional checkmark icon (post-validation) |
+
+## Tokens consumed
+
+```
+--field-gap                        (vertical space between Label / Input / Description)
+--field-label-fg
+--field-description-fg             (typically muted)
+--field-error-fg                   (red)
+--field-asterisk-fg                (required marker color)
+--space-xs, --space-sm, --space-md
+--font-size-sm                     (Label, Description, Error)
+--font-weight-medium               (Label)
+--motion-fast                      (state transitions)
+```
+
+## Accessibility
+
+- `FieldLabel` uses real `<label htmlFor="...">`. Click on label focuses input.
+- `FieldDescription` linked via `aria-describedby="<id>-desc"`.
+- `FieldError` linked via `aria-describedby="<id>-err"`. When error visible, both descriptions can be linked: `aria-describedby="<id>-desc <id>-err"`.
+- `aria-invalid="true"` on input when in error state.
+- `FieldSet` is a real `<fieldset>` — screen readers announce the legend before each input within it. Critical for grouped checkboxes / radios.
+- Required: prefer `aria-required` over relying on visual asterisk alone.
+- Touch targets: input ≥ 44pt for primary mobile.
+
+## Korean conventions
+
+```
+이메일                          ← FieldLabel
+[ user@example.com  ]
+이메일은 공유되지 않아요.        ← FieldDescription (해요체)
+이메일을 입력해 주세요.          ← FieldError
+```
+
+- 해요체 ("...해요") for casual brand voice
+- 합쇼체 ("...해 주세요") for formal / banking
+- "(선택)" for optional, "(필수)" or "*" for required
+- Avoid mixing levels within one form
+
+## Code example — sign-up form
+
+```tsx
+function SignupForm() {
+  const { register, handleSubmit, formState: { errors } } = useForm<SignupSchema>({
+    resolver: zodResolver(signupSchema),
+  });
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Field required>
+        <FieldLabel htmlFor="email">이메일</FieldLabel>
+        <Input
+          id="email"
+          type="email"
+          autoComplete="email"
+          {...register("email")}
+          aria-invalid={!!errors.email}
+        />
+        <FieldDescription>로그인 시 사용해요.</FieldDescription>
+        {errors.email && <FieldError>{errors.email.message}</FieldError>}
+      </Field>
+
+      <Field required>
+        <FieldLabel htmlFor="password">비밀번호</FieldLabel>
+        <Input
+          id="password"
+          type="password"
+          autoComplete="new-password"
+          {...register("password")}
+          aria-invalid={!!errors.password}
+        />
+        <FieldDescription>8자 이상, 영문 + 숫자 + 특수문자 포함.</FieldDescription>
+        {errors.password && <FieldError>{errors.password.message}</FieldError>}
+      </Field>
+
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor="first">이름</FieldLabel>
+          <Input id="first" {...register("first")} />
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="last">성</FieldLabel>
+          <Input id="last" {...register("last")} />
+        </Field>
+      </FieldGroup>
+
+      <FieldSet>
+        <FieldLegend>알림 설정</FieldLegend>
+        <Field>
+          <FieldLabel htmlFor="marketing">
+            <Checkbox id="marketing" {...register("marketing")} />
+            마케팅 정보 수신 동의 (선택)
+          </FieldLabel>
+        </Field>
+      </FieldSet>
+
+      <Button type="submit">가입하기</Button>
+    </form>
+  );
+}
+```
+
+## Edge cases
+
+- **Multiple errors on same field**: show only the most-relevant; or stack with separator.
+- **Async validation**: show "Checking..." state while validating; transition to FieldError or success.
+- **Input is wrapped in another component** (e.g., Combobox, DatePicker): Field still works; pass id via Combobox's render prop.
+- **Field with multiple inputs** (e.g., date split into 3 inputs): use FieldGroup; each input has its own aria-labelled-by referencing FieldLabel.
+- **Help icon next to label**: render Tooltip trigger in FieldLabel; tooltip content = additional context.
+- **Reduced motion**: skip transition on error appearance.
+
+## Don't
+
+- Don't use plain `<div>` + `<label>` for form fields. Use Field — a11y baked in.
+- Don't omit FieldDescription for non-obvious inputs. Help users.
+- Don't rely on placeholder as label. Placeholder ≠ label.
+- Don't show error before user has interacted with the field. On-blur or on-submit, not on-change.
+- Don't use FieldSet for visual grouping only. Use FieldGroup. FieldSet has semantic meaning.
+- Don't use red text alone for error — pair with icon for color-blind users.
+- Don't auto-focus on error after submit if there are multiple errors — focus on first invalid field, but only one.
+
+## References
+
+- shadcn-ui: [`field`](../refs/shadcn-ui/apps/v4/registry/new-york-v4/ui/field.tsx)
+- WAI-ARIA Authoring Practices: form labeling
+- Native HTML: `<fieldset>`, `<legend>`, `<label>`
+
+## Cross-reference
+
+- [`examples/component-form.md`](component-form.md) — Form composition (uses Field internally)
+- [`examples/component-form-controls.md`](component-form-controls.md) — Switch / Checkbox / Radio (Field-compatible)
+- [`examples/component-input.md`](component-input.md) — most common Field child
+- [`knowledge/patterns/form-design.md`](../knowledge/patterns/form-design.md)
+- [`knowledge/i18n/korean-document-style.md`](../knowledge/i18n/korean-document-style.md) — 해요체 / 합쇼체

package/examples/component-filled-input.md

@@ -0,0 +1,114 @@
+# `FilledInput` — spec
+
+> Synthesized from MUI `FilledInput`. Filled-background input variant — denser, less prominent than `OutlinedInput`. Useful inside cards or dense forms where 30+ borders would create visual noise.
+
+## When to use
+
+- Dense data-entry forms (10+ fields per screen).
+- Inputs inside cards with already-active borders (avoids "border on border").
+- Mobile-first layouts where the filled look reads as a touch target.
+
+## When NOT to use
+
+- General-purpose product UI — `OutlinedInput` has the cleanest "this is editable" affordance.
+- Forms with many error states — error styling is more legible against an outlined background.
+
+## Anatomy
+
+```
+┌─ Label (floats up on focus) ─────────────┐
+│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│   ← filled bg
+│ ░Input value                            ░│
+│ ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔│   ← bottom rule (focus → brand)
+└─────────────────────────────────────────────┘
+```
+
+## API
+
+```tsx
+<FormControl variant="filled" fullWidth>
+  <InputLabel htmlFor="name">이름</InputLabel>
+  <FilledInput
+    id="name"
+    value={name}
+    onChange={(e) => setName(e.target.value)}
+  />
+</FormControl>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `value` / `defaultValue` | `string` | — | Controlled / uncontrolled |
+| `disableUnderline` | `boolean` | `false` | Hide the bottom rule |
+| `hiddenLabel` | `boolean` | `false` | Drop the label region (use placeholder only) |
+
+Inherits everything from `InputBase` — see [`component-input-base.md`](component-input-base.md).
+
+## States
+
+| State | Visual |
+| --- | --- |
+| Default | bg-subtle fill, neutral underline |
+| Hover | bg-subtle (slightly darker) |
+| Focus | brand underline (animates from neutral) |
+| Error | error underline + label color |
+| Disabled | muted bg + fg |
+
+## Tokens consumed
+
+```
+--input-bg-filled         /* surface-subtle */
+--input-bg-filled-hover
+--input-underline
+--input-underline-focus   /* brand */
+--input-underline-error
+--input-min-height-48     /* taller than outlined to compensate for filled aesthetic */
+```
+
+## Accessibility
+
+Same a11y contract as `OutlinedInput`:
+- `htmlFor` ↔ `id` association via `InputLabel`.
+- `aria-required`, `aria-invalid`, `aria-describedby` per state.
+- Touch target: ≥ 48px (default — `FilledInput` is taller than `OutlinedInput` by design).
+
+## Edge cases
+
+- **Mixing variants on one screen** — pick one. Mixed outlined + filled looks haphazard.
+- **`hiddenLabel`** — only acceptable when context is unmistakable (e.g., a search field labeled by a magnifying-glass icon nearby with `aria-label`).
+- **Korean labels** — same density consideration as outlined; expect labels to need 10-15% more horizontal room than Latin.
+
+## Code example
+
+```tsx
+<Stack direction="column" gap={1.5}>
+  <FormControl variant="filled" fullWidth>
+    <InputLabel htmlFor="name">이름</InputLabel>
+    <FilledInput id="name" />
+  </FormControl>
+  <FormControl variant="filled" fullWidth>
+    <InputLabel htmlFor="email">이메일</InputLabel>
+    <FilledInput id="email" type="email" />
+  </FormControl>
+  <FormControl variant="filled" fullWidth>
+    <InputLabel htmlFor="phone">전화번호</InputLabel>
+    <FilledInput id="phone" type="tel" />
+  </FormControl>
+</Stack>
+```
+
+## Don't
+
+- Don't mix with `OutlinedInput` on the same form.
+- Don't use `disableUnderline=true` without an alternative focus indicator — accessibility break.
+- Don't use without `InputLabel` (or `inputProps.aria-label`) — silent accessibility miss.
+
+## References
+
+- MUI: [`FilledInput`](../refs/mui/packages/mui-material/src/FilledInput/)
+
+## Cross-reference
+
+- [`component-input-base.md`](component-input-base.md)
+- [`component-outlined-input.md`](component-outlined-input.md)
+- [`component-form-control.md`](component-form-control.md)