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

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,
@@ -4751,6 +4774,91 @@ 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"
+  }
+};
+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;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex max-w-full items-center rounded-8 border",
+          preset.box,
+          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 })
+          ] }),
+          showRemove && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `${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 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var SChatAttachedFile2 = /* @__PURE__ */ withDisplayName(SChatAttachedFileImpl, "SChatAttachedFile");
 var CHAT_MESSAGE_DIRECTIONS = ["incoming", "outgoing"];
 var CHAT_MESSAGE_VARIANTS = ["default", "template"];
 var BUBBLE_SURFACE = {
@@ -4810,7 +4918,7 @@ var SChatMessageImpl = /* @__PURE__ */ react.forwardRef(function SChatMessage({
   ...rest
 }, ref) {
   const outgoing = direction === "outgoing";
-  const surface = variant === "template" ? "template" : direction;
+  const surface = direction === "outgoing" && variant === "template" ? "template" : direction;
   const bubbles = messages ?? [];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -4863,6 +4971,37 @@ var SChatMessageImpl = /* @__PURE__ */ react.forwardRef(function SChatMessage({
   );
 });
 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(
+            // 라운드 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",
+            // 한글은 기본 규칙으로 두면 어절 한가운데서도 줄이 바뀐다 — 띄어쓰기에서만 끊고,
+            // 끊을 자리가 없는 긴 토큰(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 +5957,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: [
@@ -10636,11 +10779,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,
@@ -23420,6 +23567,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_ATTACHED_FILE_VARIANTS = CHAT_ATTACHED_FILE_VARIANTS;
 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 +23605,10 @@ exports.SCalendar = SCalendar;
 exports.SCalendarBoard = SCalendarBoard;
 exports.SCallout = SCallout;
 exports.SCard = SCard;
+exports.SChatAttachedFile = SChatAttachedFile2;
 exports.SChatInput = SChatInput2;
 exports.SChatMessage = SChatMessage2;
+exports.SChatSystemMessage = SChatSystemMessage2;
 exports.SCheckbox = SCheckbox;
 exports.SChip = SChip2;
 exports.SChipFilter = SChipFilter;
@@ -23554,11 +23705,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