sellmate-design-system-react 9.0.0-beta.74 → 9.0.0-beta.76

package/dist/index.cjs

@@ -3792,43 +3792,46 @@ var STROKE = 12;
 var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 var COLOR_MAP = {
   primary: { arc: "var(--cmp-progress-color-active)", track: "var(--cmp-progress-color-track)" },
-  // inverse: 어두운 배경용 — arc 흰색, track 은 흰색 40%(회색 링)
-  inverse: { arc: "var(--color-white)", track: "rgba(255,255,255,0.4)" },
-  error: { arc: "var(--color-red-75)", track: "var(--cmp-progress-color-track)" },
-  complete: { arc: "#01BB4B", track: "var(--cmp-progress-color-track)" },
+  // inverse: 어두운 배경용 — arc 는 반전색, track 은 반전색을 inverse-opacity 만큼만(회색 링)
+  inverse: {
+    arc: "var(--cmp-progress-inverse-color)",
+    track: "color-mix(in srgb, var(--cmp-progress-inverse-color) var(--cmp-progress-inverse-opacity), transparent)"
+  },
+  warning: { arc: "var(--cmp-progress-color-warning)", track: "var(--cmp-progress-color-track)" },
+  error: { arc: "var(--cmp-progress-color-error)", track: "var(--cmp-progress-color-track)" },
+  complete: { arc: "var(--cmp-progress-color-success)", track: "var(--cmp-progress-color-track)" },
   // neutral: 콘텐츠가 아직 없는 자리를 채우는 용도 — arc 도 회색이라 진행률보다 "대기"로 읽힌다
-  neutral: { arc: "var(--color-grey-35)", track: "var(--cmp-progress-color-track)" }
+  neutral: { arc: "var(--cmp-progress-color-neutral)", track: "var(--cmp-progress-color-track)" }
 };
-var DEFAULT_SIZE = 80;
 var clamp = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
 var SCircleProgress = /* @__PURE__ */ react.forwardRef(
   function SCircleProgress2({
     value = 0,
     type = "primary",
     indeterminate = false,
-    size = DEFAULT_SIZE,
+    size,
     label,
     innerValue = false,
     className,
     style
   }, ref) {
     const v = clamp(value);
-    const dimension = typeof size === "number" ? `${size}px` : size;
+    const dimension = size === void 0 ? "var(--cmp-progress-circular-size)" : typeof size === "number" ? `${size}px` : size;
     const colors = COLOR_MAP[type];
     const c = VIEWBOX / 2;
-    const percentColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : colors.arc;
+    const percentColor = v === 0 ? "var(--sys-color-fg-tertiary)" : colors.arc;
     const filled = v / 100 * CIRCUMFERENCE;
     const showPercent = !indeterminate;
     const percentNode = /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
         className: cn(
-          "text-center text-[16px] font-bold",
+          "typo-heading-md text-center",
           innerValue ? (
             // leading-[normal]: 26px leading 은 폰트 content(19px) 위아래로 홀수(7px)만큼 남아
             // 3px/4px 로 쪼개지고 글자가 링 중심보다 위로 뜬다. (leading-normal 은 1.5 라 동일 문제)
             "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 leading-[normal]"
-          ) : "leading-[26px]"
+          ) : void 0
         ),
         style: { color: percentColor },
         children: [
@@ -3894,7 +3897,7 @@ var SCircleProgress = /* @__PURE__ */ react.forwardRef(
             showPercent && innerValue && percentNode
           ] }),
           showPercent && !innerValue && percentNode,
-          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-feedback-sm-regular text-center text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
     );
@@ -6895,6 +6898,7 @@ var LOGO_NAMES = [
   "sellmate",
   "wms",
   "chat",
+  "chatbot",
   "plm",
   "account",
   "people",
@@ -6973,6 +6977,62 @@ var LOGOS = {
       }
     ]
   },
+  chatbot: {
+    width: 677,
+    color: "#FF7F22",
+    paths: [
+      {
+        d: "M390.671 0.480769C399.628 0.480769 406.904 7.6325 406.904 16.4692V16.9499H396.889V16.4692C396.889 13.0956 394.116 10.3553 390.671 10.3553H375.492C371.281 10.3553 367.868 13.7156 367.868 17.8542V32.1458C367.868 36.274 371.27 39.6447 375.492 39.6447H390.671C394.116 39.6447 396.889 36.9044 396.889 33.5308V33.0501H406.904V33.5308C406.904 42.3675 399.628 49.5192 390.671 49.5192H374.543C365.334 49.5191 357.865 42.1642 357.865 33.0914V16.9086C357.865 7.83555 365.346 0.480901 374.543 0.480769H390.671Z"
+      },
+      {
+        d: "M424.736 17.3011C426.112 16.6865 427.8 16.4288 429.51 16.4288H441.028C443.607 16.4288 445.823 16.6732 447.666 17.1715L448.03 17.2748L448.033 17.2758C449.945 17.8576 451.503 18.7331 452.68 19.9613L452.896 20.1914C453.953 21.3596 454.71 22.7984 455.19 24.4704C455.699 26.2456 455.942 28.33 455.942 30.6997V49.5192H445.677V29.6133C445.677 27.873 445.325 26.6761 444.687 25.9362L444.684 25.9324C444.09 25.2296 442.926 24.7944 441.028 24.7944H429.51C427.612 24.7944 426.448 25.2296 425.854 25.9324L425.851 25.9362C425.213 26.6761 424.861 27.873 424.861 29.6133V49.5192H414.596V1.44231H424.736V17.3011Z"
+      },
+      {
+        d: "M577.104 0C584.878 8.26358e-05 591.215 6.3316 591.215 14.1207V14.7104C591.215 17.8799 590.164 20.8103 588.393 23.1708C592.146 25.5104 594.648 29.6549 594.648 34.3703V35.8229C594.647 43.1032 588.678 49.0383 581.332 49.0385C580.953 49.2574 565.272 49.1891 553.469 49.0967C549.777 49.0678 546.808 46.0642 546.808 42.3725V14.1207C546.808 9.66706 548.856 5.5708 552.415 2.86677C554.889 0.99021 557.835 3.90295e-05 560.919 0H577.104ZM555.838 39.0991C555.838 40.1612 556.699 41.0222 557.761 41.0222H581.332C584.215 41.022 586.562 38.6931 586.562 35.8314V34.3788C586.562 31.5171 584.215 29.1882 581.332 29.1879H555.838V39.0991ZM561.552 9.5459C558.496 9.54605 556.009 12.0341 556.009 15.0916V21.1538H578.643C581.269 20.7195 583.279 18.4313 583.279 15.6823V15.0916C583.279 12.034 580.792 9.54593 577.736 9.5459H561.552Z",
+        evenOdd: true
+      },
+      {
+        d: "M488.836 11.5385C498.697 11.5385 503.492 15.4781 503.492 23.5793V36.9976C503.492 45.6093 505.135 49.0385 488.836 49.0385H475.897C466.577 49.0385 461.231 44.3883 461.231 36.2868C461.231 27.5861 465.683 23.5352 475.231 23.5352H494.952C494.858 22.4033 494.494 21.6261 493.86 21.1933C492.82 20.4832 491.218 20.3501 488.638 20.3501H465.162V11.5385H488.836ZM476.084 32.3252C472.839 32.3252 469.677 32.6136 469.677 36.1647C469.677 38.9392 471.715 40.2268 476.084 40.2269H488.638C491.01 40.2269 493.278 40.3707 494.255 39.6494C495.129 39.0058 495.046 37.8078 495.046 36.9976V32.3252H476.084Z",
+        evenOdd: true
+      },
+      {
+        d: "M529.384 1.61415V11.0023H540.077V19.9284H529.384V49.0385H520.011L520 48.3859V19.9284H509.308V11.0023H520V0.961538H529.373L529.384 1.61415Z"
+      },
+      {
+        d: "M627.328 12.5C635.417 12.5 642 18.9976 642 27.0048V34.5337C642 42.5408 635.417 49.0385 627.328 49.0385H614.364C606.275 49.0385 599.692 42.5408 599.692 34.5337V27.0048C599.692 18.9976 606.275 12.5 614.364 12.5H627.328ZM614.373 21.7896C611.451 21.7898 609.08 24.1331 609.08 27.0048V34.5337C609.08 37.4065 611.453 39.759 614.373 39.7592H627.338C630.259 39.7592 632.631 37.4066 632.631 34.5337V27.0048C632.631 24.133 630.26 21.7896 627.338 21.7896H614.373Z",
+        evenOdd: true
+      },
+      {
+        d: "M665.923 1.61415V11.0023H676.615V19.9284H665.923V49.0385H656.55L656.538 48.3859V19.9284H645.846V11.0023H656.538V0.961538H665.912L665.923 1.61415Z"
+      }
+    ],
+    vertical: [
+      {
+        d: "M72.6294 70.3846C79.795 70.3846 85.6153 76.106 85.6154 83.1753V83.5599H77.6038V83.1753C77.6037 80.4765 75.3853 78.2843 72.6294 78.2843H60.4862C57.1171 78.2843 54.3872 80.9725 54.3872 84.2834V95.7167C54.3872 99.0192 57.1087 101.716 60.4862 101.716H72.6294C75.3853 101.716 77.6037 99.5235 77.6038 96.8247V96.4401H85.6154V96.8247C85.6153 103.894 79.795 109.615 72.6294 109.615H59.7267C52.3598 109.615 46.3846 103.731 46.3846 96.4731V83.5269C46.3846 76.2684 52.3691 70.3847 59.7267 70.3846H72.6294Z"
+      },
+      {
+        d: "M99.8815 83.8409C100.982 83.3492 102.333 83.143 103.701 83.143H112.915C114.978 83.143 116.751 83.3386 118.225 83.7372L118.517 83.8199L118.519 83.8206C120.049 84.2861 121.295 84.9865 122.237 85.9691L122.409 86.1531C123.255 87.0877 123.861 88.2388 124.244 89.5763C124.652 90.9965 124.846 92.664 124.846 94.5598V109.615H116.634V93.6907C116.634 92.2984 116.353 91.3409 115.842 90.749L115.84 90.7459C115.365 90.1837 114.433 89.8355 112.915 89.8355H103.701C102.182 89.8355 101.251 90.1837 100.775 90.7459L100.773 90.749C100.263 91.3409 99.9814 92.2984 99.9814 93.6907V109.615H91.7693V71.1538H99.8815V83.8409Z"
+      },
+      {
+        d: "M221.775 70C227.995 70.0001 233.064 75.0653 233.064 81.2966V81.7683C233.064 84.3039 232.224 86.6483 230.807 88.5367C233.809 90.4083 235.811 93.7239 235.811 97.4962V98.6584C235.81 104.483 231.035 109.231 225.158 109.231C224.855 109.406 212.31 109.351 202.868 109.277C199.914 109.254 197.538 106.851 197.538 103.898V81.2966C197.539 77.7336 199.177 74.4566 202.025 72.2934C204.004 70.7922 206.361 70 208.828 70H221.775ZM204.763 101.279C204.763 102.129 205.452 102.818 206.301 102.818H225.158C227.465 102.818 229.342 100.954 229.342 98.6651V97.503C229.342 95.2137 227.465 93.3505 225.158 93.3504H204.763V101.279ZM209.334 77.6367C206.889 77.6368 204.9 79.6272 204.9 82.0733V86.9231H223.006C225.108 86.5756 226.716 84.745 226.716 82.5458V82.0733C226.716 79.6272 224.726 77.6367 222.282 77.6367H209.334Z",
+        evenOdd: true
+      },
+      {
+        d: "M151.162 79.2308C159.05 79.2308 162.886 82.3825 162.886 88.8634V99.5981C162.886 106.487 164.201 109.231 151.162 109.231H140.81C133.354 109.231 129.077 105.511 129.077 99.0294C129.077 92.0689 132.639 88.8281 140.277 88.8281H156.054C155.979 87.9226 155.688 87.3009 155.18 86.9546C154.348 86.3866 153.066 86.2801 151.003 86.2801H132.222V79.2308H151.162ZM140.959 95.8601C138.363 95.8601 135.834 96.0909 135.834 98.9318C135.834 101.151 137.465 102.181 140.959 102.181H151.003C152.9 102.181 154.715 102.297 155.497 101.72C156.196 101.205 156.129 100.246 156.129 99.5981V95.8601H140.959Z",
+        evenOdd: true
+      },
+      {
+        d: "M183.6 71.2913V78.8018H192.154V85.9428H183.6V109.231H176.101L176.092 108.709V85.9428H167.538V78.8018H176.092V70.7692H183.591L183.6 71.2913Z"
+      },
+      {
+        d: "M261.955 80C268.426 80 273.692 85.1981 273.692 91.6038V97.627C273.692 104.033 268.426 109.231 261.955 109.231H251.584C245.113 109.231 239.846 104.033 239.846 97.627V91.6038C239.846 85.1981 245.113 80 251.584 80H261.955ZM251.591 87.4316C249.254 87.4318 247.357 89.3065 247.357 91.6038V97.627C247.357 99.9252 249.254 101.807 251.591 101.807H261.963C264.3 101.807 266.198 99.9253 266.198 97.627V91.6038C266.198 89.3064 264.301 87.4317 261.963 87.4316H251.591Z",
+        evenOdd: true
+      },
+      {
+        d: "M292.831 71.2913V78.8018H301.385V85.9428H292.831V109.231H285.332L285.323 108.709V85.9428H276.769V78.8018H285.323V70.7692H292.822L292.831 71.2913Z"
+      }
+    ]
+  },
   plm: {
     width: 511,
     color: "#50BFF0",
@@ -7313,6 +7373,7 @@ var SERVICE_LABEL = {
   sellmate: "Sellmate",
   wms: "Sellmate WMS",
   chat: "Sellmate Chat",
+  chatbot: "Sellmate ChatBot",
   plm: "Sellmate PLM",
   account: "Sellmate Account",
   people: "Sellmate People",
@@ -7573,6 +7634,10 @@ function TreeBranch({ expanded, children }) {
     }
   );
 }
+function isRowControlClick(event) {
+  const control = event.target.closest("[data-tree-control]");
+  return control != null && event.currentTarget.contains(control);
+}
 function STreeAllItem({
   selected,
   indeterminate,
@@ -7595,14 +7660,16 @@ function STreeAllItem({
       "data-tree-row": rowId,
       tabIndex,
       onKeyDown,
-      onClick: onSelect,
+      onClick: (event) => {
+        if (!isRowControlClick(event)) onSelect(event);
+      },
       className: cn(
         "group/tree-item box-border flex w-full cursor-pointer items-center overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)",
         typography.rowHeight,
         border && "border-b border-(--cmp-tree-item-border-default)"
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap)", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: (event) => event.stopPropagation(), className: "flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-tree-control": true, className: "flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -7633,6 +7700,10 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   trailing,
   onToggle,
   onTreeSelect,
+  // treeitem 은 포커스를 받을 수 있어야 한다. tab 순서는 STree 가 한 줄에만 0 을 줘서 정한다(roving).
+  tabIndex = -1,
+  // 줄 단위 키보드 조작(화살표·Enter·Space)은 줄 사이를 오가야 해서 STree 가 쥐고 내려준다
+  onKeyDown,
   className,
   ...rest
 }, ref) {
@@ -7657,6 +7728,11 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
     onTreeSelect?.(node, event);
   };
   const handleRowClick = (event) => {
+    if (isRowControlClick(event)) return;
+    if (selectable && event.target.closest("[data-tree-label]")) {
+      handleSelect(event);
+      return;
+    }
     if (hasChildren) onToggle?.(node, event);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7668,6 +7744,8 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
       "aria-expanded": hasChildren ? expanded : void 0,
       "aria-selected": selectable ? selected : void 0,
       "aria-disabled": node.disabled || void 0,
+      tabIndex,
+      onKeyDown,
       onClick: handleRowClick,
       className: cn(
         "group/tree-item box-border flex w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
@@ -7713,7 +7791,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
           selectable && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              onClick: (event) => event.stopPropagation(),
+              "data-tree-control": true,
               className: "flex shrink-0",
               "aria-hidden": node.disabled ? "true" : void 0,
               children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -7729,11 +7807,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              onClick: (event) => {
-                if (!selectable) return;
-                event.stopPropagation();
-                if (!node.disabled && selectable) onTreeSelect?.(node, event);
-              },
+              "data-tree-label": true,
               className: cn(
                 "block min-w-0 flex-1 truncate py-(--cmp-tree-item-paddingY) text-(--cmp-tree-item-text-default)",
                 labelTypo,
@@ -8737,6 +8811,7 @@ var SContextAlert = /* @__PURE__ */ react.forwardRef(function SContextAlert2({ i
 });
 var FILL_COLOR = {
   primary: "var(--cmp-progress-color-active)",
+  warning: "var(--cmp-progress-color-warning)",
   error: "var(--cmp-progress-color-error)",
   complete: "var(--cmp-progress-color-success)"
 };
@@ -8745,20 +8820,20 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
   function SLinearProgress2({ value = 0, type = "primary", size = "sm", indeterminate = false, label, className, style }, ref) {
     const v = clamp2(value);
     const fill = FILL_COLOR[type];
-    const valueColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : fill;
+    const valueColor = v === 0 ? "var(--sys-color-fg-tertiary)" : fill;
     const valueText = `${Math.round(v)}%`;
     const showValue = !indeterminate && size !== "xs";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
-        className: cn("flex w-full flex-col gap-[12px]", className),
+        className: cn("flex w-full flex-col gap-[var(--cmp-progress-linear-gap)]", className),
         style,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: "relative w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]",
+              className: "relative w-full overflow-hidden rounded-[var(--cmp-progress-linear-radius)] bg-[var(--cmp-progress-color-track)]",
               style: { height: `var(--cmp-progress-linear-height-${size})` },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -8775,7 +8850,7 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
-                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]",
+                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 typo-feedback-sm-bold select-none text-center",
                       style: { color: valueColor },
                       children: valueText
                     }
@@ -8783,7 +8858,7 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "span",
                     {
-                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]",
+                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 typo-feedback-sm-bold select-none text-center text-[color:var(--cmp-progress-bar-text)]",
                       style: { clipPath: `inset(0 ${100 - v}% 0 0)` },
                       children: valueText
                     }
@@ -8792,7 +8867,7 @@ var SLinearProgress = /* @__PURE__ */ react.forwardRef(
               ]
             }
           ),
-          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typo-feedback-sm-regular text-center text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
     );
@@ -11707,6 +11782,7 @@ var LAUNCHER_SERVICES = [
   "sellmate",
   "wms",
   "chat",
+  "chatbot",
   "plm",
   "account",
   "people",
@@ -11718,6 +11794,7 @@ var LAUNCHER_SERVICE_CATALOG = {
   sellmate: { name: "\uC140\uBA54\uC774\uD2B8" },
   wms: { name: "\uC140\uBA54\uC774\uD2B8 WMS" },
   chat: { name: "\uC140\uBA54\uC774\uD2B8 \uCC57" },
+  chatbot: { name: "\uC140\uBA54\uC774\uD2B8 \uCC57\uBD07" },
   plm: { name: "\uC140\uBA54\uC774\uD2B8 PLM" },
   account: {
     name: "\uC140\uBA54\uC774\uD2B8 \uC5B4\uCE74\uC6B4\uD2B8",
@@ -15668,10 +15745,12 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     }
     commitOpen(next);
   };
+  const commitOpenRef = react.useRef(commitOpen);
+  commitOpenRef.current = commitOpen;
   react.useEffect(() => {
     if (!insideModal || portalContainer == null || !pendingOpen) return;
     setPendingOpen(false);
-    commitOpen(true);
+    commitOpenRef.current(true);
   }, [insideModal, pendingOpen, portalContainer]);
   const requestOpenRef = react.useRef(requestOpen);
   requestOpenRef.current = requestOpen;
@@ -15873,6 +15952,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
     return labelByValue.get(selected[0]) ?? valueOptions.get(selected[0])?.label ?? selected[0];
   })();
   const isPlaceholder = selected.length === 0;
+  const showTriggerSpinner = loading2 && !effectiveDisabled;
   const showClear = clearable && !effectiveDisabled && !isPlaceholder;
   const handleClear = () => {
     emit3([]);
@@ -16047,6 +16127,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
             "aria-expanded": open,
             "aria-controls": open ? listboxId : void 0,
             "aria-activedescendant": open && focusedIndex >= 0 ? activeOptionId : void 0,
+            "aria-busy": showTriggerSpinner || void 0,
             onClick: () => requestOpen(!open),
             onKeyDown: handleKeyDown,
             className: "flex h-full w-full cursor-pointer items-center justify-between gap-[8px] bg-transparent px-[12px] text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
@@ -16098,7 +16179,7 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
+                showTriggerSpinner ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0", "data-select-trigger-spinner": true, children: /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: 12 }) }) : /* @__PURE__ */ jsxRuntime.jsx(
                   SIcon,
                   {
                     name: "chevronDown",
@@ -16214,12 +16295,15 @@ var SSelectImpl = /* @__PURE__ */ react.forwardRef(function SSelect({
                     // 첫 페이지를 받는 중에는 "없다"고 단정하지 않는다 — 아래 로딩 표시가 대신 나온다.
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
                   ),
-                  loading2 && /* @__PURE__ */ jsxRuntime.jsx(
+                  loading2 && /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
                     {
                       role: "status",
-                      className: "px-[12px] py-[12px] text-center text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]",
-                      children: "\uBD88\uB7EC\uC624\uB294 \uC911..."
+                      className: "flex items-center justify-center gap-[8px] px-[12px] py-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listBoxItem-content-disabled)]",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(SCircleProgress, { indeterminate: true, type: "neutral", size: 16 }),
+                        "\uBD88\uB7EC\uC624\uB294 \uC911..."
+                      ]
                     }
                   )
                 ]
@@ -16489,7 +16573,7 @@ var colWidthFromDef = (c) => {
   const px = typeof c.width === "number" ? c.width : parseInt(c.width, 10);
   return Number.isFinite(px) ? px : DEFAULT_COLUMN_WIDTH;
 };
-var STable = /* @__PURE__ */ react.forwardRef(function STable2({
+var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   columns = [],
   headerGroups,
   rows = [],
@@ -17599,6 +17683,7 @@ var STable = /* @__PURE__ */ react.forwardRef(function STable2({
     }
   );
 });
+var STable2 = STableImpl;
 var COUNT_NULL = "var(--cmp-table-bar-count-null)";
 var totalColor = (n) => n > 0 ? "var(--cmp-table-bar-count-total)" : COUNT_NULL;
 var selectedColor = (n) => n > 0 ? "var(--color-brilliantblue-75)" : COUNT_NULL;
@@ -18405,11 +18490,13 @@ function SCalendar({
   const base = value || today;
   const [y, setY] = react.useState(() => Number(base.split("-")[0]));
   const [m, setM] = react.useState(() => Number(base.split("-")[1]));
-  react.useEffect(() => {
+  const [syncedValue, setSyncedValue] = react.useState(value);
+  if (syncedValue !== value) {
+    setSyncedValue(value);
     const b = value || today;
     setY(Number(b.split("-")[0]));
     setM(Number(b.split("-")[1]));
-  }, [value]);
+  }
   const cells = react.useMemo(() => monthCells(y, m), [y, m]);
   const eventMap = react.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
@@ -19732,6 +19819,7 @@ var SChipImpl = /* @__PURE__ */ react.forwardRef(function SChip({
           {
             ref: inputRef,
             role: "textbox",
+            tabIndex: 0,
             contentEditable: !disabled,
             suppressContentEditableWarning: true,
             spellCheck: false,
@@ -22156,6 +22244,7 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
     const [mounted2, setMounted] = react.useState(false);
     const timers = react.useRef(/* @__PURE__ */ new Map());
     const elRefs = react.useRef(/* @__PURE__ */ new Map());
+    const resizeObserverRef = react.useRef(null);
     const [heights, setHeights] = react.useState(/* @__PURE__ */ new Map());
     const onShowRef = react.useRef(onShow);
     const onDismissRef = react.useRef(onDismiss);
@@ -22169,6 +22258,8 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
       if (!liveIds.current.has(id)) return;
       liveIds.current.delete(id);
       setToasts((prev) => prev.filter((t) => t.id !== id));
+      const el = elRefs.current.get(id);
+      if (el) resizeObserverRef.current?.unobserve(el);
       elRefs.current.delete(id);
       setHeights((prev) => {
         if (!prev.has(id)) return prev;
@@ -22202,21 +22293,31 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
       });
       return () => cancelAnimationFrame(raf);
     }, [toasts]);
-    react.useLayoutEffect(() => {
-      let changed = false;
-      const next = new Map(heights);
-      toasts.forEach((t) => {
-        const el = elRefs.current.get(t.id);
-        if (el) {
+    react.useEffect(() => {
+      if (typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver((entries4) => {
+        const measured = [];
+        for (const entry of entries4) {
+          const el = entry.target;
+          const id = el.dataset.toastId;
           const h = el.offsetHeight;
-          if (h > 0 && next.get(t.id) !== h) {
-            next.set(t.id, h);
-            changed = true;
-          }
+          if (id != null && h > 0 && liveIds.current.has(id)) measured.push([id, h]);
         }
+        if (measured.length === 0) return;
+        setHeights((prev) => {
+          if (measured.every(([id, h]) => prev.get(id) === h)) return prev;
+          const next = new Map(prev);
+          for (const [id, h] of measured) next.set(id, h);
+          return next;
+        });
       });
-      if (changed) setHeights(next);
-    });
+      resizeObserverRef.current = observer;
+      elRefs.current.forEach((el) => observer.observe(el));
+      return () => {
+        observer.disconnect();
+        resizeObserverRef.current = null;
+      };
+    }, []);
     const scheduleAutoClose = react.useCallback(
       (id, duration) => {
         if (duration > 0)
@@ -22355,8 +22456,11 @@ var SToastContainer = /* @__PURE__ */ react.forwardRef(
           children: toasts.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
+              "data-toast-id": entry.id,
               ref: (el) => {
-                if (el) elRefs.current.set(entry.id, el);
+                if (el == null || elRefs.current.get(entry.id) === el) return;
+                elRefs.current.set(entry.id, el);
+                resizeObserverRef.current?.observe(el);
               },
               style: itemStyle(entry),
               children: /* @__PURE__ */ jsxRuntime.jsx(SToast, { ...entry.options, onClose: () => startDismiss(entry.id) })
@@ -26677,7 +26781,16 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
   const loading2 = effectiveAutocomplete ? loadingSuggestions && suggestions.length === 0 : loadingRecommendedItems && recommendedItems.length === 0;
   const isFieldEmpty = inputValue === "" && values.length > 0 && !focused;
   const isFieldFilled = inputValue !== "";
+  const reopenDropdown = () => {
+    setSuppressSuggestions(false);
+    setSuppressRecommendations(false);
+  };
   const onKeyDown = (e) => {
+    if (e.key === "ArrowDown" && !showDropdown && (inputValue === "" ? suppressRecommendations : suppressSuggestions)) {
+      e.preventDefault();
+      reopenDropdown();
+      return;
+    }
     if (showDropdown && items.length > 0) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -26755,10 +26868,10 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
             "relative box-border flex w-full flex-wrap content-center items-center gap-(--cmp-chipInput-chip-gap)",
             size === "md" ? "min-h-(--cmp-chipInput-md-minHeight) px-(--cmp-chipInput-md-paddingX) py-(--cmp-chipInput-md-paddingY)" : "min-h-(--cmp-chipInput-sm-minHeight) px-(--cmp-chipInput-sm-paddingX) py-(--cmp-chipInput-sm-paddingY)"
           ),
+          role: "presentation",
           onClick: () => {
             if (!disabled) {
-              setSuppressSuggestions(false);
-              setSuppressRecommendations(false);
+              reopenDropdown();
               inputRef.current?.focus();
             }
           },
@@ -26889,6 +27002,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                   metaPlacement === "end" && "ml-auto"
                 ),
                 "data-placement": metaPlacement,
+                role: "presentation",
                 onMouseDown: (e) => e.preventDefault(),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -26945,6 +27059,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                   {
                     id: listboxId,
                     role: "listbox",
+                    tabIndex: -1,
                     className: "s-chip-input__suggestions flex w-full flex-col outline-none",
                     onMouseDown: (e) => e.preventDefault(),
                     children: [
@@ -26958,6 +27073,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                             id: active ? activeOptionId : void 0,
                             role: "option",
                             "aria-selected": selected || active,
+                            tabIndex: -1,
                             className: "rounded-full",
                             style: active ? { outline: "2px solid var(--color-border-accent)", outlineOffset: 1 } : void 0,
                             onMouseDown: (e) => {
@@ -26977,6 +27093,7 @@ var SChipInput = /* @__PURE__ */ react.forwardRef(function SChipInput2({
                             id: active ? activeOptionId : void 0,
                             role: "option",
                             "aria-selected": selected || active,
+                            tabIndex: -1,
                             className: cn(
                               "s-chip-input__suggestion-item flex shrink-0 cursor-pointer items-center gap-sd-8 overflow-hidden text-ellipsis whitespace-nowrap px-sd-12 py-sd-4 text-12 leading-sd-20",
                               selected ? "cursor-default overflow-visible font-bold text-(--cmp-listBoxItem-content-selected)" : active ? "bg-(--cmp-listBoxItem-bg-hover) font-medium text-(--cmp-listBoxItem-content-hover)" : "text-(--cmp-listBoxItem-content-default)"
@@ -28245,7 +28362,7 @@ exports.SStepper = SStepper;
 exports.SSwitch = SSwitch;
 exports.SSystemActionButton = SSystemActionButton;
 exports.STEPPER_SIZES = STEPPER_SIZES;
-exports.STable = STable;
+exports.STable = STable2;
 exports.STableBar = STableBar;
 exports.STabs = STabs;
 exports.STag = STag;