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

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,112 @@ 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 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-bg) text-(--cmp-chatBubble-outgoing-content)",
+  template: "bg-(--cmp-chatBubble-templete-bg) text-(--cmp-chatBubble-templete-content)"
 };
 var CHAT_MESSAGE_READ_STATUSES = ["read", "unread"];
 var READ_STATUS_LABEL = {
@@ -4872,8 +4957,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 +4970,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 +4979,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 +4999,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 bubbles = messages ?? [];
+  const files = attachments ?? [];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -4927,45 +5014,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 +5100,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 +6431,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 +7899,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 +11906,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 +11916,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 +11929,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 +16062,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)"
             },
@@ -23568,7 +23700,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;
@@ -23606,6 +23738,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;