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

package/dist/index.cjs

@@ -559,6 +559,27 @@ var Icon_attachFile = (p) => {
     }
   );
 };
+var Icon_back = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M7.82001 2.38596C8.15933 2.14859 8.62646 2.23126 8.86395 2.57053C9.10129 2.90984 9.01864 3.37699 8.67938 3.61447L5.6286 5.75021H14.7497C18.6157 5.75021 21.7497 8.88422 21.7497 12.7502C21.7495 16.6161 18.6156 19.7502 14.7497 19.7502H4.9997C4.58572 19.75 4.24984 19.4142 4.2497 19.0002C4.2497 18.5861 4.58563 18.2504 4.9997 18.2502H14.7497C17.7872 18.2502 20.2495 15.7877 20.2497 12.7502C20.2497 9.71265 17.7873 7.25021 14.7497 7.25021H5.6286L8.67938 9.38596C9.01865 9.62345 9.10132 10.0906 8.86395 10.4299C8.62639 10.7689 8.15922 10.8518 7.82001 10.6145L3.98993 7.93381C2.99491 7.23718 2.99509 5.76338 3.98993 5.06662L7.82001 2.38596Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_barcode = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1347,6 +1368,29 @@ var Icon_copy = (p) => {
     }
   );
 };
+var Icon_counsel = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12 1.75C17.3848 1.75 21.75 6.11522 21.75 11.5V16C21.75 19.1756 19.1756 21.75 16 21.75H12.5C12.0858 21.75 11.75 21.4142 11.75 21C11.75 20.5858 12.0858 20.25 12.5 20.25H16C17.3042 20.25 18.4694 19.6611 19.249 18.7363C19.1669 18.7437 19.084 18.75 19 18.75H18C16.4812 18.75 15.25 17.5188 15.25 16V13C15.25 11.4812 16.4812 10.25 18 10.25H19C19.4269 10.25 19.8299 10.3498 20.1904 10.5234C19.7072 6.4275 16.2258 3.25 12 3.25C7.77412 3.25 4.29172 6.42744 3.80859 10.5234C4.16932 10.3496 4.57276 10.25 5 10.25H6C7.51878 10.25 8.75 11.4812 8.75 13V16C8.75 17.5188 7.51878 18.75 6 18.75H5C3.48122 18.75 2.25 17.5188 2.25 16V11.5C2.25 6.11522 6.61522 1.75 12 1.75ZM5 11.75C4.30964 11.75 3.75 12.3096 3.75 13V16C3.75 16.6904 4.30964 17.25 5 17.25H6C6.69036 17.25 7.25 16.6904 7.25 16V13C7.25 12.3096 6.69036 11.75 6 11.75H5ZM18 11.75C17.3096 11.75 16.75 12.3096 16.75 13V16C16.75 16.6904 17.3096 17.25 18 17.25H19C19.6904 17.25 20.25 16.6904 20.25 16V13C20.25 12.3096 19.6904 11.75 19 11.75H18Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_coupon = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1471,52 +1515,6 @@ var Icon_date = (p) => {
     }
   );
 };
-var Icon_delete = (p) => {
-  const { size = 24, ...rest } = p;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M8.35254 10.7646C8.75858 10.6834 9.15395 10.9466 9.23535 11.3525L10.2354 16.3525C10.3166 16.7586 10.0534 17.1539 9.64746 17.2354C9.24142 17.3166 8.84605 17.0534 8.76465 16.6475L7.76465 11.6475C7.68344 11.2414 7.94658 10.8461 8.35254 10.7646Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M12 10.75C12.4142 10.75 12.75 11.0858 12.75 11.5V16.5C12.75 16.9142 12.4142 17.25 12 17.25C11.5858 17.25 11.25 16.9142 11.25 16.5V11.5C11.25 11.0858 11.5858 10.75 12 10.75Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M14.7646 11.3525C14.8461 10.9466 15.2414 10.6834 15.6475 10.7646C16.0534 10.8461 16.3166 11.2414 16.2354 11.6475L15.2354 16.6475C15.1539 17.0534 14.7586 17.3166 14.3525 17.2354C13.9466 17.1539 13.6834 16.7586 13.7646 16.3525L14.7646 11.3525Z",
-            fill: "currentColor"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M13 2.0498C13.9664 2.0498 14.7499 2.8334 14.75 3.7998V4.25H20C20.4142 4.25 20.75 4.58579 20.75 5V8C20.75 8.41421 20.4142 8.75 20 8.75H19.6445L17.999 19.6123C17.7952 20.9565 16.6398 21.9502 15.2803 21.9502H8.71973C7.36018 21.9502 6.20481 20.9565 6.00098 19.6123L4.35547 8.75H4C3.58579 8.75 3.25 8.41421 3.25 8V5C3.25 4.58579 3.58579 4.25 4 4.25H8.75V3.7998C8.75011 2.8334 9.53357 2.0498 10.5 2.0498H13ZM7.48438 19.3877C7.57717 19.9985 8.10188 20.4502 8.71973 20.4502H15.2803C15.8981 20.4502 16.4228 19.9985 16.5156 19.3877L18.1279 8.75H5.87207L7.48438 19.3877ZM4.75 7.25H19.25V5.75H4.75V7.25ZM10.5 3.5498C10.362 3.5498 10.2501 3.66182 10.25 3.7998V4.25H13.25V3.7998C13.2499 3.66182 13.138 3.5498 13 3.5498H10.5Z",
-            fill: "currentColor"
-          }
-        )
-      ]
-    }
-  );
-};
 var Icon_dot = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1791,6 +1789,29 @@ var Icon_history = (p) => {
     }
   );
 };
+var Icon_home = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M10.8371 3.03041C11.5001 2.44103 12.5002 2.44103 13.1632 3.03041L21.4982 10.4396C21.8075 10.7148 21.8357 11.1887 21.5607 11.4982C21.2856 11.8075 20.8116 11.8355 20.5021 11.5607L19.7501 10.8917V20.0001C19.75 20.9664 18.9664 21.7501 18.0001 21.7501H16.5001C15.5338 21.7501 14.7503 20.9665 14.7501 20.0001V13.5001C14.7501 13.3621 14.6381 13.2502 14.5001 13.2501H9.50014C9.36207 13.2501 9.25014 13.3621 9.25014 13.5001V20.0001C9.24995 20.9664 8.46645 21.7501 7.50014 21.7501H6.00014C5.03376 21.7501 4.25033 20.9665 4.25014 20.0001V10.8917L3.49819 11.5607C3.18869 11.8356 2.71476 11.8074 2.43959 11.4982C2.16455 11.1886 2.19263 10.7148 2.50209 10.4396L10.8371 3.03041ZM12.1662 4.15151C12.0714 4.06731 11.9288 4.06731 11.8341 4.15151L5.75014 9.55873V20.0001C5.75033 20.1381 5.86219 20.2501 6.00014 20.2501H7.50014C7.63802 20.2501 7.74995 20.138 7.75014 20.0001V13.5001C7.75014 12.5336 8.53364 11.7501 9.50014 11.7501H14.5001C15.4666 11.7502 16.2501 12.5337 16.2501 13.5001V20.0001C16.2503 20.1381 16.3622 20.2501 16.5001 20.2501H18.0001C18.138 20.2501 18.25 20.138 18.2501 20.0001V9.55873L12.1662 4.15151Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_image = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3214,6 +3235,7 @@ var ICONS = {
   arrowUp: Icon_arrowUp,
   asterisk: Icon_asterisk,
   attachFile: Icon_attachFile,
+  back: Icon_back,
   barcode: Icon_barcode,
   bell: Icon_bell,
   bellRinging: Icon_bellRinging,
@@ -3243,10 +3265,10 @@ var ICONS = {
   close: Icon_close,
   company: Icon_company,
   copy: Icon_copy,
+  counsel: Icon_counsel,
   coupon: Icon_coupon,
   dashboard: Icon_dashboard,
   date: Icon_date,
-  delete: Icon_delete,
   dot: Icon_dot,
   download: Icon_download,
   drag: Icon_drag,
@@ -3257,6 +3279,7 @@ var ICONS = {
   helpFill: Icon_helpFill,
   helpOutline: Icon_helpOutline,
   history: Icon_history,
+  home: Icon_home,
   image: Icon_image,
   inline: Icon_inline,
   launcher: Icon_launcher,
@@ -4658,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 = "",
@@ -4690,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,
         {
@@ -4751,12 +4773,183 @@ var SChatInputImpl = /* @__PURE__ */ react.forwardRef(function SChatInput({
   ] });
 });
 var SChatInput2 = /* @__PURE__ */ withDisplayName(SChatInputImpl, "SChatInput");
+
+// src/components/SChatAttachedFile/chatAttachedFile.config.ts
+var CHAT_ATTACHED_FILE_CONFIG = {
+  /** 바깥 상자 — 좌우·상하 여백·면·선·라운드 */
+  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 SChatAttachedFileImpl = /* @__PURE__ */ react.forwardRef(
+  function SChatAttachedFile({ name, onRemove, className, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex max-w-full items-center border-solid",
+          CHAT_ATTACHED_FILE_CONFIG.box,
+          CHAT_ATTACHED_FILE_CONFIG.outerGap,
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__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
+              }
+            )
+          ] }),
+          onRemove != null && /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: "close",
+              size: "xs",
+              ariaLabel: `${name} \uC81C\uAC70`,
+              onClick: onRemove,
+              className: "shrink-0"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+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 = {
@@ -4764,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;
@@ -4777,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" }) : (
         // 원 밖으로 나가는 만큼을 좌우로 나눠 가운데를 맞추고, 아래는 원이 자른다.
@@ -4786,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 }
           }
@@ -4806,12 +4999,14 @@ var SChatMessageImpl = /* @__PURE__ */ react.forwardRef(function SChatMessage({
   variant = "default",
   actions,
   messages,
+  attachments,
   className,
   ...rest
 }, ref) {
   const outgoing = direction === "outgoing";
-  const surface = variant === "template" ? "template" : direction;
+  const surface = direction === "outgoing" && variant === "template" ? "template" : direction;
   const bubbles = messages ?? [];
+  const files = attachments ?? [];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -4819,50 +5014,112 @@ 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
+                }
+              )
+            ]
+          }
+        )
       ]
     }
   );
 });
 var SChatMessage2 = /* @__PURE__ */ withDisplayName(SChatMessageImpl, "SChatMessage");
+var SChatSystemMessageImpl = /* @__PURE__ */ react.forwardRef(
+  function SChatSystemMessage({ message, className, ...rest }, ref) {
+    const notices = message ?? [];
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col items-center gap-sd-8", className), ...rest, children: notices.map((notice, i) => (
+      // 알약은 문구 길이만큼만 차지하고, 길면 줄바꿈해 여러 줄로 선다.
+      // 안내는 HTML 문자열을 허용하되 sanitizeInlineHtml 로 살균 후 innerHTML 렌더 (XSS 방어)
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: cn(
+            // 라운드는 말풍선과 같은 토큰을 쓴다 — 여러 줄이 돼도 모서리가 상자 높이를 따라
+            // 부풀지 않는다. 제 몫인 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 로 줄을 고른다.
+            "break-keep wrap-break-word text-pretty"
+          ),
+          dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(notice) }
+        },
+        i
+      )
+    )) });
+  }
+);
+var SChatSystemMessage2 = /* @__PURE__ */ withDisplayName(SChatSystemMessageImpl, "SChatSystemMessage");
 
 // src/lib/z-index.ts
 var Z_INDEX = {
@@ -5818,7 +6075,11 @@ var SExpansionItem = /* @__PURE__ */ react.forwardRef(
                 depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
                 isExpanded && cn(
                   "text-(--cmp-listExpansionItem-title-text-expanded)",
-                  isSelected && "bg-(--cmp-listExpansionItem-title-bg-expanded)"
+                  // 펼침 배경(파랑)은 bordered 일 때만. 카드처럼 테두리로 경계가 잡힌
+                  // 아이템에서만 배경이 선택 상태를 나타낸다.
+                  // 테두리 없는 리스트에서는 accentStripe 가 그 역할을 하므로,
+                  // 배경까지 깔면 항목 경계가 없는 목록에서 선택 표시가 두 겹이 된다.
+                  isSelected && bordered && "bg-(--cmp-listExpansionItem-title-bg-expanded)"
                 )
               ),
               children: [
@@ -6170,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
+            }
+          )
         ] })
       ]
     }
@@ -7627,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",
@@ -10636,11 +10908,15 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     ...style
   };
   const hideAfterSlide = (hidden) => `visibility 0s linear ${hidden ? `${GNB_FOLD_MS}ms` : "0s"}`;
-  const sideFoldStyle = {
-    opacity: railFolded ? 0 : 1,
-    position: railFolded ? "absolute" : "static",
-    visibility: railFolded ? "hidden" : "visible",
-    transition: `opacity ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(railFolded)}`
+  const sideFoldStyle = railFolded ? {
+    opacity: 0,
+    position: "absolute",
+    visibility: "hidden",
+    transition: `opacity ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(true)}`
+  } : {
+    opacity: 1,
+    visibility: "visible",
+    transition: `opacity ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(false)}`
   };
   const launcherButton = onLauncherClick ? /* @__PURE__ */ jsxRuntime.jsx(
     SGhostButton,
@@ -11630,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
@@ -11640,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(
@@ -11650,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(
@@ -15783,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)"
             },
@@ -23420,6 +23699,8 @@ exports.CALENDAR_BOARD_DAY_COLORS = CALENDAR_BOARD_DAY_COLORS;
 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_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;
@@ -23456,8 +23737,11 @@ exports.SCalendar = SCalendar;
 exports.SCalendarBoard = SCalendarBoard;
 exports.SCallout = SCallout;
 exports.SCard = SCard;
+exports.SChatAttachedFile = SChatAttachedFile2;
+exports.SChatFile = SChatFile2;
 exports.SChatInput = SChatInput2;
 exports.SChatMessage = SChatMessage2;
+exports.SChatSystemMessage = SChatSystemMessage2;
 exports.SCheckbox = SCheckbox;
 exports.SChip = SChip2;
 exports.SChipFilter = SChipFilter;
@@ -23554,11 +23838,14 @@ exports.TIMEPICKER_SIZE_CONFIG = TIMEPICKER_SIZE_CONFIG;
 exports.buttonPreset = buttonPreset;
 exports.cn = cn;
 exports.fieldWidthValue = fieldWidthValue;
+exports.fileExtension = fileExtension;
 exports.findGnbAncestors = findGnbAncestors;
 exports.findGnbRailValue = findGnbRailValue;
+exports.formatFileSize = formatFileSize;
 exports.isColorKey = isColorKey;
 exports.isFieldWidthGrade = isFieldWidthGrade;
 exports.loading = loading;
+exports.normalizeExtension = normalizeExtension;
 exports.resolveColor = resolveColor;
 exports.useSLayout = useSLayout;
 //# sourceMappingURL=index.cjs.map