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

package/dist/index.js

@@ -4653,10 +4653,9 @@ var STextarea = /* @__PURE__ */ 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__ */ forwardRef(function SChatInput({
   value = "",
@@ -4685,8 +4684,8 @@ var SChatInputImpl = /* @__PURE__ */ forwardRef(function SChatInput({
     e.preventDefault();
     send();
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-(--sys-color-field-bg-default)", className), style, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-sd-8 p-sd-12", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-(--cmp-chatInput-bg)", className), style, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-(--cmp-chatInput-gap) p-(--cmp-chatInput-padding)", children: [
       onAttach != null && /* @__PURE__ */ jsx(
         SGhostButton,
         {
@@ -4748,81 +4747,67 @@ var SChatInputImpl = /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
-            "span",
-            {
-              className: cn(
-                "grid shrink-0 place-items-center rounded-4",
-                preset.tile,
-                "text-(--sys-color-fg-accentLight)"
-              ),
-              children: /* @__PURE__ */ jsx(SIcon, { name: "attachFile", size: preset.iconSize })
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
-            /* @__PURE__ */ jsx("span", { className: cn("truncate text-(--sys-color-fg-secondary)", preset.nameTypo), children: name }),
-            showMeta && /* @__PURE__ */ jsx("span", { className: "typo-body-sm-default truncate text-(--sys-color-fg-secondary)", children: meta })
+          /* @__PURE__ */ jsxs("span", { className: cn("flex min-w-0 items-center", CHAT_ATTACHED_FILE_CONFIG.contentGap), children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "inline-grid shrink-0 place-items-center text-(--sys-color-fg-accentLight)",
+                  CHAT_ATTACHED_FILE_CONFIG.tile
+                ),
+                children: /* @__PURE__ */ jsx(SIcon, { name: "attachFile", color: "grey_65", size: CHAT_ATTACHED_FILE_CONFIG.iconSize })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "truncate",
+                  CHAT_ATTACHED_FILE_CONFIG.nameTypo,
+                  CHAT_ATTACHED_FILE_CONFIG.textColor
+                ),
+                children: name
+              }
+            )
           ] }),
-          showRemove && /* @__PURE__ */ jsx(
-            "button",
+          onRemove != null && /* @__PURE__ */ 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__ */ jsx(SIcon, { name: "close", size: 16 })
+              className: "shrink-0"
             }
           )
         ]
@@ -4831,12 +4816,120 @@ var SChatAttachedFileImpl = /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-grid shrink-0 place-items-center text-(--sys-color-fg-accentLight)",
+              CHAT_FILE_CONFIG.tile
+            ),
+            children: /* @__PURE__ */ jsx(SIcon, { name: "attachFile", size: CHAT_FILE_CONFIG.iconSize })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("truncate", CHAT_FILE_CONFIG.nameTypo, CHAT_FILE_CONFIG.textColor), children: name }),
+          meta !== "" && /* @__PURE__ */ 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 = {
@@ -4844,8 +4937,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;
@@ -4857,7 +4950,7 @@ function Avatar({ src, alt, placeholder }) {
   return /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", style: { height: AVATAR_ROW_HEIGHT }, children: /* @__PURE__ */ 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__ */ jsx(SImage, { src, alt: alt ?? "", fit: "cover", className: "h-full w-full" }) : (
         // 원 밖으로 나가는 만큼을 좌우로 나눠 가운데를 맞추고, 아래는 원이 자른다.
@@ -4866,7 +4959,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 }
           }
@@ -4886,12 +4979,14 @@ var SChatMessageImpl = /* @__PURE__ */ 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__ */ jsxs(
     "div",
     {
@@ -4899,45 +4994,77 @@ var SChatMessageImpl = /* @__PURE__ */ 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__ */ jsx(Avatar, { src: avatarSrc, alt: avatarAlt, placeholder: continued }),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-sd-4", outgoing ? "items-end" : "items-start"), children: [
-          !outgoing && !continued && sender != null && /* @__PURE__ */ jsx("span", { className: "typo-body-sm-default px-sd-8 text-(--sys-color-fg-secondary)", children: sender }),
-          bubbles.length > 0 && // 말풍선끼리는 이름·시각과의 간격(4px)보다 벌려 한 덩어리 안의 여러 발화로 읽히게 한다.
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn("flex min-w-0 flex-col gap-sd-8", outgoing ? "items-end" : "items-start"),
-              children: bubbles.map((message, index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ 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__ */ jsx("span", { className: "typo-body-sm-bold px-(--cmp-chatMessage-name-paddingX) text-(--cmp-chatMessage-name-color)", children: sender }),
+              bubbles.length > 0 && // 말풍선끼리는 이름·시각과의 간격(4px)보다 벌려 한 덩어리 안의 여러 발화로 읽히게 한다.
+              /* @__PURE__ */ 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__ */ jsxs("div", { className: "typo-body-sm-default flex items-center gap-sd-4 px-sd-8", children: [
-            readStatus != null && /* @__PURE__ */ jsx("span", { className: READ_STATUS_COLOR[readStatus], children: READ_STATUS_LABEL[readStatus] }),
-            time != null && /* @__PURE__ */ jsx("span", { className: "text-(--sys-color-fg-tertiary)", children: time })
-          ] }),
-          actions != null && // 버튼이 많아 한 줄에 안 들어가면 감싼다 — 넘쳐서 잘리는 것보다 낫다.
-          /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-sd-8 px-sd-8", outgoing && "justify-end"), children: actions })
-        ] })
+                  children: bubbles.map((message, index) => /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "max-w-full", children: file }, index))
+                }
+              ),
+              (readStatus != null || time != null) && // 읽음 표시와 시각은 한 줄에 선다 — 읽음이 먼저, 시각이 뒤다.
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-(--cmp-chatMessage-subData-gap) px-(--cmp-chatMessage-subData-paddingX)", children: [
+                readStatus != null && /* @__PURE__ */ jsx("span", { className: cn("typo-body-sm-bold", READ_STATUS_COLOR[readStatus]), children: READ_STATUS_LABEL[readStatus] }),
+                time != null && /* @__PURE__ */ jsx("span", { className: "typo-body-sm-medium text-(--cmp-chatTimeStamp-color)", children: time })
+              ] }),
+              actions != null && // 버튼이 많아 한 줄에 안 들어가면 감싼다 — 넘쳐서 잘리는 것보다 낫다.
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-wrap gap-sd-8 px-(--cmp-chatMessage-bottomButtons-paddingX)",
+                    outgoing && "justify-end"
+                  ),
+                  children: actions
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -4953,14 +5080,13 @@ var SChatSystemMessageImpl = /* @__PURE__ */ 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 로 줄을 고른다.
@@ -6285,10 +6411,21 @@ function SCheckbox({
             ) })
           }
         ),
-        label && // 고스트(500) 텍스트로 너비를 고정 → 두께 400↔500 전환 시 레이아웃이 밀리지 않음
-        /* @__PURE__ */ jsxs("span", { className: "grid text-nowrap text-[12px] leading-[20px]", style: { color: labelColor }, children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "invisible font-medium", style: { gridArea: "1 / 1" }, children: label }),
-          /* @__PURE__ */ 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__ */ jsxs("span", { className: "grid break-keep wrap-break-word", style: { color: labelColor }, children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "typo-body-sm-medium invisible", style: { gridArea: "1 / 1" }, children: label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: isChecked ? "typo-body-sm-medium" : "typo-body-sm-default",
+              style: { gridArea: "1 / 1" },
+              children: label
+            }
+          )
         ] })
       ]
     }
@@ -7742,7 +7879,7 @@ function SSwitch({
   style
 }) {
   const right = rightLabel;
-  const renderLabel = (text) => text ? /* @__PURE__ */ jsx("span", { className: "text-[12px] font-medium leading-[20px]", children: text }) : null;
+  const renderLabel = (text) => text ? /* @__PURE__ */ 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__ */ jsxs(
     "label",
@@ -11749,7 +11886,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
@@ -11759,7 +11896,10 @@ var SPageHeader = /* @__PURE__ */ withDisplayName(
         children: /* @__PURE__ */ 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__ */ jsx(
@@ -11769,7 +11909,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__ */ jsxs(
@@ -15902,7 +16042,7 @@ function SRadio({
         label && /* @__PURE__ */ jsxs(
           "span",
           {
-            className: "grid",
+            className: "grid break-keep wrap-break-word",
             style: {
               color: disabled ? "var(--cmp-radio-label-disabled)" : "var(--cmp-radio-label-default)"
             },
@@ -17717,6 +17857,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__ */ 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__ */ jsx(
+      "line",
+      {
+        x1: 0,
+        x2: width,
+        y1: snapped,
+        y2: snapped,
+        stroke: color,
+        strokeWidth: 1
+      },
+      tick
+    ) : /* @__PURE__ */ 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__ */ 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__ */ jsx(
+            "span",
+            {
+              className: "absolute right-0 -translate-y-1/2 whitespace-nowrap",
+              style: { top: `${(1 - ratio) * 100}%` },
+              children: format(tick)
+            },
+            tick
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
+              style: { left: `${ratio * 100}%` },
+              children: format(tick)
+            },
+            tick
+          );
+        }),
+        /* @__PURE__ */ jsx("span", { ref: sampleRef, "aria-hidden": true, className: "invisible inline-block whitespace-nowrap", children: vertical ? widest : "0" })
+      ]
+    }
+  );
+}
+var ChartFrame = /* @__PURE__ */ forwardRef(function ChartFrame2({ legend, legendPosition = "top", children, className, style, ...props }, ref) {
+  return /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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 = useRef(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  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__ */ 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__ */ jsx("span", { className: "typo-body-md-bold text-(--cmp-chart-chartTooltip-title-color)", children: title }),
+        items.map((item4, index) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-sd-8", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "shrink-0 rounded-full",
+              style: { width: DOT_SIZE2, height: DOT_SIZE2, background: item4.color }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "typo-body-sm-default text-(--sys-color-fg-primary)", children: item4.label }),
+          /* @__PURE__ */ 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__ */ 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] = useState(null);
+  const hoveredCategory = hovered?.category ?? null;
+  const perCategory = series.length === 1;
+  const colorAt = useCallback(
+    (seriesIndex, categoryIndex) => paletteColor(palette, perCategory ? categoryIndex : seriesIndex, customColors),
+    [palette, customColors, perCategory]
+  );
+  const scale = useMemo(
+    () => niceScale(
+      series.flatMap((s) => s.data),
+      tickCount,
+      max
+    ),
+    [series, tickCount, max]
+  );
+  const axisLength = vertical ? size.width : size.height;
+  const layout = 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__ */ 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__ */ 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__ */ jsx(
+            "span",
+            {
+              className: "absolute top-0 -translate-x-1/2 whitespace-nowrap",
+              style: { left: center },
+              children: label
+            },
+            `${label}-${index}`
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute right-0 -translate-y-1/2 whitespace-nowrap",
+              style: { top: center },
+              children: label
+            },
+            `${label}-${index}`
+          );
+        }),
+        /* @__PURE__ */ 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 = 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__ */ jsxs("g", { children: [
+          /* @__PURE__ */ 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__ */ jsx("title", { children: `${categories[categoryIndex]} ${s.name} ${formatValue(value)}` })
+            }
+          ),
+          showValueLabel && /* @__PURE__ */ 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__ */ 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__ */ jsx(
+      "div",
+      {
+        className: "relative min-w-0",
+        style: { height: plotHeight, minWidth: minPlotWidth || void 0, ...inset },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: plotRef,
+            className: "relative h-full w-full",
+            onMouseMove: handleMove,
+            onMouseLeave: () => setHovered(null),
+            children: [
+              size.width > 0 && size.height > 0 && /* @__PURE__ */ 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__ */ jsx(
+                      ChartGrid,
+                      {
+                        scale,
+                        direction,
+                        width: size.width,
+                        height: size.height
+                      }
+                    ),
+                    hovered != null && /* @__PURE__ */ 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__ */ jsx(
+                ChartTooltip,
+                {
+                  title: categories[hovered.category] ?? "",
+                  items: tooltipItems,
+                  x: hovered.x,
+                  y: hovered.y,
+                  bounds: size
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  );
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ref,
+      legend,
+      legendPosition,
+      className,
+      style,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "grid",
+          style: {
+            columnGap: AXIS_LABEL_GAP,
+            // 눈금은 왼쪽 한 줄뿐이다 — 오른쪽에도 적으면 서로 다른 단위처럼 읽힌다.
+            gridTemplateColumns: "max-content 1fr"
+          },
+          children: vertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { style: { height: plotHeight, ...inset }, children: /* @__PURE__ */ jsx(
+              ChartAxisLabels,
+              {
+                scale,
+                direction,
+                format: formatValue,
+                sampleRef: axisSampleRef
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 overflow-x-auto", children: [
+              plot,
+              /* @__PURE__ */ jsx("div", { ref: axisTextRef, children: categoryLabels })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            categoryLabels,
+            plot,
+            /* @__PURE__ */ jsx("div", {}),
+            /* @__PURE__ */ jsx("div", { ref: axisTextRef, style: inset, children: axisLabels })
+          ] })
+        }
+      )
+    }
+  );
+});
 var BUTTON_STYLE = {
   default: { color: "secondary" },
   danger: { color: "danger", outline: true },
@@ -22615,15 +23422,15 @@ var SBarcodeInput = /* @__PURE__ */ 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,
@@ -22632,11 +23439,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,
@@ -23526,6 +24333,6 @@ function STimeRangePicker({
   );
 }
 
-export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_ATTACHED_FILE_VARIANTS, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, COLOR_KEYS, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SLoginCard2 as SLoginCard, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, COLOR_KEYS, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SLoginCard2 as SLoginCard, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map