sellmate-design-system-react 9.0.0-beta.68 → 9.0.0-beta.69

package/AGENTS.md

@@ -706,7 +706,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 - **`SContextAlert` 는 대상 옆에 둔다.** 페이지 맨 위에 놓고 "아래 어딘가의 이야기"를 하면 그건 `SCallout` 이 할 일이다.
 - **`action` 에는 `SButton size="xs"` 를 넣는다.** 그 높이가 곧 상자의 콘텐츠 높이라, 더 큰 버튼을 넣으면 상자가 세로로 늘어나 한 줄 알림의 리듬이 깨진다. 버튼이 둘 이상 필요하면 한 줄로 끝날 이야기가 아니다 — 모달(§3-3)을 본다.
 - **`messages` 는 줄을 나누는 용도지 문장을 자르는 용도가 아니다.** 한 문장이 길어 넘치는 것은 그냥 두면 줄바꿈된다. 서로 다른 사실일 때만 배열로 나눈다.
-- **아이콘은 기본값을 그대로 둔다.** 인텐트 6종이 같은 아이콘을 쓰는 것이 시안의 규칙이다. `icon` 을 바꾸면 면의 색과 아이콘의 뜻이 따로 논다.
+- **아이콘은 기본적으로 없다.** `icon` 을 주지 않으면 아이콘 칸 자체가 없고, 알림의 성격은 면 색이 말한다. 붙이기로 했다면 인텐트 6종 모두 같은 글리프(`notificationOutline`) 하나를 쓴다 — 인텐트마다 아이콘을 바꾸면 면의 색과 아이콘의 뜻이 따로 논다. 색도 같다: `iconColor` 는 아이콘이 성격까지 말해야 하는 자리에서만 쓰고, 면 색에 맞춰 인텐트마다 바꾸지 않는다.
 
 ### 3-3. 플로팅/오버레이류
 

package/dist/components/SContextAlert/README.md

@@ -8,9 +8,10 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `intent?` | `SContextAlertIntent` | `'default'` | 알림의 성격 — 면과 테두리 색이 바뀐다. 아이콘과 본문색은 인텐트와 무관하게 같다. `default` 안내 · `danger` 오류 · `warning` 주의 · `success` 완료 · `accent` 강조 · `discovery` 새 기능 |
+| `intent?` | `SContextAlertIntent` | `'default'` | 알림의 성격 — 면과 테두리 색만 바뀐다. 본문색과 아이콘 기본색은 인텐트와 무관하게 하나다. `default` 안내 · `danger` 오류 · `warning` 주의 · `success` 완료 · `accent` 강조 · `discovery` 새 기능 |
 | `messages?` | `string[]` | `[]` | 본문. 각 문자열이 한 줄이 되고, 인라인 HTML(`<b>` · `<a>` 등)을 허용한다 — `sanitizeInlineHtml` 로 살균한 뒤 렌더하므로 스크립트·위험 스킴은 제거된다. |
-| `icon?` | `SIconName` | `CONTEXT_ALERT_DEFAULT_ICON` | 왼쪽 아이콘. 시안은 인텐트와 무관하게 원 안 느낌표 하나를 쓴다 |
+| `icon?` | `SIconName` | — | 왼쪽 아이콘. **주지 않으면 아이콘 칸 자체가 없다** — 넣을 때만 넣는다. 넣는다면 인텐트와 무관하게 원 안 느낌표(`notificationOutline`) 하나를 쓴다. 인텐트마다 다른 글리프를 고르면 면의 색과 아이콘의 뜻이 따로 논다. |
+| `iconColor?` | `SColor` | — | 아이콘 색. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상. 주지 않으면 본문보다 한 단계 옅은 기본색이 된다 — 인텐트와 무관하게 하나다. 면 색과 짝을 맞추려 인텐트마다 다른 색을 넣는 것은 시안의 규칙이 아니다. |
 | `action?` | `ReactNode` | — | 오른쪽에 붙는 후속 동작. **`SButton size="xs"` 를 넣는다** — 그 높이(24px)가 곧 이 상자의 콘텐츠 높이라 시안의 40px 가 그대로 나온다. 더 큰 버튼을 넣으면 상자가 그만큼 세로로 늘어난다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |

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

@@ -1,9 +1,10 @@
 import { type CSSProperties, type ReactNode } from 'react';
+import { type SColor } from '../../lib/color';
 import { type SIconName } from '../SIcon';
 import { type SContextAlertIntent } from './contextAlert.config';
 export interface SContextAlertProps {
     /**
-     * 알림의 성격 — 면과 테두리 색이 바뀐다. 아이콘과 본문색은 인텐트와 무관하게 같다.
+     * 알림의 성격 — 면과 테두리 색만 바뀐다. 본문색과 아이콘 기본색은 인텐트와 무관하게 하나다.
      *
      * `default` 안내 · `danger` 오류 · `warning` 주의 · `success` 완료 · `accent` 강조 · `discovery` 새 기능
      */
@@ -13,8 +14,20 @@ export interface SContextAlertProps {
      * `sanitizeInlineHtml` 로 살균한 뒤 렌더하므로 스크립트·위험 스킴은 제거된다.
      */
     messages?: string[];
-    /** 왼쪽 아이콘. 시안은 인텐트와 무관하게 원 안 느낌표 하나를 쓴다 */
+    /**
+     * 왼쪽 아이콘. **주지 않으면 아이콘 칸 자체가 없다** — 넣을 때만 넣는다.
+     *
+     * 넣는다면 인텐트와 무관하게 원 안 느낌표(`notificationOutline`) 하나를 쓴다. 인텐트마다
+     * 다른 글리프를 고르면 면의 색과 아이콘의 뜻이 따로 논다.
+     */
     icon?: SIconName;
+    /**
+     * 아이콘 색. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상.
+     *
+     * 주지 않으면 본문보다 한 단계 옅은 기본색이 된다 — 인텐트와 무관하게 하나다. 면 색과 짝을
+     * 맞추려 인텐트마다 다른 색을 넣는 것은 시안의 규칙이 아니다.
+     */
+    iconColor?: SColor;
     /**
      * 오른쪽에 붙는 후속 동작.
      *

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

@@ -1,4 +1,3 @@
-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];
 /**
@@ -13,12 +12,6 @@ export declare const CONTEXT_ALERT_SURFACE: Record<SContextAlertIntent, {
     bg: string;
     border: string;
 }>;
-/**
- * 기본 아이콘 — 원 안 느낌표.
- *
- * 시안은 인텐트 6종 모두 같은 글리프를 쓴다. 인텐트마다 아이콘을 바꾸는 매핑은 없다.
- */
-export declare const CONTEXT_ALERT_DEFAULT_ICON: SIconName;
 /**
  * 아이콘 색 — 본문(`--cmp-contextAlert-content`)보다 한 단계 옅다.
  *

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

@@ -1,2 +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';
+export { CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, CONTEXT_ALERT_ICON_COLOR, type SContextAlertIntent, } from './contextAlert.config';

package/dist/index.cjs

@@ -8288,16 +8288,8 @@ var CONTEXT_ALERT_SURFACE = {
     border: "var(--cmp-contextAlert-discovery-border)"
   }
 };
-var CONTEXT_ALERT_DEFAULT_ICON = "notificationOutline";
 var CONTEXT_ALERT_ICON_COLOR = "var(--sys-color-fg-tertiary)";
-var SContextAlert = /* @__PURE__ */ react.forwardRef(function SContextAlert2({
-  intent = "default",
-  messages = [],
-  icon = CONTEXT_ALERT_DEFAULT_ICON,
-  action: action2,
-  className,
-  style
-}, ref) {
+var SContextAlert = /* @__PURE__ */ react.forwardRef(function SContextAlert2({ intent = "default", messages = [], icon, iconColor, action: action2, className, style }, ref) {
   const surface = CONTEXT_ALERT_SURFACE[intent];
   const vars = {
     "--ca-bg": surface.bg,
@@ -8317,12 +8309,12 @@ var SContextAlert = /* @__PURE__ */ react.forwardRef(function SContextAlert2({
       ),
       style: { ...vars, ...style },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
           SIcon,
           {
             name: icon,
             size: "var(--cmp-contextAlert-icon)",
-            color: CONTEXT_ALERT_ICON_COLOR,
+            color: iconColor || CONTEXT_ALERT_ICON_COLOR,
             className: "shrink-0"
           }
         ),
@@ -27577,7 +27569,6 @@ exports.CHAT_MESSAGE_READ_STATUSES = CHAT_MESSAGE_READ_STATUSES;
 exports.CHAT_MESSAGE_VARIANTS = CHAT_MESSAGE_VARIANTS;
 exports.CHIP_COLORS = CHIP_COLORS;
 exports.COLOR_KEYS = COLOR_KEYS;
-exports.CONTEXT_ALERT_DEFAULT_ICON = CONTEXT_ALERT_DEFAULT_ICON;
 exports.CONTEXT_ALERT_ICON_COLOR = CONTEXT_ALERT_ICON_COLOR;
 exports.CONTEXT_ALERT_INTENTS = CONTEXT_ALERT_INTENTS;
 exports.CONTEXT_ALERT_SURFACE = CONTEXT_ALERT_SURFACE;