sellmate-design-system-react 9.0.0-beta.60 → 9.0.0-beta.62

package/AGENTS.md

@@ -39,13 +39,13 @@
 
 | 분류 | 컴포넌트 |
 | --- | --- |
-| **버튼·링크** | `SButton` `SGhostButton` `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
+| **버튼·링크** | `SButton` `SGhostButton` `SMeatballButton`(⋯ 로 '더 보기' 메뉴를 여는 아이콘 버튼) `SDropdownButton` `STextLink` `SSwitch` `SToggle` |
 | **입력 (폼)** | `SForm` `SField` `SInput` `SChatInput`(대화 입력창) `SSearchInput` `SNumberInput` `STextarea` `SEditor` `SSelect` `SCheckbox` `SRadio` `SRadioGroup` `SRadioButton` `SRadioCard` `SRadioCardGroup` `SChip` `SChipInput` `SBarcodeInput` `SFilePicker` |
 | **날짜·시간** | `SCalendar` `SCalendarBoard`(한 달치 일정 판) `SDatePicker` `SDatePickerYearListbox` `SDatePickerMonthListbox` `SDateRangePicker` `STimePicker` `STimeRangePicker` |
 | **표·목록** | `SChatMessage`(대화의 메시지 한 건) `SChatAttachedFile`(입력창 위, 아직 보내지 않은 첨부 한 칸) `SChatFile`(대화 흐름에 선, 보낸 파일 한 칸) `SChatSystemMessage`(대화 흐름 가운데 서는 시스템 안내) `STable` `STableBar` `SChipFilter` `SKeyValueTable` `SList` `SListItem` `SExpansionList` `SDraggableList` `SDraggableItem` `STree` |
 | **레이아웃** | `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` 로 구성까지) |
+| **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다. `stacked` 로 항목 안의 구성까지) `SLineChart`(꺾은선 그래프 — 순서가 있는 항목의 추이를 본다. `area` 로 크기까지, `stacked` 로 구성까지) `SPieChart`(원그래프 — 한 시점의 전체를 몇 개의 몫으로 나눈다) `SDonutChart`(도넛 그래프 — 가운데가 빈 원그래프. 구멍에 글자를 두지 않는다) |
 | **표시·상태** | `STag` `SBadge` `SIcon` `SLogo`(브랜드 로고를 아이콘처럼 — size 는 높이다) `SImage` `SCallout` `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
@@ -72,7 +72,7 @@ AI 에이전트는 코드를 생성하기 전에 이 목록을 반드시 지킨
 
 | 금지 | 대신 사용 |
 | --- | --- |
-| `<button>` | `SButton`, `SGhostButton`, `SDropdownButton`, `STextLink` |
+| `<button>` | `SButton`, `SGhostButton`, `SMeatballButton`, `SDropdownButton`, `STextLink` |
 | `<input type="text/password/...">` | `SInput` |
 | `<input type="search">` | `SSearchInput` |
 | `<input type="number">` | `SNumberInput` |
@@ -167,8 +167,8 @@ 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` `STabs` `SStepper` `SPagination` `SDivider` |
-| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `SButton` `SGhostButton` `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` |
+| **블록** | `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` |
+| **요소** | 블록 **안에** 놓이는 컨트롤. 혼자 페이지에 서지 않는다 | `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` |
 
@@ -254,7 +254,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 용도 | 클래스 |
 | --- | --- |
 | 페이지/섹션 제목 | `typo-heading-lg`(18px) · `typo-heading-md`(16px) · `typo-heading-sm`(14px) · `typo-heading-xs`(12px) |
-| 본문 | `typo-body-lg-*` (16px) · `typo-body-md-*`(14px) · `typo-body-sm-*`(12px) · `typo-body-xs-default`(11px) — `*` = `default`/`medium`/`bold` |
+| 카드·아이템 안의 메인 수치 데이터 | `typo-heading-xl`(24px) — 제목에 쓰지 않는다 |
+| 본문 | `typo-body-lg-*` (16px) · `typo-body-md-*`(14px) · `typo-body-sm-*`(12px) · `typo-body-xs-default`(11px) — `*` = `default`/`medium`/`semibold`/`bold` |
 | 테이블 | `typo-table-header` · `typo-table-body` · `typo-table-accent` |
 | 컨트롤·필드·피드백·내비 | `typo-control-*` `typo-field-*` `typo-feedback-*` `typo-navigation-*` (컴포넌트 내부용 — 직접 쓸 일은 드묾) |
 
@@ -324,7 +325,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | `SCheckbox` | **`gap-sd-24`** | `gap-sd-8` |
 | `SRadio` | **`gap-sd-24`** | `gap-sd-8` |
 | `STextLink` | **`gap-sd-16`**(sm) / **`gap-sd-24`**(md·lg) | `gap-sd-4` |
-| `SGhostButton` | `gap-sd-4` | `gap-sd-4` |
+| `SGhostButton` · `SMeatballButton` | `gap-sd-4` | `gap-sd-4` |
 | `SButton` | `gap-sd-8` (xs·sm·md) / **`gap-sd-12`**(lg) | 〃 |
 | `STag` | `gap-sd-8` | `gap-sd-8` |
 | `SToggle` | `gap-sd-8` | `gap-sd-8` |
@@ -565,10 +566,12 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 부모-자식 계층을 들여쓰기로 보여준다 | `STree` | §3-7-7 |
 | 사용자가 순서를 드래그로 바꾸게 한다 | `SDraggableList` + `SDraggableItem` | §3-7-6 |
 | 날짜별 일정을 한 달치 격자로 펼쳐 보여준다 | `SCalendarBoard` | §3-7-4 |
-| 항목끼리 크기를 눈으로 견주게 한다 (기간별 추이·채널별 비중) | `SBarChart` | 정확한 값을 읽어야 하면 `STable` — 그래프는 "어느 쪽이 큰가" 를 답하지 "얼마인가" 를 답하지 않는다 |
+| 항목끼리 크기를 눈으로 견주게 한다 (채널별 매출·상품별 판매량) | `SBarChart` | 정확한 값을 읽어야 하면 `STable` — 그래프는 "어느 쪽이 큰가" 를 답하지 "얼마인가" 를 답하지 않는다 |
 | 순서가 있는 항목의 **추이**를 보여준다 (일·월별 매출 흐름, 기간별 방문 수) | `SLineChart` | 항목 순서에 뜻이 없으면(채널별·상품별) `SBarChart` — 선은 "이어진다" 는 뜻을 덤으로 얹어, 순서 없는 항목을 이으면 없는 흐름을 만든다. 항목이 대여섯 개 안쪽이고 크기를 견주는 것이 목적이면 막대가 낫다 |
 | 여러 항목의 추이를 **합계와 함께** 보여준다 (채널별 매출이 쌓여 전체가 되는 흐름) | `SLineChart stacked area` | 합계가 뜻을 갖는 값일 때만 쌓는다. 음수가 섞이거나 더해서 뜻이 없는 값(비율·평균)은 쌓지 말고 겹쳐 그린다 |
 | 항목의 크기와 **그 안의 구성**을 함께 보여준다 (주문 상태별 내역, 유입 경로별 몫) | `SBarChart stacked` | 계열끼리 견주는 것이 목적이면 `stacked` 없이 나란히 세운다. 더해서 뜻이 없는 값(비율·평균)은 쌓지 않는다 — 합계 라벨이 거짓말이 된다 |
+| 한 시점의 **전체를 몇 개의 몫으로** 나눠 보여준다 (채널별 매출 비중, 회원 등급 구성) | `SPieChart` | 조각이 대여섯 개를 넘거나 몫끼리 크기를 견주는 것이 목적이면 `SBarChart` — 사람은 각도보다 길이를 정확히 견준다. 순서가 있는 추이(월별)는 몫이 아니라 흐름이라 `SLineChart`. 0·음수는 그려지지 않으므로 증감은 원으로 나타내지 않는다. 조각은 큰 순으로 넘긴다. 폭은 부모를 따르고 그림은 그 폭의 정사각형이다 — 폭이 필요하면 `className` 으로 폭만 주고 높이는 주지 않는다 (`SDonutChart` 도 같다) |
+| 한 시점의 전체를 몫으로 나누되 **가운데가 빈 고리 모양**으로 보여준다 (시안이 도넛일 때) | `SDonutChart` | 쓰임·데이터 규칙은 `SPieChart` 와 같고 모양만 다르다 — 시안이 정한 쪽을 쓴다. **구멍에 합계·라벨을 겹쳐 올리지 않는다.** 합계 같은 값이 필요하면 차트 바깥(카드 제목·요약 값)에 적는다. 여러 기간에 걸친 구성 변화는 원을 여러 개 늘어놓지 말고 `SBarChart stacked` |
 | 표 위에 건수 요약과 액션을 얹는다 | `STableBar` | 표의 이름도 여기 `title` 슬롯에 넣는다 — 제목만으로 블록을 따로 세우지 않는다. §4-2 |
 | 상태·분류를 라벨로 찍는다 | `STag` | §3-1 |
 | 색 점만으로 상태를 찍는다 | `SBadge` | §3-1 |
@@ -583,6 +586,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- | --- |
 | 라벨이 있는 일반 액션을 준다 | `SButton` | §3-5 |
 | 아이콘 하나로 뜻이 통하는 부가 조작을 준다 | `SGhostButton` | §3-5-5 |
+| 자리가 좁아 부가 조작 여러 개를 ⋯ 뒤 메뉴로 접어 둔다 | `SMeatballButton` | §3-5-5 |
 | 한 버튼에 여러 선택지를 매단다 | `SDropdownButton` | §3-5-4 |
 | GNB system 패널에서 한 줄짜리 행 액션을 준다 | `SSystemActionButton` | §3-5-7 |
 
@@ -682,7 +686,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | --- | --- |
 | `default` | 흰 면 위 (`SPage background="frame"`) — 옅은 회색 면이라 페이지와 구분된다 |
 | `white` | 회색 면 위 (`background="neutral"`·`"screen"`) — 그 위에서는 `default` 가 배경에 묻힌다 |
-| `danger` | 경고. 좌측에 "주의사항" 타이틀이 붙으므로 단순 안내에는 쓰지 않는다 |
+| `danger` | 경고. 좌측에 "주의사항" 타이틀이 붙으므로 단순 안내에는 쓰지 않는다. 주변에 이미 경고 맥락(제목 등)이 있어 타이틀이 중복되면 `showTitle={false}` 로 타이틀만 뺀다 — 경고 면은 유지된다 |
 
 ### 3-3. 플로팅/오버레이류
 
@@ -1205,6 +1209,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 | 일반 액션 | `SButton` (`color`: `primary` / `secondary` / `neutral` / `danger`, `outline`, `size`: xs~md) |
 | **삭제 등 파괴적 액션** | **`SButton color="danger"`** 또는 **`color="danger" outline`** (아래 3-5-3) |
 | **아이콘 하나로 뜻이 통하는 부가 조작** | **`SGhostButton`** — 라벨이 없는 아이콘 전용 버튼 (아래 3-5-5) |
+| **부가 조작 여러 개를 ⋯ 메뉴로 접기** | **`SMeatballButton`** — ⋯ 아이콘 버튼 + `SDropdownButton` 과 같은 메뉴 (아래 3-5-5) |
 | 본문 속 이동 링크 | `STextLink` |
 | 메인 액션 + 부가 메뉴 | `SDropdownButton` |
 | **GNB system 패널의 한 줄 액션** | **`SSystemActionButton`** — 행 전체가 버튼인 표면형 (아래 3-5-7) |
@@ -1318,6 +1323,24 @@ tableRef.current.scrollToRow(row);                  // 복원
 ❌ <SGhostButton icon="download" ariaLabel="엑셀 다운로드" />              // 목록의 주 액션 → SButton
 ```
 
+##### `SMeatballButton` — ⋯ 뒤에 메뉴를 접어 둘 때
+
+자리가 좁아 부가 조작을 하나하나 아이콘으로 늘어놓을 수 없을 때, **⋯ 하나로 접고 누르면 메뉴를 띄운다.** 버튼의 크기·색·hover·툴팁은 `SGhostButton` 과, 메뉴 모양은 `SDropdownButton` 과 같다.
+
+- **메뉴는 컴포넌트가 띄운다.** `items` 를 넘기고 선택은 `onItemClick(value)` 로 받는다. 메뉴를 따로 만들어 붙이지 않고, 열림 상태(`aria-expanded`)도 직접 넣지 않는다.
+- **`SGhostButton icon="etc"` 로 직접 만들지 않는다.** '더 보기' 메뉴는 항상 `SMeatballButton` 이다.
+- **`intent` 는 `default` / `inverse` 뿐이다.** ⋯ 는 조작이 아니라 메뉴를 여는 것이므로 `action`·`danger` 색을 받지 않는다. 어두운 배경 위에서만 `inverse`.
+- 툴팁·`ariaLabel` 은 기본 문구가 들어 있어 **주지 않아도 된다.** 한 화면에 ⋯ 가 여러 개라 무엇의 메뉴인지 구분해야 할 때만 `tooltipText` 를 바꾼다(`ariaLabel` 이 따라간다).
+- 메인 액션에 변형 동작을 곁들이는 것이면 `SMeatballButton` 이 아니라 `SDropdownButton split`(§3-5-4)이다.
+
+```tsx
+✅ <SMeatballButton size="xs"                                   // 행 끝 부가 조작 묶음
+     items={[{ value: 'copy', label: '복제', icon: 'copy' }, { value: 'remove', label: '삭제', icon: 'remove' }]}
+     onItemClick={v => handleRowAction(row, v)} />
+✅ <SMeatballButton intent="inverse" items={items} onItemClick={onAction} />  // 어두운 배경 위
+❌ <SGhostButton icon="etc" ariaLabel="더 보기" onClick={openMyMenu} />       // 직접 조립 → SMeatballButton
+```
+
 #### 3-5-6. 그 밖
 
 - 라벨은 **동사(+목적어)** — `저장` · `적치 지시` · `송장 재출력`
@@ -1683,7 +1706,7 @@ useEffect(() => {
 - **`SCalendar` 와 `SCalendarBoard` 는 방향이 반대다.** `SCalendar` 는 날짜를 **고르는** 달력(칸에는 점만 찍힌다)이고, `SCalendarBoard` 는 일정을 **읽는** 달력이다 — 칸마다 일정이 줄로 쌓이고, 칸 높이에 담기는 줄 수를 넘으면 "N개 더보기" 로 접히고, **"더보기" 또는 일정이 있는 칸 아무 데나** 누르면 **그 칸을 덮으며 뜨는 판**에 그 날짜의 일정이 전부 펼쳐진다. 폭도 다르다: `SCalendar` 는 제 폭을 갖는 요소, `SCalendarBoard` 는 페이지 폭을 채우는 블록이다.
 - **`SCalendarBoard` 는 기본이 읽기 전용 판이다.** 날짜 칸을 눌러 **고르게** 하려면 `selectable` 을 켠다 — 켜야 `onValueChange(date, events)` 로 고른 날짜와 **그 날짜의 일정**이 함께 온다. 다만 **일정이 있는 칸은 `selectable` 과 무관하게 눌린다** — 그때는 목록 판이 열린다. 둘 다 켜져 있으면 고르기와 열기가 함께 일어난다. 일정 버튼과 "N개 더보기" 도 항상 눌린다.
 - **칸 배경과 일정 색은 다른 층이다.** 그날의 성격(마감·완료·휴무 등)은 `dayColors` 로 **칸 전체**에 칠하고(`default` `danger` `accent` `complete` `dim`), 일정 하나의 색은 `events[].color` 로 준다. 둘을 섞어 쓰면 서로를 가리지 않고 함께 읽힌다.
-- 일정 왼쪽의 색 점은 `SBadge` 다 — `events[].color` 프리셋이 점 색까지 정하고, 따로 주려면 `dotColor` 에 `SBadge` 9색 중 하나를 넣는다 (§3-1).
+- 일정 왼쪽의 색 점은 `SBadge` 다 — `events[].color` 프리셋이 점 색까지 정하고, 따로 주려면 `dotColor` 에 `SBadge` 색(`SBadgeColor`) 중 하나를 넣는다 (§3-1).
 - **칸 본문을 통째로 바꾸려면 `dayContent` 다.** 일정으로 표현되지 않는 그날치 요약(재고·매출 같은)을 칸에 얹을 때 쓴다. **슬롯을 준 날짜는 그 날짜의 `events` 를 그리지 않고 목록 판도 열지 않는다** — 한 칸에 둘을 겹쳐 담지 않는다. 일정과 요약을 함께 보여야 하면 요약을 일정 한 건(`events[]`)으로 넣는다.
 - **`SCalendarBoard` 는 높이를 부모에게서 받는다.** 행이 그 높이를 균등하게 나눠 갖고, 칸 높이가 다시 "한 칸에 몇 줄이 보일지" 를 정한다. 그래서 **놓는 자리에 높이를 준다** — 페이지 본문의 남은 높이를 채우려면 `SPage` 안에서 스택을 `flex-1 min-h-0` 으로 두고 판에 `h-full` 을 준다. 높이를 주지 않으면 칸이 최소 높이로 주저앉아 한두 줄만 보인다.
 - **한 칸에 몇 줄을 펼칠지는 컴포넌트가 잰다.** 조절하는 prop 이 없다 — 칸 높이에서 나오는 값이라 따로 정할 것이 아니다. 줄이 넘치면 마지막 한 줄을 "N개 더보기" 에 내주므로 **접히든 아니든 칸 높이가 같다.** **소비 앱이 `events` 를 미리 잘라 넘기지 않는다.** 잘라 넘기면 "N개 더보기" 의 수가 실제 건수와 어긋나고, 눌러도 나머지가 나오지 않는다.

package/dist/components/SBadge/README.md

@@ -30,6 +30,7 @@ export const BADGE_COLORS = [
   'blue',
   'darkblue',
   'indigo',
+  'purple',
   'grey',
 ] as const;
 ```

package/dist/components/SBadge/SBadge.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from 'react';
-export declare const BADGE_COLORS: readonly ["red", "orange", "yellow", "green", "lightblue", "blue", "darkblue", "indigo", "grey"];
+export declare const BADGE_COLORS: readonly ["red", "orange", "yellow", "green", "lightblue", "blue", "darkblue", "indigo", "purple", "grey"];
 export type SBadgeColor = (typeof BADGE_COLORS)[number];
 export interface SBadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** 뱃지 색상 */

package/dist/components/SBarChart/README.md

@@ -23,6 +23,7 @@
 | `showTooltip?` | `boolean` | `true` | 막대에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 |
 | `height?` | `number \| string` | — | 차트 높이. **아래 축 텍스트까지 포함한 값**이다 — 그림은 그만큼 줄어든다 |
+| `tooltipFooter?` | `(category: SBarChartTooltipCategory) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락 (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -103,3 +104,17 @@ export interface SBarChartPoint {
 }
 ```
 
+### SBarChartTooltipCategory
+
+```ts
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SBarChartTooltipCategory {
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 카테고리 이름 */
+  name: string;
+  /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다 */
+  points: SBarChartPoint[];
+}
+```
+

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

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 /** 막대가 자라는 방향. */
 export type SBarChartDirection = 'vertical' | 'horizontal';
 /** 범례 위치. */
@@ -25,6 +25,15 @@ export interface SBarChartPoint {
     /** 그 지점의 값 */
     value: number;
 }
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SBarChartTooltipCategory {
+    /** 카테고리 인덱스 */
+    categoryIndex: number;
+    /** 카테고리 이름 */
+    name: string;
+    /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다 */
+    points: SBarChartPoint[];
+}
 /** 한 계열 — 범례 한 줄에 대응한다. */
 export interface SBarChartSeries {
     /** 범례·툴팁에 표시할 이름 */
@@ -69,6 +78,11 @@ export interface SBarChartProps {
     height?: number | string;
     /** 막대를 눌렀을 때 */
     onBarClick?: (point: SBarChartPoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락
+     * (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (category: SBarChartTooltipCategory) => ReactNode;
     className?: string;
     style?: CSSProperties;
 }

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

@@ -1,2 +1,2 @@
-export { SBarChart, type SBarChartProps, type SBarChartSeries, type SBarChartPoint, type SBarChartPalette, type SBarChartColor, type SBarChartDirection, type SBarChartLegendPosition, } from './SBarChart';
+export { SBarChart, type SBarChartProps, type SBarChartSeries, type SBarChartPoint, type SBarChartTooltipCategory, type SBarChartPalette, type SBarChartColor, type SBarChartDirection, type SBarChartLegendPosition, } from './SBarChart';
 export { BAR_SIZE_MIN, BAR_SIZE_MAX, BAR_GAP } from './barChart.config';

package/dist/components/SCalendarBoard/README.md

@@ -62,7 +62,7 @@ export interface SCalendarBoardEvent {
   label: string;
   /** 색상 프리셋 — 배경과 점 색이 함께 정해진다 */
   color?: SCalendarBoardEventColor;
-  /** 왼쪽 점 색만 따로 지정 (프리셋 기본값을 덮어쓴다). 점은 `SBadge` 라 그 9색을 쓴다 */
+  /** 왼쪽 점 색만 따로 지정 (프리셋 기본값을 덮어쓴다). 점은 `SBadge` 라 그 색(`SBadgeColor`)을 쓴다 */
   dotColor?: SBadgeColor;
   /** 본문 텍스트 — 예: `"RV20260728-000006"`. 평문만 받는다 */
   description?: string;
@@ -110,6 +110,7 @@ export const CALENDAR_BOARD_EVENT_COLORS = [
   'yellow',
   'orange',
   'red',
+  'purple',
   'white',
 ] as const;
 ```

package/dist/components/SCalendarBoard/calendarBoard.config.d.ts

@@ -3,10 +3,10 @@
  *
  * 배경은 `--cmp-calendarBoard-eventButton-bg-*` 로 전부 토큰화돼 있다.
  * 점(dot)은 `SBadge` 가 그리므로 색도 `--cmp-badge-*` 를 그대로 따른다 —
- * 9색이 디자인 mock 의 점 hex 와 1:1 로 맞아떨어져 따로 매핑을 두지 않는다.
+ * badge 색이 디자인 mock 의 점 hex 와 1:1 로 맞아떨어져 따로 매핑을 두지 않는다.
  */
 import type { SBadgeColor } from '../SBadge';
-export declare const CALENDAR_BOARD_EVENT_COLORS: readonly ["default", "blue", "oceanBlue", "lightBlue", "green", "yellow", "orange", "red", "white"];
+export declare const CALENDAR_BOARD_EVENT_COLORS: readonly ["default", "blue", "oceanBlue", "lightBlue", "green", "yellow", "orange", "red", "purple", "white"];
 export type SCalendarBoardEventColor = (typeof CALENDAR_BOARD_EVENT_COLORS)[number];
 export interface CalendarBoardEventPreset {
     /** 이벤트 버튼 배경 */

package/dist/components/SCalendarBoard/types.d.ts

@@ -14,7 +14,7 @@ export interface SCalendarBoardEvent {
     label: string;
     /** 색상 프리셋 — 배경과 점 색이 함께 정해진다 */
     color?: SCalendarBoardEventColor;
-    /** 왼쪽 점 색만 따로 지정 (프리셋 기본값을 덮어쓴다). 점은 `SBadge` 라 그 9색을 쓴다 */
+    /** 왼쪽 점 색만 따로 지정 (프리셋 기본값을 덮어쓴다). 점은 `SBadge` 라 그 색(`SBadgeColor`)을 쓴다 */
     dotColor?: SBadgeColor;
     /** 본문 텍스트 — 예: `"RV20260728-000006"`. 평문만 받는다 */
     description?: string;

package/dist/components/SCallout/README.md

@@ -9,6 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `type?` | `SCalloutType` | `'default'` | 콜아웃 타입 (색상·아이콘·타이틀 결정). - `default` — 옅은 회색 면. 흰 페이지(`background="frame"`) 위의 기본 안내. - `white` — 같은 안내인데 배경만 흰 면. 회색 면(`neutral`·`screen`) 위에서 default 가 묻힐 때. - `danger` — 좌측에 주의사항 타이틀이 붙는 경고. |
+| `showTitle?` | `boolean` | `true` | `danger` 좌측의 주의사항 타이틀(아이콘+라벨) 표시 여부. 기본 `true`. `false` 면 타이틀만 빠지고 danger 의 면·테두리·본문색은 그대로다. 다른 타입에는 영향이 없다. |
 | `message?` | `SCalloutMessage[]` | `[]` | 표시할 메시지 목록 (배열 중첩으로 depth 표현). 각 문자열은 인라인 HTML(`<b>`, `<a>` 등)을 허용하며 sanitizeInlineHtml 로 살균 후 렌더된다. |
 | `children?` | `ReactNode` | — | message 대신 직접 본문을 넣을 때 |
 | `className?` | `string` | — |  |

package/dist/components/SCallout/SCallout.d.ts

@@ -10,6 +10,11 @@ export interface SCalloutProps {
      * - `danger` — 좌측에 주의사항 타이틀이 붙는 경고.
      */
     type?: SCalloutType;
+    /**
+     * `danger` 좌측의 주의사항 타이틀(아이콘+라벨) 표시 여부. 기본 `true`.
+     * `false` 면 타이틀만 빠지고 danger 의 면·테두리·본문색은 그대로다. 다른 타입에는 영향이 없다.
+     */
+    showTitle?: boolean;
     /**
      * 표시할 메시지 목록 (배열 중첩으로 depth 표현).
      * 각 문자열은 인라인 HTML(`<b>`, `<a>` 등)을 허용하며 sanitizeInlineHtml 로 살균 후 렌더된다.
@@ -22,7 +27,7 @@ export interface SCalloutProps {
 }
 /**
  * SCallout — sd-callout 포팅.
- * default/white/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시.
+ * default/white/danger 타입, 중첩 리스트(불릿은 span으로 렌더), danger는 좌측 타이틀 표시(showTitle 로 끌 수 있다).
  * 색상은 `--cmp-callout-*` 토큰 참조(white 만 예외 — SURFACE 주석 참고).
  * message 각 항목은 sanitizeInlineHtml 로 살균한 뒤 innerHTML 로 렌더한다 (원본 sd-callout 과 동일).
  */

package/dist/components/SChip/README.md

@@ -8,6 +8,7 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `color?` | `SChipColor` | — | 색상. 주지 않으면 기본 회색 칩이다. 색은 기본 상태에만 입힌다 — error·편집 중·disabled 는 상태 토큰이 우선한다. 색상은 컴포넌트 토큰 `--cmp-chip-chip-<color>-{bg,content,border}` 를 참조한다. |
 | `name?` | `string` | — | 폼 연동용 name |
 | `value?` | `string` | `''` | 칩 텍스트 값 |
 | `error?` | `boolean` | — | 에러 상태 |
@@ -35,6 +36,30 @@
 | `focus` | `() => void` | 편집 input에 포커스합니다. |
 | `getNativeElement` | `() => HTMLElement \| null` | 네이티브 편집 엘리먼트를 반환합니다. |
 
+## Types
+
+### SChipColor
+
+```ts
+export type SChipColor = (typeof CHIP_COLORS)[number];
+```
+
+### CHIP_COLORS
+
+```ts
+export const CHIP_COLORS = [
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'blue',
+  'darkblue',
+  'indigo',
+  'purple',
+  'grey',
+] as const;
+```
+
 ## Dependencies
 
 ### Used by

package/dist/components/SChip/SChip.d.ts

@@ -1,6 +1,14 @@
 import { type CSSProperties } from 'react';
 import { type Rule } from '../../lib/form';
+export declare const CHIP_COLORS: readonly ["red", "orange", "yellow", "green", "blue", "darkblue", "indigo", "purple", "grey"];
+export type SChipColor = (typeof CHIP_COLORS)[number];
 export interface SChipProps {
+    /**
+     * 색상. 주지 않으면 기본 회색 칩이다.
+     * 색은 기본 상태에만 입힌다 — error·편집 중·disabled 는 상태 토큰이 우선한다.
+     * 색상은 컴포넌트 토큰 `--cmp-chip-chip-<color>-{bg,content,border}` 를 참조한다.
+     */
+    color?: SChipColor;
     /** 폼 연동용 name */
     name?: string;
     /** 칩 텍스트 값 */

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

@@ -1 +1 @@
-export { SChip, type SChipHandle, type SChipProps } from './SChip';
+export { SChip, CHIP_COLORS, type SChipColor, type SChipHandle, type SChipProps } from './SChip';

package/dist/components/SDonutChart/README.md

@@ -0,0 +1,91 @@
+# SDonutChart
+
+> 자동 생성 문서 — `npm run docs:gen`. 소스: 각 컴포넌트의 Props/Handle 인터페이스 + import 의존성.
+
+### SDonutChart
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `SDonutChartSlice[]` | — | 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 |
+| `palette?` | `SDonutChartPalette` | `'multi'` | 색 팔레트. `custom` 일 때만 `colors` 를 본다 |
+| `colors?` | `SDonutChartColor[]` | — | `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 |
+| `showValueLabel?` | `boolean` | `false` | 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 |
+| `showLegend?` | `boolean` | `true` | 범례를 보인다 |
+| `legendPosition?` | `SDonutChartLegendPosition` | `'top'` | 범례 위치 |
+| `showTooltip?` | `boolean` | `true` | 조각에 마우스를 올리면 값 상자를 띄운다 |
+| `formatValue?` | `(value: number) => string` | — | 값 표시 형식 |
+| `tooltipFooter?` | `(slice: SDonutChartSlicePoint) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락 (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
+| `className?` | `string` | — | 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 |
+| `style?` | `CSSProperties` | — |  |
+
+#### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `onSliceClick` | `(slice: SDonutChartSlicePoint) => void` | 조각을 눌렀을 때 |
+
+## Types
+
+### SDonutChartSlice
+
+```ts
+/** 조각 하나 — 범례 한 줄에 대응한다. */
+export interface SDonutChartSlice {
+  /** 범례·툴팁에 표시할 이름 */
+  name: string;
+  /** 값. 0·음수는 그리지 않는다 — 원은 전체에 대한 몫만 나타낼 수 있다 */
+  value: number;
+}
+```
+
+### SDonutChartPalette
+
+```ts
+/**
+ * 색 팔레트. 조각마다 색이 달라야 하므로 한 색(`default`)은 없다.
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로 — 조각을 큰 순으로 줄 때
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SDonutChartPalette = 'multi' | 'gradation' | 'custom';
+```
+
+### SDonutChartColor
+
+```ts
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SDonutChartColor =
+  | 'positivePrimary'
+  | 'positiveSecondary'
+  | 'negativePrimary'
+  | 'negativeSecondary'
+  | 'neutralPrimary'
+  | 'neutralSecondary';
+```
+
+### SDonutChartLegendPosition
+
+```ts
+/** 범례 위치. */
+export type SDonutChartLegendPosition = 'top' | 'bottom';
+```
+
+### SDonutChartSlicePoint
+
+```ts
+/** 클릭이 가리키는 조각. */
+export interface SDonutChartSlicePoint {
+  /** `data` 안에서의 인덱스 */
+  index: number;
+  name: string;
+  value: number;
+  /** 그려진 조각 전체의 합에 대한 몫(0~1) */
+  ratio: number;
+}
+```
+

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

@@ -0,0 +1,70 @@
+import { type CSSProperties, type ReactNode } from 'react';
+/** 범례 위치. */
+export type SDonutChartLegendPosition = 'top' | 'bottom';
+/**
+ * 색 팔레트. 조각마다 색이 달라야 하므로 한 색(`default`)은 없다.
+ * - `multi` 서로 무관한 항목(11색)을 순서대로
+ * - `gradation` 한 지표의 단계(6색)를 진한 쪽부터 순서대로 — 조각을 큰 순으로 줄 때
+ * - `custom` `colors` 로 고른 색을 순서대로
+ */
+export type SDonutChartPalette = 'multi' | 'gradation' | 'custom';
+/**
+ * `palette='custom'` 에서 고를 수 있는 색 이름.
+ * positive=늘어남 · negative=줄어듦 · neutral=변화 없음 을 뜻하므로 뜻에 맞게 고른다.
+ */
+export type SDonutChartColor = 'positivePrimary' | 'positiveSecondary' | 'negativePrimary' | 'negativeSecondary' | 'neutralPrimary' | 'neutralSecondary';
+/** 조각 하나 — 범례 한 줄에 대응한다. */
+export interface SDonutChartSlice {
+    /** 범례·툴팁에 표시할 이름 */
+    name: string;
+    /** 값. 0·음수는 그리지 않는다 — 원은 전체에 대한 몫만 나타낼 수 있다 */
+    value: number;
+}
+/** 클릭이 가리키는 조각. */
+export interface SDonutChartSlicePoint {
+    /** `data` 안에서의 인덱스 */
+    index: number;
+    name: string;
+    value: number;
+    /** 그려진 조각 전체의 합에 대한 몫(0~1) */
+    ratio: number;
+}
+export interface SDonutChartProps {
+    /** 조각 목록. 주는 순서대로 12시에서 시계 방향으로 그린다 — 보통 큰 순으로 준다 */
+    data: SDonutChartSlice[];
+    /** 색 팔레트. `custom` 일 때만 `colors` 를 본다 */
+    palette?: SDonutChartPalette;
+    /** `palette='custom'` 에서 쓸 색 이름을 조각 순서대로. 조각보다 짧으면 앞에서부터 순환하고, 비어 있으면 `multi` 로 그린다 */
+    colors?: SDonutChartColor[];
+    /** 고리 위에 몫(%)을 적는다. 좁은 조각은 글자가 넘치므로 적지 않는다 */
+    showValueLabel?: boolean;
+    /** 범례를 보인다 */
+    showLegend?: boolean;
+    /** 범례 위치 */
+    legendPosition?: SDonutChartLegendPosition;
+    /** 조각에 마우스를 올리면 값 상자를 띄운다 */
+    showTooltip?: boolean;
+    /** 값 표시 형식 */
+    formatValue?: (value: number) => string;
+    /** 조각을 눌렀을 때 */
+    onSliceClick?: (slice: SDonutChartSlicePoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 조각을 받아 그린다 — 몫·값만으로 모자란 맥락
+     * (전월 대비, 건수 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (slice: SDonutChartSlicePoint) => ReactNode;
+    /** 폭은 기본 100% 다. 폭을 정하려면 여기에 준다 — 그림은 그 폭의 정사각형이 된다 */
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SDonutChart — 도넛 그래프.
+ *
+ * 가운데가 빈 원그래프. `SPieChart` 와 같이 **한 시점의 전체를 몫으로 나눈 것**을 보여준다.
+ * 가운데 구멍에는 글자를 두지 않는다 — 합계 같은 값은 차트 바깥에 적는다.
+ * 조각이 대여섯 개를 넘거나 몫끼리 견주는 것이 목적이면 `SBarChart` 가 맞다.
+ *
+ * 폭은 부모를 따르고(기본 100%), 그림은 그 폭을 한 변으로 하는 정사각형이다.
+ * 구멍과 고리 두께도 폭에 비례해 늘고 준다.
+ */
+export declare const SDonutChart: import("react").ForwardRefExoticComponent<SDonutChartProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { SDonutChart, type SDonutChartProps, type SDonutChartSlice, type SDonutChartSlicePoint, type SDonutChartPalette, type SDonutChartColor, type SDonutChartLegendPosition, } from './SDonutChart';

package/dist/components/SGhostButton/README.md

@@ -57,6 +57,7 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
  - [SGnb](../SGnb)
  - [SGuide](../SGuide)
  - [SInput](../SInput)
+ - [SMeatballButton](../SMeatballButton)
  - [SModalContainer](../SModalContainer)
  - [SOverlayHeader](../SOverlayHeader)
  - [SPage](../SPage)
@@ -92,6 +93,7 @@ graph TD;
   SGnb --> SGhostButton
   SGuide --> SGhostButton
   SInput --> SGhostButton
+  SMeatballButton --> SGhostButton
   SModalContainer --> SGhostButton
   SOverlayHeader --> SGhostButton
   SPage --> SGhostButton

package/dist/components/SLineChart/README.md

@@ -24,6 +24,7 @@
 | `showTooltip?` | `boolean` | `true` | 항목에 마우스를 올리면 값 상자를 띄운다 |
 | `formatValue?` | `(value: number) => string` | `defaultFormat` | 값 표시 형식 |
 | `height?` | `number \| string` | — | 차트 높이. **아래 축 텍스트까지 포함한 값**이다 — 그림은 그만큼 줄어든다 |
+| `tooltipFooter?` | `(category: SLineChartTooltipCategory) => ReactNode` | — | 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락 (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다 |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
 
@@ -104,3 +105,17 @@ export interface SLineChartPoint {
 }
 ```
 
+### SLineChartTooltipCategory
+
+```ts
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SLineChartTooltipCategory {
+  /** 카테고리 인덱스 */
+  categoryIndex: number;
+  /** 카테고리 이름 */
+  name: string;
+  /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다. 누적이어도 각 계열이 제 몫으로 가진 값이다 */
+  points: SLineChartPoint[];
+}
+```
+

package/dist/components/SLineChart/SLineChart.d.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 /** 점과 점을 잇는 방식. */
 export type SLineChartCurve = 'linear' | 'smooth';
 /** 범례 위치. */
@@ -25,6 +25,15 @@ export interface SLineChartPoint {
     /** 그 지점의 값. 누적이어도 **그 계열이 제 몫으로 가진 값**이다 */
     value: number;
 }
+/** 툴팁 하단(`tooltipFooter`)이 받는 짚은 항목. */
+export interface SLineChartTooltipCategory {
+    /** 카테고리 인덱스 */
+    categoryIndex: number;
+    /** 카테고리 이름 */
+    name: string;
+    /** 툴팁에 값이 뜬 지점들 — 값이 없는 계열은 빠진다. 누적이어도 각 계열이 제 몫으로 가진 값이다 */
+    points: SLineChartPoint[];
+}
 /** 한 계열 — 선 하나, 범례 한 줄에 대응한다. */
 export interface SLineChartSeries {
     /** 범례·툴팁에 표시할 이름 */
@@ -73,6 +82,11 @@ export interface SLineChartProps {
     height?: number | string;
     /** 점을 눌렀을 때 */
     onPointClick?: (point: SLineChartPoint) => void;
+    /**
+     * 툴팁의 값 아래에 덧붙일 내용. 짚은 항목을 받아 그린다 — 계열 값만으로 모자란 맥락
+     * (합계, 전월 대비 등)을 적는다. 툴팁은 누를 수 없으므로 버튼·링크는 넣지 않는다
+     */
+    tooltipFooter?: (category: SLineChartTooltipCategory) => ReactNode;
     className?: string;
     style?: CSSProperties;
 }

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

@@ -1 +1 @@
-export { SLineChart, type SLineChartProps, type SLineChartSeries, type SLineChartPoint, type SLineChartCurve, type SLineChartPalette, type SLineChartColor, type SLineChartLegendPosition, } from './SLineChart';
+export { SLineChart, type SLineChartProps, type SLineChartSeries, type SLineChartPoint, type SLineChartTooltipCategory, type SLineChartCurve, type SLineChartPalette, type SLineChartColor, type SLineChartLegendPosition, } from './SLineChart';