sellmate-design-system-react 9.0.0-beta.47 → 9.0.0-beta.49

package/dist/index.cjs

@@ -4681,10 +4681,9 @@ var STextarea = /* @__PURE__ */ react.forwardRef(function STextarea2({
   );
 });
 var DEFAULT_PLACEHOLDER = "\uBA54\uC2DC\uC9C0\uB97C \uC785\uB825\uD574 \uC8FC\uC138\uC694...";
-var FIELD_MIN_HEIGHT = 48;
 var FIELD_BORDER = 1;
-var TEXTAREA_MIN_HEIGHT = FIELD_MIN_HEIGHT - FIELD_BORDER * 2;
-var BUTTON_BOTTOM_INSET = `calc((${FIELD_MIN_HEIGHT}px - var(--cmp-ghostButton-md-size)) / 2)`;
+var TEXTAREA_MIN_HEIGHT = `calc(var(--cmp-chatInput-buttonFrame-height) - ${FIELD_BORDER * 2}px)`;
+var BUTTON_BOTTOM_INSET = `calc((var(--cmp-chatInput-buttonFrame-height) - var(--cmp-ghostButton-md-size)) / 2)`;
 var DEFAULT_MAX_ROWS = 5;
 var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
   value = "",
@@ -4713,8 +4712,8 @@ var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
     e.preventDefault();
     send();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col bg-(--sys-color-field-bg-default)", className), style, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-sd-8 p-sd-12", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col bg-(--cmp-chatInput-bg)", className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end gap-(--cmp-chatInput-gap) p-(--cmp-chatInput-padding)", children: [
       onAttach != null && /* @__PURE__ */ jsxRuntime.jsx(
         SGhostButton,
         {
@@ -4776,81 +4775,67 @@ var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
 var SChatInput2 = /* @__PURE__ */ withDisplayName(SChatInputImpl, "SChatInput");
 
 // src/components/SChatAttachedFile/chatAttachedFile.config.ts
-var CHAT_ATTACHED_FILE_VARIANTS = ["attached", "sent"];
 var CHAT_ATTACHED_FILE_CONFIG = {
-  attached: {
-    // 오른쪽 여백이 왼쪽보다 넓은 것은 제거 버튼이 자기 여백을 갖기 때문이다(시안 그대로).
-    box: "h-[30px] gap-sd-8 pl-sd-4 pr-sd-8 bg-(--sys-color-bg-neutralLight) border-(--sys-color-border-default)",
-    tile: "h-[20px] w-[20px] bg-(--sys-color-bg-frame)",
-    iconSize: 16,
-    nameTypo: "typo-body-sm-default"
-  },
-  sent: {
-    box: "h-[56px] gap-sd-12 px-sd-12 bg-(--sys-color-bg-frame) border-(--sys-color-border-strong)",
-    tile: "h-[28px] w-[28px] bg-(--sys-color-bg-accentFaint)",
-    iconSize: 20,
-    nameTypo: "typo-body-md-medium"
-  }
+  /** 바깥 상자 — 좌우·상하 여백·면·선·라운드 */
+  box: "px-(--cmp-chatAttachedFile-paddingX) py-(--cmp-chatAttachedFile-paddingY) rounded-(--cmp-chatAttachedFile-radius) border-(length:--cmp-chatAttachedFile-border-width) border-(--cmp-chatAttachedFile-border-color) bg-(--cmp-chatAttachedFile-bg)",
+  /** 콘텐츠 묶음 ↔ 제거 버튼 간격 */
+  outerGap: "gap-(--cmp-chatAttachedFile-gap)",
+  /** 아이콘 칩 ↔ 파일명 간격 */
+  contentGap: "gap-(--cmp-chatAttachedFile-content-gap)",
+  /** 클립 아이콘이 앉는 칩 — 내부 패딩·면·라운드 (높이는 아이콘+패딩이 정한다) */
+  tile: "p-(--cmp-chatAttachedFile-icon-wrapper-padding) rounded-(--cmp-chatAttachedFile-icon-wrapper-radius) bg-(--cmp-chatAttachedFile-icon-wrapper-bg)",
+  /** 칩 안 클립 아이콘 크기(px). SVG width/height 는 속성값이라 CSS 변수를 못 받아 값으로 둔다 (토큰 값과 동일) */
+  iconSize: 16,
+  /** 파일명 타이포 프리셋 */
+  nameTypo: "typo-body-sm-default",
+  /** 파일명 텍스트색 */
+  textColor: "text-(--cmp-chatAttachedFile-filename-color)"
 };
-var SIZE_UNITS = ["B", "KB", "MB", "GB", "TB"];
-function formatFileSize(bytes) {
-  if (!Number.isFinite(bytes) || bytes < 0) return "";
-  let value = bytes;
-  let unit = 0;
-  while (value >= 1024 && unit < SIZE_UNITS.length - 1) {
-    value /= 1024;
-    unit += 1;
-  }
-  return unit === 0 ? `${Math.round(value)}${SIZE_UNITS[0]}` : `${value.toFixed(1)}${SIZE_UNITS[unit]}`;
-}
-function normalizeExtension(extension) {
-  return extension.trim().replace(/^\.+/, "").toLowerCase();
-}
-function fileExtension(name) {
-  const dot = name.lastIndexOf(".");
-  return dot > 0 && dot < name.length - 1 ? name.slice(dot + 1).toLowerCase() : "";
-}
 var SChatAttachedFileImpl = /* @__PURE__ */ react.forwardRef(
-  function SChatAttachedFile({ variant, name, extension, size, onRemove, className, ...rest }, ref) {
-    const preset = CHAT_ATTACHED_FILE_CONFIG[variant];
-    const ext = extension != null ? normalizeExtension(extension) : fileExtension(name);
-    const meta = [ext, size != null ? formatFileSize(size) : ""].filter(Boolean).join(" / ");
-    const showMeta = variant === "sent" && meta !== "";
-    const showRemove = variant === "attached" && onRemove != null;
+  function SChatAttachedFile({ name, onRemove, className, ...rest }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         className: cn(
-          "inline-flex max-w-full items-center rounded-8 border",
-          preset.box,
+          "inline-flex max-w-full items-center border-solid",
+          CHAT_ATTACHED_FILE_CONFIG.box,
+          CHAT_ATTACHED_FILE_CONFIG.outerGap,
           className
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                "grid shrink-0 place-items-center rounded-4",
-                preset.tile,
-                "text-(--sys-color-fg-accentLight)"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "attachFile", size: preset.iconSize })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate text-(--sys-color-fg-secondary)", preset.nameTypo), children: name }),
-            showMeta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default truncate text-(--sys-color-fg-secondary)", children: meta })
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("flex min-w-0 items-center", CHAT_ATTACHED_FILE_CONFIG.contentGap), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "inline-grid shrink-0 place-items-center text-(--sys-color-fg-accentLight)",
+                  CHAT_ATTACHED_FILE_CONFIG.tile
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "attachFile", color: "grey_65", size: CHAT_ATTACHED_FILE_CONFIG.iconSize })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "truncate",
+                  CHAT_ATTACHED_FILE_CONFIG.nameTypo,
+                  CHAT_ATTACHED_FILE_CONFIG.textColor
+                ),
+                children: name
+              }
+            )
           ] }),
-          showRemove && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+          onRemove != null && /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
             {
-              type: "button",
-              "aria-label": `${name} \uC81C\uAC70`,
+              icon: "close",
+              size: "xs",
+              ariaLabel: `${name} \uC81C\uAC70`,
               onClick: onRemove,
-              className: "ml-auto flex shrink-0 cursor-pointer items-center text-(--sys-color-fg-tertiary)",
-              children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "close", size: 16 })
+              className: "shrink-0"
             }
           )
         ]
@@ -4859,12 +4844,120 @@ var SChatAttachedFileImpl = /* @__PURE__ */ react.forwardRef(
   }
 );
 var SChatAttachedFile2 = /* @__PURE__ */ withDisplayName(SChatAttachedFileImpl, "SChatAttachedFile");
+
+// src/components/SChatFile/chatFile.config.ts
+var CHAT_FILE_CONFIG = {
+  /** 바깥 상자 — 좌우 비대칭 여백·상하 여백·면·선·라운드 */
+  box: "pl-(--cmp-chatFile-paddingLeft) pr-(--cmp-chatFile-paddingRight) py-(--cmp-chatFile-paddingY) rounded-(--cmp-chatFile-radius) border-(length:--cmp-chatFile-border-width) border-(--cmp-chatFile-border-color) bg-(--cmp-chatFile-bg-default)",
+  /** 아이콘 칩 ↔ 파일명 간격 */
+  contentGap: "gap-(--cmp-chatFile-gap)",
+  /**
+   * 클립 아이콘이 앉는 칩 — 내부 패딩·면·라운드 (높이는 아이콘+패딩이 정한다).
+   *
+   * hover 면은 상자가 아니라 여기에도 걸린다 — 카드가 어두워질 때 칩은 반대로 밝아져
+   * 칩이 배경에 묻히지 않는다. 상자의 hover 를 따라가야 하므로 group-hover 로 받는다.
+   *
+   * **`--sys-color-bg-frame` 은 임시다.** 시안의 hover 칩 색(`#FFFFFF`)에 대응하는
+   * 컴포넌트 토큰이 없다 — `component.chatMessage.chatFile.icon.wrapper.bg` 는 값이 하나뿐이라
+   * hover 를 담지 못한다. 상자의 `bg.default` 가 참조하는 것과 같은 시스템 토큰으로 대신 걸어 둔다.
+   * 디자인팀에 `icon.wrapper.bg.hover` 를 요청해 나오는 대로 갈아끼운다.
+   */
+  tile: "p-(--cmp-chatFile-icon-wrapper-padding) rounded-(--cmp-chatFile-icon-wrapper-radius) bg-(--cmp-chatFile-icon-wrapper-bg) group-hover/chat-file:bg-(--sys-color-bg-frame)",
+  /** 칩 안 클립 아이콘 크기(px). SVG width/height 는 속성값이라 CSS 변수를 못 받아 값으로 둔다 (토큰 값과 동일) */
+  iconSize: 20,
+  /** 파일명 타이포 프리셋 */
+  nameTypo: "typo-body-md-bold",
+  /** 파일명·부가정보 텍스트색 */
+  textColor: "text-(--cmp-chatFile-text-color)",
+  /**
+   * 눌리는 모양 — 커서·hover 면·포커스 링. 보낸 파일은 언제나 열 수 있으므로 늘 붙는다
+   * (`onFileClick` 이 필수다).
+   *
+   * 상자의 여백·면·선과 따로 두는 이유: 이건 상호작용을 드러내는 값이라 성격이 다르다.
+   * 링은 `SExpansionItem`·`SStepper` 와 같은 accent outline.
+   */
+  interactive: "cursor-pointer hover:bg-(--cmp-chatFile-bg-hover) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent)"
+};
+var SIZE_UNITS = ["B", "KB", "MB", "GB", "TB"];
+function formatFileSize(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "";
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < SIZE_UNITS.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return unit === 0 ? `${Math.round(value)}${SIZE_UNITS[0]}` : `${value.toFixed(1)}${SIZE_UNITS[unit]}`;
+}
+function normalizeExtension(extension) {
+  return extension.trim().replace(/^\.+/, "").toLowerCase();
+}
+function fileExtension(name) {
+  const dot = name.lastIndexOf(".");
+  return dot > 0 && dot < name.length - 1 ? name.slice(dot + 1).toLowerCase() : "";
+}
+var SChatFileImpl = /* @__PURE__ */ react.forwardRef(function SChatFile({ name, extension, size, onFileClick, className, ...rest }, ref) {
+  const ext = extension != null ? normalizeExtension(extension) : fileExtension(name);
+  const meta = [ext, size != null ? formatFileSize(size) : ""].filter(Boolean).join(" / ");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        // group/chat-file: 아이콘 칩이 상자의 hover 를 따라가야 해서 이름을 붙인다 (config.tile 참고)
+        "group/chat-file inline-flex max-w-full items-center border-solid",
+        CHAT_FILE_CONFIG.box,
+        CHAT_FILE_CONFIG.contentGap,
+        CHAT_FILE_CONFIG.interactive,
+        className
+      ),
+      ...rest,
+      role: "button",
+      tabIndex: 0,
+      onClick: (event) => {
+        rest.onClick?.(event);
+        onFileClick?.();
+      },
+      onKeyDown: (event) => {
+        rest.onKeyDown?.(event);
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        onFileClick?.();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "inline-grid shrink-0 place-items-center text-(--sys-color-fg-accentLight)",
+              CHAT_FILE_CONFIG.tile
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "attachFile", size: CHAT_FILE_CONFIG.iconSize })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("truncate", CHAT_FILE_CONFIG.nameTypo, CHAT_FILE_CONFIG.textColor), children: name }),
+          meta !== "" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("typo-body-xs-default truncate", CHAT_FILE_CONFIG.textColor), children: meta })
+        ] })
+      ]
+    }
+  );
+});
+var SChatFile2 = /* @__PURE__ */ withDisplayName(SChatFileImpl, "SChatFile");
 var CHAT_MESSAGE_DIRECTIONS = ["incoming", "outgoing"];
-var CHAT_MESSAGE_VARIANTS = ["default", "template"];
+var CHAT_MESSAGE_VARIANTS = ["default", "template", "admin"];
 var BUBBLE_SURFACE = {
-  incoming: "bg-(--sys-color-bg-screen) text-(--sys-color-fg-primary)",
-  outgoing: "bg-(--sys-color-bg-brand) text-(--sys-color-fg-inverse)",
-  template: "bg-(--sys-color-bg-accentFaint) text-(--sys-color-fg-deep)"
+  incoming: "bg-(--cmp-chatBubble-incoming-bg) text-(--cmp-chatBubble-incoming-content)",
+  outgoing: "bg-(--cmp-chatBubble-outgoing-general-bg) text-(--cmp-chatBubble-outgoing-general-content)",
+  template: "bg-(--cmp-chatBubble-templete-bg) text-(--cmp-chatBubble-templete-content)",
+  // TODO: `chatBubble.outgoing.admin` 토큰이 생기면 둘 다 그쪽으로 교체한다.
+  // 지금은 admin 면을 가리키는 컴포넌트 토큰이 없어 글자색만 시맨틱 토큰을 직접 쓴다.
+  admin: "bg-(--cmp-chatBubble-outgoing-default-bg) text-(--sys-color-fg-deep)"
+};
+var OUTGOING_SURFACE = {
+  default: "outgoing",
+  template: "template",
+  admin: "admin"
 };
 var CHAT_MESSAGE_READ_STATUSES = ["read", "unread"];
 var READ_STATUS_LABEL = {
@@ -4872,8 +4965,8 @@ var READ_STATUS_LABEL = {
   unread: "\uC548 \uC77D\uC74C"
 };
 var READ_STATUS_COLOR = {
-  read: "text-(--sys-color-fg-tertiary)",
-  unread: "text-(--sys-color-fg-warning)"
+  read: "text-(--cmp-chatTimeStamp-color)",
+  unread: "text-(--cmp-chatReadMark-color)"
 };
 var AVATAR_SIZE = 32;
 var AVATAR_ROW_HEIGHT = 40;
@@ -4885,7 +4978,7 @@ function Avatar({ src, alt, placeholder }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center", style: { height: AVATAR_ROW_HEIGHT }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "relative overflow-hidden rounded-full bg-(--sys-color-bg-screen)",
+      className: "relative overflow-hidden rounded-(--cmp-chatAvatar-radius) bg-(--cmp-chatAvatar-bg)",
       style: { width: AVATAR_SIZE, height: AVATAR_SIZE },
       children: src != null ? /* @__PURE__ */ jsxRuntime.jsx(SImage, { src, alt: alt ?? "", fit: "cover", className: "h-full w-full" }) : (
         // 원 밖으로 나가는 만큼을 좌우로 나눠 가운데를 맞추고, 아래는 원이 자른다.
@@ -4894,7 +4987,7 @@ function Avatar({ src, alt, placeholder }) {
           {
             name: "user",
             size: AVATAR_ICON_SIZE,
-            color: "var(--sys-color-fg-quaternary)",
+            color: "var(--cmp-chatAvatar-icon)",
             className: "absolute top-0",
             style: { left: (AVATAR_SIZE - AVATAR_ICON_SIZE) / 2 }
           }
@@ -4914,12 +5007,14 @@ var SChatMessageImpl = /* @__PURE__ */ react.forwardRef(function SChatMessage({
   variant = "default",
   actions,
   messages,
+  attachments,
   className,
   ...rest
 }, ref) {
   const outgoing = direction === "outgoing";
-  const surface = direction === "outgoing" && variant === "template" ? "template" : direction;
+  const surface = outgoing ? OUTGOING_SURFACE[variant] : "incoming";
   const bubbles = messages ?? [];
+  const files = attachments ?? [];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -4927,45 +5022,77 @@ var SChatMessageImpl = /* @__PURE__ */ react.forwardRef(function SChatMessage({
       className: cn(
         // 아바타와 본문 열이 같은 줄에 서고, 보낸 메시지는 좌우를 뒤집는다.
         // items-start 라 이름이 있든 없든 아바타는 언제나 첫 줄에 붙는다.
-        "flex items-start gap-sd-12",
+        "flex items-start gap-(--cmp-chatMessage-avatarGap)",
         outgoing && "flex-row-reverse",
         className
       ),
       ...rest,
       children: [
         !outgoing && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatarSrc, alt: avatarAlt, placeholder: continued }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-w-0 flex-col gap-sd-4", outgoing ? "items-end" : "items-start"), children: [
-          !outgoing && !continued && sender != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default px-sd-8 text-(--sys-color-fg-secondary)", children: sender }),
-          bubbles.length > 0 && // 말풍선끼리는 이름·시각과의 간격(4px)보다 벌려 한 덩어리 안의 여러 발화로 읽히게 한다.
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: cn("flex min-w-0 flex-col gap-sd-8", outgoing ? "items-end" : "items-start"),
-              children: bubbles.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-col gap-(--cmp-chatMessage-contents-gap)",
+              outgoing ? "items-end" : "items-start"
+            ),
+            children: [
+              !outgoing && !continued && sender != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-bold px-(--cmp-chatMessage-name-paddingX) text-(--cmp-chatMessage-name-color)", children: sender }),
+              bubbles.length > 0 && // 말풍선끼리는 이름·시각과의 간격(4px)보다 벌려 한 덩어리 안의 여러 발화로 읽히게 한다.
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: cn(
-                    // 라운드 12px 은 대응 토큰이 없어 값으로 둔다 (디자인팀 토큰 추가 요청 대상).
-                    "typo-body-md-default max-w-full rounded-[12px] px-sd-16 py-sd-8",
-                    // 한글은 기본 규칙으로 두면 어절 한가운데서도 줄이 바뀐다 — 띄어쓰기에서만 끊고,
-                    // 끊을 자리가 없는 긴 토큰(URL·주문번호)만 흘려보낸다.
-                    "break-keep wrap-break-word",
-                    BUBBLE_SURFACE[surface]
+                    "flex min-w-0 flex-col gap-(--cmp-chatMessage-group-bubble-gap)",
+                    outgoing ? "items-end" : "items-start"
                   ),
-                  children: message
-                },
-                index
-              ))
-            }
-          ),
-          (readStatus != null || time != null) && // 읽음 표시와 시각은 한 줄에 선다 — 읽음이 먼저, 시각이 뒤다.
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "typo-body-sm-default flex items-center gap-sd-4 px-sd-8", children: [
-            readStatus != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: READ_STATUS_COLOR[readStatus], children: READ_STATUS_LABEL[readStatus] }),
-            time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-(--sys-color-fg-tertiary)", children: time })
-          ] }),
-          actions != null && // 버튼이 많아 한 줄에 안 들어가면 감싼다 — 넘쳐서 잘리는 것보다 낫다.
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-sd-8 px-sd-8", outgoing && "justify-end"), children: actions })
-        ] })
+                  children: bubbles.map((message, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "typo-body-md-medium max-w-full rounded-(--cmp-chatBubble-radius) px-(--cmp-chatBubble-paddingX) py-(--cmp-chatBubble-paddingY)",
+                        // 한글은 기본 규칙으로 두면 어절 한가운데서도 줄이 바뀐다 — 띄어쓰기에서만 끊고,
+                        // 끊을 자리가 없는 긴 토큰(URL·주문번호)만 흘려보낸다.
+                        "break-keep wrap-break-word",
+                        BUBBLE_SURFACE[surface]
+                      ),
+                      children: message
+                    },
+                    index
+                  ))
+                }
+              ),
+              files.length > 0 && // 파일 칸끼리는 말풍선과 같은 간격으로 벌린다 — 한 덩어리 안의 여러 발화로 읽힌다.
+              // 말풍선과 달리 면으로 감싸지 않는다 (`attachments` 주석 참고).
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex min-w-0 flex-col gap-(--cmp-chatMessage-group-bubble-gap)",
+                    outgoing ? "items-end" : "items-start"
+                  ),
+                  children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-full", children: file }, index))
+                }
+              ),
+              (readStatus != null || time != null) && // 읽음 표시와 시각은 한 줄에 선다 — 읽음이 먼저, 시각이 뒤다.
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-(--cmp-chatMessage-subData-gap) px-(--cmp-chatMessage-subData-paddingX)", children: [
+                readStatus != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("typo-body-sm-bold", READ_STATUS_COLOR[readStatus]), children: READ_STATUS_LABEL[readStatus] }),
+                time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-medium text-(--cmp-chatTimeStamp-color)", children: time })
+              ] }),
+              actions != null && // 버튼이 많아 한 줄에 안 들어가면 감싼다 — 넘쳐서 잘리는 것보다 낫다.
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-wrap gap-sd-8 px-(--cmp-chatMessage-bottomButtons-paddingX)",
+                    outgoing && "justify-end"
+                  ),
+                  children: actions
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -4981,14 +5108,13 @@ var SChatSystemMessageImpl = /* @__PURE__ */ react.forwardRef(
         "span",
         {
           className: cn(
-            // 라운드 15px 은 한 줄일 때 높이(20+4×2+1×2=30px)의 절반이다 — 한 줄에서는
-            // 완전한 알약으로 보이고, 여러 줄이 돼도 모서리가 상자 높이를 따라 부풀지 않는다.
-            // rounded-full 로 두면 두 줄부터 좌우가 커다란 반원이 되어 첫 글자가 안으로 밀린다.
-            // 대응 토큰이 없어 값으로 둔다 (디자인팀 토큰 추가 요청 대상).
-            "inline-flex max-w-full rounded-[15px] border",
-            "border-(--sys-color-border-default) bg-(--sys-color-bg-neutralBright)",
-            "typo-body-sm-default text-(--sys-color-fg-secondary)",
-            "px-sd-16 py-sd-4 text-center",
+            // 라운드는 말풍선과 같은 토큰을 쓴다 — 여러 줄이 돼도 모서리가 상자 높이를 따라
+            // 부풀지 않는다. 제 몫인 chatSystemMessage.radius 는 pill(9999px)이라 쓰지 않는다.
+            // 두 줄부터 좌우가 커다란 반원이 되어 첫 글자가 안으로 밀리기 때문이다.
+            "inline-flex max-w-full rounded-(--cmp-chatBubble-radius) border",
+            "border-(--cmp-chatSystemMessage-border-color) bg-(--cmp-chatSystemMessage-bg)",
+            "typo-body-sm-medium text-(--cmp-chatSystemMessage-color)",
+            "px-(--cmp-chatSystemMessage-paddingX) py-(--cmp-chatSystemMessage-paddingY) text-center",
             // 한글은 기본 규칙으로 두면 어절 한가운데서도 줄이 바뀐다 — 띄어쓰기에서만 끊고,
             // 끊을 자리가 없는 긴 토큰(URL·주문번호)만 흘려보낸다 (SChatMessage 말풍선과 같은 규칙).
             // 가운데 정렬이라 마지막 줄에 한 단어만 남으면 특히 눈에 띄므로 text-pretty 로 줄을 고른다.
@@ -6313,10 +6439,21 @@ function SCheckbox({
             ) })
           }
         ),
-        label && // 고스트(500) 텍스트로 너비를 고정 → 두께 400↔500 전환 시 레이아웃이 밀리지 않음
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "grid text-nowrap text-[12px] leading-[20px]", style: { color: labelColor }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "invisible font-medium", style: { gridArea: "1 / 1" }, children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { gridArea: "1 / 1", fontWeight: isChecked ? 500 : 400 }, children: label })
+        label && // 고스트(500) 텍스트로 너비를 고정 → 두께 400↔500 전환 시 레이아웃이 밀리지 않음.
+        // 한글은 기본 규칙으로 두면 어절 한가운데서도 줄이 바뀐다. 그러면 min-content 가 한 글자가
+        // 되어, flex 아이템을 지켜 주는 min-width:auto 가 무력해지고 폭이 남는데도 라벨부터
+        // 찌그러진다 — 띄어쓰기에서만 끊고, 끊을 자리가 없는 긴 토큰만 흘려보낸다
+        // (SRadio·SSwitch 라벨과 같은 규칙). 두 사본에 함께 걸려야 하므로 바깥 grid 에 준다.
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "grid break-keep wrap-break-word", style: { color: labelColor }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "typo-body-sm-medium invisible", style: { gridArea: "1 / 1" }, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: isChecked ? "typo-body-sm-medium" : "typo-body-sm-default",
+              style: { gridArea: "1 / 1" },
+              children: label
+            }
+          )
         ] })
       ]
     }
@@ -7770,7 +7907,7 @@ function SSwitch({
   style
 }) {
   const right = rightLabel;
-  const renderLabel = (text) => text ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] font-medium leading-[20px]", children: text }) : null;
+  const renderLabel = (text) => text ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-medium break-keep wrap-break-word", children: text }) : null;
   const trackBg = disabled ? value ? "var(--cmp-switch-bg-disabled-on)" : "var(--cmp-switch-bg-disabled-off)" : value ? "var(--cmp-switch-bg-on)" : "var(--cmp-switch-bg-off)";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
@@ -11777,7 +11914,7 @@ var SPageHeader = /* @__PURE__ */ withDisplayName(
           // plain 에는 전용 배경 토큰이 없어 시스템 흰 표면을 쓴다(토큰이 생기면 그것으로 갈아끼운다).
           bar ? "h-(--cmp-pageHeader-bar-height) border-b border-(--cmp-pageHeader-bar-border) bg-(--cmp-pageHeader-bar-bg) py-(--cmp-pageHeader-bar-paddingY)" : cn(
             // 스크롤되면 그림자를 더해 콘텐츠 위에 뜬 것처럼 보이게 한다.
-            "bg-(--sys-color-bg-frame) pt-(--cmp-pageHeader-plain-paddingTop) pb-(--cmp-pageHeader-plain-paddingBottom)",
+            "bg-(--sys-color-bg-frame) py-(--cmp-pageHeader-plain-paddingY)",
             isScrolled && "shadow-floating"
           ),
           className
@@ -11787,7 +11924,10 @@ var SPageHeader = /* @__PURE__ */ withDisplayName(
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex min-w-0 flex-1 items-center gap-(--cmp-pageHeader-gap)",
+            className: cn(
+              "flex min-w-0 flex-1 gap-(--cmp-pageHeader-gap)",
+              bar ? "items-center" : "items-start"
+            ),
             style: rowStyle,
             children: [
               hasBack && /* @__PURE__ */ jsxRuntime.jsx(
@@ -11797,7 +11937,7 @@ var SPageHeader = /* @__PURE__ */ withDisplayName(
                   size: "xs",
                   ariaLabel: "\uB4A4\uB85C\uAC00\uAE30",
                   onClick: onBack,
-                  className: "shrink-0"
+                  className: cn("shrink-0", bar ? "" : "mt-[3px]")
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(
@@ -15930,7 +16070,7 @@ function SRadio({
         label && /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
-            className: "grid",
+            className: "grid break-keep wrap-break-word",
             style: {
               color: disabled ? "var(--cmp-radio-label-disabled)" : "var(--cmp-radio-label-default)"
             },
@@ -17745,6 +17885,673 @@ function SKeyValueTable({
     )
   ] });
 }
+
+// src/lib/chart/scale.ts
+function niceNum(range, round) {
+  if (range <= 0) return 1;
+  const exponent = Math.floor(Math.log10(range));
+  const fraction = range / 10 ** exponent;
+  let nice;
+  if (round) {
+    nice = fraction < 1.5 ? 1 : fraction < 3 ? 2 : fraction < 7 ? 5 : 10;
+  } else {
+    nice = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10;
+  }
+  return nice * 10 ** exponent;
+}
+function trim(value, step) {
+  const decimals = Math.max(0, -Math.floor(Math.log10(step)));
+  return Number(value.toFixed(Math.min(decimals, 10)));
+}
+function niceScale(values, tickCount, fixedMax) {
+  const finite = values.filter(Number.isFinite);
+  const count = Math.max(2, Math.floor(tickCount));
+  const rawMin = Math.min(0, ...finite);
+  const rawMax = fixedMax ?? Math.max(0, ...finite);
+  if (!Number.isFinite(rawMin) || !Number.isFinite(rawMax) || rawMax === rawMin) {
+    const ticks2 = Array.from({ length: count }, (_, i) => i);
+    return { min: 0, max: count - 1, ticks: ticks2 };
+  }
+  const range = niceNum(rawMax - rawMin, false);
+  const step = niceNum(range / (count - 1), true);
+  const min = trim(Math.floor(rawMin / step) * step, step);
+  const max = trim(Math.ceil(rawMax / step) * step, step);
+  const ticks = [];
+  for (let v = min; v <= max + step / 2; v += step) ticks.push(trim(v, step));
+  return { min, max, ticks };
+}
+function ratioOf(value, scale) {
+  const span = scale.max - scale.min;
+  if (span <= 0) return 0;
+  return (value - scale.min) / span;
+}
+var AXIS_LABEL_GAP = 8;
+function ChartGrid({ scale, direction, width, height }) {
+  const vertical = direction === "vertical";
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { "aria-hidden": true, children: scale.ticks.map((tick) => {
+    const ratio = ratioOf(tick, scale);
+    const isBaseline = tick === 0;
+    const color = isBaseline ? "var(--cmp-chart-baseline-color)" : "var(--cmp-chart-grid-line-color)";
+    const position = vertical ? height - ratio * height : ratio * width;
+    const extent = vertical ? height : width;
+    const snapped = Math.min(Math.max(Math.round(position), 0), Math.max(0, extent - 1)) + 0.5;
+    return vertical ? /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: 0,
+        x2: width,
+        y1: snapped,
+        y2: snapped,
+        stroke: color,
+        strokeWidth: 1
+      },
+      tick
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: snapped,
+        x2: snapped,
+        y1: 0,
+        y2: height,
+        stroke: color,
+        strokeWidth: 1
+      },
+      tick
+    );
+  }) });
+}
+function ChartAxisLabels({
+  scale,
+  direction,
+  format,
+  className,
+  style,
+  sampleRef
+}) {
+  const vertical = direction === "vertical";
+  const widest = scale.ticks.reduce((longest, tick) => {
+    const text = format(tick);
+    return text.length > longest.length ? text : longest;
+  }, "");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "relative typo-body-sm-medium text-(--cmp-chart-axis-color)",
+        vertical ? "h-full" : "w-full",
+        className
+      ),
+      style,
+      children: [
+        scale.ticks.map((tick) => {
+          const ratio = ratioOf(tick, scale);
+          return vertical ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute right-0 -translate-y-1/2 whitespace-nowrap",
+              style: { top: `${(1 - ratio) * 100}%` },
+              children: format(tick)
+            },
+            tick
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
+              style: { left: `${ratio * 100}%` },
+              children: format(tick)
+            },
+            tick
+          );
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { ref: sampleRef, "aria-hidden": true, className: "invisible inline-block whitespace-nowrap", children: vertical ? widest : "0" })
+      ]
+    }
+  );
+}
+var ChartFrame = /* @__PURE__ */ react.forwardRef(function ChartFrame2({ legend, legendPosition = "top", children, className, style, ...props }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex w-full flex-col gap-(--cmp-chart-gap)",
+        "p-(--cmp-chart-paddingAll) bg-(--cmp-chart-bg)",
+        className
+      ),
+      style,
+      ...props,
+      children: [
+        legend && legendPosition === "top" && legend,
+        children,
+        legend && legendPosition === "bottom" && legend
+      ]
+    }
+  );
+});
+var DOT_SIZE = 6;
+function ChartLegend({ items, align = "center", activeIndex, className }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      className: cn(
+        "flex list-none flex-wrap items-center gap-x-(--cmp-chart-legend-group-gap) p-0",
+        align === "start" && "justify-start",
+        align === "center" && "justify-center",
+        align === "end" && "justify-end",
+        className
+      ),
+      children: items.map((item4, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: cn(
+            "flex items-center gap-(--cmp-chart-legend-legendItem-gap)",
+            "py-(--cmp-chart-legend-legendItem-paddingY)",
+            "typo-body-sm-medium text-(--cmp-chart-legend-legendItem-color)",
+            "transition-opacity",
+            activeIndex != null && activeIndex !== index && "opacity-(--opacity-060)"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "shrink-0 rounded-full",
+                style: { width: DOT_SIZE, height: DOT_SIZE, background: item4.color }
+              }
+            ),
+            item4.name
+          ]
+        },
+        `${item4.name}-${index}`
+      ))
+    }
+  );
+}
+
+// src/lib/chart/palette.ts
+var V3 = (path) => `var(--cmp-chart-palette-${path})`;
+var CHART_COLORS = {
+  positivePrimary: V3("variation-positivePrimary"),
+  positiveSecondary: V3("variation-positiveSecondary"),
+  negativePrimary: V3("variation-negativePrimary"),
+  negativeSecondary: V3("variation-negativeSecondary"),
+  neutralPrimary: V3("variation-neutralPrimary"),
+  neutralSecondary: V3("variation-neutralSecondary")
+};
+var CHART_PALETTES = {
+  default: [V3("single")],
+  multi: [
+    V3("multi-blue"),
+    V3("multi-skyblue"),
+    V3("multi-yellow"),
+    V3("multi-olive"),
+    V3("multi-lightRed"),
+    V3("multi-warmBlue"),
+    V3("multi-orange"),
+    V3("multi-green"),
+    V3("multi-navy"),
+    V3("multi-grey"),
+    V3("multi-red")
+  ],
+  gradation: [
+    V3("gradation-1"),
+    V3("gradation-2"),
+    V3("gradation-3"),
+    V3("gradation-4"),
+    V3("gradation-5"),
+    V3("gradation-6")
+  ]
+};
+function paletteColor(palette, index, colors) {
+  if (palette === "custom") {
+    if (!colors?.length) return CHART_PALETTES.default[0];
+    return CHART_COLORS[colors[index % colors.length]];
+  }
+  const list = CHART_PALETTES[palette] ?? CHART_PALETTES.default;
+  return list[index % list.length];
+}
+function useElementSize() {
+  const ref = react.useRef(null);
+  const [size, setSize] = react.useState({ width: 0, height: 0 });
+  react.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const update = () => {
+      const { width, height } = element.getBoundingClientRect();
+      setSize(
+        (prev) => Math.abs(prev.width - width) < 0.5 && Math.abs(prev.height - height) < 0.5 ? prev : { width, height }
+      );
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return { ref, size };
+}
+var DOT_SIZE2 = 6;
+var CURSOR_OFFSET = 12;
+function place(cursor, size, extent) {
+  if (!extent || !size) return cursor + CURSOR_OFFSET;
+  const after = cursor + CURSOR_OFFSET;
+  if (after + size <= extent) return after;
+  const before = cursor - CURSOR_OFFSET - size;
+  if (before >= 0) return before;
+  return Math.max(0, Math.min(after, extent - size));
+}
+function ChartTooltip({ title, items, x, y, bounds, className }) {
+  const { ref, size } = useElementSize();
+  const measured = size.width > 0 && size.height > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      role: "tooltip",
+      className: cn(
+        // left/top 대신 transform 으로 옮긴다. 좌표를 바꾸면 마우스가 움직일 때마다
+        // 리플로우가 나 차트가 미세하게 흔들려 보인다. transform 은 레이아웃을
+        // 건드리지 않으므로, 크기를 재기 전에 잠깐 밖으로 나가도 스크롤이 생기지 않는다.
+        "pointer-events-none absolute top-0 left-0 z-10 w-max",
+        "flex flex-col gap-(--cmp-chart-chartTooltip-gap)",
+        "px-(--cmp-chart-chartTooltip-paddingX) py-(--cmp-chart-chartTooltip-paddingY)",
+        "rounded-(--cmp-chart-chartTooltip-radius) bg-(--cmp-chart-chartTooltip-bg) shadow-floating",
+        className
+      ),
+      style: {
+        // 크기를 재기 전에는 원점에 숨겨 둔다. 커서 옆에 그려 두면 그림 밖으로
+        // 넘쳐 스크롤 영역이 잠깐 늘어나고, 차트 전체가 한 번 흔들린다.
+        // transform 도 스크롤 영역 계산에는 포함되므로 위치만 바꿔서는 못 막는다.
+        transform: measured ? `translate(${place(x, size.width, bounds?.width ?? 0)}px, ${place(
+          y,
+          size.height,
+          bounds?.height ?? 0
+        )}px)` : void 0,
+        visibility: measured ? void 0 : "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-md-bold text-(--cmp-chart-chartTooltip-title-color)", children: title }),
+        items.map((item4, index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-sd-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "shrink-0 rounded-full",
+              style: { width: DOT_SIZE2, height: DOT_SIZE2, background: item4.color }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-default text-(--sys-color-fg-primary)", children: item4.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-body-sm-bold ml-auto text-(--sys-color-fg-primary)", children: item4.value })
+        ] }, `${item4.label}-${index}`))
+      ]
+    }
+  );
+}
+
+// src/components/SBarChart/barChart.config.ts
+var BAR_SIZE_MIN = 24;
+var BAR_SIZE_MAX = 80;
+var BAR_GAP = 6;
+var GROUP_PADDING_MIN = 8;
+var GROUP_PADDING_MAX = 24;
+var VALUE_LABEL_GAP = 6;
+var BAR_RADIUS = 8;
+var BAR_OPACITY_DEFAULT = "var(--opacity-080)";
+var BAR_OPACITY_DIMMED = "var(--opacity-060)";
+var BAR_VALUE_COLOR = "var(--sys-color-field-text-readOnly)";
+function bandLayout(size, categoryCount, seriesCount, barSizeMax = BAR_SIZE_MAX) {
+  const categories = Math.max(1, categoryCount);
+  const series = Math.max(1, seriesCount);
+  const gaps = (series - 1) * BAR_GAP;
+  const barRange = BAR_SIZE_MAX - BAR_SIZE_MIN;
+  const padRange = GROUP_PADDING_MAX - GROUP_PADDING_MIN;
+  const maxBar = Math.min(Math.max(BAR_SIZE_MIN, barSizeMax), BAR_SIZE_MAX);
+  const tMax = (maxBar - BAR_SIZE_MIN) / barRange;
+  const bandMin = BAR_SIZE_MIN * series + gaps + GROUP_PADDING_MIN * 2;
+  const span = barRange * series + padRange * 2;
+  const band = Math.min(size / categories, bandMin + span * tMax);
+  const t = Math.min(Math.max((band - bandMin) / span, 0), tMax);
+  const bar = BAR_SIZE_MIN + barRange * t;
+  const padding = GROUP_PADDING_MIN + padRange * t;
+  const group = bar * series + gaps;
+  return {
+    band,
+    bar,
+    group,
+    padding,
+    offset: Math.max(0, (size - band * categories) / 2)
+  };
+}
+var defaultFormat = (value) => value.toLocaleString();
+function minBand(seriesCount) {
+  const series = Math.max(1, seriesCount);
+  return series * BAR_SIZE_MIN + (series - 1) * BAR_GAP + GROUP_PADDING_MIN * 2;
+}
+function barPath(x, y, width, height, direction, negative) {
+  const r = Math.max(0, Math.min(BAR_RADIUS, width / 2, height / 2));
+  if (r === 0) return `M${x} ${y}h${width}v${height}h${-width}Z`;
+  if (direction === "vertical") {
+    return negative ? (
+      // 아래로 자란다 — 아래쪽 두 모서리가 둥글다
+      `M${x} ${y}h${width}v${height - r}a${r} ${r} 0 0 1 ${-r} ${r}h${-(width - 2 * r)}a${r} ${r} 0 0 1 ${-r} ${-r}Z`
+    ) : (
+      // 위로 자란다 — 위쪽 두 모서리가 둥글다
+      `M${x} ${y + height}v${-(height - r)}a${r} ${r} 0 0 1 ${r} ${-r}h${width - 2 * r}a${r} ${r} 0 0 1 ${r} ${r}v${height - r}Z`
+    );
+  }
+  return negative ? (
+    // 왼쪽으로 자란다
+    `M${x + width} ${y}h${-(width - r)}a${r} ${r} 0 0 0 ${-r} ${r}v${height - 2 * r}a${r} ${r} 0 0 0 ${r} ${r}h${width - r}Z`
+  ) : (
+    // 오른쪽으로 자란다
+    `M${x} ${y}h${width - r}a${r} ${r} 0 0 1 ${r} ${r}v${height - 2 * r}a${r} ${r} 0 0 1 ${-r} ${r}h${-(width - r)}Z`
+  );
+}
+var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
+  categories,
+  series,
+  direction = "vertical",
+  palette = "default",
+  colors: customColors,
+  max,
+  tickCount = 8,
+  barSize = BAR_SIZE_MAX,
+  showValueLabel = true,
+  showLegend = true,
+  legendPosition = "top",
+  showTooltip = true,
+  formatValue = defaultFormat,
+  height,
+  onBarClick,
+  className,
+  style
+}, ref) {
+  const vertical = direction === "vertical";
+  const { ref: plotRef, size } = useElementSize();
+  const { ref: axisTextRef, size: axisText } = useElementSize();
+  const { ref: axisSampleRef, size: axisSample } = useElementSize();
+  const [hovered, setHovered] = react.useState(null);
+  const hoveredCategory = hovered?.category ?? null;
+  const perCategory = series.length === 1;
+  const colorAt = react.useCallback(
+    (seriesIndex, categoryIndex) => paletteColor(palette, perCategory ? categoryIndex : seriesIndex, customColors),
+    [palette, customColors, perCategory]
+  );
+  const scale = react.useMemo(
+    () => niceScale(
+      series.flatMap((s) => s.data),
+      tickCount,
+      max
+    ),
+    [series, tickCount, max]
+  );
+  const axisLength = vertical ? size.width : size.height;
+  const layout = react.useMemo(
+    () => bandLayout(axisLength, categories.length, series.length, barSize),
+    [axisLength, categories.length, series.length, barSize]
+  );
+  const zeroRatio = ratioOf(0, scale);
+  const minPlotWidth = vertical ? categories.length * minBand(series.length) : 0;
+  const totalHeight = height ?? (vertical ? 320 : void 0);
+  const plotHeight = totalHeight == null ? Math.max(1, categories.length) * minBand(series.length) : typeof totalHeight === "number" ? Math.max(0, totalHeight - axisText.height) : `calc(${totalHeight} - ${axisText.height}px)`;
+  const legend = showLegend ? /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { items: series.map((s, i) => ({ name: s.name, color: colorAt(i, 0) })) }) : null;
+  const handleMove = (event) => {
+    if (!showTooltip || categories.length === 0 || series.length === 0) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const along = (vertical ? x : y) - layout.offset;
+    const category = Math.floor(along / layout.band);
+    if (category < 0 || category >= categories.length) {
+      setHovered(null);
+      return;
+    }
+    setHovered({ category, x, y });
+  };
+  const tooltipItems = hovered == null ? [] : series.flatMap((s, i) => {
+    const value = s.data[hovered.category];
+    if (value == null || !Number.isFinite(value)) return [];
+    return [
+      { color: colorAt(i, hovered.category), label: s.name, value: formatValue(value) }
+    ];
+  });
+  const categoryLabels = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "relative typo-body-sm-medium text-(--cmp-chart-axis-color)",
+        vertical ? "w-full" : "h-full"
+      ),
+      style: vertical ? { minWidth: minPlotWidth || void 0 } : { height: plotHeight },
+      children: [
+        categories.map((label, index) => {
+          const center = layout.offset + (index + 0.5) * layout.band;
+          return vertical ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
+              style: { left: center },
+              children: label
+            },
+            `${label}-${index}`
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "absolute right-0 -translate-y-1/2 whitespace-nowrap",
+              style: { top: center },
+              children: label
+            },
+            `${label}-${index}`
+          );
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "invisible block whitespace-nowrap", children: vertical ? "0" : categories.reduce((longest, c) => c.length > longest.length ? c : longest, "") })
+      ]
+    }
+  );
+  const bars = react.useMemo(
+    () => size.width > 0 && size.height > 0 ? series.flatMap(
+      (s, seriesIndex) => categories.map((_, categoryIndex) => {
+        const value = s.data[categoryIndex];
+        if (value == null || !Number.isFinite(value)) return null;
+        const dimmed = hoveredCategory != null && hoveredCategory !== categoryIndex;
+        const groupStart = layout.offset + categoryIndex * layout.band + (layout.band - layout.group) / 2;
+        const offset = groupStart + seriesIndex * (layout.bar + BAR_GAP);
+        const valueRatio = ratioOf(value, scale);
+        const negative = value < 0;
+        let x;
+        let y;
+        let width;
+        let barHeight;
+        let labelX;
+        let labelY;
+        if (vertical) {
+          const zeroY = size.height - zeroRatio * size.height;
+          const valueY = size.height - valueRatio * size.height;
+          x = offset;
+          width = layout.bar;
+          y = Math.min(zeroY, valueY);
+          barHeight = Math.abs(zeroY - valueY);
+          labelX = offset + layout.bar / 2;
+          labelY = negative ? y + barHeight + VALUE_LABEL_GAP + 10 : y - VALUE_LABEL_GAP;
+        } else {
+          const zeroX = zeroRatio * size.width;
+          const valueX = valueRatio * size.width;
+          x = Math.min(zeroX, valueX);
+          width = Math.abs(zeroX - valueX);
+          y = offset;
+          barHeight = layout.bar;
+          labelX = negative ? x - VALUE_LABEL_GAP : x + width + VALUE_LABEL_GAP;
+          labelY = offset + layout.bar / 2;
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: barPath(x, y, width, barHeight, direction, negative),
+              style: {
+                fill: colorAt(seriesIndex, categoryIndex),
+                opacity: dimmed ? BAR_OPACITY_DIMMED : BAR_OPACITY_DEFAULT,
+                cursor: onBarClick ? "pointer" : void 0
+              },
+              onClick: onBarClick ? () => onBarClick({ seriesIndex, categoryIndex, value }) : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: `${categories[categoryIndex]} ${s.name} ${formatValue(value)}` })
+            }
+          ),
+          showValueLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: labelX,
+              y: labelY,
+              className: "typo-body-sm-medium",
+              style: { fill: BAR_VALUE_COLOR },
+              textAnchor: vertical ? "middle" : negative ? "end" : "start",
+              dominantBaseline: vertical ? "auto" : "central",
+              children: formatValue(value)
+            }
+          )
+        ] }, `${seriesIndex}-${categoryIndex}`);
+      })
+    ) : [],
+    [
+      size.width,
+      size.height,
+      series,
+      categories,
+      layout,
+      scale,
+      zeroRatio,
+      vertical,
+      direction,
+      showValueLabel,
+      formatValue,
+      onBarClick,
+      colorAt,
+      hoveredCategory
+    ]
+  );
+  const axisLabels = /* @__PURE__ */ jsxRuntime.jsx(
+    ChartAxisLabels,
+    {
+      scale,
+      direction,
+      format: formatValue,
+      sampleRef: axisSampleRef
+    }
+  );
+  const inset = vertical ? { paddingTop: axisSample.height / 2, paddingBottom: axisSample.height / 2 } : { paddingLeft: axisSample.width / 2, paddingRight: axisSample.width / 2 };
+  const plot = (
+    // 바깥은 자리(높이·물러남)를, 안쪽은 그림을 맡는다. minWidth 는 바깥에 둬야
+    // 스크롤 컨테이너가 넘치는 폭을 알아본다 — 안쪽에 두면 바깥이 부모 폭에 맞춰져
+    // 스크롤이 생기지 않는다.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "relative min-w-0",
+        style: { height: plotHeight, minWidth: minPlotWidth || void 0, ...inset },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: plotRef,
+            className: "relative h-full w-full",
+            onMouseMove: handleMove,
+            onMouseLeave: () => setHovered(null),
+            children: [
+              size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  width: size.width,
+                  height: size.height,
+                  role: "img",
+                  "aria-label": `${categories.length}\uAC1C \uD56D\uBAA9, ${series.length}\uAC1C \uACC4\uC5F4 \uB9C9\uB300 \uADF8\uB798\uD504`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ChartGrid,
+                      {
+                        scale,
+                        direction,
+                        width: size.width,
+                        height: size.height
+                      }
+                    ),
+                    hovered != null && /* @__PURE__ */ jsxRuntime.jsx(
+                      "rect",
+                      {
+                        "aria-hidden": true,
+                        x: vertical ? layout.offset + hovered.category * layout.band : 0,
+                        y: vertical ? 0 : layout.offset + hovered.category * layout.band,
+                        width: vertical ? layout.band : size.width,
+                        height: vertical ? size.height : layout.band,
+                        style: {
+                          fill: "var(--cmp-chart-barContainer-hover-bg)",
+                          fillOpacity: "var(--cmp-chart-barContainer-hover-opacity)"
+                        }
+                      }
+                    ),
+                    bars
+                  ]
+                }
+              ),
+              showTooltip && hovered != null && series.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                ChartTooltip,
+                {
+                  title: categories[hovered.category] ?? "",
+                  items: tooltipItems,
+                  x: hovered.x,
+                  y: hovered.y,
+                  bounds: size
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChartFrame,
+    {
+      ref,
+      legend,
+      legendPosition,
+      className,
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "grid",
+          style: {
+            columnGap: AXIS_LABEL_GAP,
+            // 눈금은 왼쪽 한 줄뿐이다 — 오른쪽에도 적으면 서로 다른 단위처럼 읽힌다.
+            gridTemplateColumns: "max-content 1fr"
+          },
+          children: vertical ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: plotHeight, ...inset }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              ChartAxisLabels,
+              {
+                scale,
+                direction,
+                format: formatValue,
+                sampleRef: axisSampleRef
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 overflow-x-auto", children: [
+              plot,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { ref: axisTextRef, children: categoryLabels })
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            categoryLabels,
+            plot,
+            /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { ref: axisTextRef, style: inset, children: axisLabels })
+          ] })
+        }
+      )
+    }
+  );
+});
 var BUTTON_STYLE = {
   default: { color: "secondary" },
   danger: { color: "danger", outline: true },
@@ -22643,15 +23450,15 @@ var SBarcodeInput = /* @__PURE__ */ react.forwardRef(
 );
 
 // src/components/STimePicker/timepicker.config.ts
-var V3 = (path) => `var(--cmp-timepicker-${path})`;
+var V4 = (path) => `var(--cmp-timepicker-${path})`;
 var TIMEPICKER_SIZES = ["sm", "md"];
 var TIMEPICKER_SIZE_CONFIG = {
   sm: {
-    height: V3("sm-height"),
-    paddingX: V3("sm-paddingX"),
-    gap: V3("sm-gap"),
-    icon: V3("sm-icon"),
-    radius: V3("sm-radius"),
+    height: V4("sm-height"),
+    paddingX: V4("sm-paddingX"),
+    gap: V4("sm-gap"),
+    icon: V4("sm-icon"),
+    radius: V4("sm-radius"),
     // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
     fontSize: 12,
     lineHeight: 20,
@@ -22660,11 +23467,11 @@ var TIMEPICKER_SIZE_CONFIG = {
     fieldMaxWidth: "md"
   },
   md: {
-    height: V3("md-height"),
-    paddingX: V3("md-paddingX"),
-    gap: V3("md-gap"),
-    icon: V3("md-icon"),
-    radius: V3("md-radius"),
+    height: V4("md-height"),
+    paddingX: V4("md-paddingX"),
+    gap: V4("md-gap"),
+    icon: V4("md-icon"),
+    radius: V4("md-radius"),
     // TODO: component.timepicker 토큰에 typography가 추가되면 CSS 변수로 교체한다.
     fontSize: 14,
     lineHeight: 24,
@@ -23560,6 +24367,9 @@ exports.ACCOUNT_LIST_BOX_LABELS = ACCOUNT_LIST_BOX_LABELS;
 exports.ACCOUNT_LIST_BOX_LAYOUT = ACCOUNT_LIST_BOX_LAYOUT;
 exports.ACCOUNT_LIST_BOX_TONE_CONFIG = ACCOUNT_LIST_BOX_TONE_CONFIG;
 exports.BADGE_COLORS = BADGE_COLORS;
+exports.BAR_GAP = BAR_GAP;
+exports.BAR_SIZE_MAX = BAR_SIZE_MAX;
+exports.BAR_SIZE_MIN = BAR_SIZE_MIN;
 exports.BUTTON_COLORS = BUTTON_COLORS;
 exports.BUTTON_SIZES = BUTTON_SIZES;
 exports.CALENDAR_BOARD_DAY_BG = CALENDAR_BOARD_DAY_BG;
@@ -23568,7 +24378,7 @@ exports.CALENDAR_BOARD_EVENT_COLORS = CALENDAR_BOARD_EVENT_COLORS;
 exports.CALENDAR_BOARD_EVENT_PRESETS = CALENDAR_BOARD_EVENT_PRESETS;
 exports.CALENDAR_BOARD_MAX_VISIBLE_EVENTS = CALENDAR_BOARD_MAX_VISIBLE_EVENTS;
 exports.CHAT_ATTACHED_FILE_CONFIG = CHAT_ATTACHED_FILE_CONFIG;
-exports.CHAT_ATTACHED_FILE_VARIANTS = CHAT_ATTACHED_FILE_VARIANTS;
+exports.CHAT_FILE_CONFIG = CHAT_FILE_CONFIG;
 exports.CHAT_MESSAGE_DIRECTIONS = CHAT_MESSAGE_DIRECTIONS;
 exports.CHAT_MESSAGE_READ_STATUSES = CHAT_MESSAGE_READ_STATUSES;
 exports.CHAT_MESSAGE_VARIANTS = CHAT_MESSAGE_VARIANTS;
@@ -23598,6 +24408,7 @@ exports.RangeCalendar = RangeCalendar;
 exports.SAccountListBox = SAccountListBox;
 exports.SActionModal = SActionModal;
 exports.SBadge = SBadge;
+exports.SBarChart = SBarChart;
 exports.SBarcodeInput = SBarcodeInput;
 exports.SButton = SButton;
 exports.SCROLL_AREA_AXES = SCROLL_AREA_AXES;
@@ -23606,6 +24417,7 @@ exports.SCalendarBoard = SCalendarBoard;
 exports.SCallout = SCallout;
 exports.SCard = SCard;
 exports.SChatAttachedFile = SChatAttachedFile2;
+exports.SChatFile = SChatFile2;
 exports.SChatInput = SChatInput2;
 exports.SChatMessage = SChatMessage2;
 exports.SChatSystemMessage = SChatSystemMessage2;