sellmate-design-system-react 9.0.0-beta.102 → 9.0.0-beta.103

package/AGENTS.md

@@ -139,6 +139,8 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 
 콤마 없는 `39000` 은 자릿수를 세어야 읽히지만 `39,000` 은 한눈에 읽힌다. 숫자를 그대로 출력하는 코드는 미완성으로 본다.
 
+**앱이 `SLocaleProvider` 로 로케일을 바꾸는 경우(§4-1)에는 `useLocale().formatNumber(v)` 로 쓴다** — 선택한 로케일의 숫자 구분을 따른다. 로케일을 바꾸지 않는 앱은 `toLocaleString()` 그대로 쓴다. **날짜는 로케일을 바꿔도 아래 `YYYY-MM-DD` 표기가 그대로다.**
+
 **번호·코드는 제외한다.** 전화번호·사업자번호·송장번호·상품코드처럼 대상을 가리키는 값은 크기를 비교하는 숫자가 아니라 **서식이 정해진 문자열**이다. 여기에 콤마를 넣으면 송장번호 `123456789` 가 `123,456,789` 로 보여 값 자체가 달라진다.
 
 **날짜는 `YYYY-MM-DD` 로 쓴다.** 자릿수를 채우고 하이픈으로 구분한다 — `2026-08-13`.
@@ -1559,6 +1561,7 @@ tableRef.current.scrollToRow(row);                  // 복원
   - **태그의 색·이름을 밖에서 직접 주지 않는다** (`status`). `option.color`·`option.label` 은 없다 — 지금 상태가 가리키는 `options` 칸이 곧 태그다. 색이 상태의 뜻이라 둘이 어긋나면 안 되기 때문이다.
   - **상태 메뉴의 색은 칸마다 준다** — 점과 글자가 그 상태의 색으로 함께 물든다. 상태는 색 자체가 뜻이라 고르는 자리에서도 색을 보고 고른다.
   - `switch` 는 메뉴를 갖지 않는다 — 우측 문구가 "지금 값"이 아니라 보조 조작 문구라, 고를 목록이 있으면 그것은 `subSelect` 다.
+- **라벨 옆에 뱃지·카운트를 붙일 때는 `labelSlot` 을 쓴다** (`account` `select` `switch` `subSelect`). 라벨이 길면 라벨만 잘리고 슬롯은 밀리지 않는다. 행 전체가 버튼이라 **슬롯에 버튼·링크를 넣지 않는다**(button 중첩). `status` 는 태그가 라벨 자리를 차지해 받지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속하고, 색을 바꿀 때는 토큰(`--sys-color-*`)으로 덮는다(고정 색은 어두운 면에서 묻힌다). 라벨 자체의 색은 바꾸지 못한다.
 - 높이·라운드·아이콘 크기·좌우 여백은 전부 토큰이 넣는다. 직접 주지 않는다.
 
 #### 3-5-8. `SAccountListBox` — 계정 행을 눌러 뜨는 계정 패널
@@ -2457,6 +2460,23 @@ import { SModalOutlet } from 'sellmate-design-system-react';
 
 `SModal.confirm/loading/create` 로 띄운 모달이 그려지는 자리다. outlet 이 앱 트리 안에 있어야 모달이 앱의 Context(QueryClient·Router·Theme 등)를 상속한다 — outlet 이 없으면 모달은 뜨지만 별도 React 루트라 Provider 가 닿지 않는다(§3-3-4). 모달은 언제나 `body` 로 portal 되므로 outlet 을 어디에 두든 레이아웃에는 영향이 없고, **셸 안에 넣을 필요도 없다.** 토스트를 쓴다면 `SToastContainer` 도 같은 자리에 둔다.
 
+**컴포넌트가 내장한 문구(aria-label·placeholder·"전체" 등)의 언어는 `SLocaleProvider` 가 정한다 — 앱 루트에 한 번 두고, `SModalOutlet` 은 그 안쪽에 둔다.** 안쪽에 두어야 명령형 모달도 같은 로케일을 상속한다. Provider 가 없으면 한국어다.
+
+```tsx
+import { SLocaleProvider, SModalOutlet } from 'sellmate-design-system-react';
+
+<SLocaleProvider locale={userLocale}>
+  <RouterProvider router={router} />
+  <SModalOutlet />
+</SLocaleProvider>;
+```
+
+- 지원 로케일은 `SLOCALES` 에 있다. `en-US` 처럼 지역이 붙어도 되고, **지원하지 않는 값은 예외 없이 한국어로 폴백한다.** `zh` 는 간체 문구라 `zh-TW` 도 간체로 나온다.
+- **`ja`·`zh` 문구는 원어민 검수 전 초안이다.** 사용자에게 노출하기 전에 검수한다.
+- 일부 문구만 바꾸려면 `messages` 로 덮어쓴다 — 나머지는 로케일 문구를 유지한다. `messages` 는 모듈 상수나 `useMemo` 로 안정시킨다(렌더마다 새 객체를 만들면 하위 컴포넌트가 매번 다시 그려진다).
+- 개별 prop(`placeholder` 등)을 직접 주면 로케일 문구보다 prop 이 우선한다. **내장 문구를 앱이 직접 번역해 prop 으로 넘기지 않는다** — Provider 가 이미 처리한다.
+- 아직 로케일을 따르는 컴포넌트는 `SPagination`·`SSelect` 뿐이고, 나머지는 순차로 옮기는 중이다. 로케일을 바꿔도 그 밖의 컴포넌트 문구는 한국어로 남는다.
+
 **최소 너비는 `SLayout` 이 보장한다 — 앱이 `min-w-*` 를 직접 주지 않는다.** 창이 최소 너비(`SLAYOUT_MIN_WIDTH`, GNB 포함한 전체 기준)보다 좁아지면 GNB·상단바는 제자리에 남고 **`SPage` 안에만 가로 스크롤이 생긴다.** 문서(브라우저 창)에는 가로 스크롤이 생기지 않는다. 그래서 셸을 감싸는 요소에 `min-width` 나 `overflow-x` 를 걸지 않는다 — 걸면 창 전체가 스크롤되어 GNB 가 화면 밖으로 밀린다.
 
 **창이 최소 너비보다 넓을 때 본문을 어떻게 세울지는 `SPage` 의 `contentWidth` 가 정한다 — 폭을 직접 계산하지 않는다.** 넓은 모니터에서 본문이 끝까지 늘어나 성기어지는 화면이 있으므로 세 가지 중 하나를 고른다.

package/dist/components/SIcon/icons.gen.d.ts

@@ -55,6 +55,7 @@ export declare const ICONS: {
     readonly coupon: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dashboard: (p: IconRenderProps) => import("react").JSX.Element;
     readonly date: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly dollar: (p: IconRenderProps) => import("react").JSX.Element;
     readonly dot: (p: IconRenderProps) => import("react").JSX.Element;
     readonly download: (p: IconRenderProps) => import("react").JSX.Element;
     readonly drag: (p: IconRenderProps) => import("react").JSX.Element;
@@ -62,6 +63,8 @@ export declare const ICONS: {
     readonly etc: (p: IconRenderProps) => import("react").JSX.Element;
     readonly event: (p: IconRenderProps) => import("react").JSX.Element;
     readonly focus: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly fullscreen: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly fullscreenExit: (p: IconRenderProps) => import("react").JSX.Element;
     readonly global: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpFill: (p: IconRenderProps) => import("react").JSX.Element;
     readonly helpOutline: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/SSelect/README.md

@@ -16,8 +16,8 @@
 | `valueDisplay?` | `SSelectValueDisplay` | `'text'` | 트리거에 선택값을 보여주는 방식. - `text`: 선택 라벨을 쉼표로 이어 한 줄로 보여준다. 넘치면 말줄임한다. - `chip`: 선택값마다 칩을 낸다. 칩의 × 를 누르면 그 값만 선택에서 빠지고, 드롭다운은 열리지 않는다. 칩이 한 줄을 넘으면 줄바꿈하고 트리거가 그만큼 높아진다. `chip` 은 `multi`·`multi_depth`·`multi_tree` 에서만 동작한다. 단일 선택 type 에서는 무시하고 `text` 로 보여준다. 전체 선택이면 칩 대신 `allSelectedLabel` 을 보여준다. `multi_depth`·`multi_tree` 에서 그룹의 하위 리프를 전부 고르면 리프 칩 대신 그룹명 칩 하나로 묶고, 그 칩의 × 는 그룹의 리프를 한꺼번에 뺀다. 비활성(select 자체나 해당 옵션)인 칩에는 × 를 내지 않는다. |
 | `showSearch?` | `boolean` | `false` | 검색 입력 사용 |
 | `showSelectAll?` | `boolean` | `false` | 전체선택 옵션 사용 (multi 전용) |
-| `allSelectedLabel?` | `string` | `'전체'` | 전체선택 레이블 |
-| `placeholder?` | `string` | `'선택'` | placeholder |
+| `allSelectedLabel?` | `string` | — | 전체선택 레이블. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "전체")를 쓴다 |
+| `placeholder?` | `string` | — | placeholder. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "선택")를 쓴다 |
 | `disabled?` | `boolean` | `false` | 비활성 |
 | `clearable?` | `boolean` | `false` | 선택값 지우기(×) 버튼 노출. 선택값이 있고 비활성이 아닐 때만 나타나며, 누르면 드롭다운을 열지 않고 값만 비운다. |
 | `error?` | `boolean` | `false` | 에러 상태 |

package/dist/components/SSelect/SSelect.d.ts

@@ -75,9 +75,9 @@ export interface SSelectProps<TValue extends SSelectChangeValue = SSelectChangeV
     showSearch?: boolean;
     /** 전체선택 옵션 사용 (multi 전용) */
     showSelectAll?: boolean;
-    /** 전체선택 레이블 */
+    /** 전체선택 레이블. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "전체")를 쓴다 */
     allSelectedLabel?: string;
-    /** placeholder */
+    /** placeholder. 생략하면 `SLocaleProvider` 로케일의 기본 문구(ko: "선택")를 쓴다 */
     placeholder?: string;
     /** 비활성 */
     disabled?: boolean;

package/dist/components/SSystemActionButton/README.md

@@ -10,6 +10,7 @@
 |------|------|---------|-------------|
 | `type` | `'account'` | — | 계정 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option` | `SSystemActionButtonAccountOption` | — | 누르면 뜨는 계정 리스트박스. **필수다** — 계정 행은 늘 이 패널의 트리거이고, 눌러도 아무것도 뜨지 않는 계정 행은 없다. 아이콘은 `user` 로 고정이라 여기서 받지 않는다. |
 
 ### SSystemActionButtonBase
@@ -29,6 +30,7 @@
 |------|------|---------|-------------|
 | `type` | `'account' \| 'select' \| 'switch' \| 'subSelect' \| 'status'` | — | 계정 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option?` | `<union 5종>` | — | 누르면 뜨는 계정 리스트박스. **필수다** — 계정 행은 늘 이 패널의 트리거이고, 눌러도 아무것도 뜨지 않는 계정 행은 없다. 아이콘은 `user` 로 고정이라 여기서 받지 않는다. |
 
 ### SSystemActionButtonSelect
@@ -39,6 +41,7 @@
 |------|------|---------|-------------|
 | `type` | `'select'` | — | 화살표만 붙는 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option?` | `SSystemActionButtonIconOption` | — | 선행 아이콘. 아이콘 없이 라벨만 두는 행이면 통째로 생략한다 |
 
 ### SSystemActionButtonStatus
@@ -49,6 +52,7 @@
 |------|------|---------|-------------|
 | `type` | `'status'` | — | 라벨 자리에 상태 태그가 들어가는 행 |
 | `label?` | `never` | — | 태그가 라벨 자리를 차지하므로 받지 않는다 |
+| `labelSlot?` | `never` | — | 태그가 라벨 자리를 차지하므로 받지 않는다 |
 | `option` | `SSystemActionButtonStatusOption` | — | 상태 태그 + 고를 목록. **필수다** — 상태 행은 늘 그 상태를 바꾸는 메뉴의 트리거다. |
 
 ### SSystemActionButtonSubSelect
@@ -59,6 +63,7 @@
 |------|------|---------|-------------|
 | `type` | `'subSelect'` | — | 우측에 지금 선택된 값이 붙는 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option` | `SSystemActionButtonSubSelectOption` | — | 선행 아이콘 + 우측 값 + 고를 목록 |
 
 ### SSystemActionButtonSwitch
@@ -69,6 +74,7 @@
 |------|------|---------|-------------|
 | `type` | `'switch'` | — | 우측에 보조 조작 문구가 붙는 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option?` | `SSystemActionButtonTextOption` | — | 선행 아이콘 + 우측 액션 텍스트. 둘 다 두지 않으면 통째로 생략한다 |
 
 ### SSystemActionButtonText
@@ -79,6 +85,7 @@
 |------|------|---------|-------------|
 | `type` | `'switch' \| 'subSelect'` | — | 우측에 보조 조작 문구가 붙는 행 |
 | `label?` | `string` | — | 라벨 텍스트 |
+| `labelSlot?` | `ReactNode` | — | 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다. 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다. 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩). |
 | `option?` | `SSystemActionButtonTextOption \| SSystemActionButtonSubSelectOption` | — | 선행 아이콘 + 우측 액션 텍스트. 둘 다 두지 않으면 통째로 생략한다 |
 
 ## Types

package/dist/components/SSystemActionButton/SSystemActionButton.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes } from 'react';
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
 import { type SAccountListBoxContent } from '../SAccountListBox';
 import { type SIconName } from '../SIcon';
 import { type STagColor } from '../STag';
@@ -93,6 +93,13 @@ export interface SSystemActionButtonAccountProps extends SSystemActionButtonBase
     type: 'account';
     /** 라벨 텍스트 */
     label?: string;
+    /**
+     * 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다.
+     * 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로
+     * 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다.
+     * 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩).
+     */
+    labelSlot?: ReactNode;
     /**
      * 누르면 뜨는 계정 리스트박스. **필수다** — 계정 행은 늘 이 패널의 트리거이고, 눌러도 아무것도
      * 뜨지 않는 계정 행은 없다. 아이콘은 `user` 로 고정이라 여기서 받지 않는다.
@@ -105,6 +112,13 @@ export interface SSystemActionButtonSelectProps extends SSystemActionButtonBaseP
     type: 'select';
     /** 라벨 텍스트 */
     label?: string;
+    /**
+     * 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다.
+     * 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로
+     * 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다.
+     * 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩).
+     */
+    labelSlot?: ReactNode;
     /** 선행 아이콘. 아이콘 없이 라벨만 두는 행이면 통째로 생략한다 */
     option?: SSystemActionButtonIconOption;
 }
@@ -114,6 +128,13 @@ export interface SSystemActionButtonSwitchProps extends SSystemActionButtonBaseP
     type: 'switch';
     /** 라벨 텍스트 */
     label?: string;
+    /**
+     * 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다.
+     * 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로
+     * 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다.
+     * 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩).
+     */
+    labelSlot?: ReactNode;
     /** 선행 아이콘 + 우측 액션 텍스트. 둘 다 두지 않으면 통째로 생략한다 */
     option?: SSystemActionButtonTextOption;
 }
@@ -123,6 +144,13 @@ export interface SSystemActionButtonSubSelectProps extends SSystemActionButtonBa
     type: 'subSelect';
     /** 라벨 텍스트 */
     label?: string;
+    /**
+     * 라벨 오른쪽에 붙는 표시용 요소(뱃지·카운트 등). 라벨이 길면 라벨만 잘리고 이 요소는 밀리지 않는다.
+     * 텍스트를 넘기면 라벨과 같은 서체·색을 상속한다 — 색을 바꾸려면 넘기는 쪽에서 토큰(`--sys-color-*`)으로
+     * 덮고, 고정 색은 `dark`·`darker` 면에서 묻히니 세 색 모두에서 확인한다. 라벨 자체의 색은 바꾸지 못한다.
+     * 행 전체가 버튼이라 **버튼·링크 같은 조작 요소는 넣지 않는다**(button 중첩).
+     */
+    labelSlot?: ReactNode;
     /** 선행 아이콘 + 우측 값 + 고를 목록 */
     option: SSystemActionButtonSubSelectOption;
 }
@@ -134,6 +162,8 @@ export interface SSystemActionButtonStatusProps extends SSystemActionButtonBaseP
     type: 'status';
     /** 태그가 라벨 자리를 차지하므로 받지 않는다 */
     label?: never;
+    /** 태그가 라벨 자리를 차지하므로 받지 않는다 */
+    labelSlot?: never;
     /**
      * 상태 태그 + 고를 목록. **필수다** — 상태 행은 늘 그 상태를 바꾸는 메뉴의 트리거다.
      */

package/dist/index.cjs

@@ -272,6 +272,126 @@ var fieldWidthValue = (v) => {
   if (isFieldWidthGrade(v)) return `var(--cmp-field-width-${v})`;
   return typeof v === "number" ? `${v}px` : v;
 };
+
+// src/lib/locale.ts
+var SLOCALES = ["ko", "en", "ja", "zh"];
+var DEFAULT_LOCALE = "ko";
+var BUNDLES = {
+  ko: {
+    pagination: {
+      firstPage: "\uCCAB \uD398\uC774\uC9C0",
+      prevPage: "\uC774\uC804 \uD398\uC774\uC9C0",
+      nextPage: "\uB2E4\uC74C \uD398\uC774\uC9C0",
+      lastPage: "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0",
+      prevGroup: "\uC774\uC804 \uADF8\uB8F9",
+      nextGroup: "\uB2E4\uC74C \uADF8\uB8F9"
+    },
+    select: {
+      placeholder: "\uC120\uD0DD",
+      allSelected: "\uC804\uCCB4",
+      clear: "\uC120\uD0DD \uC9C0\uC6B0\uAE30",
+      deselect: (label) => `${label} \uC120\uD0DD \uD574\uC81C`,
+      searchPlaceholder: "\uAC80\uC0C9",
+      empty: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.",
+      loading: "\uBD88\uB7EC\uC624\uB294 \uC911..."
+    }
+  },
+  en: {
+    pagination: {
+      firstPage: "First page",
+      prevPage: "Previous page",
+      nextPage: "Next page",
+      lastPage: "Last page",
+      prevGroup: "Previous pages",
+      nextGroup: "Next pages"
+    },
+    select: {
+      placeholder: "Select",
+      allSelected: "All",
+      clear: "Clear selection",
+      deselect: (label) => `Deselect ${label}`,
+      searchPlaceholder: "Search",
+      empty: "No items to display.",
+      loading: "Loading..."
+    }
+  },
+  ja: {
+    pagination: {
+      firstPage: "\u6700\u521D\u306E\u30DA\u30FC\u30B8",
+      prevPage: "\u524D\u306E\u30DA\u30FC\u30B8",
+      nextPage: "\u6B21\u306E\u30DA\u30FC\u30B8",
+      lastPage: "\u6700\u5F8C\u306E\u30DA\u30FC\u30B8",
+      prevGroup: "\u524D\u306E\u30B0\u30EB\u30FC\u30D7",
+      nextGroup: "\u6B21\u306E\u30B0\u30EB\u30FC\u30D7"
+    },
+    select: {
+      placeholder: "\u9078\u629E",
+      allSelected: "\u3059\u3079\u3066",
+      clear: "\u9078\u629E\u3092\u30AF\u30EA\u30A2",
+      deselect: (label) => `${label} \u306E\u9078\u629E\u3092\u89E3\u9664`,
+      searchPlaceholder: "\u691C\u7D22",
+      empty: "\u8868\u793A\u3059\u308B\u9805\u76EE\u304C\u3042\u308A\u307E\u305B\u3093\u3002",
+      loading: "\u8AAD\u307F\u8FBC\u307F\u4E2D..."
+    }
+  },
+  zh: {
+    pagination: {
+      firstPage: "\u7B2C\u4E00\u9875",
+      prevPage: "\u4E0A\u4E00\u9875",
+      nextPage: "\u4E0B\u4E00\u9875",
+      lastPage: "\u6700\u540E\u4E00\u9875",
+      prevGroup: "\u4E0A\u4E00\u7EC4",
+      nextGroup: "\u4E0B\u4E00\u7EC4"
+    },
+    select: {
+      placeholder: "\u8BF7\u9009\u62E9",
+      allSelected: "\u5168\u90E8",
+      clear: "\u6E05\u9664\u9009\u62E9",
+      deselect: (label) => `\u53D6\u6D88\u9009\u62E9 ${label}`,
+      searchPlaceholder: "\u641C\u7D22",
+      empty: "\u6CA1\u6709\u53EF\u663E\u793A\u7684\u9879\u76EE\u3002",
+      loading: "\u52A0\u8F7D\u4E2D..."
+    }
+  }
+};
+function normalizeLocale(locale) {
+  if (!locale) return DEFAULT_LOCALE;
+  const lang = locale.toLowerCase().split(/[-_]/)[0];
+  return SLOCALES.includes(lang) ? lang : DEFAULT_LOCALE;
+}
+function mergeDefined(base, override) {
+  const next = { ...base };
+  if (!override) return next;
+  for (const key of Object.keys(override)) {
+    if (override[key] !== void 0) next[key] = override[key];
+  }
+  return next;
+}
+function resolveMessages(locale, override) {
+  const base = BUNDLES[normalizeLocale(locale)];
+  return {
+    pagination: mergeDefined(base.pagination, override?.pagination),
+    select: mergeDefined(base.select, override?.select)
+  };
+}
+function createValue(locale, override) {
+  const normalized = normalizeLocale(locale);
+  const numberFormat = new Intl.NumberFormat(normalized);
+  return {
+    locale: normalized,
+    messages: resolveMessages(normalized, override),
+    formatNumber: (value) => numberFormat.format(value)
+  };
+}
+var DEFAULT_VALUE = createValue(void 0);
+var LocaleContext = /* @__PURE__ */ react.createContext(DEFAULT_VALUE);
+function SLocaleProvider({ locale, messages, children }) {
+  const value = react.useMemo(() => createValue(locale, messages), [locale, messages]);
+  return /* @__PURE__ */ jsxRuntime.jsx(LocaleContext.Provider, { value, children });
+}
+function useLocale() {
+  return react.useContext(LocaleContext);
+}
 var Icon_account = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1739,6 +1859,41 @@ var Icon_date = (p) => {
     }
   );
 };
+var Icon_dollar = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M12 5V7.1M12 7.1V12M12 7.1H15.3333M12 7.1H10.3333C9.04467 7.1 8 8.1969 8 9.55C8 10.9031 9.04467 12 10.3333 12H12M12 12V16.9M12 12H13.6667C14.9553 12 16 13.0969 16 14.45C16 15.8031 14.9553 16.9 13.6667 16.9H12M12 16.9V19M12 16.9H8.66667",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+};
 var Icon_dot = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1955,6 +2110,54 @@ var Icon_focus = (p) => {
     }
   );
 };
+var Icon_fullscreen = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M9 3H4C3.44772 3 3 3.44772 3 4V9M15 3H20C20.5523 3 21 3.44772 21 4V9M21 15V20C21 20.5523 20.5523 21 20 21H15M9 21H4C3.44772 21 3 20.5523 3 20V15",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
+var Icon_fullscreenExit = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M3 9H8C8.55228 9 9 8.55228 9 8V3M15 3V8C15 8.55228 15.4477 9 16 9H21M21 15H16C15.4477 15 15 15.4477 15 16V21M9 21V16C9 15.4477 8.55228 15 8 15H3",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
 var Icon_global = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3657,6 +3860,7 @@ var ICONS = {
   coupon: Icon_coupon,
   dashboard: Icon_dashboard,
   date: Icon_date,
+  dollar: Icon_dollar,
   dot: Icon_dot,
   download: Icon_download,
   drag: Icon_drag,
@@ -3664,6 +3868,8 @@ var ICONS = {
   etc: Icon_etc,
   event: Icon_event,
   focus: Icon_focus,
+  fullscreen: Icon_fullscreen,
+  fullscreenExit: Icon_fullscreenExit,
   global: Icon_global,
   helpFill: Icon_helpFill,
   helpOutline: Icon_helpOutline,
@@ -10449,7 +10655,17 @@ function TokenIcon2({ name, size }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name, size: "100%", style: { width: size, height: size } });
 }
 var SSystemActionButton = /* @__PURE__ */ react.forwardRef(
-  function SSystemActionButton2({ color = "light", type, label, option, disabled = false, className, style, ...rest }, ref) {
+  function SSystemActionButton2({
+    color = "light",
+    type,
+    label,
+    labelSlot,
+    option,
+    disabled = false,
+    className,
+    style,
+    ...rest
+  }, ref) {
     const c = SYSTEM_ACTION_BUTTON_COLOR_CONFIG[color];
     const spec = SYSTEM_ACTION_BUTTON_TYPE_CONFIG[type];
     const listBox = type === "account" ? option ?? {} : void 0;
@@ -10537,7 +10753,19 @@ var SSystemActionButton = /* @__PURE__ */ react.forwardRef(
               icon: "dot",
               label: selected?.label ?? status.value
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }) }),
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
+            labelSlot != null && // 라벨↔슬롯 간격에 대응 토큰이 없어 아이콘↔라벨 간격을 같은 호흡으로 쓴다.
+            // 라벨이 없으면 슬롯이 아이콘 바로 옆에서 시작하도록 간격은 라벨이 있을 때만 준다.
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "inline-flex shrink-0 items-center",
+                style: label != null ? { marginLeft: SYSTEM_ACTION_BUTTON_LAYOUT.iconLabelGap } : void 0,
+                children: labelSlot
+              }
+            )
+          ] }) }),
           (actionText != null || spec.actionIcon) && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex shrink-0 items-center", style: { gap: SYSTEM_ACTION_BUTTON_LAYOUT.actionGap }, children: [
             actionText != null && spec.actionText && /* @__PURE__ */ jsxRuntime.jsx(
               "span",
@@ -14315,6 +14543,7 @@ function SPagination({
   className,
   style
 }) {
+  const t = useLocale().messages.pagination;
   const start = Math.floor((currentPage - 1) / PER_PAGE) * PER_PAGE + 1;
   const end = Math.min(start + PER_PAGE - 1, lastPage);
   const pageNumbers = Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);
@@ -14341,18 +14570,18 @@ function SPagination({
     }
   );
   const prevButtons = simple ? currentPage > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    navBtn("chevronLeftEnd", "\uCCAB \uD398\uC774\uC9C0", () => go(1)),
-    navBtn("chevronLeft", "\uC774\uC804 \uD398\uC774\uC9C0", () => go(currentPage - 1))
+    navBtn("chevronLeftEnd", t.firstPage, () => go(1)),
+    navBtn("chevronLeft", t.prevPage, () => go(currentPage - 1))
   ] }) : !isFirstGroup && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    navBtn("chevronLeftEnd", "\uCCAB \uD398\uC774\uC9C0", () => go(1)),
-    navBtn("chevronLeft", "\uC774\uC804 \uADF8\uB8F9", () => groupMove("backward"))
+    navBtn("chevronLeftEnd", t.firstPage, () => go(1)),
+    navBtn("chevronLeft", t.prevGroup, () => groupMove("backward"))
   ] });
   const nextButtons = simple ? currentPage < lastPage && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    navBtn("chevronRight", "\uB2E4\uC74C \uD398\uC774\uC9C0", () => go(currentPage + 1)),
-    navBtn("chevronRightEnd", "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0", () => go(lastPage))
+    navBtn("chevronRight", t.nextPage, () => go(currentPage + 1)),
+    navBtn("chevronRightEnd", t.lastPage, () => go(lastPage))
   ] }) : !isLastGroup && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    navBtn("chevronRight", "\uB2E4\uC74C \uADF8\uB8F9", () => groupMove("forward")),
-    navBtn("chevronRightEnd", "\uB9C8\uC9C0\uB9C9 \uD398\uC774\uC9C0", () => go(lastPage))
+    navBtn("chevronRight", t.nextGroup, () => groupMove("forward")),
+    navBtn("chevronRightEnd", t.lastPage, () => go(lastPage))
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -16444,8 +16673,8 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   valueDisplay = "text",
   showSearch = false,
   showSelectAll = false,
-  allSelectedLabel = "\uC804\uCCB4",
-  placeholder = "\uC120\uD0DD",
+  allSelectedLabel: allSelectedLabelProp,
+  placeholder: placeholderProp,
   disabled = false,
   clearable = false,
   error = false,
@@ -16486,6 +16715,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
   const partialOptions = pagingEnabled || serverSearch;
   const portalContainer = usePortalContainer();
   const insideModal = useInsideModal();
+  const t = useLocale().messages.select;
+  const allSelectedLabel = allSelectedLabelProp ?? t.allSelected;
+  const placeholder = placeholderProp ?? t.placeholder;
   const [search, setSearch] = react.useState("");
   const [ruleError, setRuleError] = react.useState("");
   const [open, setOpen] = react.useState(false);
@@ -17227,7 +17459,9 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                           chip.removable && /* @__PURE__ */ jsxRuntime.jsx(
                             TriggerRemoveButton,
                             {
-                              ariaLabel: `${isHtmlLabel(chip.label) ? extractText(chip.label) : chip.label} \uC120\uD0DD \uD574\uC81C`,
+                              ariaLabel: t.deselect(
+                                isHtmlLabel(chip.label) ? extractText(chip.label) : chip.label
+                              ),
                               onRemove: () => handleRemoveChip(chip.values)
                             }
                           )
@@ -17239,7 +17473,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                 )
               ) : /* @__PURE__ */ jsxRuntime.jsx(TriggerLabel, { label: triggerText }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex shrink-0 items-center gap-[8px]", children: [
-                showClear && /* @__PURE__ */ jsxRuntime.jsx(TriggerRemoveButton, { ariaLabel: "\uC120\uD0DD \uC9C0\uC6B0\uAE30", onRemove: handleClear }),
+                showClear && /* @__PURE__ */ jsxRuntime.jsx(TriggerRemoveButton, { ariaLabel: t.clear, onRemove: handleClear }),
                 showTriggerSpinner ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0", "data-select-trigger-spinner": true, children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: 12 }) }) : /* @__PURE__ */ jsxRuntime.jsx(
                   SIcon,
                   {
@@ -17319,7 +17553,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                           value: search,
                           onValueChange: handleSearchChange,
                           onKeyDown: handleKeyDown,
-                          placeholder: "\uAC80\uC0C9",
+                          placeholder: t.searchPlaceholder,
                           clearable: true,
                           "aria-controls": listboxId,
                           "aria-activedescendant": focusedIndex >= 0 ? activeOptionId : void 0
@@ -17363,7 +17597,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                     }
                   ) : loading2 ? null : (
                     // 첫 페이지를 받는 중에는 "없다"고 단정하지 않는다 — 아래 로딩 표시가 대신 나온다.
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]", children: t.empty })
                   ),
                   loading2 && /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
@@ -17372,7 +17606,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                       className: "flex items-center justify-center gap-[8px] px-[12px] py-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]",
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: 16 }),
-                        "\uBD88\uB7EC\uC624\uB294 \uC911..."
+                        t.loading
                       ]
                     }
                   )
@@ -30606,6 +30840,7 @@ exports.SKELETON_TYPES = SKELETON_TYPES;
 exports.SKELETON_TYPE_CONFIG = SKELETON_TYPE_CONFIG;
 exports.SKeyValueTable = SKeyValueTable;
 exports.SLAYOUT_MIN_WIDTH = SLAYOUT_MIN_WIDTH;
+exports.SLOCALES = SLOCALES;
 exports.SLauncherListBox = SLauncherListBox;
 exports.SLayout = SLayout;
 exports.SLayoutContext = SLayoutContext;
@@ -30615,6 +30850,7 @@ exports.SList = SList2;
 exports.SListItem = SListItem2;
 exports.SLoadingContainer = SLoadingContainer;
 exports.SLoadingModal = SLoadingModal;
+exports.SLocaleProvider = SLocaleProvider;
 exports.SLoginCard = SLoginCard2;
 exports.SLogo = SLogo;
 exports.SMeatballButton = SMeatballButton2;
@@ -30684,7 +30920,9 @@ exports.isColorKey = isColorKey;
 exports.isFieldWidthGrade = isFieldWidthGrade;
 exports.loading = loading;
 exports.normalizeExtension = normalizeExtension;
+exports.normalizeLocale = normalizeLocale;
 exports.resolveColor = resolveColor;
+exports.useLocale = useLocale;
 exports.useSLayout = useSLayout;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map