sellmate-design-system-react 9.0.0-beta.64 → 9.0.0-beta.66

package/AGENTS.md

@@ -46,7 +46,7 @@
 | **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SLauncherListBox`(런처 버튼을 눌러 뜨는 서비스 목록) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SLoginCard`(통합 계정 로그인 화면의 카드) `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
 | **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다. `stacked` 로 항목 안의 구성까지) `SLineChart`(꺾은선 그래프 — 순서가 있는 항목의 추이를 본다. `area` 로 크기까지, `stacked` 로 구성까지) `SPieChart`(원그래프 — 한 시점의 전체를 몇 개의 몫으로 나눈다) `SDonutChart`(도넛 그래프 — 가운데가 빈 원그래프. 구멍에 글자를 두지 않는다) |
-| **표시·상태** | `STag` `SBadge` `SIcon` `SLogo`(브랜드 로고를 아이콘처럼 — size 는 높이다) `SImage` `SCallout` `SGuide` |
+| **표시·상태** | `STag` `SBadge` `SIcon` `SLogo`(브랜드 로고를 아이콘처럼 — size 는 높이다) `SImage` `SCallout` `SContextAlert`(한 줄짜리 맥락 알림 — 오른쪽에 후속 동작 버튼) `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
 | **모달** | `SModal.confirm()` `SModal.create()` + `SActionModal` `SConfirmModal` `SModalOutlet`(앱 루트 1회) |
@@ -167,7 +167,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 층 | 무엇인가 | 컴포넌트 |
 | --- | --- | --- |
 | **셸** | 앱 전체 뼈대. 페이지가 바뀌어도 남는다 | `SLayout` `SGnb` `SGnbSystem`(GNB 맨 아래 판 · 전폭 상단바 오른쪽 끝) `SPage` `SPageHeader`(`SLayout` 안에서 `SPage` 앞에 둔다) |
-| **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SChatMessage` `SChatSystemMessage` `SChatInput` `SLoginCard`(유일하게 `SPage` 밖에 선다 — 로그인 화면 자체가 자기 자리다, §4-6) `SForm` `SSplitter` `SScrollArea` `SCalendarBoard` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `SBarChart` `SLineChart` `SPieChart` `SDonutChart` `STabs` `SStepper` `SPagination` `SDivider` |
+| **블록** | `SPage` 의 직계 자식. 페이지를 세로로 쌓는 단위 | `SSectionHeaderCard` `SCard` `SChatMessage` `SChatSystemMessage` `SChatInput` `SLoginCard`(유일하게 `SPage` 밖에 선다 — 로그인 화면 자체가 자기 자리다, §4-6) `SForm` `SSplitter` `SScrollArea` `SCalendarBoard` `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SExpansionList` `SDraggableList` `STree` `SCallout` `SContextAlert` `SBarChart` `SLineChart` `SPieChart` `SDonutChart` `STabs` `SStepper` `SPagination` `SDivider` |
 | **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `SMeatballButton` `SDropdownButton` `SSystemActionButton` `SField` `SInput` `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SSwitch` `SToggle` `SChipInput` `SBarcodeInput` `SFilePicker` `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` `SCalendar` `SListItem` `SExpansionItem` `SDraggableItem` `SChatAttachedFile` `SChatFile` `SImage` `SLinearProgress` `SCircleProgress` |
 | **인라인** | 텍스트 흐름·셀·라벨 안에 섞인다. 혼자 블록이 되지 않는다 | `STag` `SBadge` `SIcon` `SLogo` `STextLink` `SChip` |
 | **레이어** | 문서 흐름 **밖**에 떠서 그려진다. 어느 층에서 띄우든 레이아웃에 영향이 없다 | `SModal` `SActionModal` `SConfirmModal` `SPopup` `SDrawer` `SPopover` `STooltip` `SPortal` `SAccountListBox`(계정 행에 붙어 뜬다 — 직접 띄우지 않는다) `SLauncherListBox`(런처 버튼에 붙어 뜬다 — 직접 띄우지 않는다) `SToast` `SLoadingModal` `SLoadingContainer` `SGuide` |
@@ -642,6 +642,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 하려는 일 | 컴포넌트 | 갈림 |
 | --- | --- | --- |
 | 화면에 상시 노출되는 안내·경고를 둔다 | `SCallout` | §3-2 |
+| 한 자리에 붙는 **한 줄** 알림 + 후속 동작 버튼을 둔다 | `SContextAlert` | §3-2 |
 | 작업 결과를 일시적으로 알린다 | `SToast` | §3-2 |
 | 기능 온보딩·도움말을 붙인다 | `SGuide` | §3-2 |
 
@@ -675,7 +676,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 | 상황 | 사용 |
 | --- | --- |
-| 화면에 **상시 노출**되는 안내·경고 문구 | `SCallout` — `type` + `message` 배열(중첩 = 들여쓰기) |
+| 화면에 **상시 노출**되는 안내·경고 문구 (여러 줄 목록) | `SCallout` — `type` + `message` 배열(중첩 = 들여쓰기) |
+| 한 자리의 상태를 **한 줄**로 알리고, 필요하면 후속 동작 버튼을 붙임 | `SContextAlert` — `intent` + `messages` 배열(한 줄씩) + `action` 슬롯 |
 | 작업 결과를 **일시적으로** 알림 | `SToast` (+ 루트에 `SToastContainer`) |
 | 진행 전 **확인/취소**를 받아야 할 때 | `SModal.confirm({...}).onOk(...)` — 무엇을 할지가 모달 밖에서 이미 정해진 경우다 (§3-3-2) |
 | 특정 UI 요소에 대한 **온보딩·기능 안내** | `SGuide` |
@@ -689,6 +691,22 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | `white` | 회색 면 위 (`background="neutral"`·`"screen"`) — 그 위에서는 `default` 가 배경에 묻힌다 |
 | `danger` | 경고. 좌측에 "주의사항" 타이틀이 붙으므로 단순 안내에는 쓰지 않는다. 주변에 이미 경고 맥락(제목 등)이 있어 타이틀이 중복되면 `showTitle={false}` 로 타이틀만 뺀다 — 경고 면은 유지된다 |
 
+#### 3-2-1. SCallout vs SContextAlert
+
+**둘은 면·테두리·패딩이 같은 상자다.** 색만 보고 고르면 같은 화면에서 같은 모양의 상자가 서로 다른 규칙으로 늘어난다. **무엇을 담는지**로 고른다.
+
+| | `SCallout` | `SContextAlert` |
+| --- | --- | --- |
+| 담는 것 | 읽을 **문장들** — 여러 줄, 중첩 들여쓰기 | 지금 상태 **한 줄** |
+| 후속 동작 | 없다 | `action` 슬롯에 버튼 하나 |
+| 고르는 축 | `type` — **놓이는 면**이 정한다(위 표) | `intent` — **알림의 성격**이 정한다 |
+| 자리 | 페이지·섹션 머리의 상시 안내 | 그 알림이 가리키는 **대상 바로 옆** |
+
+- **`SContextAlert` 는 대상 옆에 둔다.** 페이지 맨 위에 놓고 "아래 어딘가의 이야기"를 하면 그건 `SCallout` 이 할 일이다.
+- **`action` 에는 `SButton size="xs"` 를 넣는다.** 그 높이가 곧 상자의 콘텐츠 높이라, 더 큰 버튼을 넣으면 상자가 세로로 늘어나 한 줄 알림의 리듬이 깨진다. 버튼이 둘 이상 필요하면 한 줄로 끝날 이야기가 아니다 — 모달(§3-3)을 본다.
+- **`messages` 는 줄을 나누는 용도지 문장을 자르는 용도가 아니다.** 한 문장이 길어 넘치는 것은 그냥 두면 줄바꿈된다. 서로 다른 사실일 때만 배열로 나눈다.
+- **아이콘은 기본값을 그대로 둔다.** 인텐트 6종이 같은 아이콘을 쓰는 것이 시안의 규칙이다. `icon` 을 바꾸면 면의 색과 아이콘의 뜻이 따로 논다.
+
 ### 3-3. 플로팅/오버레이류
 
 | 상황 | 사용 |
@@ -2459,6 +2477,13 @@ const [initialDense] = useState(() => loadPref('list.dense', true));
 - **버튼 순서: 취소·닫기가 왼쪽, 저장·등록·수정·삭제가 오른쪽.** 이 순서는 모든 화면에서 동일하다.
 - **폼 페이지도 `contentHeight="fill"` 이 기본이다**(§2-2). 폼이 길어 페이지가 실제로 스크롤되는 화면에서만 `auto` + `scrollEndSpacing` 을 켠다.
 - **필드 폭은 등급으로 준다** — `width="md"` 처럼 `'xs' | 'sm' | 'md' | 'lg' | 'xl'` 중 하나다. px 를 직접 적지 않는다. 등급은 `maxLength`(= 스키마 상한)로 고르고, 상한이 `xl` 을 넘거나 상한이 없으면 `width="100%"` 로 행 전체를 쓴다 (§6 `field-width-grade`).
+- **이 골격에서는 `labelPosition` 을 쓰지 않는다.** 라벨은 컨트롤이 아니라 `SKeyValueTable` 의 왼쪽 칸이 그리므로, 컨트롤에는 `label` 자체가 가지 않아 아무 일도 일어나지 않는다.
+
+**라벨을 컨트롤 위에 두는 자리 — `labelPosition="top"`.** 표 밖에서 컨트롤이 **제 `label` 을 직접 들고 설 때만** 쓴다. 모달 안의 짧은 폼, 좁은 단처럼 라벨과 컨트롤을 한 줄에 같이 세우면 컨트롤이 너무 좁아지는 자리다. `SField` 를 쓰는 입력 컨트롤 전부가 같은 이름으로 받는다.
+
+- **한 폼 안에서는 섞지 않는다.** 라벨 시작점과 컨트롤 윗변이 행마다 어긋나 세로 정렬이 깨진다. 한 폼은 통째로 `left`(기본) 이거나 통째로 `top` 이다.
+- **간격을 직접 주지 않는다** — 라벨과 컨트롤 사이는 `SField` 가 `--sys-space-field-vertical-gap` 으로 넣는다. `size` 에 따라 달라지지 않는다.
+- **`labelWidth`·`labelHeight` 는 함께 쓰지 않는다.** 둘 다 라벨을 열로 줄 세우는 장치라 위에 선 라벨에는 뜻이 없고, 주더라도 무시된다. (`addonLabel` 의 폭에는 그대로 적용된다 — addon 은 테두리 박스 안이라 배치와 무관하다.)
 
 **날짜·시간 피커는 값 길이에 맞춘 폭 상한을 스스로 갖는다.** 표가 모든 컨트롤에 `width="100%"` 를 넘기지만 이 넷만 자기 상한에서 멈춘다 — `SDatePicker` · `SDateRangePicker` · `STimePicker` · `STimeRangePicker`. 그래서 한 행에 이런 필드가 섞이면 **왼쪽 끝만 맞고 오른쪽 끝이 어긋나** 보인다. 이것이 폼이 들쭉날쭉해 보이는 가장 흔한 원인이다.
 

package/dist/components/SBarChart/README.md

@@ -10,6 +10,8 @@
 |------|------|---------|-------------|
 | `categories` | `string[]` | — | 가로축(가로 막대면 세로축)에 놓일 항목 이름 |
 | `series` | `SBarChartSeries[]` | — | 계열 목록. 각 `data` 는 `categories` 와 같은 순서다 |
+| `title?` | `string` | — | 차트 제목 — 왼쪽 위에 놓인다 |
+| `unit?` | `string` | — | 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 |
 | `direction?` | `SBarChartDirection` | `'vertical'` | 막대가 자라는 방향 |
 | `stacked?` | `boolean` | `false` | 계열을 나란히 놓는 대신 **한 막대에 쌓는다**. 항목의 크기와 그 안의 구성을 함께 볼 때 쓴다. 첫 계열이 기준선에 붙고, 값 라벨은 조각마다가 아니라 **항목의 합계**를 한 번 적는다. 음수는 0 아래로 따로 쌓이며, 값 축도 개별 값이 아닌 항목별 합계로 잡힌다 |
 | `palette?` | `SBarChartPalette` | `'default'` | 색 팔레트. 계열이 하나면 계열 대신 **항목**마다 색이 바뀐다. `custom` 일 때만 `colors` 를 본다 |

package/dist/components/SBarChart/SBarChart.d.ts

@@ -46,6 +46,10 @@ export interface SBarChartProps {
     categories: string[];
     /** 계열 목록. 각 `data` 는 `categories` 와 같은 순서다 */
     series: SBarChartSeries[];
+    /** 차트 제목 — 왼쪽 위에 놓인다 */
+    title?: string;
+    /** 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 */
+    unit?: string;
     /** 막대가 자라는 방향 */
     direction?: SBarChartDirection;
     /**

package/dist/components/SBarChart/barChart.config.d.ts

@@ -17,15 +17,22 @@ export declare const BAR_GAP = 6;
 export declare const GROUP_PADDING_MIN = 8;
 /** 막대 묶음 좌우 여백의 상한(px) — 시안 `bar group paddingX max : 24`. */
 export declare const GROUP_PADDING_MAX = 24;
-/** 막대 끝과 값 라벨 사이 간격(px) — 시안 실측. */
-export declare const VALUE_LABEL_GAP = 6;
+/**
+ * 막대 끝과 값 라벨 사이 간격(px) — 토큰 `chart.dataLabel.gap`(점·막대 ↔ 값 라벨).
+ * 라벨 자리를 좌표로 잡으므로 `var()` 가 아니라 같은 값을 손으로 맞춰 둔다.
+ */
+export declare const VALUE_LABEL_GAP = 4;
 /**
  * 막대 모서리 반경(px). SVG 경로를 좌표로 계산하므로 `var(--cmp-chart-bar-radius)`
  * 문자열이 아니라 **숫자**여야 한다 — 시안의 clipPath 도 같은 이유로 8 을 좌표에
  * 박아 두고 있다. 토큰(`chart.bar.radius`)과 같은 값을 손으로 맞춰 둔 유일한 자리다.
  */
 export declare const BAR_RADIUS = 8;
-export declare const BAR_OPACITY_DEFAULT = "var(--cmp-chart-bar-opacity-default)";
+/**
+ * 기본 불투명도는 막대만의 값이 아니라 차트 공용(`chart.opacity.default`)이다 —
+ * 도넛·파이도 같은 값을 쓴다. 흐려진 상태만 막대 고유(`chart.bar.opacity.dimmed`)다.
+ */
+export declare const BAR_OPACITY_DEFAULT = "var(--cmp-chart-opacity-default)";
 export declare const BAR_OPACITY_DIMMED = "var(--cmp-chart-bar-opacity-dimmed)";
 /**
  * 호버한 항목의 막대 — 완전히 불투명하다.
@@ -34,12 +41,12 @@ export declare const BAR_OPACITY_DIMMED = "var(--cmp-chart-bar-opacity-dimmed)";
  * 디자인 토큰으로 두지 않는 쪽이 맞으므로, 여기서는 토큰 대신 1 을 쓴다.
  */
 export declare const BAR_OPACITY_HOVER = 1;
-export declare const BAR_DATA_LABEL_COLOR = "var(--cmp-chart-bar-dataLabel-color-default)";
+export declare const BAR_DATA_LABEL_COLOR = "var(--cmp-chart-dataLabel-color-default)";
 /**
  * 값 라벨의 타이포 — 호버한 항목만 굵고 크게 뜬다.
  *
  * 타이포 토큰은 `--cmp-*` 변수로 나오지 않고 `.typo-*` 유틸로만 나오므로,
- * `chart.bar.dataLabel.typography.default`(`body.sm.medium`) ·
+ * `chart.dataLabel.typography.default`(`body.sm.medium`) ·
  * `.hover`(`body.md.bold`) 에 대응하는 클래스를 여기서 짝지어 둔다.
  */
 export declare const BAR_DATA_LABEL_TYPO = "typo-body-sm-medium";

package/dist/components/SBarcodeInput/README.md

@@ -25,6 +25,7 @@
 | `inputClassName?` | `string` | — |  |
 | `inputStyle?` | `CSSProperties` | — |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SBarcodeInput/SBarcodeInput.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode } from 'react';
-import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
@@ -32,6 +32,13 @@ export interface SBarcodeInputProps {
     inputClassName?: string;
     inputStyle?: CSSProperties;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;

package/dist/components/SChipInput/README.md

@@ -27,6 +27,7 @@
 | `loadingRecommendedItems?` | `boolean` | `false` |  |
 | `dropdownMinWidth?` | `number \| string` | `200` | 드롭다운 최소 너비 (숫자=px) |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `hint?` | `string` | — |  |
 | `errorMessage?` | `string` | — |  |

package/dist/components/SChipInput/SChipInput.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import { type SFieldSize, type SFieldStatus } from '../SField';
+import { type SFieldSize, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
@@ -48,6 +48,13 @@ export interface SChipInputProps {
     /** 드롭다운 최소 너비 (숫자=px) */
     dropdownMinWidth?: number | string;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     hint?: string;
     errorMessage?: string;

package/dist/components/SContextAlert/README.md

@@ -0,0 +1,51 @@
+# SContextAlert
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SContextAlert
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `intent?` | `SContextAlertIntent` | `'default'` | 알림의 성격 — 면과 테두리 색이 바뀐다. 아이콘과 본문색은 인텐트와 무관하게 같다. `default` 안내 · `danger` 오류 · `warning` 주의 · `success` 완료 · `accent` 강조 · `discovery` 새 기능 |
+| `messages?` | `string[]` | `[]` | 본문. 각 문자열이 한 줄이 되고, 인라인 HTML(`<b>` · `<a>` 등)을 허용한다 — `sanitizeInlineHtml` 로 살균한 뒤 렌더하므로 스크립트·위험 스킴은 제거된다. |
+| `icon?` | `SIconName` | `CONTEXT_ALERT_DEFAULT_ICON` | 왼쪽 아이콘. 시안은 인텐트와 무관하게 원 안 느낌표 하나를 쓴다 |
+| `action?` | `ReactNode` | — | 오른쪽에 붙는 후속 동작. **`SButton size="xs"` 를 넣는다** — 그 높이(24px)가 곧 이 상자의 콘텐츠 높이라 시안의 40px 가 그대로 나온다. 더 큰 버튼을 넣으면 상자가 그만큼 세로로 늘어난다. |
+| `className?` | `string` | — |  |
+| `style?` | `CSSProperties` | — |  |
+
+## Types
+
+### SContextAlertIntent
+
+```ts
+export type SContextAlertIntent = (typeof CONTEXT_ALERT_INTENTS)[number];
+```
+
+### CONTEXT_ALERT_INTENTS
+
+```ts
+export const CONTEXT_ALERT_INTENTS = [
+  'default',
+  'danger',
+  'warning',
+  'success',
+  'accent',
+  'discovery',
+] as const;
+```
+
+## Dependencies
+
+### Depends on
+
+- [SIcon](../SIcon)
+
+### Graph
+
+```mermaid
+graph TD;
+  SContextAlert --> SIcon
+  style SContextAlert fill:#f9f,stroke:#333,stroke-width:4px
+```

package/dist/components/SContextAlert/SContextAlert.d.ts

@@ -0,0 +1,38 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type SIconName } from '../SIcon';
+import { type SContextAlertIntent } from './contextAlert.config';
+export interface SContextAlertProps {
+    /**
+     * 알림의 성격 — 면과 테두리 색이 바뀐다. 아이콘과 본문색은 인텐트와 무관하게 같다.
+     *
+     * `default` 안내 · `danger` 오류 · `warning` 주의 · `success` 완료 · `accent` 강조 · `discovery` 새 기능
+     */
+    intent?: SContextAlertIntent;
+    /**
+     * 본문. 각 문자열이 한 줄이 되고, 인라인 HTML(`<b>` · `<a>` 등)을 허용한다 —
+     * `sanitizeInlineHtml` 로 살균한 뒤 렌더하므로 스크립트·위험 스킴은 제거된다.
+     */
+    messages?: string[];
+    /** 왼쪽 아이콘. 시안은 인텐트와 무관하게 원 안 느낌표 하나를 쓴다 */
+    icon?: SIconName;
+    /**
+     * 오른쪽에 붙는 후속 동작.
+     *
+     * **`SButton size="xs"` 를 넣는다** — 그 높이(24px)가 곧 이 상자의 콘텐츠 높이라 시안의
+     * 40px 가 그대로 나온다. 더 큰 버튼을 넣으면 상자가 그만큼 세로로 늘어난다.
+     */
+    action?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SContextAlert — 한 줄짜리 맥락 알림.
+ *
+ * 화면의 특정 자리에 붙어 "지금 이 맥락에서 알아야 할 것"을 한 줄로 알리고, 필요하면
+ * 오른쪽에 후속 동작 버튼을 둔다. 여러 줄 목록으로 안내를 쌓는 자리는 `SCallout` 이다
+ * (AGENTS.md §3-2) — 두 컴포넌트는 면·테두리·패딩 토큰이 같고 **무엇을 담는지**가 다르다.
+ *
+ * 색은 `--cmp-contextAlert-*` 토큰이 정한다. 아이콘 색만 전용 토큰이 없어 시스템 토큰을
+ * 빌려 쓴다(`contextAlert.config.ts` 참고).
+ */
+export declare const SContextAlert: import("react").ForwardRefExoticComponent<SContextAlertProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SContextAlert/contextAlert.config.d.ts

@@ -0,0 +1,29 @@
+import type { SIconName } from '../SIcon';
+export declare const CONTEXT_ALERT_INTENTS: readonly ["default", "danger", "warning", "success", "accent", "discovery"];
+export type SContextAlertIntent = (typeof CONTEXT_ALERT_INTENTS)[number];
+/**
+ * 인텐트별 표면 — 배경·테두리.
+ *
+ * `--cmp-contextAlert-<intent>-*` 로 이름을 조립하지 않고 표로 둔다. 조립하면 어떤 인텐트가
+ * 실제로 토큰을 갖고 있는지가 코드에서 사라지고, `check:refs` 도 접두어 존재만 확인하게 된다.
+ *
+ * **본문색은 여기 없다** — 전 인텐트 공통(`--cmp-contextAlert-content`)이라 컴포넌트가 직접 쓴다.
+ */
+export declare const CONTEXT_ALERT_SURFACE: Record<SContextAlertIntent, {
+    bg: string;
+    border: string;
+}>;
+/**
+ * 기본 아이콘 — 원 안 느낌표.
+ *
+ * 시안은 인텐트 6종 모두 같은 글리프를 쓴다. 인텐트마다 아이콘을 바꾸는 매핑은 없다.
+ */
+export declare const CONTEXT_ALERT_DEFAULT_ICON: SIconName;
+/**
+ * 아이콘 색 — 본문(`--cmp-contextAlert-content`)보다 한 단계 옅다.
+ *
+ * ⚠️ contextAlert 토큰 그룹에 아이콘 **색**이 없다(크기만 있다). 시안의 값과 같은 시스템
+ * 토큰을 빌려 쓴다 — 디자인팀이 전용 토큰을 내면 이 한 줄을 그것으로 갈아끼운다
+ * (토큰 키는 만들지 않는다). `SCallout` 의 `white` 타입이 같은 방식으로 버티고 있다.
+ */
+export declare const CONTEXT_ALERT_ICON_COLOR = "var(--sys-color-fg-tertiary)";

package/dist/components/SContextAlert/index.d.ts

@@ -0,0 +1,2 @@
+export { SContextAlert, type SContextAlertProps } from './SContextAlert';
+export { CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, CONTEXT_ALERT_DEFAULT_ICON, CONTEXT_ALERT_ICON_COLOR, type SContextAlertIntent, } from './contextAlert.config';

package/dist/components/SDatePicker/README.md

@@ -40,6 +40,7 @@
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SDatePicker/SDatePicker.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
@@ -51,6 +51,13 @@ export interface SDatePickerProps {
     rules?: Rule[];
     status?: SFieldStatus;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -95,4 +102,4 @@ export interface SDatePickerMonthListboxProps {
  * 자체 트리거/팝오버 없이 연도+월 리스트만 필요한 커스텀 조합에 재사용한다. */
 export declare function SDatePickerMonthListbox({ value, anchorYear, selectable, onValueChange, onMonthSelect, className, style, }: SDatePickerMonthListboxProps): import("react").JSX.Element;
 /** SDatePicker — sd-date-picker 포팅. SField + SPopover(SCalendar). */
-export declare function SDatePicker({ value, onValueChange, onViewChange, mode, size, placeholder, selectable, disabled, clearable, width, maxWidth, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;
+export declare function SDatePicker({ value, onValueChange, onViewChange, mode, size, placeholder, selectable, disabled, clearable, width, maxWidth, name, rules, status, label, labelPosition, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDatePickerProps): import("react").JSX.Element;

package/dist/components/SDateRangePicker/README.md

@@ -22,6 +22,7 @@
 | `rules?` | `Rule[]` | — |  |
 | `status?` | `SFieldStatus` | — |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SDateRangePicker/SDateRangePicker.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
@@ -54,6 +54,13 @@ export interface SDateRangePickerProps {
     rules?: Rule[];
     status?: SFieldStatus;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -84,4 +91,4 @@ export interface SRangeCalendarProps {
  *  캘린더 그리드만 필요한 커스텀 조합(예: 다른 트리거에 팝오버로 얹는 경우)에 재사용한다. */
 export declare function RangeCalendar({ value, selectable, maxRange, showTimePicker, onSelect, onPendingStartChange, onViewChange, }: SRangeCalendarProps): import("react").JSX.Element;
 /** SDateRangePicker — sd-date-range-picker 포팅. SField + SPopover(범위 캘린더). */
-export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, showTimePicker, disabled, clearable, width, maxWidth, name, rules, status, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;
+export declare function SDateRangePicker({ value, onValueChange, onViewChange, size, placeholder, selectable, maxRange, showTimePicker, disabled, clearable, width, maxWidth, name, rules, status, label, labelPosition, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, className, style, }: SDateRangePickerProps): import("react").JSX.Element;

package/dist/components/SDonutChart/README.md

@@ -9,11 +9,14 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `data` | `SDonutChartSlice[]` | — | 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 |
+| `title?` | `string` | — | 차트 제목 — 왼쪽 위에 놓인다 |
+| `unit?` | `string` | — | 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 |
 | `palette?` | `SDonutChartPalette` | `'multi'` | 색 팔레트. `custom` 일 때만 `colors` 를 본다 |
 | `colors?` | `SDonutChartColor[]` | — | `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 |
 | `showValueLabel?` | `boolean` | `false` | 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 |
 | `showLegend?` | `boolean` | `true` | 범례를 보인다 |
 | `legendPosition?` | `SDonutChartLegendPosition` | `'top'` | 범례 위치 |
+| `legendVariant?` | `SDonutChartLegendVariant` | `'simple'` | 범례 모양. `simple` 이름만 가로로 · `default` 이름+값을 세로로 쌓는 목록 |
 | `showTooltip?` | `boolean` | `true` | 조각에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | — | 값 표시 형식 |
 | `tooltipFooter?` | `(slice: SDonutChartSlicePoint) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락 (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
@@ -75,6 +78,17 @@ export type SDonutChartColor =
 export type SDonutChartLegendPosition = 'top' | 'bottom';
 ```
 
+### SDonutChartLegendVariant
+
+```ts
+/**
+ * 범례 모양.
+ * - `simple` 이름만 가로로 나열한다 (값 없음)
+ * - `default` 이름 뒤에 값을 적어 세로로 쌓는 목록이다
+ */
+export type SDonutChartLegendVariant = 'simple' | 'default';
+```
+
 ### SDonutChartSlicePoint
 
 ```ts

package/dist/components/SDonutChart/SDonutChart.d.ts

@@ -1,6 +1,12 @@
 import { type CSSProperties, type ReactNode } from 'react';
 /** 범례 위치. */
 export type SDonutChartLegendPosition = 'top' | 'bottom';
+/**
+ * 범례 모양.
+ * - `simple` 이름만 가로로 나열한다 (값 없음)
+ * - `default` 이름 뒤에 값을 적어 세로로 쌓는 목록이다
+ */
+export type SDonutChartLegendVariant = 'simple' | 'default';
 /**
  * 색 팔레트. 조각마다 색이 달라야 하므로 한 색(`default`)은 없다.
  * - `multi` 서로 무관한 항목(11색)을 순서대로
@@ -32,6 +38,10 @@ export interface SDonutChartSlicePoint {
 export interface SDonutChartProps {
     /** 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 */
     data: SDonutChartSlice[];
+    /** 차트 제목 — 왼쪽 위에 놓인다 */
+    title?: string;
+    /** 단위 — 오른쪽 위에 "단위 : " 를 붙여 놓는다 */
+    unit?: string;
     /** 색 팔레트. `custom` 일 때만 `colors` 를 본다 */
     palette?: SDonutChartPalette;
     /** `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 */
@@ -42,6 +52,8 @@ export interface SDonutChartProps {
     showLegend?: boolean;
     /** 범례 위치 */
     legendPosition?: SDonutChartLegendPosition;
+    /** 범례 모양. `simple` 이름만 가로로 · `default` 이름+값을 세로로 쌓는 목록 */
+    legendVariant?: SDonutChartLegendVariant;
     /** 조각에 마우스를 올리면 값 상자를 띄운다 */
     showTooltip?: boolean;
     /** 값 표시 형식 */

package/dist/components/SEditor/README.md

@@ -69,6 +69,7 @@
 | `editorClassName?` | `string` | — | 편집 영역 className |
 | `editorStyle?` | `CSSProperties` | — | 편집 영역 style |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — | 레이블 영역 아이콘 |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SEditor/SEditor.d.ts

@@ -3,7 +3,7 @@ import type { Editor } from '@tiptap/core';
 import { type SColor } from '../../lib/color';
 import { type SFieldWidth } from '../../lib/field-width';
 import { type Rule } from '../../lib/form';
-import { type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type STooltipProps } from '../STooltip';
 /** ref 로 노출되는 조작 메서드 */
@@ -69,6 +69,13 @@ export interface SEditorProps {
     /** 포커스 이탈 */
     onBlur?: () => void;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     /** 레이블 영역 아이콘 */
     icon?: SIconName;

package/dist/components/SField/README.md

@@ -14,6 +14,7 @@
 | `iconColor?` | `SColor` | — | 레이블 영역 아이콘 색상. 미지정 시 currentColor 상속 |
 | `labelTooltip?` | `string` | `''` | 레이블 툴팁 텍스트 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 (SdTooltipProps 대응) |
+| `labelPosition?` | `SFieldLabelPosition` | `'left'` | 레이블을 컨트롤 **왼쪽**에 둘지 **위**에 둘지. 기본은 `left` — 이 서비스의 폼은 라벨 열을 세로로 맞춰 읽는다. 라벨이 길거나 컨트롤이 좁아 한 줄에 같이 세우기 어려울 때(모달 안의 폼, 한 줄짜리 칸) `top` 을 쓴다. **한 폼 안에서는 섞지 않는다** — 라벨 시작점이 행마다 어긋나 세로 정렬이 깨진다. `top` 이면 라벨과 컨트롤 사이 간격은 `--sys-space-field-vertical-gap` 이 정한다 (sm·md 구분 없이 고정). 라벨을 줄 세우는 장치인 `labelWidth`·`labelHeight` 는 위에 선 라벨에는 뜻이 없어 무시된다 — `addonLabel` 의 폭에는 그대로 적용된다. |
 | `labelWidth?` | `number \| string` | — | 레이블/어드온 레이블 너비 (숫자=px). label·addonLabel 폭에 공통 적용 |
 | `labelHeight?` | `number \| string` | — | 레이블 박스 높이 (숫자=px). 미지정 시 size별 기본값 사용. 컨트롤 박스가 기본 필드 높이보다 큰 경우(multiline 등) 첫 행에 세로 중앙 정렬을 맞추기 위해 컨트롤 박스 높이를 넘겨받는다. |
 | `size?` | `SFieldSize` | `'sm'` | 필드 크기 |
@@ -52,6 +53,12 @@
 
 ## Types
 
+### SFieldLabelPosition
+
+```ts
+export type SFieldLabelPosition = 'left' | 'top';
+```
+
 ### SFieldSize
 
 ```ts

package/dist/components/SField/SField.d.ts

@@ -7,6 +7,7 @@ import { type SFieldWidth } from '../../lib/field-width';
 export type SFieldSize = 'sm' | 'md';
 export type SFieldAddonAlign = 'start' | 'center' | 'end';
 export type SFieldStatus = 'default' | 'pass' | 'error';
+export type SFieldLabelPosition = 'left' | 'top';
 /** ref로 노출되는 UX 메서드 (sd-field @Method sdFocus 대응) */
 export interface SFieldHandle {
     /** 내부 컨트롤에 포커스하고 필드를 화면에 스크롤합니다. */
@@ -25,6 +26,18 @@ export interface SFieldProps {
     labelTooltip?: string;
     /** 레이블 툴팁 상세 옵션 (SdTooltipProps 대응) */
     labelTooltipProps?: Partial<STooltipProps>;
+    /**
+     * 레이블을 컨트롤 **왼쪽**에 둘지 **위**에 둘지.
+     *
+     * 기본은 `left` — 이 서비스의 폼은 라벨 열을 세로로 맞춰 읽는다. 라벨이 길거나 컨트롤이
+     * 좁아 한 줄에 같이 세우기 어려울 때(모달 안의 폼, 한 줄짜리 칸) `top` 을 쓴다.
+     * **한 폼 안에서는 섞지 않는다** — 라벨 시작점이 행마다 어긋나 세로 정렬이 깨진다.
+     *
+     * `top` 이면 라벨과 컨트롤 사이 간격은 `--sys-space-field-vertical-gap` 이 정한다
+     * (sm·md 구분 없이 고정). 라벨을 줄 세우는 장치인 `labelWidth`·`labelHeight` 는
+     * 위에 선 라벨에는 뜻이 없어 무시된다 — `addonLabel` 의 폭에는 그대로 적용된다.
+     */
+    labelPosition?: SFieldLabelPosition;
     /** 레이블/어드온 레이블 너비 (숫자=px). label·addonLabel 폭에 공통 적용 */
     labelWidth?: number | string;
     /**

package/dist/components/SField/index.d.ts

@@ -1 +1 @@
-export { SField, type SFieldHandle, type SFieldProps, type SFieldSize, type SFieldAddonAlign, type SFieldStatus, } from './SField';
+export { SField, type SFieldHandle, type SFieldProps, type SFieldSize, type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition, } from './SField';

package/dist/components/SFilePicker/README.md

@@ -25,6 +25,7 @@
 | `status?` | `SFieldStatus` | — |  |
 | `size?` | `SFieldSize` | `'sm'` |  |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다). |
 | `labelWidth?` | `number \| string` | — |  |
 | `icon?` | `SIconName` | — |  |
 | `iconColor?` | `SColor` | — |  |

package/dist/components/SFilePicker/SFilePicker.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from 'react';
-import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus } from '../SField';
+import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus, type SFieldLabelPosition } from '../SField';
 import { type SIconName } from '../SIcon';
 import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
@@ -36,6 +36,13 @@ export interface SFilePickerProps {
     status?: SFieldStatus;
     size?: SFieldSize;
     label?: string;
+    /**
+     * 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다).
+     *
+     * @nodemo SField 에서 내려오는 공통 필드 옵션이다 — 같은 데모를 컨트롤마다 복제하지 않고
+     * 대표 컨트롤 `SInput` 과 `SField` 에 한 번 둔다 (scripts/check-docs-coverage.mjs 머리말).
+     */
+    labelPosition?: SFieldLabelPosition;
     labelWidth?: number | string;
     icon?: SIconName;
     iconColor?: SColor;
@@ -56,4 +63,4 @@ export interface SFilePickerProps {
     style?: CSSProperties;
 }
 /** SFilePicker — sd-file-picker 포팅. 단일/다중 파일 + 크기·개수 검증 + 칩 목록. */
-export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, showMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;
+export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, showMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelPosition, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;

package/dist/components/SIcon/README.md

@@ -30,6 +30,7 @@
  - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
  - [SConfirmModal](../SConfirmModal)
+ - [SContextAlert](../SContextAlert)
  - [SDatePicker](../SDatePicker)
  - [SDateRangePicker](../SDateRangePicker)
  - [SDraggableItem](../SDraggableItem)
@@ -77,6 +78,7 @@ graph TD;
   SChipFilter --> SIcon
   SChipInput --> SIcon
   SConfirmModal --> SIcon
+  SContextAlert --> SIcon
   SDatePicker --> SIcon
   SDateRangePicker --> SIcon
   SDraggableItem --> SIcon

package/dist/components/SInput/README.md

@@ -23,6 +23,7 @@
 | `inputClassName?` | `string` | — | 내부 input 요소 className |
 | `inputStyle?` | `CSSProperties` | — | 내부 input 요소 style |
 | `label?` | `string` | — |  |
+| `labelPosition?` | `SFieldLabelPosition` | — | 레이블 위치 — `top` 이면 라벨이 컨트롤 위에 선다 (SField 로 그대로 넘어간다) |
 | `labelWidth?` | `number \| string` | — |  |
 | `labelTooltip?` | `string` | — | 레이블 툴팁 텍스트 |
 | `labelTooltipProps?` | `Partial<STooltipProps>` | — | 레이블 툴팁 상세 옵션 |